Set DropDownList value in Grid Toolbar's ClientTemplate

[Shawn]

Hello,

I have a Kendo Grid that gets filtered by a DropDownList box located in the grid's toolbar in a ClientTemplate.  I'm trying to set the value/index of the DropDownList box to a specific value (e.g. 2), based on a value I obtain from my DB, on page load.  I was trying to achieve this by setting a ViewData value in the "List" action method that is responsible for filling the Grid with data, and then setting the DropDownList's value in $(document).ready() function in the View where the Grid is located.  The problem is that I cannot access the DropDownList by using $("#filter").data("kendoDropDownList).  This always returns "undefined".  How do I access this DropDownList box that is located inside a client template for the grid's toolbar to set it's value?

Thanks.

My Grid (partial):

@(Html.Kendo().Grid<Model>()
.Name("Grid")
.Columns(columns =>
{
     columns.Bound(c => c.Value1);
     columns.Bound(c => c.Value2);
})
.ToolBar(toolbar =>
{
     toolbar.ClientTemplateId("GridToolbarTemplate");
})
.....

 

Here's the template:

<script id="GridToolbarTemplate" type="text/x-kendo-template">

     <div>

         <label class="category-label" for="category">Filter</label>

         @(Html.Kendo().DropDownList()

                     .Name("filter")                           

                     .OptionLabel("All")

                     .DataTextField("Text")

                     .DataValueField("Value")

                     .Events(e => e.Change("thresholdChange"))

                     .HtmlAttributes(new { style = "width: 60px;" })

                     .BindTo(new List<SelectListItem>()

                     {

                         new SelectListItem() {

                             Text = "1", Value ="1"

                         },

                         new SelectListItem() {

                             Text = "2", Value ="2"

                         },

                         new SelectListItem() {
                                       Text = "3", Value ="3"
                                 }

                     })

                     .ToClientTemplate()

         )

     </div>

 </script>

 

 

 

 

 

 

 

 

[Shawn]

I seem to have figured it out myself.  I created a function for the DropDownList box's "DataBound" event and used "this.value(@ViewData["filter"])" to set the DropDownList box's value.  Also, I had to set the ViewData in the "index" action method and not the "List" action method.  However, if there is a better, more elegant way of doing this I'd really like to know.  Thanks.

[Tsvetomir]

Hi Shawn,

The dropdown-list within the toolbar template of the grid will not be accessible until it is actually expanded for the first time. Both, the DataBound event of the Grid and the document.ready() are too early for modifying the dropdown-list widget's value. The optimal approach would be to set it in the DataBound of the dropdown-list. 

As per the ViewData, it has to be set in the ActionMethod which returns the View in which the grid is located. Usually the Kendo UI widgets request different Controllers, however, these Controllers do not return any View, hence, the data set in the ViewData will not be accessible. 

Let me know in case you encounter any further issues.


Kind regards,
Tsvetomir
Progress Telerik