Questions on Kendo UI for jQuery Forum

3 answers

197 views

Multiple Panels

I have a need for two panels on a page (left & right). I want different breakpoints for each one. Currently the styles that get generated will apply to all panels on the page. Can it be changed to generate styles that apply to the individual panels.

ResponsivePanel

answered on 15 Jul 2015

1 answer

186 views

Tab click in Kendo editor

Hi,

When i click the tab button in editor, focus is going to the control to a button which is outside the editor. I want the focus/cursor should go to next tab position when i hit tab button.

Any suggestions/fix?

Thanks

R

Editor

answered on 15 Jul 2015

2 answers

93 views

Grid and PartialView

Hi, I need an example of using Grid in a partialview, all my attempts at trying to make it work have failed, please point me towards a full working example.

regards

Grid

answered on 15 Jul 2015

1 answer

121 views

Filter charts based on dates selection

Hello,

Can you please advice how to filter charts based on selected date.

Please see the attached image for reference.

Best Regards,

Devendra

Diagram

answered on 15 Jul 2015

1 answer

262 views

Changing charts based on drop down selection value

Hello,

We would like to show a different chart based on selected value from a drop down selected value.

Please see attached image.

When total Production changed to monthly we need to show different graph.

Best Regards,

Devendra

Diagram

answered on 15 Jul 2015

1 answer

165 views

Setting DateTime in Chrome results in wrong located time dsiplay

Hi,

there seems to be a difference in parsing date time in Chrome compared to other browsers.

It can be reproduced using the Telerik dojo with the Kendo DateTimePicker API Example.

When I modify the setValue function like this...

            var setValue = function () {
                   var date = new Date('2015-07-13T12:33:44');
                   datetimepicker.value(date);
                  };
in Chrome the DateTime Picker shows "7/13/2015 2:33 PM"

When doing the same with IE or Firefox, I'll get "7/13/2015 12:33 PM".

The date time format is what I get from the database. So I need to make this work anyhow.

Any ideas?

Regards

Timo

DatePicker

answered on 15 Jul 2015

1 answer

291 views

param options.value from DropDownList.virtual.valueMapper does not work on kendo ui 015.2.624

Hi,

When I updated my kendo ui lib from version v2015.1.429 to v2015.2.624 the DropDownList configuration, virtual.valueMapper, is not working anymore. To be more exact, the parameter option.value is not retrieving the selected value from the dropdown list anymore.

HTML:

Javascript:

$scope.fences =[...]

$scope.fenceHash = [...]

fenceOptions =
dataTextField: 'label'
dataValueField: 'id'
delay: 500
minLength: 3
filter: 'contains'
virtual:
valueMapper: (options) ->
options.success($scope.fenceHash[options.value].sort_index)
dataSource:
pageSize: 100

DropDownList

answered on 15 Jul 2015

1 answer

138 views

Json data not getting displayed in Kendo Grid

Hi,

I am unable to bind the kendo grid with the Json data which returns a list of items.

following is my controller code :

Function Display(<DataSourceRequest> request As DataSourceRequest) As ActionResult
Dim l As List(Of ServiceReference1.Cust_Detail) = New List(Of ServiceReference1.Cust_Detail)

Dim d As New ServiceReference1.Service1Client()

l = d.Display()

Return Json(l.ToDataSourceResult(request), JsonRequestBehavior.AllowGet)

End Function

Following is my View code :-

@Code
Html.Kendo().Grid(Of Test_MVC_kendo.Cust_Detail)() _
.Name("Grid") _
.Columns(Sub(c)
c.Bound(Function(p) p.Cust_ID)
c.Bound(Function(p) p.Cust_Name)
c.Bound(Function(p) p.Cust_City)
c.Bound(Function(p) p.Cust_Age)

End Sub) _
.Sortable() _
.Filterable() _
.Events(Function(e) e.DataBound("onDataBound")) _
.DataSource(Sub(d)
d.Ajax().Read(Function(read) read.Action("Show", "Customer")).Model(Sub(m)
m.Id(Function(i) i.Cust_ID)
End Sub) _
.Read(Function(read) read.Url("api/Customer").Type(HttpVerbs.Get)) _
.Create(Function(create) create.Url("api/Customer").Type(HttpVerbs.Post)) _
.Update(Function(update) update.Url("api/Customer").Type(HttpVerbs.Put)) _
.Destroy(Function(destroy) destroy.Url("api/Customer").Type(HttpVerbs.Delete))
End Sub) _
.Render()
End Code

Following is my Model class :-

Public Class Cust_Detail
<Required>
<Range(1, 10)>
Public Property Cust_ID As String
<Required>
Public Property Cust_Name As String
<Required>
Public Property Cust_Age As String
<Required>
Public Property Cust_City As String

End Class

Could anyone guide me please ,why i am unable to see the kendo grid bindinded

Grid

answered on 15 Jul 2015

5 answers

177 views

Disappear row on IE 11

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