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

Slow Performance of Grid with text-Angular on IE 11

1 Answer 73 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Guy
Top achievements
Rank 1
Guy asked on 31 May 2019, 10:03 PM

I am experiencing super slow performance on the Grid when trying to add a new record. This happens when the grid has more than 20 comments.Each row of the grid has an instance of the  custon text angular component (https://github.com/textAngular/textAngular). When adding, a new record is succesfully added to the datasource (javascript objects) but the Grid takes about 30s to refresh(to show in UI).

{
                        sortable: false,
                        pageable: false,
                        selectable: false,
                        scrollable: true,                        
                        height: 400,
                        dataSource: createDataSource(),
                        columns: [
                           {
                                field: 'Field1',
                                title: 'Field',
                                width: '80px',
                                template: "<input type= 'checkbox disabled='disabled' data-bind='checked: Cleared' #= Cleared ? checked='checked' : '' #/>"
                            },
                            {
                                field: 'Field2',
                                title: 'Field2',
                                width: '80px',                                
                                template: "<select class='k-dropdown minWidth40' id='dropdownlist'><option value='Yes'>Yes</option><option value='No'>No</option</select>";
                                }
                            },
                            {
                                field: 'Field3',
                                title: 'Field3',
                                width: '45%',
                                template: function (dataItem) {
                                    return ' <text-angular name="{{dataitem.id}}"
                      ta-toolbar="[['ul', 'ol', 'bold', 'italics', 'underline']]"
                      ta-toolbar-class="btn-toolbar toolbar-ext"
                      ta-toolbar-group-class="btn-group"
                      ta-toolbar-button-class="btn btn-default"
                      ta-toolbar-active-button-class="active"
                      placeholder="Enter 2000 characters or less"
                      ta-disabled="false"
                      ta-text-editor-class="form content"
                      ta-maxlength="2000"></text-angular>

                                           '
                                }
                            },
                           
                            {
                                field: 'IsHighlighted',
                                width: '4%',
                                headerTemplate: "<div uib-tooltip='Highlight' tooltip-animation='false' tooltip-append-to-body='true'>" +
                                    "<p class='noMargin noPadding'><span class='highlight-icon'><span></p>" +
                                    "<p class='noMargin noPadding'><input type='checkbox' name='allToggleHighlight' class='comment-row-toggle-field'/></p>" +
                                    "</div>",
                                template: function (dataItem) {
                                    return "<div>" +
                                        "<input type='checkbox' name='highlightToggle' " +
                                        "</div>";
                                }
                            },                            
                            {
                                field: 'Period',
                                title: 'Period',
                                width: '25%',
                                hidden: true
                            }
                        ]

Any sugesstions on improving the performance?

Thanks!

GN

 

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 04 Jun 2019, 12:29 PM
Hello, Guy,

Thank you for the provided code snippet. Our grid performance articles are available here:

- Best Practices: https://docs.telerik.com/kendo-ui/controls/data-management/grid/performance/best-practices
- Common Mistakes: https://docs.telerik.com/kendo-ui/controls/data-management/grid/performance/common-mistakes

From the provided code, I would advise you to remove the widgets template for columns Field2 and Field3 and only show them when the grid is in edit mode. This is one of the most frequent causes for poor performance. For you reference, we have a sample implementation of a third-party AngularJS editor in this knowledge base article:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-third-party-angularjs-template

Finally, it seems that the data source iis a function, it would be better to provide a data source instance, object or array:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/datasource 

Let us know how we can assist you further, perhaps a Dojo representing the issue with some mocked data could help us see any other underlying issues that are not obvious from the snippet so if you can send us a runnable example, it would be very helpful.

Kind Regards,
Alex Hajigeorgieva
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
Grid
Asked by
Guy
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or