Html.Kendo().Grid, DataBinding event

2 posts, 0 answers
  1. Prathibha
    Prathibha avatar
    1 posts
    Member since:
    Jun 2011

    Posted 19 Mar Link to this post

    Hi Telerik Team,

    I am having telerik MVC kendo grid(server side grid), In the grid I have defined databinding event. In databinding I want to call web api and alter grid's underline items based on that, and want grid to take updated items and display in grid. mainly want grid to wait for ajax complete before invoking it's databound event. plz share how to achieve that.

    Please find the code snippet below,

     @(Html.Kendo().Grid<Model>()
            .Name("grdResults")
        .Columns(columns =>
        {
            columns.Bound(e => e.Title).Title("Title").Width(300);
            columns.Bound(e => e.resources).Encoded(false).Width(100).Title("Resource").Sortable(false);       
        })
               
                               .Scrollable()
                               .DataSource(dataSource => dataSource
                               .Custom()
                               .Schema(sch =>
                               {
                                   sch.Model(m =>
                                   {
                                       m.Id("field1");
                                       m.Field(f => f.field1).Editable(false);
                                   });
                               })
                               .Type("odata-v4")
                               .Transport(transport =>
                               {
                                   transport.Read(read => read.Url(odataurl)
                                       .DataType("json")
                                       );

                               })
                               .PageSize(10)
                               .ServerPaging(true)
                               .ServerSorting(true)
                //.ServerFiltering(true)

        )
                .Sortable()
                .Pageable()           
                .Events(e => e.DataBinding("onDataBinding"))        
    )

    <script>

    function onDataBinding(arg) {

    //Making ajax call here and and changing the arg.items value for a particular column,but value is not getting updated in the grid 

    Note: I am able to update the grid column value when I make async: false in ajax call

    }

    </script>

     

    Thanks,

    Prathibha

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    317 posts

    Posted 22 Mar Link to this post

    Hello Prathibha,

    The required functionality is easily achievable with JavaScript custom transport by nesting the ajax calls and calling success in the handler of the Kendo UI Grid  of the second request:

    http://dojo.telerik.com/IKAHe

    Since you are using the UI for MVC wrappers,  with some creativity you might be able to achieve the same by preventing the Kendo UI Grid from dataBinding until you have received the response, however, note that the required functionality is not supported out of the box.

    Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualisation (charts) and form elements.
Back to Top