Kendo Dropdownlist - Using the same EditorTemplate for two grids not working
1 Answer 22 Views
Peter
Top achievements
Rank 1
Peter asked on 24 May 2021, 07:59 PM

Hi,

I am trying to use the same Dropdownlist in a parent grid, and its hierarchal/child grid. This Dropdownlist was written in jQuery and is kept inside the Shared/EditorTemplates folder and works as expected for the parent grid. However, when I apply it to columns on the child grid, it does not appear. It ignores the template and prompts me for an input like usual for inline editing instead of displaying the dropdownlist options.

Is it possible to use the same EditorTemplate inside of a hierarchy grid?

1 Answer, 1 is accepted

Sort by
1
Accepted
Patrick
Telerik team
answered on 25 May 2021, 08:56 PM

Hi Peter,

A Kendo UI Grid can be configured to use a jQuery component within the EditorTemplate using the EditorTemplateName configuration for the column and modifying the DropDownList.  

Using the same example from this example with Employee, Order, and Balance models, first configure the Balance Bound column to use the EditorTemplateName property:

Grid

        .Columns(columns =>
        {
            columns.Bound(e => e.EmployeeID).Width(130);
            columns.Bound(e => e.EmployeeName).Width(130);
            columns.Bound(e => e.Balance).ClientTemplate("#=Balance.BalanceName#").EditorTemplateName("BalanceEditor");
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(300);
        })

The first thing to note is to make sure to escape all hash literals.  The second thing is to not use comments because they will interfere with the DropDownList editor for the child Grid.

Updated BalanceEditor.cshtml

@model GridExample.Models.Balance

<input required id="Balance" name="Balance" data-bind="value: Balance.BalanceID" />
<script>

    var items = [
        { text: "BalanceOne", template: "<span> </span>", value: 1 },
        { text: "BalanceTwo", template: "<span><i class='k-icon k-i-checkbox-checked' style='color:green;'></i></span>", value: 2 },
        { text: "BalanceThree", template: "<span><i class='k-icon k-i-circle' style='color:goldenrod;'></i></span>", value: 3 },
    ];

    $("\#Balance").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        template: "\#=template\# \#=text\#",
        valueTemplate: "\#=template\# \#=text\#",
        dataSource: {
            data: items,
        },
        change: function (e) {
            var element = e.sender.element;
            var row = element.closest("tr");
            var grid = element.closest(".k-grid").data("kendoGrid");
            var dataItem = grid.dataItem(row);

            dataItem.set("BalanceID", e.sender.value());
            dataItem.set("Balance.BalanceID", e.sender.value());
            dataItem.set("Balance.BalanceName", e.sender.text());
        }
    });
</script>

Please take a look at the updated project which demonstrates the use of a Kendo UI for jQuery DropDownList being used as a EditorTemplate in a UI for ASP.NET MVC Grid.  This does use EF6 and database seeding within MSSQLLocalDB called TestDB1521043 with tables Employee, Order, and Balance.

Data/DbInitializer.cs

    public class DbInitializer : System.Data.Entity.DropCreateDatabaseIfModelChanges<EmployeeDataContext>
    {
        protected override void Seed(EmployeeDataContext context)
        {
            var balances = new List<Balance> 
            { 
                new Balance { BalanceID = 1, BalanceName = "BalanceOne" },
                new Balance { BalanceID = 2, BalanceName = "BalanceTwo"},
                new Balance { BalanceID = 3, BalanceName = "BalanceThree" }
            };

            balances.ForEach(b => context.Balances.Add(b));
            context.SaveChanges();

            var employees = new List<Employee>
            {
             new Employee{ 
                 EmployeeName = "John", 
                 BalanceID = 1, 
               },
             new Employee{ 
                 EmployeeName = "Jane", 
                 BalanceID = 2, 
                },
            };

            employees.ForEach(e => context.Employees.Add(e));
            context.SaveChanges();

            var orders = new List<Order>
            {
                new Order{ 
                    OrderName = "OrderOne", 
                    EmployeeID= 1, 
                    BalanceID = 1, 
                },
                new Order{ 
                    OrderName = "OrderTwo",
                    EmployeeID= 2, 
                    BalanceID = 2, 
                },
                new Order{
                    OrderName = "OrderThree",
                    EmployeeID= 1, 
                    BalanceID = 3, 
                },
                new Order{ 
                    OrderName = "OrderFour", 
                    EmployeeID= 2, 
                    BalanceID = 1, 
                },
                new Order{ 
                    OrderName = "OrderFive", 
                    EmployeeID= 1,
                    BalanceID = 2,
                },
                new Order{ 
                    OrderName = "OrderSix",
                    EmployeeID= 2,
                    BalanceID = 3,
                },
            };

            orders.ForEach(o => context.Orders.Add(o));
            context.SaveChanges();

        }
    }

Regards,
Patrick
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Peter
Top achievements
Rank 1
commented on 26 May 2021, 12:37 PM

Wow, I would have never even considered that the comments could present a problem - As soon as I removed them from the Editor Template, the dropdown immediately appeared in both grids. Thanks so much for all the help, Patrick!
Patrick
Telerik team
commented on 26 May 2021, 01:19 PM

No problem Peter!  Glad the editor templates are working well now.
Asked by
Peter
Top achievements
Rank 1
Answers by
Patrick
Telerik team
Share this question
or