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

[Muralidharan]

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.

[Senthilraja]

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>

 

[Alex Gyoshev]

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

 

 

[Senthilraja]

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