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.