Grid Data based on DropDownList

5 posts, 0 answers
  1. Joe
    Joe avatar
    197 posts
    Member since:
    May 2012

    Posted 09 Jan Link to this post

    I hope I have what is a simple question, but the answer is eluding me at the moment.  

    Background: I have a table where data gets imported into.  Each import is labeled, in a column so that import batches are kept together.

    I have a View with a DropdownList that gets populated with a DISTINCT list of those import labels.

    What I want to have happen is the grid would initially be empty.  The user will select a label from the dropdownlist, which should then tell the grid to read the data from the database where it matches the UploadLabel selected by the user.

    I know I have to create my Grid to that AutoBind is false.  But how do I tell the grid to fetch the appropriate data?  I know I can call the Grid's DataSource.Read method, but where or how do I tell it which data to retrieve? I don't want to do it client side because the import database is very, very, very large.  This is why I want to only return the data corresponding to a specific UploadLabel.

  2. B
    B avatar
    11 posts
    Member since:
    Aug 2010

    Posted 09 Jan in reply to Joe Link to this post

    Add an event to the dropdown that get's fired when you select an item then call a javascript function to filter based on that data.  Something like this:



           function showDataSources(e) {
        
               var filterValue = $("#dropdown").val();
               var dataSourcesGrid = $("#DataSources").data("kendoGrid");
               dataSourcesGrid.dataSource.read({ value: filterValue });
           }
       
    where value is the name of a controller parameter.
  3. B
    B avatar
    11 posts
    Member since:
    Aug 2010

    Posted 09 Jan in reply to Joe Link to this post

    Add an event to the dropdown that get's fired when you select an item then call a javascript function to filter based on that data.  Something like this:



           function showDataSources(e) {
        
               var filterValue = $("#dropdown").val();
               var dataSourcesGrid = $("#DataSources").data("kendoGrid");
               dataSourcesGrid.dataSource.read({ value: filterValue });
           }
       
    where value is the name of a controller parameter.
  4. Joe
    Joe avatar
    197 posts
    Member since:
    May 2012

    Posted 10 Jan Link to this post

    Thanks.  While your response was not the exact answer I was looking for, it was enough to spark my memory of how I did it before.  Very similar.

    When the user selects an option in the drop down, I set a javascript variable, and in the Grid as part of it's Read action I have a .Data("scriptFunction") which builds an appropriate JSON object with the upload label I want from that variable.  Next step is to convert it to a MVVM viewModel, but so far it's working as I expect it to.

  5. Stefan
    Admin
    Stefan avatar
    1474 posts

    Posted 11 Jan Link to this post

    Hello, Joe, Smith,

    Smith, thank you for providing a solution to the question, this is highly appreciated.

    Both approaches are valid:

    1) Passing the DropDown value to the read method of the dataSource:

    https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read

    2) Setting a JavaScript function which will create and send additional data:

    https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding#pass-additional-data-to-action-methods

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 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