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

KendoUI dynamic columns take time

3 Answers 33 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sujal
Top achievements
Rank 1
Sujal asked on 12 Dec 2015, 08:36 AM
I have about 80 to 100 columns. I am adding or removing columns by making hidden true or false. I also tried removing and adding column names from/to the columns field. They are all happening but at the cost of at least two seconds. Is there any solution?

3 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 15 Dec 2015, 09:21 AM
Hello,

The performance issues come from the large amount of DOM elements used to render the columns and rows. In your case with so many columns using paging or virtual scrolling is the recommended approach to decrease the time and improve the performance.

Additionally if this not helps would you share the Grid's configuration code as well, or ideally - a runnable sample project that we can examine? That will allow us to investigate further.

Regards,
Pavlina
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sujal
Top achievements
Rank 1
answered on 15 Dec 2015, 09:55 AM

Hello,

I am dumping all the data from API and making many of their hidden property values true. I have my own dropdown that shows all the columns, checking any of which makes its respective column's hidden value false or true, since that is how the requirement is. Furthermore, since I am directly populating 'dataSource.data' with all the columns and data at once, I didn't make use of virtualisation or server paging. The following is the grid's configuration:

vm.gridOptions = {
    groupable: true,
    sortable: true,
    resizable: true,
    reorderable: true,
    columnMenu: {
      columns: false
    },
    pageable: {
      info: false,
      pageSizes: true,
      input: true,
      numeric: false,
      messages: {
        page: "",
        itemsPerPage: "<span id='showRows'>rows</span>"
      }
    },
    scrollable: {
      virtual: true
    },
    dataSource: {
      pageSize: 10,
      serverPaging: false,
      serverSorting: false,
      serverFiltering: false,
    },
    filterable: {
      mode: "row"
    }
  };

 

Thanks for the response.

0
Pavlina
Telerik team
answered on 17 Dec 2015, 11:05 AM
Hi,

In the attached example you can show/hide columns using  ShipAddress column menu, however delay is not observed there most probably because the columns count is small:
http://dojo.telerik.com/IMEPo/7


Try to modify the dojo project linked above in order to replicate the problem you are facing and send it to us so we can advice you further.

Regards,
Pavlina
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Sujal
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Sujal
Top achievements
Rank 1
Share this question
or