Kednod dropdownlist inside kendo treeview next to treeviewItem

[Aarti]

Hi,

I  have a treeview template  for rendering kendo drop down next to kendo treeviewItem. Below is the code. But I am getting javascript error from Kendo.all.min.js file saying "Invalid template". If I use Html.Dropdownlistfor instead kendo it works but with kendo drop down I am getting an error. Can you please help on this?

 <script id="treeview-template" type="text/kendo-ui-template">
                    #: item.text #
                    # if (item.text=="Allow Subclient") { #
                       @*@(Html.DropDownListFor(m => Model.FieldConfigurationModel.ReocrdValue, selList, new { Style = "width: 200px;"}))*@
                         @(Html.Kendo().DropDownListFor(x => x.FieldConfigurationModel.ReocrdValue)
                           .BindTo(new SelectList(Model.FieldConfigurationModel.SelectDataSource.Select(p => new SelectListItem() { Value = p.id, Text = p.value }), "Value", "Text", selectedId))
                           .AutoBind(true)
                           .Name("RecordValue")
                           .DataTextField("Text")
                           .DataValueField("Value")
                           .HtmlAttributes(new { Style = "width: 100px !important;"})
                           .Value(selectedId))
                  # } #
            </script>

  Below is the  javascript error i get

Uncaught Error: Invalid template:'
                    #: item.text #
                    # if (item.text=="Allow Subclient") { #
                       
                         <input Style="width: 100px !important;" id="RecordValue" name="RecordValue" type="text" value="abc12" /><script>
    jQuery(function(){jQuery("#RecordValue").kendoDropDownList({"dataSource":[{"Text":"abc12","Value":"969a5ff4-e0fc-426d-be02-a48b0104e342"},{"Text":"ABC2","Value":"4ff38eb7-813a-493f-b25c-a48b01049ee4"}],"dataTextField":"Text","autoBind":true,"dataValueField":"Value"});});
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n                    '+$kendoHtmlEncode( item.text )+'\n                    '; if (item.text=="Allow Subclient") { ;$kendoOutput+='\n                       \n                         <input Style="width: 100px !important;" id="RecordValue" name="RecordValue" type="text" value="abc12" /><script>\n\tjQuery(function(){jQuery("';RecordValue").kendoDropDownList({"dataSource":[{"Text":"abc12","Value":"969a5ff4-e0fc-426d-be02-a48b0104e342"},{"Text":"ABC2","Value":"4ff38eb7-813a-493f-b25c-a48b01049ee4"}],"dataTextField":"Text","autoBind":true,"dataValueField":"Value"});});
;$kendoOutput+=;}return $kendoOutput;'

 

[Aarti]

I got the mentioned issue fixed by using clientTemplate. But now another issue is when clicking drop down arrow it drop downs very quickly but then disappears.

Is it supported to have Kendo drop down list within Treeview Control?

 

Thanks,

Aarti

Aa

[Alex Gyoshev]

Hello Aarti,

At this time, nesting widgets in the TreeView component is not supported. An alternative approach would be to present users with buttons (as shown in the templates example), or with a standalone editing form, as shown in this how-to help topic.

Regards,
Alex Gyoshev
Telerik