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.
4 Answers, 1 is accepted
0
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
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
0
Mariusz
Top achievements
Rank 1
answered on 25 Jun 2015, 07:20 AM
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 ).
0
Hello,
Yes, it would be better to create new ticket for Kendo UI.
Regards,
Pavlina
Telerik
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
0
Mariusz
Top achievements
Rank 1
answered on 29 Jun 2015, 07:54 AM
I create a new ticket, link to it.