Questions on UI for ASP.NET MVC Forum

1 answer

69 views

I am using a custom keydown function that works great to get enter to work as a tab in Add mode and to close and move down a row in Update mode (batch editing on the grid). However, I just realized that the enter key is closing the cell and moving down even if the cell validation fails. How do I check whether the cell is valid before moving off the cell?

Here is the portion of the keydown function that handles the enter key...

if (e.keyCode === kendo.keys.ENTER) {
currentCell = $(e.target).closest('td');
currentRow = $(e.target).closest('tr');
cellIndex = currentCell.index();
//debugger;
if (cellIndex > -1) {
grid = currentRow.closest("[data-role=grid").data("kendoGrid");
model = grid.dataItem(currentRow);
if (model.isNew()) {
e.keyCode = kendo.keys.TAB;
}
else {
//debugger;
var nextRow = currentRow.next();
if (nextRow.length) {
//debugger;
var nextCell = nextRow.find("td").eq(cellIndex);
setTimeout(function () {
grid.closeCell(currentCell);
grid.current(nextCell);
grid.editCell(nextCell[0]);
}, 50);
}
}
}
}

Grid

answered on 30 Oct 2015

1 answer

746 views

Grid binding click event to RowTemplate

I'm loading the Grid in MVC, and I 'm making a rowTemplate, as I would like to bind custom javascript functions. I'm building my javascript in anonymous functions, which I'm later on are going to Grunt. I would like not to write inline javascript in my cshtml-files, as I'm trying to keep a clean structure. And I would also like to keep the Grid in ASP.NET MVC and not Kendo UI, as I'm going to use data annotations.

Via Events => Events.Change I'm able to find the whole Grid element via $("#UnitsList").data("kendoGrid") in my Javascript code. But I'm not able to bind any custom click events to the row template, e.g { click: seeUnitTree }.

The Grid loads fine and I'm getting the data displayed as I want it. But I can't seem to bind anything to the grid at all. I'm also trying via MVC trying to bind an OnChange event when I click on a cell. This only fires the when the grid is loaded.

//removed for abbreviation
.ClientRowTemplate(
"<tr data-id='#: Id #' class='row-unit unit-#: Id #'>" +
"<td class='unit-id'>" +
"<span> #= Id # </span>" +
"</td>" +
"<td class='unit-name'>" +
"<a href='" +
Url.Action("UnitDetails", "BusinessUnitsObjects") +
"'>" +
"<span> #= Name # </span></a>" +
"</td>" +
"<td class='address-1'>" +
"#: Address1 #" +
"</td>" +
"<td class='address-2'>" +
"#: Address2 #" +
"</td>" +
"<td class='zipcode text-center'>" +
"#: ZipCode #" +
"</td>" +
"<td class='town'>" +
"#: Town #" +
"</td>" +
"<td class='country'>" +
"#: Country #" +
"</td>" +
"<td class='parent-name'>" +
"<div class='input-group in-active'>" +
"<input type='text' class='form-control' value='#: ParentId #' data-bind='events: { click: seeUnitTree }'>" +
"<span class='glyphicon glyphicon-list input-group-addon'></span>" +
"</div>" +
"</td>" +
"</tr>"
)
//removed for abbreviation

Javascript functions:

1.:

var grid = $("#UnitsList").data("kendoGrid");
grid.bind("seeUnitTree", function () {
console.log('clickity click');
});

2.:

var viewModel = kendo.observable({
seeUnitTree: function (e) {
console.log('clickity click');
}
});
var grid = $("#UnitsList").data("kendoGrid");
kendo.bind(grid, viewModel);

What am I missing?

Se attached files for further detail in code.

General Discussions

answered on 30 Oct 2015

1 answer

98 views

Change date title to week of year

Hello

First, is it possible to modify the source code of the free trial?

If it is possible:

It is the date title i want to change, see picture.
To change the date to the week number where in the javascript should I change? And which amendment should I do?

Grateful for all the help I can get

Scheduler

answered on 30 Oct 2015

1 answer

196 views

Missing TextBoxFor and AutoComplete

I've created an ASP .NET 5.0 MVC project in Visual Studio 2015 and have attempted to import the Kendo.Mvc dependency using the following configuration:

project.json

"dependencies": {

"Kendo.Mvc": "2015.3.930",

...

},

"frameworks": {

"dnx451": { }

},

However, unlike my ASP .NET 4.x MVC projects, TextBoxFor and AutoComplete (among others) are not available. This works for my 4.x projects...

@Html.Kendo().TextBoxFor(...

@Html.Kendo().AutoComplete(...

But, in my 5.0 projects, TextBoxFor and AutoComplete are not found. Inspecting the Kendo library, I saw that they no longer exist in the widget factory. And, the DLL in the package that is retrieved by Visual Studio is significantly smaller than the DLL that comes with my ASP .NET 4.x projects.

Is this intended? And, if so, what alternative would you suggest?

Thanks.

General Discussions

answered on 30 Oct 2015

1 answer

623 views

Get dataItem of current row

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

488 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

119 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

531 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

307 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