Expand / collapse on column click

[Serwol]

Hello,

I would know how to expand a row on column click but I've a custom function on expand and It's not working.

The row expand well with ".collapse(row)" but the custom function I've defined in :

expand: function(e){
    setTimeout(function(){
    customExpandFunction(e);
}, 20);
},

only works when I click on treelist expand icon.

Is there a way to make this works ?

PS : sorry for my english, I'm french

[Tsvetomir]

Hi Serwol,

The expand event of the Kendo UI TreeList is triggered only when a row is expanded. If you would like to programmatically expand a row, you would have to do it with the help of the expand() method. Here is a sample click handler:

function customClick(e){
              	var row = e.target.closest("tr");
                $("#treelist").getKendoTreeList().expand(row);
              }

And the column declaration:

 { command: [{name: "custom", text: "expand me", click: customClick},"edit", "destroy" ], width: 300 }

Give this suggestion a try and let me know how it works out for you.

 

Best regards,
Tsvetomir
Progress Telerik

[Serwol]

Hi Tsvetomir,

ok but when doing that, is the custom function that I defined in treelist expand:function() is triggered too ?

[Tsvetomir]

Hello,

The function that is declared within the expand event of the TreeList would be called as well. This is due to the fact that the expand() method internally triggers the expand event.

The approach that I have provided in my previous response would eliminate the need for handling the expand event. Can you try removing it and let me know in case the functionality of interest is achieved?

 

Best regards,
Tsvetomir
Progress Telerik

[Serwol]

Hello, 

ok it's working but this is not what i'm trying to do.

I need to expand row when click on first column label and keep the expand arrow click too, like this :

 

[Tsvetomir]

Hi,

Thank you for specifying the additional details for the scenario.

If you would like to expand the rows by clicking the name of the person, I can recommend subscribing to the DataBound event handler of the TreeList and attaching the click handler. After that, apply the logic from my previous response. Here is an example:

              $("#treelist").find("td:nth-child(1) .employee-name").click(function(e){
                var row = this.closest("tr");
                $("#treelist").getKendoTreeList().expand(row)
              })

I hope you find this helpful.

 

Best regards,
Tsvetomir
Progress Telerik

[Serwol]

Hi,

thanks for your answer.

I've already tested this solution and the function that I've defined for expand on the treelist is not fired.

[Tsvetomir]

Hi,

For TreeList widgets that are loaded on demand, not all of the items are available with the initial load. Therefore, their corresponding HTML elements are not rendered. The click event has to be attached within the DataBound event handler. Check out the functionality of interest in the Dojo sample below:

https://dojo.telerik.com/oKIdeVid

 

Regards,
Tsvetomir
Progress Telerik

[Serwol]

Hi,

even with this solution, the custom functions defined in expand and collapse are still not fired.

[Tsvetomir]

Hi,

It is correct that the expand method does not automatically trigger the expand event. This is due to the fact that the event is attached to the initial expand/collapse button. There are two options that you might undertake:

1. Directly execute the custom logic right after expand() method is called.

            dataBound:function(e){
              $("#treelist").find("td:nth-child(1) .employee-name").click(function(e){
                var row = this.closest("tr");
                $("#treelist").getKendoTreeList().expand(row);
                alert("custom expand triggered!");
              })
            // custom logic goes here
            },

2. Manually trigger the expand method:

            dataBound:function(e){
              $("#treelist").find("td:nth-child(1) .employee-name").click(function(e){
                var row = this.closest("tr");
                $("#treelist").getKendoTreeList().expand(row);
                $("#treelist").getKendoTreeList().trigger("expand");
              })
            },

 

Regards,
Tsvetomir
Progress Telerik

[Serwol]

Hi,

thanks It's almost working, my custom expand function is now triggered but I'm passing to this function the sender and it's not passing when I manually trigger it.

expand: function(e){
            setTimeout(function(){
                applyLevelStyle(e.sender);
                expandMobile(e);
            }, 20);
        },

 

Thanks

[Tsvetomir]

Hi,

The "expand" event could be triggered with additional parameters as follows:

$("#treelist").getKendoTreeList().trigger("expand", $("#treelist").getKendoTreeList());

Give this a try and let me know in case further assistance is needed.

 

Regards,
Tsvetomir
Progress Telerik