TreeList custom command button click event doesn't hit

[Genadij]

Hi,

Is it possible to have custom command button in TreeList?

I have tried to configure custom command button in Html.Kendo().TreeList as following:

                        @(Html.Kendo().TreeList<ABM.Models.AzureTreeViewData>()
                                .Name("ddlSubs")
                                .Columns(columns =>
                                {
                                    columns.Add().Field(e => e.Name).Width(480).TemplateId("node-template");
                                    columns.Add().Field(e => e.Type).Hidden(true);
                                    columns.Add().Field(e => e.SubID).Hidden(true);
                                    columns.Add().Command(command =>
                                    {
                                        command.Custom().Text(" ").Name("buttonCustom").Click("showDetails").ImageClass("fa fa-eye fa-lg");
                                    });
                                })
                                .Filterable()
                                .Sortable()
                                .Selectable(true)
                                .DataSource(dataSource => dataSource
                                    .Read(read => read.Action("TreeData", "Main").Data("subsdata"))
                                    .ServerOperation(true)
                                    .Model(m =>
                                    {
                                        m.Id(f => f.Id);
                                        m.ParentId(f => f.ParentId);
                                        m.Expanded(true);
                                        m.Field(f => f.Name);
                                        m.Field(f => f.Icon);
                                        m.Field(f => f.Type);
                                        m.Field(f => f.SubID);
                                    })
                                )
                        .Height(540)
                        )
<script>
    function showDetails(e) {
        e.preventDefault();

        var dataItem = $("#ddlSubs").dataItem($(e.currentTarget).closest("tr"));
 
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
</script>

Unfortunately Click event never hit in my code.

Could you please help me.

Thank you.

 

 

 

[Tsvetina]

Hi Genadij,

Custom command columns work in the TreeList widget. You can see in the following demo that I copied your column to the TreeList Editing local demo and it works as expected:
https://www.screencast.com/t/XZWgWdxOYVt

Try running your code with the browser developer tools opened and confirm that there are no JavaScript errors in the Console when clicking the button. It is possible that a JS error prevents the button click logic from completing.

Regards,
Tsvetina
Telerik by Progress

[Genadij]

Good afternoon Tsvetina.

Thank you for response.
I have found the problem in JS:

this line generated error - 

 var dataItem = $("#ddlSubs").dataItem($(e.currentTarget).closest("tr"));

Could you please help with correct code to obtain dataItem for clicked row in TreeList.

Thank you in advance.

Genadij

 

[Tsvetina]

Hello Genadij,

The error occurs because you are trying to call the dataItem() method on a jQuery object and not the actual TreeList. This is the correct code:

var dataItem = $("#ddlSubs").data("kendoTreeList").dataItem($(e.currentTarget).closest("tr"));

Regards,
Tsvetina
Telerik by Progress