Kendo UI MVC Grid Selection Updates separate control

Question

Forgive me for my silly questions as I am both new to MVC as well as Kendo UI, and am still trying to figure out what is possible.

I have a page layout where I have a grid on the top half of the page and a Tabbed Panel on the bottom. When a user selects one of the records on the grid I want to be able to call the controller to make a database call and populate the tabbed panel with the details.

Right now I am able to get the ID of the selected row... but I am wondering how I can go about calling the controller from JavaScript and cause just the tabbed panel to update. I've read about $.ajax a little bit, is it possible to make a call to the controller and have it pass back a partial view (the tabbed panel) populated with the detail information I need?

I've experimented with having the Panel load within a custom details template within the grid, but that idea was thrown out by the decision makers shrug. Is this possible?

Answer 1

This is most certainly possible. You will need to get more familiar with jQuery though. It looks like you have a handle on the Kendo Grid events, so I won't address that here. Here is the trick (one of)...

In this case a Kendo Grid is being used as a fancy multi-select that each time a new State (ie TX, NY) is selected an event fires in the grid that calls this function. This is more than you asked for so I will explain. It is doing this:

1. Add up the list of multi-selected items in the Grid and assign this list to a hidden Form field.
2. Use Ajax post to Update the database with this and other information in the Form (the whole form is passed). 2b. Note the 'async: false', this lets the database update before the the next Ajax call.
3. Another Ajax post to Query the database again using all the Form fields.

Both Ajax calls access MVC Controller methods that communicate with a database and return partial views to update TWO seperate parts of the page at once. These could be anything, in this case they are both additional Kendo Grids, but a tabbed panel would be just as easy.

function updateParts() {
    var grid = $('#States').data('kendoGrid');
    var rows = grid.select();
    $('#StatesQuery').val('');
    rows.each(
        function () {
            var record = grid.dataItem($(this));
            $('#StatesQuery').val($('#StatesQuery').val() + record.StateCode + ",");
        }
    );
    $.ajax({
        url: '@Url.Action("UpdateSomething", "Controller")',
        type: 'post',
        data: $('form#ajaxSearchForm').serialize(),
        async: false,
        success: function (result) {
            $('#SomethingElseDiv').html(result);
        }
    });
    $.ajax({
        url: '@Url.Action("QuerySomething", "Controller")',
        type: 'post',
        data: $('form#ajaxSearchForm').serialize(),
        success: function (result) {
            $('#SearchResultsDiv').html(result);
        }
    });
}

Controller Method

[HttpPost]
public ActionResult QuerySomthing(FormCollection formCollection)
{
    var query = new Status(); // Complext Data Model for Search
    query.States = formCollection["StatesQuery"].Split(',');
    ... etc
    var model = new SearchViewModel(); // ViewModel for Partial
    model.StatusSummaries = _submissionsDataProvider.DoQuery(query);
    return View("SearchResults", model);
}

I hope you enjoy Kendo and MVC as much as me!