Are there any online examples of where a dropdrownlist control is used inline as a column with the MVC TreeList?
I need the column to be active at all times,. We don't want to utilize the popup editor.
I tried adding a column with a template like this:
@(Html.Kendo().TreeList<VendorPortalCatalogItem>()
.Name("myClassTreelist")
.Columns(columns =>
{
columns.Add().Field(e => e.Name).Width(220).TemplateId("name-template");
columns.Add().Field(e => e.DaysToShipId).TemplateId("dts-template");
})
.Filterable()
.Sortable()
.DataSource(dataSource => dataSource
.Read(read => read.Action("TreeList_LoadAll", "DaysToShip"))
.ServerOperation(false)
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.ParentId);
m.Field(f => f.Name);
m.Field(f => f.IconClass);
})
)
.Height(540)
)
And my template looks like this:
<script id="dts-template" type="text/x-kendo-template">
@(Html.Kendo().DropDownList()
.Name("DaysToShipId")
.OptionLabel("Select days to ship...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("ddlDaysToShip_Read", "DaysToShip");
});
})
.Height(400)
)
</script>
But all this does is throw console error "Uncaught error: Invalid template"
Hi Joe,
Thank you for the code snippet and details provided.
In order to achieve the desired behavior, I would recommend trying the approach from the following dojo that I prepared for the case:
The Client Template should be used for displaying the desired property of the model. It is not shown in the dojo above, because the initial data read of the TreeList does not contain the Category property, but after you have this populated in your data, use the ClientTemplate, similar to the one of the following demo:
I hope this information helps.
Kind Regards,
Anton Mironov
Hi Joe,
The following demo is representing the desired implementation for a Kendo UI Grid. It is the same one that should be used in a TreeList:
Give a try to the approach above and if further assistance with the implementation is needed, send me a runnable sample of your application and I will try my best to implement it for you if needed.
Looking forward to hearing back from you.
Kind Regards,
Anton Mironov
Anton the demo you provided does not apply at all.
First, there is no .ClientTemplate() method available on a column in the TreeList helper. There is only Template(). But that's minor.
I've done editor templates on grid controls before. That demo doesn't even work as shown online. So far as I know, you have to specify each column's editor template as .EditorTemplateName("_someView"). And the actual editor view file has to be located in /Views/Shared/EditorTemplates/.
None of this is shown in that demo, so I don't see how that demo actually works as shown.
All of that aside, back to the original question. I'm guessing there isn't any working example of using a custom editor for a column in a TreeList control?
Providing a runnable sample of my application isn't possible. These are modifications to a large MVC app. All I can do is tell you that I need an MVC TreeList control to have a column that utilizes a kendo dropdown for InCell edit.
I was actually able to get something close, but it doesn't work correctly. You can specify an editor for the column with:
columns.Add().Field(e => e.DaysToShipId).Width(100).Editor("daysToShipEditor").Title("Days To Ship").Template("#: DaysToShipLabel #");And then the editor template looks like below. This works, except all of the dropdown choices render as 'undefined' even though I can see the model is populated correctly in the read event.
<script id="dts-template" type="text/x-kendo-template"> @(Html.Kendo().DropDownList() .Name("DaysToShipId") .OptionLabel("Select days to ship...") .HtmlAttributes(new { style = "width: 100%" }) .DataTextField("Text") .DataValueField("Value") .DataSource(source => { source.Read(read => { read.Action("ddlDaysToShip_Read", "DaysToShip"); }); }) .Height(400) ) </script>Here's the dropdown read event:
public JsonResult ddlDaysToShip_Read(string text) { IList<SelectListItem> items = new List<SelectListItem>(); foreach (DaysToShip resp in (DaysToShip[])Enum.GetValues(typeof(DaysToShip))) { items.Add(new SelectListItem() { Text = resp.GetDescription(), Value = ((int)resp).ToString() }); } if (!string.IsNullOrEmpty(text)) { items = items.Where(p => p.Value == text).ToList(); } return Json(items, JsonRequestBehavior.AllowGet); }Ok I found a different route to take. Working with incell custom editors with the TreeList control is very different than the grid control. And I'm not entirely sure it will ever work the way I need it.
So I switched to popup editor with a custom editor template. While not as elegant, the solution works as needed for now so we can move on with our project. Thank you for the responses.