Loading grid on DropDownList change or button click event

[Nirav]

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

[Dimiter Madjarov]

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

[John]

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.

[Dimiter Madjarov]

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

[Carlos]

Hi,
My request its similar to the one here. I have a ButtonGroup and I want based on click on ButtonGroup to update the Combobox. The paramer "index" on the controller method is always 0. Whats is missing ? Below is my code:

1. ButtonGroup
<kendo-buttongroup name="Option" enable="true" on-select="onChangeOption">
<buttongroup-items>
<item icon="k-i-check-outline k-i-checkmark-outline k-i-success" text="System" selected="true"></item>
<item icon="k-i-check-outline k-i-checkmark-outline k-i-success" text="Institution" enabled="true"></item>
<item icon="k-i-check-outline k-i-checkmark-outline k-i-success" text="Info"></item>
</buttongroup-items>
</kendo-buttongroup>

2. The Combobox and the scripts
@(Html.Kendo().ComboBox()
.Name("SelectedTransaction")
.AutoBind(false)
.HtmlAttributes(new { style = "width:100%;" })
.Placeholder("Select one...")
.DataTextField("name")
.DataValueField("id")
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("SetGroupItems", "SystemProfile")
.Data("additionalData"); ;
})
.ServerFiltering(true);
})
)

<script>
var option;
function additionalData() {

return {
ItemIndex: option
};
}

function onChangeOption(e) {
option = e.indices;

var combobox = $("#SelectedTransaction").data("kendoComboBox");
combobox.dataSource.read();

}
</script>


3. Finally the method on the controller
public JsonResult SetGroupItems([DataSourceRequest] DataSourceRequest request, int index)
{
if (index == 0)
{
return Json(new ArrayList {
new
{
Name = "A",
Id = 1
},
new
{
Name = "B",
Id = 2
}
}

);
...
}
}

[Eyup]

Hi Nirav,

 

Thank you for writing to us.

Both of these requirements are possible to achieve. Here are some implementations you can choose from:

1. Additional data:
https://www.telerik.com/forums/pass-additional-parameters-to-read-ajax-datasource-method---mvc

2. Using .filter() method:
https://docs.telerik.com/kendo-ui/knowledge-base/filter-all-columns-with-one-textbox

3. Filter widget:
https://demos.telerik.com/aspnet-mvc/filter

Feel free to choose whichever solution you prefer.

 

Regards,
Eyup
Progress Telerik