CODEWITHSUNDEEP
jsonasp.net-mvcslickgrid
John M
John M

Reputation: 14668

Refresh SlickGrid via call to JsonResult after initial load

I have setup a MVC webpage with a SlickGrid and can populate it upon initial page load. My javascript for loading:

    $.getJSON("../Home/GetSlickGridData",
        function(data) {
            dataView.beginUpdate();
            //dataView.setItems(data);     
            dataView.setItems(data, "OrderID");
            dataView.setFilterArgs({
                searchString: searchString,
                searchShipmentID: searchShipmentID,
                searchDestination: searchDestination,
                searchCarrier: searchCarrier
            });
            dataView.setFilter(myFilter);
            dataView.endUpdate();
        });

This calls a controller action:

public JsonResult GetSlickGridData()
        {

The issue now is that I'm unsure of how to refresh the grid when a search criteria is added to the cshtml page's search form:

@using (Html.BeginForm("GetSlickGridData", "Home"))
{
    <table>
        <tr>
            <td>Shipper</td>
            <td><input type="text" name="myText" id="txtShipper" /></td>
            <td><input type="submit" value="Filter" onclick="GetData"></td>
        </tr>
    </table>
}

Can I use the loading for initial page load and for a search?

UPDATE:

Based on @Steve T's answer:

The search:

> <input type="text" name="myText" id="txtShipper" />
>     <input type="button" value="Filter" onclick="GetData()">

The jquery:

 function GetData() {

        Slick.GlobalEditorLock.cancelCurrentEdit();
        grid.invalidateAllRows();


        var searchText = $("#txtShipper").val();
        $.getJSON("../Home/GetSlickGridData?search=" + searchText,
            function (data) {

The controller:

  public JsonResult GetSlickGridData(string search)

And the map route (to ensure the controller works):

 routes.MapRoute("search", "Home/GetSlickGridData/{search}",
                new {Controller = "Home", Action = "GetSlickGridData"});

Upvotes: 0

Views: 180

Answers (1)

Steve T
Steve T

Reputation: 572

Instead of submitting the form and reloading the whole page you can change the filter button to type="button" and then use the GetData() function (not sure if you have this already implemented) to repeat the initial $.getJSON call with the value of text field txtShipper as a parameter

Upvotes: 2

Related Questions