MVC TreeList inline dropdownlist example

0 Answers 31 Views
DropDownList TreeList
Joe
Top achievements
Rank 1
Joe asked on 01 Oct 2021, 01:48 PM

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"

Anton Mironov
Telerik team
commented on 06 Oct 2021, 12:21 PM

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

Joe
Top achievements
Rank 1
commented on 06 Oct 2021, 07:18 PM

Thank you for the response.  However the dojo is the jquery control which I do not know how to read.  The original question involved the MVC Helpers.  Is it possible to provide a working example with the MVC helpers?
Anton Mironov
Telerik team
commented on 11 Oct 2021, 02:08 PM

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

Joe
Top achievements
Rank 1
commented on 12 Oct 2021, 02:03 PM

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);
        }

Joe
Top achievements
Rank 1
commented on 13 Oct 2021, 03:44 PM

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.

No answers yet. Maybe you can help?

Tags
DropDownList TreeList
Asked by
Joe
Top achievements
Rank 1
Share this question
or