Template inside a template

[Paul]

I am using the Scheduler and making a custom edit screen. I am following the example here.

Each scheduled event can have a category. These are selectable via dropdown. Consider the following portion of the template:

<div class="k-edit-label">
   <label for="category">Category</label>
</div>
<div data-container-for="category" class="k-edit-field">
   <!-- HERE IS WHERE THE DROPDOWN IS -->
</div>

In the example linked, a simple <select> element is used. But I am looking to add a real Kendo dropdown, not a basic select. So I defined it as follows:

var categoryEditorDropdown = Html.Kendo().DropDownList()
   .AutoBind(true)
   .BindTo(categories)
   .DataTextField(nameof(Category.Description))
   .DataValueField(nameof(Category.Id))
   .HeaderTemplate("Custom defined template which is why I need this over a select")
   .OptionLabelTemplate("Custom defined template which is why I need this over a select")
   .Name("category")
   .ToClientTemplate();

Back to my editor template, for the commented green line I tried both the following, and both gave template errors:

<div data-container-for="category" class="k-edit-field">
   <!-- Both fail with a template error -->
   @categoryEditorDropdown
   @Html.Raw(categoryEditorDropdown)
</div>

Next, I made a separate script:

<script id="editEventCategoryTemplate" type="text/x-kendo-template">
   // Tried both of these and again both fail when editing the event
   @categoryEditorDropdown
   @Html.Raw(categoryEditorDropdown)
</script>

And I updated the editor to try and use it:

<div data-container-for="category" class="k-edit-field">
   #= kendo.render(kendo.template($("\\#editEventCategoryTemplate").html())) #
</div>

For both tests here the page renders but then throws the same invalid template error when I try to edit an event.

How can I embed templates into each other. I need far more than category here. There are 6 templates in total needed for 6 different fields.

[Veselin Tsvetanov]

Hi Paul,

The Scheduler Edit template is a client-side template. It should be defined entirely on the client and would not allow you to inject a cshtml view in it.

Having that said you will need to define the DropDownList using the Kendo MVVM syntax just like the resource DropDownList has been defined in the documentation article in question:

<select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
                data-value-field="value" data-text-field="text">
  <option value="1">Alex</option>
  <option value="2">Bob</option>
  <option value="3">Charlie</option>
</select>

In order to define the Following the same approach you could also define the header- and optionLabel-templates:

<select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
                        data-value-field="value" data-text-field="text"
                        data-option-label-template="label-template"
                        data-header-template = "header-template">

And:

<script id="label-template" type="text/x-kendo-template">
	<span style='color:red'>-- Please select --</span>
</script>
<script id="header-template" type="text/x-kendo-template">
	<div><h2>Fruits</h2></div>
</script>

Here is a small Dojo sample implementing the above suggestions:

https://dojo.telerik.com/eKogOxIL/3

Regards,

Veselin Tsvetanov
Progress Telerik

[Paul]

Thank you but how can I reference the data object in the template? Consider an item template that creates some spans with an attribute:

<script id="categoryItemTemplate" type="text/x-kendo-template">
   <span class="k-state-default" data-categorycolor="#: data.Id #">&nbsp;</span>
   <span class="k-state-default">#: data.Description #</span>
</script>

How can I create the <option> element to have these properties? This blows up:

<select data-role="dropdownlist" data-text-field="Id" data-value-field="Description" data-item-template="categoryItemTemplate">
   <option value="1" data-Id="1" data-Description="Test Description">Test Description</option>
</select>

I guess this is may be closer to what I need (omitting other templates):

<input id="categoryId" data-bind="value:categoryId, source:categoryDataSource" data-role="dropdownlist" data-auto-width="true" data-item-template="categoryItemTemplate" data-text-field="Description" data-value-field="Id" />

However I don't want a data source and don't know how to create the categoryDataSource anyways. I have all the data right now in memory and I don't want an AJAX call to get it. I tried serializing JSON which did not work.

I also tried this to create the datasource:

<script>
   var categoryDataSource = new kendo.data.DataSource({
      data: @Html.Raw(JsonConvert.SerializeObject(categoriesSmall))
   });
</script>

I found the following comment in the documentation:

Bindings cannot include hard-coded values but only references to properties of the viewModel. For example, the data-bind="visible: false, source: [{ foo: 'bar'}]" configuration is incorrect.

What viewModel? Even if I had something defined I have no way of calling "bind" on this element.

 

Another item related is how to set the popup window position. The settings are not working:

.Editable(e => {
   e.TemplateId("customEditorTemplate");
   e.EditRecurringMode(SchedulerEditRecurringMode.Series);
   // Position does not work. I attempted to set it once the open event happens but the event does not fire
   e.Window(w => w.Position(p => p.Top(40)).Events(ev => ev.Open("editorOpened")));
})

I tried the MVVM route also.

<script id="customEditorTemplate" type="text/x-kendo-template">
   <div class="eventEditor" data-window="position: {top:40}">
      <!-- All components go here -->
   </div>
</script>

[Paul]

Going to mark this as answered. After a few days of banging my head against the wall I found that the MVVM for the item template is "data-template" not "data-item-template". I found numerous dojo examples even from Telerik using the "item" one. Next, I had to use the scheduler's edit event and perform the view model binding inside it. You can't do this in the template div for the editor.