In MVC 3, how do I refresh kendo grid in a partial view after I select a row in another partial view Kendo Grid?

Question

I have a view with 3 partial views. The first partial view has a Kendo grid and when you select a row in the grid it populates and displays the 2nd partial view which has another kendo grid. It also populates and displays the 3rd partial view with another grid.

If I select a row in the 2nd kendo grid, i want it to insert data into the database table that the 3rd grid is using and I want it to refresh that 3rd grid with the new data.

I also have a custom button(retire) in the 3rd grid on each row that will also need to update that same grid by removing the item that was retired.

Can anyone help me set this up? Should I be using 3 partial views?

Answer 1

I guess you are using partial views to load each grid and it's data, that will work but you will have to refresh the entire page when a row is selected on the second grid in order to fill the third grid.

However Kendo Grid to a remote data source works well for this, you can then ignore loading the data into the grids within your partial views and use a bit of jQuery to ask the third grid to update on change event.

I find it much faster to fill grids with data via Ajax then when the page loads - but I have lots of data!

I have a grid updating for a person search which updates every time the search textbox changes

Grid defined as:-

    $("#PersonSearch").kendoGrid({
        columns: [
                    { title: "Organisation", field: "cn", encoded: true },
                    { title: "First name", field: "fn", encoded: true },
                    { title: "Last name", field: "ln", encoded: true },
                    { title: "Type", field: "pt", encoded: true },
                    { title: "Date of birth", field: "db", encoded: true, format: "{0:dd/MM/yy}" },
                    { title: "NHS number", field: "nn", encoded: true }
        ],
        //sortable: { mode: "multiple" },
        change: function () {
            var selected = this.select()
            data = this.dataSource.getByUid(selected.data("uid"));
            if (data.url != "") {
                .... do anything on a row being selected
            }
            else {
                this.clearSelection();
            }
        },
        filterable: false,
        scrollable: { virtual: true },
        sortable: true,
        selectable: true,
        groupable: false,
        height: 480,
        dataSource: {
            transport: { read: { url: "../Person/PeopleRead/", type: "POST" } },
            pageSize: 100,
            serverPaging: true,
            serverSorting: true,
            sort: [
                { field: "cn", dir: "asc" },
                { field: "ln", dir: "asc" },
                { field: "fn", dir: "asc" },
            ],
            serverFiltering: true,
            serverGrouping: true,
            serverAggregates: true,
            type: "aspnetmvc-ajax",
            filter: [],
            schema: {
                data: "Data", total: "Total", errors: "Errors",
                model: {
                    id: "cID",
                    fields: {
                        db: { type: "date", defaultValue: null }
                    }
                }
            }
        }
    });

I trigger the Grid to fill with more data when the search box is changed :-

$('#GenericSearchString').keyup(function () {
    // get a reference to the grid widget
    var grid = $("#PersonSearch").data("kendoGrid");

    // refreshes the grid
    grid.refresh();
    grid.dataSource.transport.options.read.url = "../Person/PeopleRead/" + $(this).val();
    grid.dataSource.fetch();
});

On the server side in the Person controller I have a method PeopleRead :-

    [HttpPost]
    public ActionResult PeopleRead(String id, [DataSourceRequest]DataSourceRequest request)
    {
        WebCacheController Cache = ViewBag.Cache;
        if (id == null) id = "";
        string urlBase = Url.Content("~/");

        var PeopleList = from c in db.Connections
                         where c.Person.Firstname.Contains(id) || c.Person.LastName.Contains(id) 
                         select new
                         {
                             oID = c.Organisation.OrganisationID,
                             connID = c.ConnectionID,
                             cn = c.Organisation.Name,
                             fn = c.Person.Firstname,
                             pt = 
                               (
                                   c.Type == ModelEnums.ConnectionTypes.Customer ? "Customer" :
                                   c.Type == ModelEnums.ConnectionTypes.Owner ? "Owner" :
                                   c.Type == ModelEnums.ConnectionTypes.Service_User ? "Service user" :
                                   c.Type == ModelEnums.ConnectionTypes.Worker ? "Worker" :
                                   c.Type == ModelEnums.ConnectionTypes.Profile ? "Profile" : "Unknown"
                               ),
                             url =
                               (
                                   c.Type == ModelEnums.ConnectionTypes.Customer ? "" :
                                   c.Type == ModelEnums.ConnectionTypes.Owner ? "" :
                                   c.Type == ModelEnums.ConnectionTypes.Service_User ? urlBase + "ServiceUser/Details/" :
                                   c.Type == ModelEnums.ConnectionTypes.Worker ? urlBase + "Worker/Details/" :
                                   c.Type == ModelEnums.ConnectionTypes.Profile ? "" : ""
                               ),
                             ln = c.Person.LastName,
                             nn = c.Person.NHSNumber,
                             db = c.Person.DateOfBirth
                         };


        DataSourceResult result = PeopleList.ToDataSourceResult(request);
        return Json(result);
    }

Sorry the example is a bit off topic, but I though better to have working code as an example.

In your case the change: of the second grid would change the grid3.dataSource.transport.options.read.url and then do a grid3.dataSource.fetch();

I have to include the reference kendo.mvc along with many more on the mvc project as well as a link to kendo.aspnetmvc.min.js in the cshtml.