Questions on UI for ASP.NET MVC Forum

1 answer

332 views

Data Validation on Kendo Grid with Editor Template on Date field

Hello,

I'm having some problems with data validation with the kendo grid. I've set up the Grid to use a model that has several fields. I'm most interested in the DateTime field for which I've set up data annotations to help with validation. I've labeled the field to be Required, to use a regular RegularExpression, and I've also specified an EditorTemplate called "BeginDateEditor". The editing mode is set up to be InLine. The problem occurs when I actually try to edit the field. The data validation doesn't seem to work. The editing will allow the user to close the cell with no value where in fact it should notify the user that there is a problem and keep the cell open for editing. I've attached a sample project to illustrate the problem.

Thank you.

Grid

answered on 30 Oct 2015

1 answer

173 views

Autocomplete serverfiltering

Hello,

I'm having problem with serverside filtering using autocomplete. Due to fact that Autocomplete is still unavailable at MVC Wrapper for ASP.NET 5 MVC 6, im using following code to initialize autocomplete:

<script>

var dataSource = new kendo.data.DataSource({

serverFiltering: true,

serverOperation: true,

type: "aspnetmvc-ajax",

transport: {

read: {

url: "@Url.Content("~/api/Get")",

type: "GET"

}

},

schema: {

data: "Data",

total: "Total"

}

})

$("#@Model.Name").kendoAutoComplete({

placeholder: "@Model.Watermark",

minLength: 3,

filter: "contains",

dataSource: dataSource

});

</script>

As the result Query string that is send to server always looks like this : ?sort=&group=&filter= and because of that mapping to DataSourceRequest on serverside always results with empty filters

General Discussions

answered on 30 Oct 2015

1 answer

97 views

Keydown Handler with Invalid Cell

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

797 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

123 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

247 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

644 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

528 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

127 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

592 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