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

Set Toolbar DropDownList vlaue on entry onto the page.

3 Answers 150 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 05 Jan 2012, 06:43 PM
I am using the file:http://demos.kendoui.com/web/grid/toolbar-template.html example as a starter for my page.
When the page loads I would like to set the filter drop down list and have that set the grid data right from the initial display of the page.

I can then call the page with http://demos.kendoui.com/web/grid/toolbar-template.html?Filter=Beverages
I would like to see "Beverages" in the grid toolbar and the grid would be filtered fshow Beverages only.

It seems a pretty common thing to do.
There are other threads about setting kendo drop downs but, that they are not inside a grid toolbar ...

3 Answers, 1 is accepted

Sort by
0
Abrian
Top achievements
Rank 2
answered on 09 Aug 2013, 08:39 AM
Good day,

I am faced with the same problem. When looking at the demo of the toolbar template the dropdown has some values. How can the default value be specified on page load? Looking at the example I would like the Beverages item to be selected by default on page load. Obviously this must also effect the filter on the grid.

Demo

Any help will greatly be appreciated.
0
Alexander Valchev
Telerik team
answered on 12 Aug 2013, 11:49 AM
Hi Abrian,

I prepared a small example that demonstrates the configuration.
The important parts are:
var dropDown = grid.find("#category").kendoDropDownList({
  dataTextField: "CategoryName",
  dataValueField: "CategoryID",
  optionLabel: "All",
  value: 1, //autoBind is enabled, the widget has a value
  dataSource: {
    type: "odata",
    severFiltering: true,
    transport: {
    }
  },
  change: function() {
    var value = this.value();
    if (value) {
      grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
    } else {
      grid.data("kendoGrid").dataSource.filter({});
    }
  }
}).data("kendoDropDownList"); //get the client side object

dropDown.bind("dataBound", function() {
    this.trigger("change");
});

The last code snippet demonstrates how to trigger the change event of the widget and force Grid filtering.

I hope this will help.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Abrian
Top achievements
Rank 2
answered on 12 Aug 2013, 01:08 PM
Hi Alexander,

Thank you for your help! This gave me the answer I needed.

Kind regards,

Abrian
Tags
DropDownList
Asked by
John
Top achievements
Rank 1
Answers by
Abrian
Top achievements
Rank 2
Alexander Valchev
Telerik team
Share this question
or