This is a migrated thread and some comments may be shown as answers.

Grid Data based on DropDownList

4 Answers 421 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 09 Jan 2018, 09:38 PM

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.

4 Answers, 1 is accepted

Sort by
0
B
Top achievements
Rank 1
answered on 09 Jan 2018, 10:52 PM
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.
0
B
Top achievements
Rank 1
answered on 09 Jan 2018, 10:53 PM
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.
0
Joe
Top achievements
Rank 1
answered on 10 Jan 2018, 07:24 PM

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.

0
Stefan
Telerik team
answered on 11 Jan 2018, 09:37 AM
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.
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
B
Top achievements
Rank 1
Joe
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or