Is there a way to dynamically change data source of JQwidget grid column as well as column names

Question

I am trying to change a few of the columns based on a user selection, by dynamically removing some of the columns in the array. However upon repopulating the grid it seems that the existing columns are already there and I therefore receive an error when retrieving the data I am getting an error that the column (ExternalClientId1) does not exist. How can I implement this?

 loadgrid(fromDate,toDate, responseType, xRequests)

 //Instantiate Grid
    var loadGrid = function (fromDate = null, toDate = null,responseType = null, requestType = null) {

    $.ajax({
        url: "/Home/SearchResults",
        dataType: 'json',
        beforeSend: function () {
           $("jqxgrid").html('');
       },
        error: function (json, textStatus, errorThrown) {
            alert(' Error :' + errorThrown);
        },
        data: {
            fromdate: fromDate,
            toDate: toDate,
            responseType: responseType,
            requestType: requestType

        },
        success: function (response) {
            // initailize grid

            var gridData = response;
            window.searchData = response.SearchResults;

            var gridSource =
            {
                localdata: gridData,
                datatype: 'json'
            };
            var gridDataAdapter = new $.jqx.dataAdapter(gridSource);

            var externalClients = [

                { text: 'ID', datafield: 'ID', width: 100 },
                { text: 'Request Type', datafield: 'RequestType', width: 100 },
                { text: 'First Name', datafield: 'FirstName', width: 200},
                { text: 'Last Name', datafield: 'LastName', width: 200 },
                { text: 'ExternalClientId1', datafield: 'ExternalClientId1', width: 250 },
                 { text: 'IntakeStatus', datafield: 'IntakeStatus', width: 100 },
                { text: 'RequestDate', datafield: 'RequestDate', width: 250 },
                { text: 'Message', datafield: 'Message', width: 150 }

            ];
            var litigationcol = { text: 'Litigation', datafield: 'Litigation', width: 150 };
            var sublitcol = { text: 'Litigation', datafield: 'SubLitigation', width: 150 };
            if (requestType == "xRequests") {
                externalClients.splice(4, 1);

                externalClients.splice(4, 0, litigationcol);
                externalClients.splice(5, 0, sublitcol);
            }

            $("#jqxgrid").jqxGrid(
                {

                    width: 1150,
                    source: gridDataAdapter,
                    pageable: true,
                    autoheight: true,
                    columnsresize: true,
                    pagesize: 20,
                    selectionmode: 'singlecell',
                    columns: externalClients
                });

}      
            }

Answer 1

Maybe you can destroy the table [ $("#jqxgrid").jqxGrid('destroy'); ] and rebuild it again with the new columns info... You can get the columns info with ajax or something like.