Clientside binding of RadGrid when regular dropdownlist item is selected

[Prathibarani]

Hi,

We are using latest RadGrid control with visual studio 2017. I have asp.net c# page with regular dropdownlist and RadGrid. Radgrid clientside binding should happen only when an item is selected in dropdownlist by passing selected value of dropdown to the webservice call. How can I do this binding on client side.

something like this:

protected void ddlDropdownList_SelectedIndexChanged(object sender, EventArgs e)
{   //clientside binding of grid should happen by passing ddlDropdownList.SelectedValue

}

[Marin Bratanov]

Hello,

I just answered your support ticket with this question and I am pasting the guidance here for anyone else having the same scenario:

---

If you want to use client-side binding, I recommend also using the client-side events of the dropdown to bind the grid. In the case of a RadDropDownList that could be the the OnClientItemSelected event: https://docs.telerik.com/devtools/aspnet-ajax/controls/dropdownlist/client-side-programming/events/onclientitemselected.

Then, you have several options. For example:

• fetch the data you want with your own code (e.g., jQuery.get()) and bind the grid to the JSON literal: https://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/programmatic/defaultcs.aspx.
• add a filter expression to the RadClientDataSource as shown here: https://demos.telerik.com/aspnet-ajax/clientdatasource/functionality/filtering/defaultcs.aspx. This assumes you bind the grid to it: https://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/client-data-source-binding/defaultcs.aspx.
• consider migrating to the Kendo DataSource widget (https://demos.telerik.com/kendo-ui/datasource/index) and the Kendo Grid widget (https://demos.telerik.com/kendo-ui/grid/remote-data-binding). They are jQuery widgets designed to operate entirely on the client and offer more suitable API for such a scenario.

Regards,
Marin Bratanov
Progress Telerik

[Marin Bratanov]

It seems my explanations were not clear enough, so I am adding here an update with some more details.

---

The RadGrid integration with the RadClientDataSource works with its built-in UI. This means that you can enable filtering in the grid (set its AllowSorting and AllowFilteringByColumn properties to true) and it will filter the records in the browser. There will be no second request. I am attaching a short video for this.

Your second option (perhaps more suitable than the first if you do not want to use the grid's UI) is to bind the grid programmatically, which means providing a data source to it with your own code. We have a demo for this (LINK) and I am attaching a short video that demonstrates the difference. In this demo the built-in filter events of the grid are used to fetch new data, but you can do this in  the OnClientItemSelected event of the dropdown list.

Your third option is to use the Kendo Grid and  the Kendo DataSource client-side widgets. They are designed to operate entirely on the client, and the Kendo DataSource exposes the .filter() method that you can use (LINK). You can see the basics of creating and binding a kendo grid like this in our demos (LINK). For your convenience, I prepared a basic example (LINK).