ViewModel with Kendo MVC widgets

[akj]

On a ASP.NET MVC UI, I need to expose multiple input controls (list, multiselect, date controls) on the top and a grid in the bottom.
The grid will be filtered based upon the values selected (with list selection resulting in OR condition, multi-select selections resulting in AND condition and so on) and with their own column filters
I am currently writing a Big ViewModel which will have a collection of the list, multi-select items and then a collection to support grid rows which change according to the filters above.
On a submit button, all the filters (from the list/multiselect controls + the grid column filters) should all filter the grid rows at once.
All my UI widgets are Kendo UI widgets. I am using the MVC wrapper.
Question is : Where do I store the selections the user makes ? I don't want to use any comma-separated logic. I want the VM to be filled with actual selections on post so that I apply the filters on the grid and return the JSONresult?

I am just not able to get the ViewModel and view synced properly.

[Vladimir Iliev]

Hi Achintya,


There are several ways to do that and which one you would choose depends entirely on you and the exact setup that you have. For example if you need update the Grid records on each change of the filtering controls without reloading the page I would suggest to use the same approach as demonstrated in this example: 

• Filtering Grid on change of DropDownList (source code for MVC can be found in this demo)

Kind Regards,
Vladimir Iliev
Telerik

[akj]

I tried to create this sample app with Airport Airline grid (image attached)
Initially I was trying to send the selected items using only the Grid Read method passing the javascript method in its Data object.
But, found out that it uses form values and not json, and I really wanted JSON as the arrays appeared as SelectedAirlines[] which can't match my model in the post action signature.

So, I reverted to using jQuery.ajax call for applying filters and using the current setup it works perfectly as I can specify json as my content-type, but now I am loosing the datasourcerequest objects when posting to GetAirportAirlines method
In my real MVC app, I have to utilize the page, sort, filter options and use my own repository for paging.

Please help, I really like Kendo, but there are appearing many obstacles on the way to elect it as the framework we want to use.
My problems seem very common, and I was very confident that it must be supported my Kendo

[Vladimir Iliev]

Hi Achintya,


Basically sending the objects through the Data function of the Grid currently fails as most probably the objects are not correctly formatted in order to be understand by the MVC DefaultModelBinder. Please check the example of correct formatting the data before sending:

.Read(read => read.Action("GetAirportAirlines", "Home").Data("additionalData"))

function additionalData(e) {
    var airports = $('#kAirport').data("kendoMultiSelect").value();
    var airlines = $('#kAirline').data("kendoMultiSelect").value();

    var formatedAirports = {};
    for (var i = 0; i < airports.length; i++) {
        formatedAirports[i] = airports[i];
    }

    var formatedAirlines = {};
    for (var i = 0; i < airlines.length; i++) {
        formatedAirlines[i] = airlines[i];
    }

    var newObj = { SelectedAirports: formatedAirports, SelectedAirlines: formatedAirlines };

    return newObj;
}

With the above solution both the request object and the "AirlineAirportViewModel" objects will be bound correctly on the server side. Also for convenience I created small runable example using the above solution and attached it to the current thread. 

Regards,
Vladimir Iliev
Telerik