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.