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

4 posts, 0 answers
  1. Muralidharan
    Muralidharan avatar
    1 posts
    Member since:
    Apr 2012

    Posted 18 May 2015 Link to this post

    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.
  2. Senthilraja
    Senthilraja avatar
    2 posts
    Member since:
    Jul 2011

    Posted 19 May 2015 Link to this post

    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">
                <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 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>
                                    <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>
                                <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>


  3. Alex Gyoshev
    Alex Gyoshev avatar
    2515 posts

    Posted 20 May 2015 Link to this post

    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.

    Alex Gyoshev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Senthilraja
    Senthilraja avatar
    2 posts
    Member since:
    Jul 2011

    Posted 21 May 2015 in reply to Alex Gyoshev Link to this post

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

Back to Top