Questions on Kendo UI for jQuery Forum

5 answers

183 views

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.

TreeList

answered on 15 Jul 2015

1 answer

257 views

Focusing pager with keyboard.

Hi. I'm pretty new to Kendo UI. Now I'm trying to make UI accessible by keyboard. Is there a way to focus grid' pager with keyboard?

Thanks in advance.

Grid

answered on 15 Jul 2015

9 answers

776 views

User-editing of treenode text

After looking at the api it seems that treeview nodes are not editable inline by the user. A lot of tree implementations (the mac finder to name one) allow clicking the selected node to commence editing mode during which the user can edit the text of a tree node, as when you change the name of a file on the mac when viewing a directory as a tree.

The Dojo treeview also supports this, but not right out of the box...you have to set the nodes to be editable text controls.

Can this sort of trick be done with the Kendo UI treeview?

TreeView

answered on 14 Jul 2015

2 answers

130 views

Unselect/select item issue

I found this bug while I tested how MultiSelect works, when you select and unselect item several times it became unavailable (see image below)

MultiSelect

answered on 14 Jul 2015

2 answers

2.0K+ views

[Solved] Appending file to uploaded file list via jQuery

I have found how to initialize the upload widget with an initial list of files that were previously uploaded but I need to know how to append another file to that list from jQuery.

Some background, I have a button on a form that submits information to another remote system. That remote system will generate a file within 5-10 seconds and add it to my database records with the pertinent information. A polling process will begin waiting for the file to come from the remote system. Once the file has been added to the database, I need to add it to the Kendo upload widget along with the initial files that are already there.

I have the whole process working, and the polling process returns the filepath, filename, and filesize as required by the control but I cannot find any documentation on how to add to the file list after the widget is already initialized.

Upload

answered on 14 Jul 2015

1 answer

425 views

Formatting problem with Kendo Editor while pasting MS Word content.

We are facing an issue with formatting of MS Word content while pasting in Kendo Editor.

1. Kendo editor removes table border as shown in the attached file (Formatting Issue with Kendo Editor.png).

2. Font family of pasted contents get changed.

3. Font color of pasted contents get removed.

4. Font size of pasted contents get changed.

5. Background color of content get removed.

We are using kendo version 2015.2.624.545

The above scenarios can be reproduced by referring content from attached document "sample_word_content.docx".

Do we have any solution in place for this scenario?

Thanks,

Ramesh.

Editor

answered on 14 Jul 2015

1 answer

100 views

Filterable() doesn't work

I tried to use the Filterable() function in my grid to filter by multiple checkboxes, but I can't.

Following this example Grid / Filter Multi Checkboxes, when I add the function Filterable() to my column bound it doesn't appear the function Multi(). The available functions are Enabled(), Equals(), Extra(), GetHashCode(), GetType(), Messages(), Operators(), ToString() and UI().

Moreover, I want to filter first the rows with value "X" and after the rest of the rows ("Y" and "Z").

I'll appreciate any help.

Grid

answered on 14 Jul 2015

5 answers

547 views

How to prevent page scrolling when using keyboard navigation

Hi,

I am facing a problem that the page will be scrolled automatically.

This problem will occur at the occasion that Grid is in batch editing mode(editable: true) and keyboard navigation is active(navigatable: true).

When I focusing a cell, and then trying to lost focus by pressing enter key or tab key,

the gird will be scrolled to the top of the page.

This behavior is not friendly for my users since they have to find the cell when the edit finished,

but the keyboard navigation is very useful for them (such as pressing tab key to jump to the next cell).

So is there any way to prevent page scrolling without disabling keyboard navigation function?

I have created a sample to reproduce this behavior in attachment.

You can open the file located in <./demo/grid/editing-custom(preventScrolling).html> to check it.

Grid

answered on 14 Jul 2015

2 answers

191 views

[Solved] Different Grid row template for mobile and desktop View.

Hi, i need to implement kendo Grid for mobile and desktop view. The same data need to be showed in different way.

How data should looks like You can see in attached pictures.

So, my question. Is there any way to define different row template for mobile and desktop view to avoid creating two grids?

Grid

answered on 14 Jul 2015

5 answers

105 views

Editor Paste event fires but no data in e.html on IE 10 - works on chrome.

<div id="homeBanner" contenteditable="true" style="height: 160px; overflow: hidden; border: 1px dashed gray; padding: 0">
<img src="~/Content/TemplateImages/homeBanner1.png" />
</div>

IE 10:
// sample code
$("#homeBanner").kendoEditor({
paste: function (e) {
alert('[' + e.html + ']');
}
});

result: alert []

Chrome:
result: alert [pasted contents]

Editor

answered on 14 Jul 2015