Grid bind to "read" event?

13 posts, 1 answers
  1. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 01 Feb 2017 Link to this post

    Hello,

    In my JavaScript file I bind to serveral events of the grid like:

    var grid = $("#grdStandort").data("kendoGrid");
    grid.bind("change", function () {
        loadTabstripData(tabstrip.select().text());
    });
    tabstrip.bind("show", function () {
        loadTabstripData(tabstrip.select().text());
    });

     

    this is working fine but now I want to bind to the "read" Event to set my parameters instead of using the .Data() property of the mvc grid (I don't want to set javascript in my grid Definition only want to bind/hook into Event from my external javscript file)

    is there a event which I can bind to to set the parameters for the datasource?

     

    robert

     

     

  2.
  3. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 03 Feb 2017 Link to this post

    Hi Robert,

    As documented in the following help topic, passing additional data is possible only by setting the event handler for the Data method:  

    Regards,
    Konstantin Dikov
    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 visualization (charts) and form elements.
  5. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 03 Feb 2017 in reply to Konstantin Dikov Link to this post

    Ohhh, that's sounds bad to me - as a suggestion I would prefer a event which we can hook/bind to without specify the function in the grid definition.
    We would like to hold our grid definition (MVC Razor) clean and want to bind/hook into event only in the seperate javascript (*.js) files...
    robert
  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 07 Feb 2017 Link to this post

    Hello Robert,

    You can try the following:
    grid.dataSource.transport.options.read.data = dataFunctionName;

    The same could be applied for the update/destroy and create.

    Hope this helps.


    Regards,
    Konstantin Dikov
    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 visualization (charts) and form elements.
  9. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 07 Feb 2017 in reply to Konstantin Dikov Link to this post

    Hi,

    Ok, but to which Event should I bind to?

    grid.bind("?", function () {
        grid.dataSource.transport.options.read.data = dataFunctionName;
    });
  11. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 08 Feb 2017 Link to this post

    Hello Robert,

    You do not have to bind to any event, because the "dataFunctionName" from the example will be called before the Read action and you can pass the additional data within the function:
    grid.dataSource.transport.options.read.data = dataFunctionName;
     
    function dataFunctionName(e) {
      //your code
    }


    Regards,
    Konstantin Dikov
    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 visualization (charts) and form elements.
  13. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 09 Feb 2017 in reply to Konstantin Dikov Link to this post

    Ok, but if i use this i have to set it before every refresh (Reload) - right?
    and I also have to set Autobind(false) to avoid read on page load...

    robert

  14.
  15. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 09 Feb 2017 Link to this post

    Hi Robert,

    You can set it only once and it should fire every time. However, the AutoBind will be mandatory if you need to pass the data for the initial load and this applies to every event handler bound manually, because those handlers will be attached after the initialization of the widget.


    Regards,
    Konstantin Dikov
    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 visualization (charts) and form elements.
  17. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 10 Feb 2017 in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

    if I set this on initialization javascript and like this:
    grdStandort.dataSource.transport.options.read.data = dataFiltergrdStandort();
    and in the dataFiltergrdStandort function I refer to a textbox and then if a refresh the grid with the paging bar refresh then it seems that the function is not called again with the new value but with the last/cached one?
    for me it looks like to set this with the statement above is not the same as in the .Data() of t´he read action in grid definition...
    robert

     
    function dataFiltergrdStandort() {
            var filterid = 0;
            if ($("#toolStandorteFilter_Alle").data("button").options.selected === true)
                filterid = 0;
            if ($("#toolStandorteFilter_Active").data("button").options.selected === true)
                filterid = 1;
            if ($("#toolStandorteFilter_Geloeschte").data("button").options.selected === true)
                filterid = 2;
     
            return {
                mitgliedid: mitgliedid,
                filterid: filterid,
                textfilter: $("#txtStandortsuche").val()
        };
        }
  19. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 10 Feb 2017 in reply to Robert Madrian Link to this post

    if I set it in the requestStart it works - or is this not a good solution?

    grdStandort.dataSource.bind("requestStart", function (e) {
            grdStandort.dataSource.transport.options.read.data = dataFiltergrdStandort();
        });
  20.
  21. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 14 Feb 2017 Link to this post

    Hi Robert,

    In my tests the approach that I have suggested fires the event every time before the call to the Read action, but please note that you need to set only the reference to the function:
    grdStandort.dataSource.transport.options.read.data = dataFiltergrdStandort;

    In your last post you are just calling the function on requestStart and you are setting the initial object to the read.data, which is why the value is always the same.

    Hope this helps.


    Regards,
    Konstantin Dikov
    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 visualization (charts) and form elements.
  23. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 16 Feb 2017 in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

    this works now perfect with the Kendo mvc grid - now I wanted to do the same approach with the Kendo mvc Treeview (Ajax loading) but this doesn't work as expected because the treeview sends the "id" on child loading and this id is not given to the controller but there are two calls one with the id and one with my parameter "mitgliedid"
    what I'm missing?

     

    robert

  25. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 20 Feb 2017 Link to this post

    Hello Robert,

    This approach will not work for the TreeView and you will have to define the function in the Data method of the action directly in the DataSource:
    @(Html.Kendo().TreeView()
        .Name("treeview")
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("Employees", "TreeView").Data("getData")
            )
        )
    )


    Regards,
    Konstantin Dikov
    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 visualization (charts) and form elements.
Back to Top