This is a migrated thread and some comments may be shown as answers.
Loading grid on DropDownList change or button click event
4 Answers 539 Views
This is a migrated thread and some comments may be shown as answers.
Nirav
Top achievements
Rank 1
Nirav asked on 05 Jul 2013, 06:33 AM
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

4 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 05 Jul 2013, 10:58 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 09 Jul 2013, 07:08 PM
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.
0
Dimiter Madjarov
Telerik team
answered on 10 Jul 2013, 08:08 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
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
}
}

);
...
}
}
- by
Carlos
Top achievements
Rank 1
on 03 Jun 2021, 03:53 PM
0
Eyup
Telerik team
answered on 07 Jun 2021, 03:33 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Nirav
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
John
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or