Questions on UI for ASP.NET MVC Forum

1 answer

637 views

I have a nested Grid with a ClientTemplate in a bounded column:

@(Html.Kendo().Grid<RepViewModel>().Name("RepCodes_#=UserId#").Columns(column =>

{

column.Bound(model => model.RepCode);

column.Bound(model => model.IsPrimary).Title("Primary").ClientTemplate("\\#=setPrimaryTemplate(data, 'RepCodes_#=UserId#')\\#");

}

The ClientTemplate displays a "Set" or "Unset" button in the external template:

<script type="text/x-kendo-template" id="setPrimaryTemplate">

# if (IsPrimary){#

<a href="javascript:void(0);" id="ix_unsetPrimary#=RepCode#">Unset</a>

#}else{#

<a href="javascript:void(0);" id="ix_setPrimary#=RepCode#">Set</a>

#}#

</script>

In the function, I want to get the dataItem of the current row so I can set IsPrimary to true or false. How can I do that?

<script type="text/javascript">

function setPrimaryTemplate(data, gridName) {

var grid = $('#'+ gridName).data('kendoGrid');

var dataItem = grid.dataItem($(this).closest("tr")); <- this is currently displaying as null

var data = {IsPrimary: IsPrimary};

var setPrimaryTemplate = kendo.template($('#setPrimaryTemplate').html());

}

</script>

Grid

answered on 29 Oct 2015

9 answers

511 views

Get page number based on selected row

Hi there,

I have a page with a grid, and on data bound, a specific item in the grid is set to selected via adding the k-state-selected class. Is there a way to determine on what page of the grid this item is? After adding the selected class, I'd like to set the grid to that page.

Thanks,
Stefan.

Grid

answered on 29 Oct 2015

1 answer

122 views

Kendo Editor inside tabstrip

When I have a kendo editor inside a tabstrip it throws

Uncaught TypeError: Cannot use 'in' operator to search for 'getSelection' in undefine

Here is a sample

http://dojo.telerik.com/AGavE

TabStrip

answered on 27 Oct 2015

2 answers

550 views

Detail Grid Excel Export All Pages All Details - No Details.

I am trying to export to excel a grid that has detail grids. I want to be able to export all pages of the detail grids as well.

I have followed the example provided here: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/how-to/excel/detail-grid-export

I get the master grid export fine, I end up with empty rows where the detail data should be.

Here is my View code: The export scripts start at line 85.

001.<div class="row">

002. <div class="col-lg-12">

003. <p>

004. @(Html.Kendo().Grid<User_Tracking.Models.SystemTypesModel>()

005. .Name("grid")

006. .Columns(columns =>

007. {

008. columns.Bound(c => c.TypeName).Title("System Name");

009. columns.Bound(c => c.Enabled);

010. columns.Bound(c => c.AccessCount).Title("Users with system access");

011. })

012. .ToolBar(toolbar =>

013. {

014. toolbar.Excel();

015. })

016. .Excel(e => e.AllPages(true))

017. .ClientDetailTemplateId("template")

018. .HtmlAttributes(new { style = "height:500px;" })

019. .ColumnMenu()

020. .Pageable()

021. .Events(e => e.ExcelExport("systems_excelExport"))

022. .Selectable(selectable =>

023. {

024. selectable.Mode(GridSelectionMode.Multiple);

025. selectable.Type(GridSelectionType.Cell);

026. })

027. .Sortable(sortable =>

028. {

029. sortable.SortMode(GridSortMode.MultipleColumn);

030. })

031. .Filterable()

032. .Scrollable()

033. .DataSource(dataSource => dataSource

034. .Ajax()

035. //.ServerOperation(false)

036. .Read(read => read.Action("SystemAccess_Read", "SystemAccess"))

037. )

038. .Events(e => e.DataBound("dataBound"))

039. )

040. </p>

041. </div>

042.</div>

043.

044.

045.<script id="template" type="text/kendo-tmpl">

046. @(Html.Kendo().Grid<User_Tracking.Models.UserViewModel>()

047. .Name("grid_#=SystemId#")

048. .Columns(r =>

049. {

050. r.Bound(c => c.UserName);

051. r.Bound(c => c.FirstName);

052. r.Bound(c => c.LastName);

053. r.Bound(c => c.EmailAddress);

054. r.Bound(c => c.Dept.DeptName);

055. r.Bound(c => c.Loc.Name);

056. r.Bound(c => c.Con.Name);

057. r.Bound(c => c.Comments);

058. r.Bound(c => c.DateEntered).Format("{0:MM-dd-yyyy}");

059. r.Bound(c => c.Terminated);

060. r.Bound(c => c.DateTerminated).Format("{0:MM-dd-yyyy}");

061. })

062. .DataSource(ds => ds

063. .Ajax()

064. .Read(r => r.Action("HBUsers_Read", "SystemAccess", new { SysId = "#=SystemId#" }))

065. .PageSize(10)

066. )

067. .Events(e => e.ExcelExport("users_excelExport"))

068. .Pageable()

069. .Selectable(selectable =>

070. {

071. selectable.Mode(GridSelectionMode.Multiple);

072. selectable.Type(GridSelectionType.Cell);

073. })

074. .Sortable(sortable =>

075. {

076. sortable.SortMode(GridSortMode.MultipleColumn);

077. })

078. //.Filterable()

079. .Scrollable()

080. //.ColumnMenu()

081. .ToClientTemplate()

082. )

083.</script>

084.

085.<script>

086. var detailExportPromises = [];

087.

088. var dataSource = new kendo.data.DataSource({

089. type: "aspnetmvc-ajax",

090. transport: {

091. read: "@Url.Action("HBCUsers_Read", "SystemAccess")",

092. type: "POST"

093. },

094. schema: {

095. data: "Data",

096. total: "Total",

097. error: "Errors"

098. }

099. });

100.

101. dataSource.read();

102.

103. function dataBound() {

104. detailExportPromises = [];

105. }

106.

107. function users_excelExport(e) {

108. e.preventDefault();

109. }

110.

111. function systems_excelExport(e) {

112. e.preventDefault();

113.

114. var workbook = e.workbook;

115.

116. detailExportPromises = [];

117.

118. var masterData = e.data;

119.

120. for (var rowIndex = 0; rowIndex < masterData.length; rowIndex++) {

121. exportChildData(masterData[rowIndex].SystemId, rowIndex);

122. }

123.

124. // wait for all detail grids to finish exporting

125. $.when.apply(null, detailExportPromises)

126. .then(function () {

127. // get the export results

128. var detailExports = $.makeArray(arguments);

129.

130. // sort by masterRowIndex

131. detailExports.sort(function (a, b) {

132. return a.masterRowIndex - b.masterRowIndex;

133. });

134.

135. // add an empty column

136. workbook.sheets[0].columns.unshift({ width: 30 });

137.

138. // prepend an empty cell to each row

139. for (var i = 0; i < workbook.sheets[0].rows.length; i++) {

140. workbook.sheets[0].rows[i].cells.unshift({});

141. }

142.

143. // merge the detail export sheet rows with the master sheet rows

144. // loop backwards so the masterRowIndex doesn't need to be updated

145. for (var i = detailExports.length - 1; i >= 0; i--) {

146. var masterRowIndex = detailExports[i].masterRowIndex + 1;

147.

148. var sheet = detailExports[i].sheet;

149.

150. // prepend an empty cell to each row

151. for (var ci = 0; ci < sheet.rows.length; ci++) {

152. //Error occurs here, the cells[0].value is undefined. So I put a check for length

153. if (sheet.rows[ci].cells.length > 0) {

154. if (sheet.rows[ci].cells[0].value) {

155. sheet.rows[ci].cells.unshift({});

156. }

157. }

158. }

159.

160. // insert the detail sheet rows after the master row

161. [].splice.apply(workbook.sheets[0].rows, [masterRowIndex + 1, 0].concat(sheet.rows));

162. }

163.

164. // save the workbook

165. kendo.saveAs({

166. dataURI: new kendo.ooxml.Workbook(workbook).toDataURL(),

167. fileName: "Users by System Export.xlsx"

168. });

169. });

170. }

171.

172. function exportChildData(SystemID, rowIndex) {

173. var deferred = $.Deferred();

174.

175. detailExportPromises.push(deferred);

176.

177. var rows = [{

178. cells: [

179. { value: "UserName" },

180. { value: "FirstName" },

181. { value: "LastName" },

182. { value: "EmailAddress" },

183. { value: "Dept.DeptName" },

184. { value: "Loc.Name" },

185. { value: "Con.Name" },

186. { value: "Comments" },

187. { value: "DateEntered)" },

188. { value: "Terminated" },

189. { value: "DateTerminated" }

190. ]

191. }];

192.

193. dataSource.filter({ field: "SystemId", operator: "eq", value: SystemID });

194. dataSource.fetch(function () {

195. var view = dataSource.view();

196. if (view.length > 0) {

197. console.log(view.length);

198. console.log(view[0].FirstName);

199. console.log(view[0].Loc.Name)

200. }

201. });

202.

203.

204. var exporter = new kendo.ExcelExporter({

205. columns: [

206. { value: "UserName" },

207. { value: "FirstName" },

208. { value: "LastName" },

209. { value: "EmailAddress" },

210. { value: "Dept.DeptName" },

211. { value: "Loc.Name" },

212. { value: "Con.Name" },

213. { value: "Comments" },

214. { value: "DateEntered)" },

215. { value: "Terminated" },

216. { value: "DateTerminated" }

217. ],

218. dataSource: dataSource

219. });

220.

221. exporter.workbook().then(function (book, data) {

222. deferred.resolve({

223. masterRowIndex: rowIndex,

224. sheet: book.sheets[0]

225. });

226. });

227. }

228.</script>

Grid

answered on 27 Oct 2015

1 answer

319 views

Grid Popup editor window Multi-column layout

Hello.

I have been googling this today and I haven't come up with a decent example. I have grid with a popup editor. I can set the size of the grid, but the controls are all left justified which makes for a very large form that is not very responsive. Are there any examples of a multi-column popup editor? I know a large vertical form won't cut it for the boss. I might be able to convince him popups are not bad if I can do a multi column layout. I tried multiple things...fieldsets...rows...spans all using the bootstrap grid to no avail. Any suggestions? I guess I could use a bootstrap modal instead.

Grid

answered on 27 Oct 2015

1 answer

45 views

Grid pager inheader?

This does not appear possible with the MVC/Kendo Grid. I am wondering why this was removed.

I would like to see this replaced if at all possible. It was really handy.

Thanks.

Grid

answered on 26 Oct 2015

1 answer

254 views

Printing the Header on Every Page

How would I go about printing the header of my grid on every page?

Grid

answered on 26 Oct 2015

3 answers

673 views

Conditional image/glyph or html based on model property value (enum)

I have a model with an enum as a data type on a property. In the grid I want to show an image representation for this enum. Whats the best way to do this?

I've tried using the ClientTemplate to do this. I'm not sure what I need. I have tried the following without success:

@(Html.Kendo().Grid<BatchEditModel>()

.Name("mygrid")

.Columns(columns =>

{

columns.Bound(bem => bem.MyInfo.Number).ClientTemplate(

"# if (MyStatus == " + MyStatusConstants.Complete + ") { #

<span class="icon-oo-my-img-32" style="font-size: 1.2em; color: green"></span>

"# } #"

"# else if (MyStatus == " + MyStatusConstants.PWHTRequired + ") { #"

<span class="icon-oo-my-img-32" style="font-size: 1.2em; color: darkcyan"></span>

"# } #"

"# else if (MyStatus == " + MyStatusConstants.Myed + ") { #"

<span class="icon-oo-my-img-32" style="font-size: 1.2em; color: blue"></span>

"# } #"

)

This has errors in the razor page. I had the all the text wrapped in quotes and used + to concatenate them.

The question is, I have an enum as a value, but I want to display an image - which is a custom glyph icon on the span. What is the best way to implement this?

Thanks

Andez

Grid

answered on 23 Oct 2015

4 answers

162 views

Edit button does a GET request with a wrong ID

Hi. I have 2 screen with a Telerik MVC grid. First one is for Orders and second one for OrderDetails. I use server binding.

The first one works fine. It shows Orders data in the grid. Each row has a Details button and when I click on the button, the second screen shows up with the OrderDetails data of the Order data you selected in the grid. Here each row has a Edit button that is supposed to perform inline editing.

At this point, the URL is http://myweb.com/Order/Details/123. 123 is the OrderId in the Orders table.

The problem happens when I click on Edit button for the row data. It does a GET request with OrderDetailId automatically. The page expects OrderId not OrderDetailId.

So, at this point, the page expects http://myweb.com/Order/Details/##OrderId## but the grid does http://myweb.com/Order/Details/##OrderDetailId##.

How should I handle this case? Could I manage what URL format the grid uses for the Edit button?

Grid

answered on 23 Oct 2015

1 answer

396 views

RowTemplate and columns?

Hi,

I am trying to create a grid with one column to return a result similar to your example here: http://demos.telerik.com/kendo-ui/grid/rowtemplate. I am using the server-side RowTemplate code such as...

            @(Html.Kendo().Grid(Model.Results)
               .Name("Components")
               .RowTemplate(grid =>
                   @<text>
                   <tr>
                       <td>
                            ID: @item.ComponentID<br>

Name: @item.Name

                            ... etc
                       </td>
                   </tr>
                   </text>
               )

           .DataSource(d => d.Ajax().ServerOperation(false))
           .Pageable(pageable => pageable
               .Refresh(true)
               .PageSizes(true)
               .ButtonCount(5))
           )

I am basing my code on this example:

@model IEnumerable<Product>@(Html.Kendo().Grid(Model).Name("grid")

.RowTemplate(grid => @<text><div>Product Name: @product.ProductName</div><div>Units In Stock: @product.UnitsInStock</div></text>))

The output completely ignores the rowFormat and prints every field in the model object as a separate column (see attached photo).

I have tried almost everything - client templates, etc. Nothing stops every column from being displayed.

Any ideas would be appreciated.

Grid

answered on 22 Oct 2015