Rank 1
I need to pass a parameter from dropdownlist selection to the ajax function that refreshes the grid. Using the following code to accomplish this using taghelper syntax, however the parameter is not getting passed to ajax api. Could you please help?
1 Answer, 1 is accepted
Hello Johny,
To pass a parameter through the Read request of the Grid based on the selected DropDownList option:
- Handle the "change" event of the DropDownList control.
- Get its value through the client-side value() method.
- Call the read() method of the DataSource.
<kendo-dropdownlist class="form-select" name="SelectedAirline" on-change="onAirlineChange"
datatextfield="Text"
datavaluefield="Value"
bind-to="Model.CompanySelectList"
option-label="Please select an Airline..."
filter="FilterType.Contains">
</kendo-dropdownlist>
<script>
function onAirlineChange(e) {
var cid = e.sender.value(); //get the selected DropDownList value
var grid = $("#grid").data("kendoGrid");
grid.dataSource.read({ companyId: cid });
}
</script>For your convenience, I have prepared a REPL sample based on this example:
https://netcorerepl.telerik.com/GeawwNPp54lfCEy329
Regards,
Mihaela
Progress Telerik
Rank 1
Thanks Mihaela for your response.
I have a question on this example, the grid rows are not changing based on the dropdown list selection https://netcorerepl.telerik.com/GeawwNPp54lfCEy329.
That is what i am trying to accomplish.
Also can we change this example to disable to "Add a new record" button if nothing selected in the dropdown list?
Thanks again,
Johny
Rank 1
To enable / disable the "Add new record" toolbar button I added the following code in dropdownlist change event, still no luck!
var toolbar = grid.element.find(".k-grid-toolbar");
var addNewButton = toolbar.find(".k-grid-add");
if (cid && cid.length > 0) {
addNewButton.removeClass("k-state-disabled");
} else {
addNewButton.addClass("k-state-disabled");
}
Hi Johny,
The Grid's data in the REPL sample is not filtered/updated based on the selected DropDownList value, because the "Orders_Read" Action is not updated to intercept the received "companyId" parameter. However, you can filter the data on the server and return it back to the Grid as follows:
public IActionResult Orders_Read([DataSourceRequest]DataSourceRequest request, int companyId)
{
var gridData = new List<AirlineViewModel>(); // populate the "gridData" with the data set
if(companyId > 0) {
gridData = gridData.Where(x => x.AirlineID == companyId).ToList(); //filter the data based on your requirements
}
return Json(gridData.ToDataSourceResult(request)); //returned the filtered data back to the Grid
}Regarding the disabling of the "Add new record" command, use the "k-disabled" class:
$(document).ready(function(){
var ddl = $("#SelectedAirline").data("kendoDropDownList");
if(!ddl.value()) {
$("#grid .k-grid-toolbar [data-role='create']").addClass("k-disabled"); //Disable the command initially
}
})
function onAirlineChange(e) {
var cid = e.sender.value(); //get the selected DropDownList value
if(cid) {
$("#grid .k-grid-toolbar [data-role='create']").removeClass("k-disabled");
}
var grid = $("#grid").data("kendoGrid");
grid.dataSource.read({ companyId: cid });
}Here is the updated REPL sample based on this example:
https://netcorerepl.telerik.com/QoYdOJlL07aiiORy37
Best,
Mihaela
Rank 1