How to bind datatable to jqGrid on button click MVC

Question

I would like to show the empty grid with column name on page load and when user click on the search button, it will take the data from the database table in the form of data table and need to bind into the jqGrid.

I was looking into this and this solution, but they have 2 call at the same time one is calling the column with data other is calling only data.

I would like the solution which bind the column on page load and data on button click.

 $(document).ready(function () {
     //Load Empty jqgrid dynamically using datatable row column...
       $(gridData).jqGrid({           
        url: "../Generic/GetRowColumns",
        colNames: colNames, // this would bind dynamically
        colModel: colModel  // this would bind dynamically         

    });

 $("#btnSubmit").click(function () {
        var data = $("#dataForm").serialize();
        //Bind jqGrid by datatable on ajax call
        $(gridData).jqGrid({           
        url: "../Generic/GetRowColumns",
        data: data,
        colNames: colNames, // this would bind dynamically
        colModel: colModel  // this would bind dynamically         

       });
     });
  });

So on the first call it should bind empty grid with columns returns from the datatable and the other call (button click) in the same grid, grid will bind with data.

Need some help. Thanks in Advance.

Are you using jQuery DataTable (e.g. `$('#table').DataTable()`) or .NET's `System.Data.DataTable`? Also your current problem description/details still unclear, can you provide some insights about what you want to achieve? — Tetsuya Yamamoto, Sep 05 '18 at 06:02

score 0 · Answer 1 · answered Sep 05 '18 at 16:36

As far as I understand the requirement it is needed first to make a ajax call to get the colNames and colModel arrays, construct the grid with datatype local and then on button click to get the data you want, put it with setGridParam and reload it to take effect:

$(document).ready(function () {
    ajax({
        url :  "../Generic/GetRowColumns",
        success : function(data,....) {
            var colNames =  response_from_ajax
            var colModel = response_from_ajax
            //Load Empty jqgrid dynamically using datatable row column...
            $(gridData).jqGrid({           
                colNames: colNames, // this would bind dynamically
                colModel: colModel,  // this would bind dynamically         
                datatype : "local"
            });
        }
     });

    $("#btnSubmit").click(function () {
        var data = $("#dataForm").serialize();
        //Bind jqGrid by datatable on ajax call
        $(gridData).jqGrid('setGridParam', { data : data}).trigger('reloadGrid');                             
    });
});

How to bind datatable to jqGrid on button click MVC

1 Answers1