TreeGrid with corrent number of the the pages

[Dimitar Karamfilov]

Hello,

I'm using TreeGrid version 24.2.4. I'm able to display data in my tree grid from external data source by providing an object like this:

{

result: [...], //15 records here

count: 256

}

My pageSize is 15 so I expect to see 256/15 pages in my paging but I see only one. I tried to create a 

PageSettingsModel object with the correct values but it doesn't work for me. Could you please give an example with the correct way of setting the data source of the tree grid? The only way I found is to provide all the data in advance which is not an option for me.

Best Regards,

Dimitar

[Pon Selva Jeganathan]

Hi Dimitar,

Before we start proceeding with your query, we request you to share with us the details below to provide you with the solution as early as possible. 

  

1. Detailed explanation of your requirement
2. Share video demo/ screenshot of your requirement.
3. Can you confirm if you want to customize the pager to display the total count/current page value instead of the image highlighted below?

Kindly get back to us for further assistance.

Regards,

Pon selva

[Dimitar Karamfilov]

Hello Pon selva,

1. I want to be able to show a tree grid with a pager for 256 records in total and 15 records per page. So that means  (256/15 pages) 17 pages plus 1 page with just one record. I want to lazy load the records per page when the user clicks on a specific page number. For example: if a user clicks on the 3rd page I skip 30 records (2*15) for the first 2 pages and take the next 15 records. Unfortunately, I can't get the paging to work. It shows just one page even when I provide an object with a count of 256. (see the screenshot attached) As I described the object that I pass as a data source looks like this:

{

result: [...], //15 records here

count: 256

}

as described in your documentation.

2. On the screenshot, you see what the pager looks like. It shows just one page because I provided 15 records only. I want my pager to have links to all 17 pages or at leased to depend on the total number of records.
3. I don't want to make any customizations. Just want to see all the links.

Attachment: pager_421e8b88.zip

[Vasu Perumal]

Hi Dimitar,

Thanks for the details provided. We can achieve this query by using the pageSizeMode property as ‘All’ where the parent and children are considered while rendering records for a page. By doing so, the records as per the pageSize will be rendered in exact.

Sample : https://stackblitz.com/edit/vq813j-kdwwqb?file=src%2FApp.vue

Documentation: Paging in Vue Treegrid component | Syncfusion

Upon checking up with the details provided, we need some more clarifications regarding your query. Kindly share any of the following details,

1. Which type of adaptor you have using to fetch data?

2. On intial load the total number of data count will only be 15 or it will be the complete datasource?

3. Whether you need to render only 15 records initally and the pager needs to render for 256 records?

4. If possible share the treegrid code definition you’ve been used.

We are happy to assist you further.

Regards,

Vasu P.

[Dimitar Karamfilov]

Hello Vasu,

Thank you for your suggestion, but setting pageSizeMode property to All will not fix my problem. I don't need the child records to be considered while rendering and creating the pager.

About the additional information you required:

1. I don't use any adaptor. My data comes from a web service and I send skip and take parameters to get the data from a specific page.

2. On initial load the total number of data count will be 15, not the complete datasource. If I provide on initial load the complete datasource the pager works as expected.

3. Yes, 15 records initially and the pager should show links for the other pages.

4. Not possible, sorry.

Greetings,

Dimitar

[Vasu Perumal]

Hi Dimitar Karamfilov,

Thank you for the details shared.

Based on your shared details, this requirement can be achievable through Url Adaptor of DataManager. For data processing in remote data where we can render the data based on the page size with result and count as the total number of records. Kindly refer to the below code snippet,

App.vue~

 

const Remotedatasource = new DataManager({

        url: 'https://localhost:7297/Home/Datasource',

        adaptor: new UrlAdaptor,

        updateUrl: https://localhost:7297/Home/Update,

        insertUrl: https://localhost:7297/Home/Insert,

        removeUrl: https://localhost:7297/Home/Delete,

        crossDomain: true,

        offline: false

    });

 

Controller.cs~

 

        public IActionResult DataSource([FromBody] DataManagerRequest value)

        {

            if (TreeData.tree.Count == 0)

                TreeData.GetTree();

            IEnumerable DataSource = TreeData.tree;

            

 

            DataOperations operation = new DataOperations();

            ...

           

            return value.RequiresCounts ? Json(new { result = DataSource, count = count // include the dataSource count(256)}) : Json(DataSource);

        }

 

The modifications have been done to the sample and attached. Kindly use it for you reference.

Documentation link:- https://ej2.syncfusion.com/vue/documentation/treegrid/editing/persisting-data-in-server#url-adaptor

Steps To Connect Backend and rendering code:

1. Download the sample and extract it.
2. Open back-end server in visual studio and run it using ISS Express.
3. Now you can be able to load the data from the server.

We are happy to assist you further.

Regards,

Vasu P.

Attachment: Treegrid_Sample_4f228e3.zip

[Dimitar Karamfilov]

Thank you!

[Getsy Edwin]

Dimitar,

Please feel free to contact us if you need any further assistance.