Binding DropDownList in Template

[Kay]

Even though many similar topics can be found on the internet, I wasn't able to bind my dropdownlist value within a scheduler template:

 

this is my code within the template:

 

<div class="k-edit-label"><label for="trainerId">Trainer</label></div>

<div data-container-for="trainerId" class="k-edit-field">
    <input id="trainerId" name="trainerId"
           data-bind="value:trainerId"
           data-role="dropdownlist" />
</div>

 

the dropdownlist is beeing created by edit event of scheduler:

 

  // Creating dynamic dropdown
            e.container.find("#trainerId").kendoDropDownList({
                dataTextField: "Text",
                dataValueField: "Value",
                change: function(e) {
                   
                },
                dataSource: {
                    transport: {
                        read: {
                            type: 'post',
                            dataType: "json",
                            url: '@Url.Action("Trainers_List","Trainer")',
                        }
                    }
                }
            });

 

Fiddler shows :

'TrainerId' is listed in the body but has no value.

Instead there are other fields like:

trainer.Disabled,

trainerId.Sorting,

trainerId.Value which actually holds the correct value.

 

What am I doing wrong here?

[Dimitar]

Hello Kay,

In addition to the jQuery plug-in widget initialization, each Kendo UI control may be initialized and configured through data attributes. Therefore, when data-role="dropdownlist" attribute is used on the select element, a DropDownList widget is initialized. With this approach, there is no need to reinitialize the widget again from the Scheduler's edit event. Instead, you can just define the data source configuration and use the setDataSource() method to apply it to the widget (Dojo example):

// Editor template
<div data-container-for="ownerId" class="k-edit-field">
  <select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
    data-value-field="ProductID" data-text-field="ProductName">
  </select>
</div>

// Scheduler's edit event handler
<script>
  edit: function(e) {
    var ownerId = e.container.find("#ownerId").data("kendoDropDownList");
    var ownersDataSource = new kendo.data.DataSource({
      type: "odata",
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
        }
      }
    });
    ownerId.setDataSource(ownersDataSource);
},
</script>

Alternatively, you could define a simple <select> element and initialize the widget from the Scheduler's edit event handler as follows:

// Editor template
<script id="customEditorTemplate" type="text/x-kendo-template">
    <input id="dropdownlist" />
 </script>

// Scheduler's edit event handler
<script>
  edit: function(e) {
    var ddlContainer = e.container.find("#dropdownlist");
    var dataSource = new kendo.data.DataSource({
      transport: {
        read: {
          url: "http://demos.telerik.com/kendo-ui/service/products",
          dataType: "jsonp"
        }
      }
    });

    ddlContainer.kendoDropDownList({
        dataSource: dataSource,
        dataTextField: "ProductName",
        dataValueField: "ProductID"
    });
  }
</script>

Regards,
Dimitar
Progress Telerik

[Kay]

Thanks four your answer.

 

Unfortunately I am still not able to bind the widget value.

I use html wrapper to create the scheduler widget with following settings:

 

      .Editable(editable => { editable.TemplateName("_MyTemplate").Resize(true); })

and

.EventTemplate("<div class='k-event-template #:getCustomCssStyle(data)#'<p>#=title#</p></div>")

 

MyTemplate is like this:

 

...

<div class="k-edit-label">
    @(Html.LabelFor(model => model.End))
</div>
<div data-container-for="end" class="k-edit-field">
    <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
    <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
    <span data-bind="text: endTimezone"></span>
    <span data-bind="text: startTimezone, invisible: endTimezone"></span>
    <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
</div>


<div class="k-edit-label"><label for="trainerId">Trainer</label></div>

<div data-container-for="trainerId" class="k-edit-field">
    <select id="trainerId" data-bind="value:trainerId" data-role="dropdownlist"
            data-value-field="Value" data-text-field="Text"></select>
</div>

...

in edit event of the widget:

 // Creating dynamic dropdown
            var trainerId = e.container.find("#trainerId").data("kendoDropDownList");
            var trainerIdDataSource = new kendo.data.DataSource({                 
                type: "json",                
                transport: {
                    read: {
                        type: 'post',
                        dataType: "json",
                        url: '@Url.Action("Trainers_List","Trainer")',
                    }
                }     
            });
            trainerId.setDataSource(trainerIdDataSource); 

 

dropdown 'trainerId' is working fine but fiddler still shows

TrainerId

trainerId.__kendo_devtools_id 36
trainerId.Disabled false
trainerId.Group

trainerId.Selected false
trainerId.Text Mike Tyson
trainerId.Value 538c7a4e-0b7f-43ef-ba36-1e68d251694c

 

 

 

 

[Kay]

I just figured it out by myself.

The solution is to capitalize the name of the property 'trainerId' in data-binding attribute:

<div data-container-for="trainerId" class="k-edit-field">
    <select id="trainerId" data-bind="value:TrainerId" data-role="dropdownlist"
            data-value-field="Value" data-text-field="Text"></select>
</div>

 

[Kay]

Unfortunately, after havin updated to version:

the found solution is not working anymore.

Fiddler shows:

TrainerId [object Object]

Dropdown works fine and consumed data:

[{"Disabled":false,"Group":null,"Selected":false,"Text":"aa
bb","Value":"538c7a4e-0b7f-43ef-ba36-1e68d251694c"}]

[Kay]

Updated to version 2018.2.516

[Dimitar]

Hello Kay,

Capitalizing the name of the property depends on the dataSource schema definition. Please do check the provided Dojo example in my previous reply, where the following configuration can be observed:

dataSource: {
  ...
  schema: {
    model: {
      id: "taskId",
      fields: {
        ...
        ownerId: { from: "OwnerID", defaultValue: 1 }
      }
    }
  }
}

If the schema is set successfully and the error continues to persist, I would suggest you to open a separate support thread in the ticketing system, where you could provide us with additional information and a runnable example to examine. 

Regards,
Dimitar
Progress Telerik