1. Home
  2. Forum
  3. Blazor
  4. Add custon button at the end of tree

Add custon button at the end of tree

Hi support team,

I would like to add "Load more" button at the end of tree instead of use paging number as the image below



Is there any change to do it?

Or let say I will not use the default paging provided feature. How can I add my custom button at the end of tree like this to handle my custom load more feature? Of course, the button should be put inside tree grid, it appare at the end of tree when user scroll down to bottom.

I ask the question because we got the requirement like this, we have to have the button at the end of tree to load more data. If the current control does not fully support for it. I will do it manually, but I need to know how I can put the custom button at the end of tree

Many thanks,

Tho


5 Replies
JR Jagadesh Ram Raajkumar Syncfusion Team July 20, 2021 01:09 PM UTC

Hi Tho, 


Greetings from Syncfusion Support. 


Query: To have a button instead of pager component  

We have achieved your requirement using page template. Using this template, we can customize the entire pager component which loads at the bottom of the treegrid when AllowPaging is true.  In the below sample we have used the button component to move to the next page by using GoToPage method, which navigates to the given page number as its parameter.

Please refer to the below screenshot,

 



Kindly get back to us for further assistance.


Regards,
Jagadesh Ram 


NT Nguyen Tran Phuoc Tho July 20, 2021 03:57 PM UTC

Hi Ram,


Thanks for your proposal.

But it seems that we are missunderstand here, my expectation is the button should be placed right after the last row of treegird (not always in the bottom of treegrid)


Regards,

Tho


PS Pon Selva Jeganathan Syncfusion Team July 21, 2021 02:23 PM UTC

Hi Tho, 
 
Sorry for the inconvenience caused. 
 
Query: my expectation is the button should be placed right after the last row of treegird 
 
we have achieved your requirement using OnDataBound event and JSInterop to render the JavaScript button.  On button click, we have called C# method BtnClick to perform action in Server side.   
  
Refer the below code example.   
  
<SfTreeGrid DataSource="@TreeData" @ref="Grid" IdMapping="TaskId" ParentIdMapping="ParentId" AllowPaging="true"  TreeColumnIndex="1"> 
    <TreeGridEvents DataBound="DataBoundHandler" TValue="BusinessObject"></TreeGridEvents> 
    <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>>  
</SfTreeGrid> 
   
@code{  
    SfTreeGrid<BusinessObject> Grid { get; set; } 
    
 
    [JSInvokable("BtnClick")] 
    public async Task BtnClick() 
    { 
        //Here you can handle own logic 
    } 
 
    public void DataBoundHandler(object args) 
    { 
        var dotNetReference = DotNetObjectReference.Create(this); 
        Runtime.InvokeVoidAsync("BtnRender", dotNetReference, Grid.ID); 
    } 
 
 [renderbtn.js]  
 
var dotnetref 
function BtnRender(ref, Gridid) { 
    dotnetref = ref; 
    var element = document.getElementById(Gridid); 
    setTimeout(function () {  
        if (element.querySelector(".e-gridcontent .e-content .gridcontentbtn") == null) { 
            // get the Grid content  
            var gridcontent = element.querySelector(".e-gridcontent .e-content"); 
            // get the Grid content table  
            var contenttable = gridcontent.querySelector(".e-gridcontent .e-content table"); 
            // create the button  
            var button = document.createElement("button"); 
            button.addEventListener("click", Click); 
            button.innerText = "BUTTON"; 
            // bind the content table width to the button  
            //button.style.width = contenttable.getBoundingClientRect().width.toString() + "px"; 
            button.style.width =  "200px"; 
            button.classList.add("gridcontentbtn"); 
            gridcontent.appendChild(button);  // append the button below to the grid content table  
        }  
    }, 0) 
} 
function Click(args) {     
    dotnetref.invokeMethodAsync('BtnClick'); // call C# method from javascript function 
} 
 
  
Please refer the below sample, 
 
Refer our UG documentation from below   
 
Please refer to the below API documentation, 
  
If the above solution does not meet your requirement, kindly get back to us with the below requested details, 
 
  1. A video demonstration of the requirement with the exact scenario
  2. Complete TreeGrid rendering code
 
Regards, 
Pon selva 
  
 



NT Nguyen Tran Phuoc Tho July 23, 2021 10:55 AM UTC

Hi supporter,

With the second proposal of  Jagadesh Ram, is there any change to set pagesize is unlimited? (I can work around by set it to a billion records, but it should not be a good way)

I'm implementing that way but without setting the pagesize, it seems that the default pagesize is somehow is set.

Is there any official way to do it?

Regrads,

Tho


JR Jagadesh Ram Raajkumar Syncfusion Team July 27, 2021 11:52 AM UTC

Hi Tho, 
  
  
Thanks for your update. 

Query: To set pageSize to unlimited. 
 
By default the PageSize value is set to a default value( 12 records) unless it is explicitly provided. Based on your requirement, we suggest you to increase the PageSize by any desired number initially and change the PageSize in the button click to load more records dynamically. 

Please refer to the below code snippet, 
<SfTreeGrid DataSource="@TreeGridData" @ref="TreeGrid" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true"> 
        <TreeGridPageSettings PageSize="@PageSize"> 
               <Template> 
                       @{ 
<div class="e-pagertemplate" style="width:30px"> 
            <SfButton @ref="ToggleBtn" @onclick="onToggleClick" >Load More</SfButton> 
</div> 
                       } 
               </Template> 
        </TreeGridPageSettings> 
.............. 
 
</SfTreeGrid> 
 
@code{ 
        public int PageSize { get; set; }  
........ 
 
        private void onToggleClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) 
    { 
         
        this.PageSize += 20; 
        
    } 
 
 
 
} 
 
 
Please refer to the below API documentation, 
 
Kindly get back to us for further assistance. 
 
 
Regards,
Jagadesh Ram 


Loader.
Up arrow icon