CODEWITHSUNDEEP
c#templateskendo-uikendo-gridkendo-dropdown
Novikov
Novikov

Reputation: 436

DropDownList in kendo grid control (by ClientTemplate)

I need to make behavor for ClientTemplate like we have for EditorTemplateName. So I want to make something like this:

Template: 

@(
     Html.Kendo().DropDownListFor(m => m)        
            .BindTo((SelectList)ViewData["ExamResults"])
                .Template("#:Value# #:Text#")
                .DataTextField("Text")
                .DataValueField("Value")
            .Events(e => e
                .Change("examResultOnDropDownChange")
                .Open("examResultOnOpen"))
 )

And adding column into grid: .EditorTemplateName("ExamResultGridForeignKey")

but I want to: .ClientTemplate("ExamResultGridForeignKey") or something like that (but it doesnt work):

.ClientTemplate(
                Html.Kendo()
                    .DropDownList()
                    .Name("#=Id#")
                    .BindTo((SelectList)ViewData["ExamResults"])
                    .Template("#:Value# #:Text#")
                    .DataTextField("Text")
                    .DataValueField("Value")
 )

All that I need to make field with DropDownList in not editable mode (when we display value) looks like editable DropDownList.

Upvotes: 2

Views: 5966

Answers (1)

CSharper
CSharper

Reputation: 5580

This is how my dropdown list is being rendered. IsInForecast is a bool field. All the If else is doing is having the correct ddl value (true/false) selected based on the value of the IsInForecast property. You're gonna have to tweak it to your needs.

columns.Bound(m => m.IsInForecast).Title("Is Forecasted").ClientTemplate(

   "# if (IsInForecast == true) { #" +

                          "<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
                            "<option id='yes' selected value='1'>Yes</option>" +
                            "<option id='no' value='0'>No</option>" +

                            "</select>" +
                     "# } else { #" +
                          "<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
                            "<option id='yes'  value='1'>Yes</option>" +
                            "<option id='no' selected value='0'>No</option>" +
                         "# } #" 
            );

Where you see "<select id='#= OrderId #' that is setting the ddl ID field to so you know which dropdownlist/record you are editing. onchange=save('#= OrderId #'); is calling a JS function that passes the model property OrderId to the method. To get the selected value of correct ddl you just changed you can do this.

save(orderId) function{
  var ddl = # + orderId;
  var getSelectedValue = $(ddl).val();
}

This will render a standard DDL. You can check out the documentation here

 http://demos.telerik.com/kendo-ui/web/grid/editing-custom.html

Upvotes: 1

Related Questions