How to use Kendo UI datasource and widgets with a complex ViewModel in MVC

3 posts, 0 answers
  1. Gary
    Gary avatar
    2 posts
    Member since:
    Mar 2013

    Posted 13 Mar 2013 Link to this post

    I've got a complex ViewModel:

    public ExampleViewModel {
    public string name {get;set;}
    public string description {get;set;}
    public List<ExampleViewModelSubItem> Items {get;set;}
    // multiple other collections and properties.

    So I have no problems getting a KendoUI DataSource reading from an MVC route

    public JsonObject GetExample() {
    return Json(getExample(), AllowJSONGet);

    What I'm having issues with is how I should go about structuring the data source / pages.

    If I had a simple ViewModel it would be easy, load the collection into a grid... Done.

    But when I'm faced with a complex ViewModel (Object Graph) it's not quite so simple.

    What I had in mind was to create a datasource that queries for the whole object and posts to the whole object.

    And then widgets (grids for the lists) bound to each property of the Model.

    IE the datasource for a grid might be: model.ObjectList or model.ObjectList.2ndObjectList

    In regular without the client side components it would be fairly simple.

    Using Kendo controls makes it seemingly more complex.

    My current plan of attack is to load the entire object graph as JSON into the page, handle client side, and hopefully post it back to the server.

    Any suggestions for doing so would be great.

    It looks like Kendo really wants to have an write method on the datasource that wants to pump the object back to the server immediatly, which is a problem when it's a grid and we don't want to submit the object until the user is done with their changes.

    Thanks much.

  2. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 15 Mar 2013 Link to this post

    Hello Gary,

    This is not supported. Out of the box the Grid provides binding/editing to a flat model and when creating hierarchy each level of the hierarchy levels should explicitly declare its own  dataSource and transport options. Each level of the hierarchy will perform its own request and fill its table with data.

    However there is a workaround which you can use only to display (you wont be able to edit the hierarchy) structure of several level with your Grid.

    To demonstrate how to achieve this I created a sample project.

    You can use it as a base point and extend it with more and complex logic.

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Gary
    Gary avatar
    2 posts
    Member since:
    Mar 2013

    Posted 15 Mar 2013 Link to this post

    That's unfortunate, I had already found a way to do this with view only.

    I think Kendo should consider a modification to let the user handle their own data saving.

    IE reflect the changes in the model that's been used to populate and then hand the model back to the user on request.

    As a result of this limitation we've gone with another open source client sided framework for our project.

    Thank you for responding.
Back to Top