reload grid with json data(dynamic column)

[toBeBetterMember]

Hi

I build a grid with dynamic columns by json data, code like this

function InitGrid() {
            var url = 'GetOrderInfos.ashx';
            $.getJSON(
                url,
                {
                    billDateFrom: $('#billDateFrom').jqxDateTimeInput('getText'),
                    billDateTo: $('#billDateTo').jqxDateTimeInput('getText'),
                    planDateFrom: $('#planDateFrom').jqxDateTimeInput('getText'),
                    planDateTo: $('#planDateTo').jqxDateTimeInput('getText')
                },
                function myfunction(data) {
                    data[0].columns[0].cellsrenderer = cellsrenderer;
                    for (var i = 0; i < data[0].columns.length; i++) {
                        if (data[0].columns[i].cellbeginedit != undefined) {
                            data[0].columns[i].cellbeginedit = beginedit;
                        }
                    }
                    var columns = data[0].columns;
                    var rows = data[1].rows;
                    var columngroups = data[2].columngroups;
                    // prepare the data
                    var source =
                {
                    datatype: 'json',
                    id: 'id',
                    localdata: rows
                };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    $('#jqxgrid').jqxGrid({
                        source: dataAdapter,
                        width: '96%',
                        height: 450,
                        autorowheight: false,
                        altrows: true,
                        editable: true,
                        pageable: true,
                        sortable: true,
                        //                    filterable: true,
                        pagesize: 15,
                        columnsresize: true,
                        columns: columns,
                        columngroups: columngroups
                    });
                });
        }

it works fine, my problem is when i click a button, I need to rebuild the grid(columns changes, may more columns or less)
my code is

$('#search').on('click', function () {
                InitGrid();
            });

it works fine when columns increased,but when columns reduced , will cause an error.

[toBeBetterMember]

I solve this problem by this way :

$('#search').on('click', function () {
                $('#jqxgrid').jqxGrid('destroy');
                InitGrid();
            });

and Create jqxgrid Div in InitGrid() function

function InitGrid() {
            $('#someDiv').after('<div id="jqxgrid" style="margin-top: 5px"></div>');
             .....initGrid.....
}

[Author]

Posts