This is a migrated thread and some comments may be shown as answers.

Expand / collapse on column click

11 Answers 79 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Serwol
Top achievements
Rank 1
Serwol asked on 05 Dec 2019, 11:09 AM

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

11 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 09 Dec 2019, 07:58 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Serwol
Top achievements
Rank 1
answered on 09 Dec 2019, 08:01 AM

Hi Tsvetomir,

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

0
Tsvetomir
Telerik team
answered on 09 Dec 2019, 03:48 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Serwol
Top achievements
Rank 1
answered on 12 Dec 2019, 09:21 AM

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 :

 

0
Tsvetomir
Telerik team
answered on 13 Dec 2019, 01:40 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Serwol
Top achievements
Rank 1
answered on 15 Dec 2019, 02:41 PM

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.

0
Tsvetomir
Telerik team
answered on 16 Dec 2019, 04:53 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Serwol
Top achievements
Rank 1
answered on 16 Dec 2019, 11:19 PM

Hi,

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

0
Tsvetomir
Telerik team
answered on 18 Dec 2019, 01:50 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Serwol
Top achievements
Rank 1
answered on 18 Dec 2019, 02:17 PM

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

0
Tsvetomir
Telerik team
answered on 19 Dec 2019, 02:02 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeList
Asked by
Serwol
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Serwol
Top achievements
Rank 1
Share this question
or