Disappear row on IE 11

6 posts, 0 answers
  1. Mariusz
    Mariusz avatar
    7 posts
    Member since:
    Jun 2015

    Posted 29 Jun 2015 Link to this post

    Hello,

    I have a problem with show data in locked column on Internet Explorer 11. The problem appear for example when I expand some row or I added new to structure. When I use Chrome or Mozzila treelist behave good. I'm using the latest version 2015 Q1 (2015.1.429).

    001.//this function get datasource and answer for expand rows
    002.$getDataSource: function (opt) {
    003.            var ds = opt.dataSource.transport,
    004.                that = this;
    005. 
    006.            return new kendo.data.TreeListDataSource({
    007.                transport: {
    008.                    read: function (options) {
    009.                        var id = options.data.id,
    010.                            data = that.$get.call(that, id);
    011.                        if (isNullOrEmpty(data)) {
    012.                            var params;
    013.                            if (ds.expand.data && isFunction(ds.expand.data)) {
    014.                                params = ds.expand.data.call(that);
    015.                            } else if (ds.expand.data && !isFunction(ds.expand.data)) {
    016.                                params = ds.expand.data;
    017.                            } else {
    018.                                params = { Model: { Main: { Id: id } } };
    019.                            }
    020. 
    021.                            if (ds.expand.parentId) {
    022.                                params.Model[ds.expand.parentId] = id;
    023.                                params[ds.expand.parentId] = id;
    024.                            }
    025. 
    026.                            $.ajax({
    027.                                type: ds.expand.type || 'post',
    028.                                url: ds.expand.url,
    029.                                contentType: 'application/json',
    030.                                data: JSON.stringify($.extend(params, { currency: $currency.get() ? $currency.get().Value : 1 })),
    031.                                success: function (response) {
    032.                                    if (that._process && isFunction(that._process)) {
    033.                                        response = that._process.call(that, response);
    034.                                    }
    035. 
    036.                                    options.success(response || []);
    037.                                }
    038.                            });
    039.                        } else {
    040.                            options.success(data);
    041.                        }
    042.                    }
    043.                },
    044.                schema: {
    045.                    model: {
    046.                        id: 'id',
    047.                        fields: {
    048.                            id: { type: 'string', nullable: false },
    049.                            parentId: { type: 'string', nullable: true }
    050.                        }
    051.                    }
    052.                }
    053.            });
    054. 
    055.        },
    056.//this render Treelist with multi level header
    057.$render: function (element) {
    058.            var top = document.createElement('div'),
    059.                header = document.createElement('div'),
    060.                headerLocked = document.createElement('div'),
    061.                headerWrap = document.createElement('div'),
    062.                tableLocked = document.createElement('table'),
    063.                tableWrap = document.createElement('table'),
    064.                theadLocked = document.createElement('thead'),
    065.                theadWrap = document.createElement('thead'),
    066.                columns = this._$flatColumns.columns,
    067.                headers = this._$flatColumns.headers,
    068.                level = 0,
    069.                k = 0;
    070. 
    071.            top.className = 'k-treelist k-grid k-widget k-reorderable k-grid-lockedcolumns treegrid';
    072. 
    073.            header.className = 'k-grid-header';
    074.            headerLocked.className = 'k-grid-header-locked';
    075.            headerWrap.className = 'k-grid-header-wrap';
    076.            tableLocked.setAttribute('role', 'grid');
    077.            tableWrap.setAttribute('role', 'grid');
    078.            theadLocked.setAttribute('role', 'rowgroup');
    079.            theadWrap.setAttribute('role', 'rowgroup');
    080. 
    081.            tableWrap.style.tableLayout = 'fixed';
    082.            tableWrap.style.width = '100%';
    083. 
    084.            $(headerLocked).css('border-right', '1px solid #616161').width($('.k-grid-header-locked').width())
    085.            $(headerWrap).width($('.k-grid-header-wrap').width());
    086. 
    087.            top.appendChild(header);
    088. 
    089.            header.appendChild(headerLocked);
    090.            header.appendChild(headerWrap);
    091. 
    092.            headerLocked.appendChild(tableLocked);
    093.            headerWrap.appendChild(tableWrap);
    094. 
    095.            tableLocked.appendChild(theadLocked);
    096.            tableWrap.appendChild(theadWrap);
    097. 
    098.            $(tableLocked).prepend($(element).find('.k-grid-header-locked').find('colgroup').first().clone());
    099.            $(tableWrap).prepend($(element).find('.k-grid-header-wrap').last().find('colgroup').first().clone());
    100.            var col = $(tableWrap).find('colgroup').find('col').first();
    101.            //col.css('width', col.width() + 2);
    102. 
    103.            this._$flatColumns.columns = $.extend({}, columns);
    104. 
    105.            $.each(headers, function (i, e) {
    106.                level = level > e.index ? level : e.index;
    107.            });
    108. 
    109.            for (k; k <= level; k++) {
    110.                var trLocked = document.createElement('tr'),
    111.                    trWrap = document.createElement('tr'),
    112.                    _headers = $.grep(headers, function (e) { return e.index == k; }),
    113.                    _columns = $.grep(columns, function (e) { return e.index == k; });
    114. 
    115.                trLocked.setAttribute('role', 'row');
    116.                trLocked.style.height = '43px';
    117. 
    118.                trWrap.setAttribute('role', 'row');
    119.                trWrap.style.height = '43px';
    120. 
    121.                theadLocked.appendChild(trLocked);
    122.                theadWrap.appendChild(trWrap);
    123. 
    124.                $.each(_headers, function (i, e) {
    125.                    var th = document.createElement('th');
    126.                    th.textContent = e.title;
    127.                    th.className = 'k-header';
    128.                    th.setAttribute('role', 'columnheader');
    129. 
    130.                    if (e.headerField) {
    131.                        th.setAttribute('data-header', e.headerField);
    132.                    }
    133. 
    134.                    if (e.colspan) {
    135.                        th.colSpan = e.colspan;
    136.                        th.setAttribute('data-colspan', e.colspan);
    137.                    }
    138. 
    139.                    if (e.headerAttributes) {
    140.                        $(th).attr('style', e.headerAttributes.style);
    141.                    }
    142. 
    143.                    if (e.locked) {
    144.                        trLocked.appendChild(th);
    145.                    } else {
    146.                        trWrap.appendChild(th);
    147.                    }
    148.                });
    149.            }
    150. 
    151.            $(top).insertBefore(element);
    152. 
    153.            $(element).find('.k-grid-header-wrap').last().scroll(function () {
    154.                $(headerWrap).scrollLeft($(this).scrollLeft());
    155.            });
    156.        },
    157.//this is my function to refresh treelist -> p is position Treelist
    158.$refresh: function (p) {
    159.            var tree = $(this.element[0]).data('kendoTreeList'),
    160.                that = this,
    161.                data = tree.dataSource.data(),
    162.                expanded = [],
    163.                _data = [];
    164. 
    165.            kendo.ui.progress($('#inner-content'), true);
    166.            expanded = $.grep(data, function (e) { return e.expanded; });
    167. 
    168.            $.ajax({
    169.                type: tree.$ds.main.type || 'get',
    170.                url: tree.$ds.main.url,
    171.                data: $.extend(p, { currency: $currency.get() ? $currency.get().Value : 1 }) || { currency: $currency.get() ? $currency.get().Value : 1 },
    172.                success: function (plans) {
    173.                    that.$data = plans;
    174.                    _data = plans;
    175. 
    176.                    var ajaxCalls = [],
    177.                        ids = $.grep(expanded, function (e) {
    178.                            return e.hasTaskDataOrBag;
    179.                        }).map(function (e) { return e.id.numbers(); });
    180. 
    181.                    $.each(ids, function (i, id) {
    182. 
    183.                        var params = tree.$ds.expand.data || { Main: { Id: id } };
    184. 
    185.                        if (params && tree.$ds.expand.parentId) {
    186.                            params.Model[tree.$ds.expand.parentId] = id;
    187.                        }
    188. 
    189.                        ajaxCalls.push(
    190.                            $.ajax({
    191.                                type: 'post',
    192.                                url: tree.$ds.expand.url,
    193.                                contentType: 'application/json',
    194.                                data: JSON.stringify($.extend({ Model: { Main: { Id: id } } }, { currency: $currency.get() ? $currency.get().Value : 1 })),
    195.                                success: function (_plans) {
    196.                                    if (ui.TreeList.fn._process && isFunction(ui.TreeList.fn._process)) {
    197.                                        _plans = ui.TreeList.fn._process.call(that, _plans);
    198.                                    }
    199.                                    _data = _data.concat(_plans);
    200.                                }
    201.                            })
    202.                        );
    203.                    });
    204. 
    205.                    $.when.apply($, ajaxCalls).then(function () {
    206.                        _data = _data.map(function (e) {
    207.                            if (expanded.contains(e.id, 'id')) {
    208.                                e.expanded = true;
    209.                            }
    210.                            return e;
    211.                        });
    212. 
    213.                        tree.dataSource.data(_data);
    214.                        kendo.ui.progress($('#inner-content'), false);
    215.                    });
    216.                }
    217.            });
    218.        }
    219.    });

    Has anyone idea how fix this problem?

    I've noticed another problem, in version 2014 Q3 combobox doesn't scroll top after read new data, in version 2015 Q1 always after read scroll is on top. I need the same solution  in version 2015 Q1 as this (topic from forum ).

    Thanks.

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 01 Jul 2015 Link to this post

    Hello Mariusz,

     

    We are not aware of such issue neither we can reproduce it on the online demos. We will need a runnable example or dojo which demonstrates the behavior in order to assist you further.

     

    Regarding the ComboBox behavior in question please open a separate ticket as it is not related to the main theme in this thread.

     

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Mariusz
    Mariusz avatar
    7 posts
    Member since:
    Jun 2015

    Posted 01 Jul 2015 in reply to Nikolay Rusev Link to this post

    You can see solution as this link.

    Instruction to redo error:
    - Expand row with ID 1
    - Expand row with ID 2
    - Expand row with ID 4
    - Select row with ID 4
    - Click „Add” buton
    - Click „Refresh” buton
    - The last row (Position 1.1.3) will no longer show its ID.

     Thanks.

  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 03 Jul 2015 Link to this post

    Hello Mariusz,

     

    The widget must have height set when using frozen columns. It is required when frozen columns are enabled.

     

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Mariusz
    Mariusz avatar
    7 posts
    Member since:
    Jun 2015

    Posted 10 Jul 2015 in reply to Nikolay Rusev Link to this post

    Hello Nikolay,

    Thanks for answer, but I've set height and the problem still appear. I've noticed that the problem disappear when I remove template from column.

    Regards 

    Mariusz

  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 Jul 2015 Link to this post

    Hello Mariusz,

    I could not reproduce the problem in this reduced example. Please note that custom widgets are not supported, so please reproduce the problem with the official widget.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready