Questions on Kendo UI for jQuery Forum

5 answers

564 views

[Solved] Line change color in group

Hi,

I would like each line had its specific color .

Mi Result consult:

$(id).kendoChart({

dataSource: {

transport: {

read: {

url: "/Faturamento/GetFaturamentoGrupoGrafico?" + form,

dataType: "json"

}

},

sort: {

field: "Ano",

dir: "asc",

},

group: {

field: "Grupo",

},

theme: $(document).data("kendoSkin") || "blueopal",

legend: {

},

seriesDefaults: {

type: "line"

},

series: [{

field: "Qtde",

}],

categoryAxis: {

field: "Ano",

},

valueAxis: {

labels: {

format: "N0"

},

// majorUnit: 10000

},

tooltip: {

visible: true,

template: "#= series.name #: #=kendo.format('{0:N0}', value) #"

}

});

Charts

answered on 15 Jan 2016

4 answers

390 views

Changing Count Display

I've used the AJAX tools in the past, but I'm new to the Kendo controls.

I have a ListView with a list of employees. At the bottom of the view I see my page count and the record counts. Currently it says, "1 - 15 of 292 items" but I'd like to change it. How can I format this to something different?

ListView

answered on 15 Jan 2016

1 answer

118 views

active class binding and css3 transitions

Hello,

I am using the class binding to set a list item's class to active upon click. I also have set a transition animation to the styles to have a checkmark zoom in and out when the class is added/removed. The class binding works as expected (adding the class name when the item is clicked on) and the animation works great if i set up a function using the jquery click event. However, with the kendo mvvm class bindings the css3 transition property does not work. Please advise.

MVVM

answered on 15 Jan 2016

3 answers

286 views

Is it possible to restyle tabstrip horizontal scroll buttons?

I am desperate to customize the buttons that are automatically generated to allow scrolling when tabstrip content is overflow.

Is this possible???

I believe its possible to change the actual arrow icons but the margin on the left and right of the <ul> which contains the tabstrip titles always default to 38px and 41px - WHY??? :(

Any help is greatly appreciated!!!

TabStrip

answered on 15 Jan 2016

3 answers

264 views

Custom Widget as Grid Editor

Hi,

I'm looking at using a combination of input box, LIstview and maybe a couple of other controls as an editor in the Grid. I've got everything working, but rather than just appending the listview to the widget's HTML, I'm wondering if it's possible to put it in the k-container (ala using the combobox as a custom editor) so the grid isn't resized on editing.

General Discussions

answered on 15 Jan 2016

1 answer

241 views

[Solved] Cascade Filter Hydrated to Object on Server Side

In the Cascading ComboBoxes docs, it shows the parameters of the request will be:

filter[logic]: and

filter[filters][0][field]: parentID

filter[filters][0][operator]: eq

filter[filters][0][value]:

But nowhere does it say what the data structure on the server side should be. I've got MVC Complete (MVC 4, VS2010, Kendo v2015.3.1111) and tried the DataSource object (with attribute), but no luck. Any suggestions?

I even went to far as to replicate what I think would be the data structure on the server, but that didn't work either. This is what I tried:

public class DropDownListFilterItem

{

public string Field { get; set; }

public string Operator { get; set; }

public string Value { get; set; }

}

public class DropDownListFilter

{

public string Logic { get; set; }

public List<DropDownListFilterItem> Filters { get; set; }

}

and the single argument to the Controller Action was of type DropDownListFilter.

Thanks,

--Ed

DropDownList

answered on 15 Jan 2016

3 answers

405 views

[Solved] Validator stops displaying after .hideMessages called

Hi

We have a validator on our main view that works fine until we open a search modal.

Just before the modal is hidden we do a hide messages. After returning focus to the main view the validator is still being run (can see in debug) but messages aren't displaying. Have a good trawl around but can't find anything relevant in Forums.

Would appreciate any suggestions?

Commenting .hideMessages() out fixes issues but has undesirable user experience, hence it's addition...

Thanks

Rob

// reset any validation warnings

$("body").kendoValidator().data("kendoValidator").hideMessages();

// close the modal

$("#myModal").modal("hide");

Validation

answered on 14 Jan 2016

1 answer

1.1K+ views

grid shown within modal window doesn't draw all the way until interacted with

Sorry for the title...I didn't know what to use for the title while keeping it easy to understand.

So as the title suggests, I have a kendo grid within a modal kendo window. The grid technically "works"...however when the data is not cached, the grid shows up in half of the modal window. If the data is cached, it shows up in the whole modal window as expected. Not sure how to fix this...any suggestions? Here is the source code for the relevant controllers \ views \ models...along with a couple screen shots to see what I'm talking about. In the attached "before" PNG you can see where the grid only fills half of the modal window. After I click on the grid...it then expands to fill the rest of the modal as shown in the "after" PNG.

Shared Layout:

001.<!DOCTYPE html>

002.<html>

003.<head>

004. <meta charset="utf-8" />

005. <meta name="viewport" content="width=device-width, initial-scale=1.0">

006. <title>@ViewBag.Title</title>

007. @Styles.Render("~/Content/css")

008. @Scripts.Render("~/bundles/modernizr")

009.

010. 

011. @Scripts.Render("~/bundles/jquery")

012. <link href="@Url.Content("~/Content/kendo/2015.2.902/kendo.common.min.css")" rel="stylesheet" type="text/css" />

013. <link href="@Url.Content("~/Content/kendo/2015.2.902/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />

014. <link href="@Url.Content("~/Content/kendo/2015.2.902/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />

015. <link href="@Url.Content("~/Content/kendo/2015.2.902/kendo.default.min.css")" rel="stylesheet" type="text/css" />

016. <link href="@Url.Content("~/Content/kendo/2015.2.902/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />

017. <script src="@Url.Content("~/Scripts/kendo/2015.2.902/jquery.min.js")"></script>

018. <script src="@Url.Content("~/Scripts/kendo/2015.2.902/jszip.min.js")"></script>

019. <script src="@Url.Content("~/Scripts/kendo/2015.2.902/kendo.all.min.js")"></script>

020. <script src="@Url.Content("~/Scripts/kendo/2015.2.902/kendo.aspnetmvc.min.js")"></script>

021. <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

022.

023. <script>

024. function Sleep(milliSeconds)

025. {

026. var startTime = new Date().getTime();

027.

028. while (new Date().getTime() < startTime + milliSeconds);

029. }

030. </script>

031. <style>

032. .Heading

033. {

034. text-align: left;

035. width: 1500px;

036. margin: auto;

037. }

038. .KendoTabStrip

039. {

040. height: 800px;

041. margin: auto auto 20px auto;

042. width: 1500px;

043. }

044. .KendoGrid

045. {

046. height: 800px;

047. margin: auto auto 20px auto;

048. width: 1500px;

049. }

050. .KendoGridInTab

051. {

052. height: 690px;

053. }

054. .KendoModalGrid

055. {

056. height: 780px;

057. margin: 10px 10px 10px 10px;

058. width: 1080px;

059. }

060. .KendoModalWindow

061. {

062. height: 800px;

063. margin: auto;

064. width: 1100px;

065. }

066. </style>

067.</head>

068.<body>

069. <div class="navbar navbar-inverse navbar-fixed-top" style="text-align: left; width: 1720px; margin: auto">

070. <div class="container">

071. <div class="navbar-header">

072. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

073. <span class="icon-bar"></span>

074. <span class="icon-bar"></span>

075. <span class="icon-bar"></span>

076. </button>

077. <div class="navbar-brand">Phynet Reports</div>

078. </div>

079. <div class="navbar-collapse collapse">

080. <ul class="nav navbar-nav">

081. <li class="@Html.IsActive("DataMaintenance", "DataMaintenanceView")">

082. @Html.ActionLink("Data Maintenance", "DataMaintenanceView", "DataMaintenance")

083. </li>

084. <li class="@Html.IsActive("ThirdPartyOpticsGoldList", "ThirdPartyOpticsGoldListView")">

085. @Html.ActionLink("Transceiver Gold List", "ThirdPartyOpticsGoldListView", "ThirdPartyOpticsGoldList")

086. </li>

087. <li class="@Html.IsActive("TransceiverSwitchQualificationList", "TransceiverSwitchQualificationListView")">

088.

@Html.ActionLink("Transceiver Switch Qualification List", "TransceiverSwitchQualificationListView", "TransceiverSwitchQualificationList")

089. </li>

090. </ul>

091. </div>

092. </div>

093. </div>

094. <div style="margin: 10px 100px 10px 100px; border: solid">

095. @RenderBody()

096. </div>

097.

098. @Scripts.Render("~/bundles/bootstrap")

099. @RenderSection("scripts", required: false)

100.</body>

101.</html>

Views:

001.@using PhynetReporting

002.

003.@{

004. ViewBag.Title = "Gold List - 3rd Party Optics";

005. Layout = "~/Views/Shared/_Layout.cshtml";

006.}

007.

008.<script>

009. function grid_error(e)

010. {

011. if (e.errors)

012. {

013. var message = "There are some errors:\n";

014.

015. // Create a message containing all errors.

016. $.each(e.errors, function (key, value)

017. {

018. if ('errors' in value)

019. {

020. $.each(value.errors, function ()

021. {

022. message += this + "\n";

023. });

024. }

025. });

026.

027. // Display the message

028. alert(message);

029.

030. // Cancel the changes

031. var grid = $("#ThirdPartyOpticsGoldListGrid").data("kendoGrid");

032. grid.cancelChanges();

033. }

034. }

035.

036. function GetTransceiverBreakoutModeFilter(element)

037. {

038. element.kendoComboBox(

039. {

040. dataSource:

041. {

042. schema:

043. {

044. data: "Data",

045. total: "Total"

046. },

047. transport:

048. {

049. read: '@Url.Action("GetTransceiverBreakoutModesForFiltering", "ThirdPartyOpticsGoldList")'

050. },

051. type: "aspnetmvc-ajax"

052. }

053. });

054. }

055.

056. function GetTransceiverCableLengthFilter(element)

057. {

058. element.kendoComboBox(

059. {

060. dataSource:

061. {

062. schema:

063. {

064. data: "Data",

065. total: "Total"

066. },

067. transport:

068. {

069. read: '@Url.Action("GetTransceiverCableLengthsForFiltering", "ThirdPartyOpticsGoldList")'

070. },

071. type: "aspnetmvc-ajax"

072. }

073. });

074. }

075.

076. function GetTransceiverCompatibilityFilter(element)

077. {

078. element.kendoComboBox(

079. {

080. dataSource:

081. {

082. schema:

083. {

084. data: "Data",

085. total: "Total"

086. },

087. transport:

088. {

089. read: '@Url.Action("GetTransceiverCompatibilitiesForFiltering", "ThirdPartyOpticsGoldList")'

090. },

091. type: "aspnetmvc-ajax"

092. }

093. });

094. }

095.

096. function GetTransceiverFormFactorFilter(element)

097. {

098. element.kendoComboBox(

099. {

100. dataSource:

101. {

102. schema:

103. {

104. data: "Data",

105. total: "Total"

106. },

107. transport:

108. {

109. read: '@Url.Action("GetTransceiverFormFactorsForFiltering", "ThirdPartyOpticsGoldList")'

110. },

111. type: "aspnetmvc-ajax"

112. }

113. });

114. }

115.

116. function GetTransceiverLifecycleStatusFilter(element)

117. {

118. element.kendoComboBox(

119. {

120. dataSource:

121. {

122. schema:

123. {

124. data: "Data",

125. total: "Total"

126. },

127. transport:

128. {

129. read: '@Url.Action("GetTransceiverLifecycleStatusForFiltering", "ThirdPartyOpticsGoldList")'

130. },

131. type: "aspnetmvc-ajax"

132. }

133. });

134. }

135.

136. function GetTransceiverRevisionFilter(element)

137. {

138. element.kendoComboBox(

139. {

140. dataSource:

141. {

142. schema:

143. {

144. data: "Data",

145. total: "Total"

146. },

147. transport:

148. {

149. read: '@Url.Action("GetTransceiverRevisionsForFiltering", "ThirdPartyOpticsGoldList")'

150. },

151. type: "aspnetmvc-ajax"

152. }

153. });

154. }

155.

156. function GetTransceiverSupplierFilter(element)

157. {

158. element.kendoComboBox(

159. {

160. dataSource:

161. {

162. schema:

163. {

164. data: "Data",

165. total: "Total"

166. },

167. transport:

168. {

169. read: '@Url.Action("GetTransceiverSuppliersForFiltering", "ThirdPartyOpticsGoldList")'

170. },

171. type: "aspnetmvc-ajax"

172. }

173. });

174. }

175.

176. $(function ()

177. {

178. $('#ThirdPartyOpticsGoldListGrid').on('click', '.tpoglChkBx', function ()

179. {

180. var checked = $(this).is(':checked');

181. var grid = $('#ThirdPartyOpticsGoldListGrid').data().kendoGrid;

182. var dataItem = grid.dataItem($(this).closest('tr'));

183. dataItem.set('Selected', checked);

184. })

185. })

186.

187. function tpoglCheckAll(e)

188. {

189. var state = $(e).is(':checked');

190. var grid = $('#ThirdPartyOpticsGoldListGrid').data().kendoGrid;

191.

192. $.each(grid.dataSource.view(), function ()

193. {

194. if (this['Selected'] != state)

195. this.dirty = true;

196. this['Selected'] = state;

197. });

198.

199. grid.refresh();

200. }

201.

202. function ShowSwitchesModal(e)

203. {

204. var switchesModalWindow = $("#SwitchesModalWindow").data("kendoWindow");

205. switchesModalWindow.open().center(true);

206. }

207.

208. function SwitchesModalCloseEvent(e)

209. {

210. var switchesModalWindow = $("#SwitchesModalWindow").data("kendoWindow");

211. switchesModalWindow.close();

212. }

213.</script>

214.

215.<div class="Heading">

216. <br />

217. <br />

218. <br />

219. <h2>Gold List - 3rd Party Optics</h2>

220. <br />

221. <br />

222.</div>

223.

224.<div>

225. @{ var columnWidth = 170; }

226.

227. @(Html.Kendo().Grid<ThirdPartyOpticsGoldListModel>()

228. .Columns(c =>

229. {

230. c.Template(@<text></text>)

231. .ClientTemplate("<input type='checkbox' #= Selected ? checked='checked':'' # class='tpoglChkBx' />")

232. .HeaderTemplate("<input type='checkbox' id='tpoglMasterCheckBox' onclick='tpoglCheckAll(this)'/>")

233. .Width(30);

234. c.Bound(tpogl => tpogl.DisplayName)

235. .Title("Title")

236. .Width(columnWidth);

237. c.Bound(tpogl => tpogl.TransceiverCompatibilityName)

238. .Filterable(f => f.UI("GetTransceiverCompatibilityFilter"))

239. .Title("Compatibility Type")

240. .Width(columnWidth);

241. c.Bound(tpogl => tpogl.TransceiverFormFactorName)

242. .Filterable(f => f.UI("GetTransceiverFormFactorFilter"))

243. .Title("Form Factor")

244. .Width(columnWidth);

245. c.Bound(tpogl => tpogl.SupplierName)

246. .Filterable(f => f.UI("GetTransceiverSupplierFilter"))

247. .Title("Vendor")

248. .Width(columnWidth);

249. c.Bound(tpogl => tpogl.Revision)

250. .Filterable(f => f.UI("GetTransceiverRevisionFilter"))

251. .Title("Firmware Revision")

252. .Width(columnWidth);

253. c.Bound(tpogl => tpogl.BreakoutMode)

254. .ClientTemplate("#:BreakoutMode#")

255. .Filterable(f => f.UI("GetTransceiverBreakoutModeFilter"))

256. .Title("Breakout Mode")

257. .Width(columnWidth);

258. c.Bound(tpogl => tpogl.CableLength)

259. .Filterable(f => f.UI("GetTransceiverCableLengthFilter"))

260. .Title("Cable Length")

261. .Width(columnWidth);

262. c.Bound(tpogl => tpogl.TransceiverLifecycleStatusName)

263. .Filterable(f => f.UI("GetTransceiverLifecycleStatusFilter"))

264. .Title("Status")

265. .Width(columnWidth);

266. })

267. .DataSource(ds => ds

268. .Ajax()

269. .Events(e => e.Error("grid_error"))

270. .Model(m =>

271. {

272. m.Id(tpogl => tpogl.ID);

273. m.Field(tpogl => tpogl.Selected).Editable(true);

274. m.Field(tpogl => tpogl.ID).Editable(false);

275. m.Field(tpogl => tpogl.DisplayName).Editable(false);

276. m.Field(tpogl => tpogl.TransceiverCompatibilityName).Editable(false);

277. m.Field(tpogl => tpogl.TransceiverFormFactorName).Editable(false);

278. m.Field(tpogl => tpogl.SupplierName).Editable(false);

279. m.Field(tpogl => tpogl.Revision).Editable(false);

280. m.Field(tpogl => tpogl.BreakoutMode).Editable(false);

281. m.Field(tpogl => tpogl.CableLength).Editable(false);

282. m.Field(tpogl => tpogl.TransceiverLifecycleStatusName).Editable(false);

283. })

284. .PageSize(30)

285. .Read(r => r.Action("GetThirdPartyOpticsGoldListItems", "ThirdPartyOpticsGoldList"))

286. .ServerOperation(false))

287. .Editable(e => e.Mode(GridEditMode.InCell))

288. .Excel(e => e

289. .AllPages(true)

290. .FileName("ThirdPartyOpticsGoldListReport.xlsx")

291. .Filterable(true)

292. .ProxyURL(Url.Action("ExcelExportSave", "DataMaintenance")))

293. .Filterable(f => f

294. .Extra(false)

295. .Operators(o => o

296. .ForString(s => s

297. .Clear()

298. .Contains("Contains")

299. .StartsWith("Starts With")

300. .IsEqualTo("==")

301. .IsNotEqualTo("!="))))

302. .Groupable()

303. .HtmlAttributes(new { @class = "KendoGrid" })

304. .Name("ThirdPartyOpticsGoldListGrid")

305. .Navigatable()

306. .Pageable(p => p.PageSizes(new int[] { 10, 20, 30, 50, 100 }))

307. .Reorderable(r => r.Columns(true))

308. .Resizable(r => r.Columns(true))

309. .Scrollable()

310. .Selectable(s =>

311. {

312. s.Type(GridSelectionType.Row);

313. s.Mode(GridSelectionMode.Multiple);

314. })

315. .Sortable()

316. .ToolBar(t =>

317. {

318. t.Template(

319. @<text>

320. <table>

321. <tr>

322. <td width="200px;" style="border: none">

323. @item.SaveButton()

324. </td>

325. <td width="80px;" style="border: none">

326. <label>Bulk commands:</label>

327. </td>

328. <td width="130px" style="border: none">

329. <a class='k-button k-button-icontext' onclick='ShowSwitchesModal()' href='#'>Switch Qualification Testing</a>

330. </td>

331. <td style="border: none">

332. <a class="k-button k-button-icontext k-grid-excel" href="#" style="float: right"><span class="k-icon k-i-excel"></span>Export To Excel</a>

333. </td>

334. </tr>

335. </table>

336. </text>);

337. }))

338.</div>

339.

340.<div>

341. @(Html.Kendo().Window()

342. .Actions(a => a.Close())

343. .Draggable(true)

344. .HtmlAttributes(new { @class = "KendoModalWindow" })

345. .LoadContentFrom("SwitchModalView", "Switch")

346. .Modal(true)

347. .Name("SwitchesModalWindow")

348. .Resizable()

349. .Title("Switches")

350. .Visible(false))

351.</div>

352.

353.<script>

354. $(document).ready(function ()

355. {

356. document.getElementById('SwitchesModalWindow').style.height = (screen.height - 400).toString() + 'px';

357. document.getElementById('SwitchesModalWindow').style.width = (screen.width - 400).toString() + 'px';

358. });

359.</script>

001.@using PhynetReporting

002.

003.@{

004. ViewBag.Title = "Switch Selection";

005. Layout = null;

006.}

007.

008.<script>

009. function grid_error(e)

010. {

011. if (e.errors)

012. {

013. var message = "There are some errors:\n";

014.

015. // Create a message containing all errors.

016. $.each(e.errors, function (key, value)

017. {

018. if ('errors' in value)

019. {

020. $.each(value.errors, function ()

021. {

022. message += this + "\n";

023. });

024. }

025. });

026.

027. // Display the message

028. alert(message);

029.

030. // Cancel the changes

031. var grid = $("#SwitchModalGrid").data("kendoGrid");

032. grid.cancelChanges();

033. }

034. }

035.

036. $(function ()

037. {

038. $('#SwitchModalGrid').on('click', '.smChkBx', function ()

039. {

040. var checked = $(this).is(':checked');

041. var grid = $('#SwitchModalGrid').data().kendoGrid;

042. var dataItem = grid.dataItem($(this).closest('tr'));

043. dataItem.set('Selected', checked);

044. })

045. })

046.

047. function smCheckAll(e)

048. {

049. var state = $(e).is(':checked');

050. var grid = $('#SwitchModalGrid').data().kendoGrid;

051.

052. $.each(grid.dataSource.view(), function ()

053. {

054. if (this['Selected'] != state)

055. this.dirty = true;

056. this['Selected'] = state;

057. });

058.

059. grid.refresh();

060. }

061.

062. function GetModelFilter(element)

063. {

064. element.kendoComboBox(

065. {

066. dataSource:

067. {

068. schema:

069. {

070. data: "Data",

071. total: "Total"

072. },

073. transport:

074. {

075. read: '@Url.Action("GetSwitchModelsForFiltering", "ThirdPartyOpticsGoldList")'

076. },

077. type: "aspnetmvc-ajax"

078. }

079. });

080. }

081.

082.

083. function GetSupplierFilter(element)

084. {

085. element.kendoComboBox(

086. {

087. dataSource:

088. {

089. schema:

090. {

091. data: "Data",

092. total: "Total"

093. },

094. transport:

095. {

096. read: '@Url.Action("GetSwitchSuppliersForFiltering", "ThirdPartyOpticsGoldList")'

097. },

098. type: "aspnetmvc-ajax"

099. }

100. });

101. }

102.

103. function GetSwitchOSFilter(element)

104. {

105. element.kendoComboBox(

106. {

107. dataSource:

108. {

109. schema:

110. {

111. data: "Data",

112. total: "Total"

113. },

114. transport:

115. {

116. read: '@Url.Action("GetSwitchOSsForFiltering", "ThirdPartyOpticsGoldList")'

117. },

118. type: "aspnetmvc-ajax"

119. }

120. });

121. }

122.

123. function SubmitButtonClick(e)

124. {

125. var modalWindow = $("#SwitchesModalWindow").data("kendoWindow");

126. var switchesGrid = $("#SwitchModalGrid").data("kendoGrid");

127. var goldListGrid = $("#ThirdPartyOpticsGoldListGrid").data("kendoGrid");

128. var assignToTextBox = $("#AssignToTextBox")[0].value;

129. var switchesGridObjects = switchesGrid.dataSource.data();

130. var goldListGridObjects = goldListGrid.dataSource.data();

131.

132. var dataParams =

133. {

134. switchObjects: switchesGridObjects,

135. goldListObjects: goldListGridObjects,

136. assignTo: assignToTextBox

137. };

138.

139. var dataParamsJson = JSON.stringify(dataParams);

140.

141. var goldListAddActionURL = '@Url.Action("AddToThirdPartyOpticsGoldList", "ThirdPartyOpticsGoldList")';

142.

143. $.ajax(

144. {

145. contentType: "application/json",

146. data: dataParamsJson,

147. dataType: "json",

148. type: "POST",

149. url: goldListAddActionURL

150. })

151. .error(function (objAjaxRequest, strError) {

152. var respText = objAjaxRequest.responseText;

153. console.log(respText);

154. });

155.

156. modalWindow.close();

157. }

158.</script>

159.

160.<div>

161. @(Html.Kendo().Grid<SwitchModel>()

162. .Columns(c =>

163. {

164. c.Template(@<text></text>)

165. .ClientTemplate("<input type='checkbox' #= Selected ? checked='checked':'' # class='smChkBx' />")

166. .HeaderTemplate("<input type='checkbox' id='smMasterCheckBox' onclick='smCheckAll(this)'/>")

167. .Width(80);

168. c.Bound(s => s.SupplierName)

169. .EditorTemplateName("SwitchSupplierDropDownListTemplate")

170. .Filterable(f => f.UI("GetSupplierFilter"))

171. .Title("Supplier");

172. c.Bound(s => s.Model)

173. .Filterable(f => f.UI("GetModelFilter"))

174. .Title("Model");

175. c.Bound(s => s.SwitchOSName)

176. .EditorTemplateName("SwitchOSDropDownListTemplate")

177. .Filterable(f => f.UI("GetSwitchOSFilter"))

178. .Title("OS");

179. c.Bound(s => s.LastUpdate)

180. .Title("Last Update");

181. })

182. .DataSource(ds => ds

183. .Ajax()

184. .Events(e => e.Error("grid_error"))

185. .Model(m =>

186. {

187. m.Id(s => s.ID);

188. m.Field(s => s.ID).Editable(false);

189. m.Field(s => s.SwitchOSName).DefaultValue("[N/A~No OS Installed]");

190. })

191. .PageSize(30)

192. .Read(r => r.Action("GetSwitches", "Switch")))

193. .Filterable(f => f

194. .Extra(false)

195. .Operators(o => o

196. .ForString(s => s

197. .Clear()

198. .Contains("Contains")

199. .StartsWith("Starts With")

200. .IsEqualTo("==")

201. .IsNotEqualTo("!="))))

202. .HtmlAttributes(new { @class = "KendoModalGrid" })

203. .Name("SwitchModalGrid")

204. .Pageable()

205. .Resizable(r => r.Columns(true))

206. .Scrollable()

207. .Sortable()

208. .ToolBar(t =>

209. {

210. t.Template(

211. @<text>

212. <table>

213. <tr>

214. <td style="float: left; width: 100px">

215. <label>Assign To:</label>

216. </td>

217. <td style="float: left">

218. @(Html.Kendo().TextBox()

219. .Name("AssignToTextBox")

220. .Value("Triage"))

221. </td>

222. <td style="float: right">

223. <a class='k-button k-button-icontext' onclick='SubmitButtonClick()' href='#'>Submit For Testing</a>

224. </td>

225. </tr>

226. </table>

227. </text>);

228. }))

229.</div>

230.

231.<script>

232. $(document).ready(function ()

233. {

234. document.getElementById('SwitchModalGrid').style.height = (screen.height - 430).toString() + 'px';

235. document.getElementById('SwitchModalGrid').style.width = (screen.width - 430).toString() + 'px';

236. });

237.</script>

Controllers:

001.namespace TPOReports.Controllers

002.{

003. using System.Collections.Generic;

004. using System.Linq;

005. using System.Web.Configuration;

006. using System.Web.Mvc;

007. using Kendo.Mvc.Extensions;

008. using Kendo.Mvc.UI;

009. using PhynetReporting;

010. using Kendo.Mvc.UI.Fluent;

011. using System.Linq.Expressions;

012.

013. public class ThirdPartyOpticsGoldListController : Controller

014. {

015. /// <summary>

016. /// returns the view ThirdPartyOpticsGoldListView

017. /// </summary>

018. /// <returns>ThirdPartyOpticsGoldListView</returns>

019. public ActionResult ThirdPartyOpticsGoldListView()

020. {

021. return View();

022. }

023.

024. /// <summary>

025. /// adds a new ThirdPartyOpticsGoldList into the database

026. /// </summary>

027. /// <param name="deviceType">ThirdPartyOpticsGoldList to add</param>

028. /// <returns>the newly added ThirdPartyOpticsGoldList object</returns>

029. [HttpPost]

030. public

ActionResult AddToThirdPartyOpticsGoldList([DataSourceRequest] DataSourceRequest request, IEnumerable<SwitchModel> switchObjects, IEnumerable<ThirdPartyOpticsGoldListModel> goldListObjects,

string assignTo)

031. {

032. TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

033.

var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.AddToTransceiverSwitchQualificationList(switchObjects, goldListObjects, assignTo);

034.

035. if (!thirdPartyOpticsGoldListResult.Result)

036. {

037. ModelState.AddModelError("AddToThirdPartyOpticsGoldList", thirdPartyOpticsGoldListResult.Message);

038. }

039.

040. return Json(new[] { thirdPartyOpticsGoldListResult.Payload }.ToDataSourceResult(request, ModelState));

041. }

042.

043. [OutputCache(Duration = 600, VaryByParam = "none")]

044. [HttpPost]

045. public ActionResult GetSwitchModelsForFiltering([DataSourceRequest] DataSourceRequest request)

046. {

047. DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

048. var switchesResult = dataMaintenance.GetSwitches();

049.

050. if (!switchesResult.Result)

051. {

052. ModelState.AddModelError("GetSwitchModelsForFiltering", switchesResult.Message);

053. }

054.

055. DataSourceResult result = switchesResult.Payload.Select(tsql => tsql.Model).Distinct().ToDataSourceResult(request);

056. return Json(result, JsonRequestBehavior.AllowGet);

057. }

058.

059. [OutputCache(Duration = 600, VaryByParam = "none")]

060. [HttpPost]

061. public ActionResult GetSwitchOSsForFiltering([DataSourceRequest] DataSourceRequest request)

062. {

063. DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

064. var switchesResult = dataMaintenance.GetSwitches();

065.

066. if (!switchesResult.Result)

067. {

068. ModelState.AddModelError("GetSwitchOSsForFiltering", switchesResult.Message);

069. }

070.

071.

DataSourceResult result = switchesResult.Payload.Select(tsql => tsql.SwitchOSName).Distinct().ToDataSourceResult(request);

072. return Json(result, JsonRequestBehavior.AllowGet);

073. }

074.

075. [OutputCache(Duration = 600, VaryByParam = "none")]

076. [HttpPost]

077. public ActionResult GetSwitchSuppliersForFiltering([DataSourceRequest] DataSourceRequest request)

078. {

079. DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

080. var switchesResult = dataMaintenance.GetSwitches();

081.

082. if (!switchesResult.Result)

083. {

084. ModelState.AddModelError("GetSwitchSuppliersForFiltering", switchesResult.Message);

085. }

086.

087.

DataSourceResult result = switchesResult.Payload.Select(tsql => tsql.SupplierName).Distinct().ToDataSourceResult(request);

088. return Json(result, JsonRequestBehavior.AllowGet);

089. }

090.

091.

092. [OutputCache(Duration = 600, VaryByParam = "none")]

093. [HttpPost]

094. public ActionResult GetThirdPartyOpticsGoldListItems([DataSourceRequest] DataSourceRequest request)

095. {

096. TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

097. var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

098.

099. if (!thirdPartyOpticsGoldListResult.Result)

100. {

101. ModelState.AddModelError("GetTransceiverGoldListItems", thirdPartyOpticsGoldListResult.Message);

102. }

103.

104. DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.ToDataSourceResult(request);

105. return Json(result);

106. }

107.

108. [OutputCache(Duration = 600, VaryByParam = "none")]

109. [HttpPost]

110. public ActionResult GetTransceiverBreakoutModesForFiltering([DataSourceRequest] DataSourceRequest request)

111. {

112. TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

113. var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

114.

115. if (!thirdPartyOpticsGoldListResult.Result)

116. {

117. ModelState.AddModelError("GetTransceiverBreakoutModesForFiltering", thirdPartyOpticsGoldListResult.Message);

118. }

119.

120.

DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.BreakoutMode).Distinct().ToDataSourceResult(request);

121. return Json(result, JsonRequestBehavior.AllowGet);

122. }

123.

124. [OutputCache(Duration = 600, VaryByParam = "none")]

125. [HttpPost]

126. public ActionResult GetTransceiverCableLengthsForFiltering([DataSourceRequest] DataSourceRequest request)

127. {

128. TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

129. var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

130.

131. if (!thirdPartyOpticsGoldListResult.Result)

132. {

133. ModelState.AddModelError("GetTransceiverCableLengthsForFiltering", thirdPartyOpticsGoldListResult.Message);

134. }

135.

136.

DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.CableLength).Distinct().ToDataSourceResult(request);

137. return Json(result, JsonRequestBehavior.AllowGet);

138. }

139.

140. [OutputCache(Duration = 600, VaryByParam = "none")]

141. [HttpPost]

142. public ActionResult GetTransceiverCompatibilitiesForFiltering([DataSourceRequest] DataSourceRequest request)

143. {

144. TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

145. var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

146.

147. if (!thirdPartyOpticsGoldListResult.Result)

148. {

149. ModelState.AddModelError("GetTransceiverCompatibilitiesForFiltering", thirdPartyOpticsGoldListResult.Message);

150. }

151.

152.

DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverCompatibilityName).Distinct().ToDataSourceResult(request);

153. return Json(result, JsonRequestBehavior.AllowGet);

154. }

155.

156. [OutputCache(Duration = 600, VaryByParam = "none")]

157. [HttpPost]

158. public ActionResult GetTransceiverFormFactorsForFiltering([DataSourceRequest] DataSourceRequest request)

159. {

160. TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

161. var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

162.

163. if (!thirdPartyOpticsGoldListResult.Result)

164. {

165. ModelState.AddModelError("GetTransceiverFormFactorsForFiltering", thirdPartyOpticsGoldListResult.Message);

166. }

167.

168.

DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverFormFactorName).Distinct().ToDataSourceResult(request);

169. return Json(result, JsonRequestBehavior.AllowGet);

170. }

171.

172. [OutputCache(Duration = 600, VaryByParam = "none")]

173. [HttpPost]

174. public ActionResult GetTransceiverLifecycleStatusForFiltering([DataSourceRequest] DataSourceRequest request)

175. {

176. TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

177. var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

178.

179. if (!thirdPartyOpticsGoldListResult.Result)

180. {

181. ModelState.AddModelError("GetTransceiverLifecycleStatusForFiltering", thirdPartyOpticsGoldListResult.Message);

182. }

183.

184.

DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverLifecycleStatusName).Distinct().ToDataSourceResult(request);

185. return Json(result, JsonRequestBehavior.AllowGet);

186. }

187.

188. [OutputCache(Duration = 600, VaryByParam = "none")]

189. [HttpPost]

190. public ActionResult GetTransceiverRevisionsForFiltering([DataSourceRequest] DataSourceRequest request)

191. {

192. TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

193. var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

194.

195. if (!thirdPartyOpticsGoldListResult.Result)

196. {

197. ModelState.AddModelError("GetTransceiverRevisionsForFiltering", thirdPartyOpticsGoldListResult.Message);

198. }

199.

200.

DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.Revision).Distinct().ToDataSourceResult(request);

201. return Json(result, JsonRequestBehavior.AllowGet);

202. }

203.

204. [OutputCache(Duration = 600, VaryByParam = "none")]

205. [HttpPost]

206. public ActionResult GetTransceiverSuppliersForFiltering([DataSourceRequest] DataSourceRequest request)

207. {

208. TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

209. var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();

210.

211. if (!thirdPartyOpticsGoldListResult.Result)

212. {

213. ModelState.AddModelError("GetTransceiverSuppliersForFiltering", thirdPartyOpticsGoldListResult.Message);

214. }

215.

216.

DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.SupplierName).Distinct().ToDataSourceResult(request);

217. return Json(result, JsonRequestBehavior.AllowGet);

218. }

219.

220. [HttpPost]

221. public ActionResult UpdateThirdPartyOpticsGoldList([DataSourceRequest] DataSourceRequest request, [Bind(Prefix ="models")]IEnumerable<ThirdPartyOpticsGoldListModel> thirdPartyOpticsGoldListItems)

222. {

223. TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

224.

var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.UpdateThirdPartyOpticsGoldList(thirdPartyOpticsGoldListItems);

225.

226. if (!thirdPartyOpticsGoldListResult.Result)

227. {

228. ModelState.AddModelError("UpdateThirdPartyOpticsGoldList", thirdPartyOpticsGoldListResult.Message);

229. }

230.

231. return Json(thirdPartyOpticsGoldListResult.Payload.ToDataSourceResult(request, ModelState));

232. }

233. }

234.}

001.namespace TPOReports.Controllers

002.{

003. using System.Linq;

004. using System.Web.Configuration;

005. using System.Web.Mvc;

006. using Kendo.Mvc.Extensions;

007. using Kendo.Mvc.UI;

008. using PhynetReporting;

009.

010. /// <summary>

011. /// controller class for dealing with Switch related actions

012. /// </summary>

013. public class SwitchController : Controller

014. {

015. /// <summary>

016. /// returns the view SwitchModalView

017. /// </summary>

018. /// <returns>SwitchModalView</returns>

019. [HttpGet]

020. public ActionResult SwitchModalView()

021. {

022. return View();

023. }

024.

025. /// <summary>

026. /// returns the view SwitchView

027. /// </summary>

028. /// <returns>SwitchView</returns>

029. [HttpGet]

030. public ActionResult SwitchView()

031. {

032. return View();

033. }

034.

035. /// <summary>

036. /// adds a new Switch into the database

037. /// </summary>

038. /// <param name="switchObject">Switch to add</param>

039. /// <returns>the newly added Switch object</returns>

040. [HttpPost]

041. public ActionResult AddSwitch([DataSourceRequest] DataSourceRequest request, SwitchModel switchObject)

042. {

043. DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

044. var switchResult = dataMaintenance.AddSwitch(switchObject);

045.

046. if(!switchResult.Result)

047. {

048. ModelState.AddModelError("AddSwitch", switchResult.Message);

049. }

050.

051. return Json(new[] { switchResult.Payload }.ToDataSourceResult(request, ModelState));

052. }

053.

054. /// <summary>

055. /// retrieves all Switch objects from the database

056. /// </summary>

057. /// <returns>a collection of Switch objects as json</returns>

058. [HttpPost]

059. public ActionResult GetSwitches([DataSourceRequest] DataSourceRequest request)

060. {

061. DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

062. var switchesResult = dataMaintenance.GetSwitches();

063.

064. if(!switchesResult.Result)

065. {

066. ModelState.AddModelError("GetSwitches", switchesResult.Message);

067. }

068.

069. DataSourceResult result = switchesResult.Payload.ToDataSourceResult(request);

070. return Json(result);

071. }

072.

073. /// <summary>

074. /// retrieves all Switch Model objects from the database

075. /// </summary>

076. /// <returns>a collection of Switch Model objects as json</returns>

077. [HttpPost]

078. public ActionResult GetSwitchModels([DataSourceRequest] DataSourceRequest request)

079. {

080. DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

081. var switchesResult = dataMaintenance.GetSwitches();

082.

083. if (!switchesResult.Result)

084. {

085. ModelState.AddModelError("GetSwitchModels", switchesResult.Message);

086. }

087.

088. DataSourceResult result = switchesResult.Payload.Select(s => s.Model).Distinct().ToDataSourceResult(request);

089. return Json(result);

090. }

091.

092.

093. /// <summary>

094. /// removes the Switch from the database

095. /// </summary>

096. /// <param name="switchObject">SwitchModel object to be deleted</param>

097. /// <returns>the deleted SwitchModel object</returns>

098. [HttpPost]

099. public ActionResult RemoveSwitch([DataSourceRequest] DataSourceRequest request, SwitchModel switchObject)

100. {

101. DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

102. var switchResult = dataMaintenance.RemoveSwitch(switchObject);

103.

104. if (!switchResult.Result)

105. {

106. ModelState.AddModelError("RemoveSwitch", switchResult.Message);

107. }

108.

109. return Json(new[] { switchResult.Payload }.ToDataSourceResult(request, ModelState));

110. }

111.

112. /// <summary>

113. /// updates a Switch in the database

114. /// </summary>

115. /// <param name="switchObject">updated SwitchModel</param>

116. /// <returns>updated Switch object from the database</returns>

117. [HttpPost]

118. public ActionResult UpdateSwitch([DataSourceRequest] DataSourceRequest request, SwitchModel switchObject)

119. {

120. DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

121. var switchResult = dataMaintenance.UpdateSwitch(switchObject);

122.

123. if (!switchResult.Result)

124. {

125. ModelState.AddModelError("UpdateSwitch", switchResult.Message);

126. }

127.

128. return Json(new[] { switchResult.Payload }.ToDataSourceResult(request, ModelState));

129. }

130. }

131.}

Let me know if there is any other code needed to be seen...

Grid

answered on 14 Jan 2016

1 answer

108 views

Export the content in excel

Hello,

I have to export my report in excel and pdf.

I have attached the report export format.

Please suggest me the solution

General Discussions

answered on 14 Jan 2016

1 answer

112 views

How to customize my messages file

Hi,

I've stumbled upon a problem implementing the messages and culture into my Kendo UI scheduler.

I've followed http://demos.telerik.com/kendo-ui/scheduler/localization, and was able to change the language - but there is still a few things that doesn't change such as "Owner" in the popup-window when I create a new event. I've search through the messages file and can't find it there.

----------

resources:

[{ field: "ownerId",

title: "owner",

dataSource:

[{ text: "Alex", value: 1, color: "#f8a398" },

{ text: "Bob", value: 2, color: "#51a0ed" },

{ text: "Charlie", value: 3, color: "#56ca85" }]}]

So i've tried to implement the "Owner" into the messages.js file, but it doesn't work. Here is what I've done so far:

editor:{owner:"Owner",title:"Title" .........}

Im quite new to this and was wondering if someone would care to give me a hint on what I'm doing wrong? :-)

Scheduler