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