Search code examples
jqgridfree-jqgrid

free jqGrid, column chooser popup UI not appearing correctly

I'm using free jqgrid and implemented column chooser to show hide columns, the functionality is working as expected but the popup that shows up doesn't have a proper rendering of UI.

I tried searching a lot and went through the documentation of free jqgrid but I don't know what am I doing wrong.

I was able to reproduce the error in demo in below url.

If any one has faced similar issue please help. Note I am using bootstrap theme.

$("#sampleGrid").navButtonAdd('#sampleGridPager',{
        caption: "",
        title: "Choose Columns",
        buttonicon: "fa fa-table",
        onClickButton: function () {
           $("#sampleGrid").jqGrid('columnChooser');
        }
});

https://jsfiddle.net/1vk5ku2y/2/

Solution

  • One needs to add jQuery UI CSS to the demo because it's required for columnChooser. You should add some jQuery UI theme, which corresponds Bootsrap CSS theme. For example

    https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css

    After that one get already much better results https://jsfiddle.net/OlegKi/1vk5ku2y/4/. You need to add minor CSS fixes to have the final solution.