Accessing grid object via MVVM

2 posts, 0 answers
  1. Igor
    Igor avatar
    8 posts
    Member since:
    Aug 2012

    Posted 04 Nov 2015 Link to this post

    Hello, 

    Is there a better way to get the grid object? Is there MVVM best practice to this approach?

     

    HTML:

    <div id="model">
        <input type="button" value="ClickMe" data-bind="events:{click: onClick}">
        <div id="grid" data-role="grid" data-bind="source: gridDS" data-columns="[
        { field: 'Creatives_id', title:'ID'},
        { field: 'Email', title: 'User' },
        { field: 'State' }]"></div>
    </div>

     

    JavaScript

    var model = kendo.observable({
        onClick: function(e) {
            var grid = $("#grid").data("kendoGrid");
     
            grid.select().each(function(e) {
                var dataItem = grid.dataItem(this);
                dataItem.State = 1;
                dataItem.dirty = true;
            });
     
            grid.refresh();
        },
        gridDS: new kendo.data.DataSource({...})
    });
     
    kendo.bind($("#model"), model);

     

    Thank you!

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 06 Nov 2015 Link to this post

    Hello Igor,

    In general, the used approach is viable, because there are no connections between the clicked button and the grid. If you would like to avoid retrieving the object using jQuery on click, then you can create an object in the app namespace that can hold the instances of the created widgets. Something like this:
    //kendo.bind is called here
     
    window.[your app namespace].widgets["grid1"] = $("#grid").data("kendoGrid");

    Of course, this is just a spyke and the concrete implementation is up to your personal preferences.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top