load data on button click

[forwheeler]

I want to load data in the grid on button click.
I am using MVC so on button click I get the data from the controller. I need to also refresh the grid so I can load the data. When I click the button which does a GET to the controller, it just sends the JSON to the browser and doesn't load in the grid.
I tried $("#jsongrid").pqGrid('refresh') but it didn't load the data. I also tried refreshDataAndView.

I can probably use jQuery's load method but I must be missing something simple.

[paramvir]

Please refer this topic in the tutorial

http://paramquery.com/pro/tutorial#topic-refreshView

refreshDataAndView requests the data from server on its own and  loads the data in the grid when dataModel.location is 'remote'

However when dataModel.location is local, you have to assign data to grid manually even if you fetch the data from remote location.

Assuming dataModel.location to be local in your case and format of response.data to be array of objects :

Code: [Select]

  $.ajax( url, success: function ( response ){
    $grid.pqGrid( 'option', 'dataModel.data', response.data );     
    $grid.pqGrid( 'refreshDataAndView' );     
  }


[paramvir]

Please also read this topic in tutorial:

http://paramquery.com/pro/tutorial#topic-loaddata

[forwheeler]

This is the datamodel for the main grid and shows I am using remote location.

Code: [Select]

  dataModel: {
                dataType: "JSON",
                location: "remote",
                recIndx: "ID",
                url: "/PCA/PCAData",
                getData: function (response) {
                    return { data: response };
                }
            },
I want the grid to not load data when the page loads. After I enter a parameter in an input, I want to click a button and have the parameter sent to the server and get the JSON back and load the grid with data.

I assume I need to remove the data model from the grid declaration and call the data model in the button click like below.

Code: [Select]

       
$('#search').click(function()
        {
            $( "#jsongrid" ).pqGrid("option","dataModel.getData",function( response, textStatus, jqXHR ){});
        });


[paramvir]

dataModel.location could be kept local intially to prevent remote call on page load

Code: [Select]

dataModel: {
                dataType: "JSON",
                location: "local",
                data: [],
                recIndx: "ID",
                url: "/PCA/PCAData",
                getData: function (response) {
                    return { data: response };
                }
            },


Code for button

Code: [Select]

$('#search').click(function()
{
      $( "#jsongrid" ).pqGrid("option","dataModel.location","remote");
      $( "#jsongrid" ).pqGrid("option","dataModel.postData", { param: $inp.val() } );
      $( "#jsongrid" ).pqGrid( "refreshDataAndView" );
});



[forwheeler]

That works great. Thanks!