Loading grid on DropDownList change or button click event

4 posts, 0 answers
  1. Nirav
    Nirav avatar
    17 posts
    Member since:
    Mar 2013

    Posted 05 Jul 2013 Link to this post

    Hi,

    I want to load the grid either or both the below ways:
    1. On change (selected index changed) event of DropDownList. The selected value from dropdown should be passed to grid and based on it grid should display result.
    2. On click of the button event. The selected value from dropdown should be passed to grid on button click and based on it grid should display result.

    Do we have any kind of example which shows meets my above requirements or any kind of lead that I look into it will be very helpful.

    Thanks,
    Nirav
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2277 posts

    Posted 05 Jul 2013 Link to this post

    Hello Nirav,


    This is a quote from my answer in the other thread.


    In the current scenario, you should set the AutoBind option of the Grid to false to indicate the data should not be bound on page load and specify a Data function for the Read Action of the Grid's dataSource, which will return the additional data for the controller.
    E.g.
    @(Html.Kendo().Grid<OrderViewModel>()  
        .Name("grid")
        .AutoBind(false)
        ...
        .DataSource(dataSource => dataSource
            .Ajax()
            ...
            .Read(read => read.Action("Orders_Read", "Grid").Data("additionalData"))
         )
    )

    You should bind to the change event in the DropDownList configuration. 
    @(Html.Kendo().DropDownList()
       ...
       .Events(e => e.Change("change"))
    )

    Finally in the change event handler, you should get the currently selected item and call the read action of the Grid's dataSource to bind the data.
    var ddlItem;
    function additionalData(e) {
        return { item : ddlItem }
    }
      
    function change(e) {
        ddlItem = this.value();
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.read();
    }

    The selected item from the DropDownList will be received as an additional parameter in the Read action of the Controller.
    public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request, string item)
    { ... }



    As a side note I would like to ask you to post your questions only once, so we could provide you the best possible assistance. I wish you a great day!

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. John
    John avatar
    4 posts
    Member since:
    Jun 2013

    Posted 09 Jul 2013 Link to this post

    This just about fits my needs as well, but I would like to set the DropDownLists Selected item to 0, the first in the list, then when the page is loaded for the first time fire the Change even to in effect auto load the grid based on the DorpDownLists selected item.
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2277 posts

    Posted 10 Jul 2013 Link to this post

    Hi John,


    In the current scenario, you could use the one method to attach handler to be executed only a single time for the dataBound event and manually trigger the change event.
    E.g.
    $(function () {
       $("#dropDown").data("kendoDropDownList").one("dataBound", function () {
           this.trigger("change");
       });
    });

    I wish you a great day!

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top