Slow Performance of Grid with text-Angular on IE 11

[Guy]

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

 

[Alex Hajigeorgieva]

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