Expand / collapse on column click

12 posts, 0 answers
  1. Serwol
    Serwol avatar
    6 posts
    Member since:
    Dec 2019

    Posted 05 Dec 2019 Link to this post

    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

  2. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 09 Dec 2019 Link to this post

    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.
  3. Serwol
    Serwol avatar
    6 posts
    Member since:
    Dec 2019

    Posted 09 Dec 2019 Link to this post

    Hi Tsvetomir,

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

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 09 Dec 2019 Link to this post

    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.
  5. Serwol
    Serwol avatar
    6 posts
    Member since:
    Dec 2019

    Posted 12 Dec 2019 Link to this post

    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 :

     

  6. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 13 Dec 2019 Link to this post

    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.
  7. Serwol
    Serwol avatar
    6 posts
    Member since:
    Dec 2019

    Posted 15 Dec 2019 Link to this post

    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.

  8. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 16 Dec 2019 Link to this post

    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.
  9. Serwol
    Serwol avatar
    6 posts
    Member since:
    Dec 2019

    Posted 16 Dec 2019 in reply to Tsvetomir Link to this post

    Hi,

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

  10. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 18 Dec 2019 Link to this post

    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.
  11. Serwol
    Serwol avatar
    6 posts
    Member since:
    Dec 2019

    Posted 18 Dec 2019 in reply to Tsvetomir Link to this post

    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

  12. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 19 Dec 2019 Link to this post

    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.
Back to Top