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

Kendo Editor performance is very slow in IE if same page has kendo grid with more than 20 rows

3 Answers 110 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Muralidharan
Top achievements
Rank 1
Muralidharan asked on 18 May 2015, 03:30 PM
We are facing issue with editor performance in IE if we bind grid with more than 20 rows. In editor, enabled only server paging and sorting. Editor performance is very good if without grid data or with 5 rows.
We are reduced page size to 50 in IE, other browser is set to 100, but still we are facing performance issue in editor. 
Is there anything related to grid rows to affect the editor performance?
We are facing this issue in all of our clients, most of our clients are using IE. Because of this issue our clients are roll backing to old version. Please let me know the solution for this issue.

3 Answers, 1 is accepted

Sort by
0
Senthilraja
Top achievements
Rank 1
answered on 19 May 2015, 03:19 PM

We upgraded to Kendo UI v2015.1.429 and changed the control to mode to Inline editing to improve the performance in IE. The performance is good now. But control has some strange behavior when selecting font/size/color/background color, check the HTML and attachment

 <div class="btn-group">
    <ul style="margin-left: 13px; margin-top: -11px" class="top-right-toolbar">
        <li>
            <span style="display: inline-block;" class="dropdown orange open">
                <button data-toggle="dropdown" data-original-title="Note" class="dropdown-toggle btn-notify" id="btnNoteAction" style=""><i class="icon-comments"></i></button>
                <div style="width: 650px" class="dropdown-menu pull-left white" id="dvNoteContainer">
                    <div id="dvAddEditNoteContainer" style="">
                        <div class="well well-small">
                            <h4 style="margin: 0px; font-size: 12px; float: left; width: 150px">Add Note</h4>
                        </div>
                        <div style="padding: 10px" id="dvNoteHolder">
                            <div class="dvAddEditNote" id="dvAddEditNote" style="height: auto; overflow: hidden; font-size: 12px; white-space: normal;">
                                <div class="toolbar">
                                    <b>Select a predefined comment to append to end of the note</b>
                                    <select style="width: 100%" class="ddlPredefComments" id="ddlPredefComments">
                                        <option value="">Select</option>
                                    </select>
                                </div>                                
                                <div style="margin-top: 17px">
                                    <div contenteditable="true" style="height: 200px" class="txtAddNote k-widget k-editor k-editor-inline" id="txtAddNote" data-role="editor"></div>
                                </div>
                            </div>
                            <button style="width: auto; margin-top: 10px" class="btn mini" id="btnAddNoteToSummary" type="button"><i class="icon-plus" id="btnAddNoteToSummary"></i>Add</button>
                            <button style="width: auto;  margin-top: 10px; margin-left: 3px" class="btn mini" id="aClearNote" type="button"><i class="icon-eraser" id="aClearNote"></i>Clear</button>
                            <button style="width: auto; margin-top: 10px; margin-left: 3px" class="btn mini" id="close" type="button"><i class="icon-remove" id="close"></i>Cancel</button>
                        </div>
                    </div>
                </div>
            </span>
        </li>
    </ul>
</div>

 

0
Alex Gyoshev
Telerik team
answered on 20 May 2015, 02:00 PM

Hello Senthilraja,

The inline editor uses a floating toolbar, because this editing mode is good for editing pages directly. A non-floating toolbar is not supported at this time.

Instead of addressing the problem via an inline editor, consider initializing the editor on demand. This way, only one editor would be initialized on the page, and it would perform much better than any other scenario.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Senthilraja
Top achievements
Rank 1
answered on 21 May 2015, 07:11 AM

 I found the issue, bootstrap dropdown button bound with SPAN element, it should be DIV element.

Tags
Editor
Asked by
Muralidharan
Top achievements
Rank 1
Answers by
Senthilraja
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or