Disappear row on IE 11

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

    Posted 23 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. Has anyone idea how fix this problem?

    Thanks.

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 25 Jun 2015 Link to this post

    Hi,

    Could you confirm that you are using the latest Telerik.UI for ASP.NET AJAX version? If yes, send us the problematic code so we can test it locally and advice you further.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mariusz
    Mariusz avatar
    7 posts
    Member since:
    Jun 2015

    Posted 25 Jun 2015 in reply to Pavlina Link to this post

    Yes, I'm using the latest version 2015 Q1 (2015.1.429) but kendo ui (sorry for my mistake). Have I create new topic in kendo ui topic?

    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.}

    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 ).

  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 25 Jun 2015 Link to this post

    Hello,

    Yes, it would be better to create new ticket for Kendo UI.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Mariusz
    Mariusz avatar
    7 posts
    Member since:
    Jun 2015

    Posted 29 Jun 2015 Link to this post

    I create a new ticket, link to it.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017