Questions on UI for ASP.NET MVC Forum

1 answer

73 views

I just downloaded and installed a trial of Kendo UI Complete for ASP MVC. I am running VS 2012. I Opened the examples project (Kendo.MVC.Examples) and tried out some of the mobile components. Most of them seem to be broken. For example, when you try out the drawer.

http://localhost:56541/razor/mobile/drawer/index
Your port number might be different.1

Click on the button that opens the drawer (upper left corner). A javascript error is thrown.
Uncaught Error: Syntax error, unrecognized expression: #!
The error is thrown from jQuery and is complaining about the bang symbol after the hash.

I am trying to create my own prototype app from your example code and am encountering the same issues.

Thanks for your help.

General Discussions

answered on 07 Jan 2014

1 answer

118 views

Editor loses changes to html tags

Hello,

I've tried this on the online demo at :

http://demos.kendoui.com/web/editor/all-tools.html

click the View Html tool, edit the first img tag and add onerror="imgError()" to it.

Click update button. View Html again and my change has now disappeared. Why is that ?
I've first noticed it locally and I thought I did something wrong, then I tried it on the online demo section and the same behaviour happens.

Things get even weirder if you add something like onerror="alert('The image could not be loaded.')"

if you view html again this is what you get :

<img alt="Editor for ASP.NET MVC logo" be="" could="" image="" loaded.');"="" not="" src="http://www.kendoui.com/Image/kendo-logo.png" style="display:block;margin-left:auto;margin-right:auto;" the="" />

Looks like a big bug to me.

Editor

answered on 06 Jan 2014

1 answer

286 views

ListView datasource read not called

Hi -

I am trying to implement a ListView with remote call from the example using MVC helpers.
I am using MVC5 and Kendo Q3.

I am creating a ListView that calls a controller method to retrieve data. However, nothing is
display and putting a debug break point is never executed on the controller.

Any ideas?

My helper HTML is straight from the example codes and looks like this:

@(Html.Kendo().ListView<StatusItemInfo>()
.Name("statuslistview")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource =>
dataSource.Read(read => read.Action("Products_Read", "Home"))
)
)

My controller:

public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
{
List<StatusItemInfo> myList = new List<StatusItemInfo>();
var info = new StatusItemInfo();
info.Location = "Sams Plaza";
info.EcoSystem = "POS";
info.Category = "File";
info.Age = "7 hours";
info.Division = "Div 2";
myList.Add(info);

DataSourceResult results = myList.ToDataSourceResult(request);
return Json(results, JsonRequestBehavior.AllowGet);
}

My template:
<script type="text/x-kendo-template" id="template">
<div class="col-md-3 col-xs-3">
<div class="issue-card white-bg border-wrap ">
<div class="card-title border-bottom">
<h4 class="error"><span class="companyFieldNumberIssues">#:Location #</span></h4>
</div>
<div class="stacked-stats">
<h3 class="no-margin">#:Category #</h3><span>#:Age #</span>
<h3 class="no-margin">#:EcoSystem #</h3><span>#:Division #</span>
</div>
</div>
</div>
</script>

I don't see any javascript console errors.
In the Network tab of Chrome developer tools, I do not see any calls to my controller.

What am I doing wrong?

Thanks,
bruce

ListView

answered on 06 Jan 2014

1 answer

179 views

Creating a razor template for event creation

I have a requirement to override the existing window to add an event as we have additional field we would like to display. The Template open correctly and populates the standard scheduler columns. However before opening the window I need to call our server to get a list of event types and a list of member (or possible members).

or index.cshtml looks like this

@(Html.Kendo().Scheduler<TalkBox.Mvc.ViewModels.Calendar.CalendarViewModel>()
.Name("scheduler")
.Date(DateTime.UtcNow)
.Timezone("Etc/UTC")
.Height(700)
.BindTo(Model)
.Views(views =>
{
views.DayView(dayView => dayView.Selected(true));
views.WeekView();
views.MonthView();
views.AgendaView();
})
.DataSource(d => d
.Model(m => m.Id(f => f.EventId))
.Read(u => u.Action("Read", "Calendar"))
.Update(u => u.Action("Update", "Calendar").Data("serialize"))
.Create(c => c.Action("Create", "Calendar").Data("serialize"))
.Destroy(delete => delete.Action("Delete","Calendar"))
)
.Editable(e => e.TemplateName("CalendarEditor"))

I thought that the .Read(u => u.Action("Read", "Calendar")) would fire the read function before the template is displayed.

How do I fire an event on open of the new template?

Damion

Scheduler

answered on 06 Jan 2014

9 answers

945 views

Model binding to custom popup editor that uses razor

Grid init:

<div class="AbsenceGrid">

@(Html.Kendo().Scheduler<AbsenceViewModel>()

.Name("employeeScheduler")

.Date(DateTime.Now)

.Height(600)

.Views(views => views.MonthView())

.Editable(e => e.TemplateName("AbsenceEditor"))

.Resources(res =>

{

res.Add(r => r.AuthorisedById)

.Title("Authorised By")

.DataTextField("Name")

.DataValueField("EmployeeId")

.DataSource(d =>d.Read(r => r.Action("AuthorisedByRead", "Schedule")));

})

.DataSource(d => d

.Model(m => m.Id(f => f.EmployeeAbsenceId))

.Read(r => r.Action("EmployeesAbsencesRead", "Schedule"))

.Create(c => c.Action("EmployeesAbsencesCreate", "Schedule"))

.Destroy("Destroy", "Schedule")

.Update("Update", "Schedule")

)

</div>

Custom Template: (Views/Shared/EditorTemplates/AbsenceEditor.cshtml)

@model Employees.Web.Models.AbsenceViewModel

@Html.HiddenFor(x => x.EmployeeAbsenceId)

<div class="editor-label">

@Html.LabelFor(x => x.Title)

</div>

<div class="editor-field">

@Html.EditorFor(x => x.Title)

</div>

<br />

<div class="editor-label">

@Html.LabelFor(x => x.Start)

</div>

<div class="editor-field">

@Html.EditorFor(x => x.Start)

</div>

<br/>

<div class="editor-label">

@Html.LabelFor(x => x.End)

</div>

<div class="editor-field">

@Html.EditorFor(x => x.End)

</div>

<br />

<div class="editor-label">

@Html.LabelFor(x => x.IsAllDay)

</div>

<div class="editor-field">

@Html.EditorFor(x => x.IsAllDay)

</div>

<br />

<div class="editor-label">

@Html.LabelFor(x => x.Description)

</div>

<div class="editor-field">

@Html.EditorFor(x => x.Description)

</div>

<br />

Firstly, is it possible to do it using razor as above, or do I have to use the MVVM binding method? Currently the view shows, but none of the values from the model are persisted into the form and the form won't submit, but I guess I'll get to that in time.

Secondly, if that's possible, how would I include the recurrence rule editor?

Thanks.

Scheduler

answered on 03 Jan 2014

2 answers

847 views

Format text returned from JSON with line breaks

Hello Kendo,

I have a ToolTip widget that is receiving data returned from a JSON call. Here is the data call:

public JsonResult GetCountsForSessions(int Id)
{
//hard coded data call for testing
string CountsForSessions = Id.ToString() + "<br />";
CountsForSessions += "Item 1 info <br />";
CountsForSessions += "Item 2 Info <br />";
return this.Json(CountsForSessions, JsonRequestBehavior.AllowGet);
}

The ToolTip does display the correct data, but the <br> tags are ignored and the resulting text displayed in the ToolTip looks like:

"1077 \u003cbr /\u003eItem 1 info\u003cbr /\u003eItem 2 Info3 \u003cbr /\u003e"

With no like breaks. My goal is to get the data to display in the ToolTip like:

1077
Item 1 info
Item 2 Info

How can achieve this formatting? Thanks for the help,

Carl

ToolTip

answered on 03 Jan 2014

1 answer

149 views

grid Filter not working in ie8

Hi
I am using Kendo grid. the filer java script code not working in ie8.But the same code working with firefox and chrome also .below is my code

<br>function GridFilterChange(svalue, sgridName, sColumnName) {<br> <b> var grid = $(sgridName).data("kendoGrid");</b><br> if (svalue) {<br> grid.dataSource.filter({ field: sColumnName, operator: "contains", value: svalue });<br> } else {<br> grid.dataSource.filter({});<br> }<br>}

Can any one help me

Working environment
OS : Windows xp
Browser :IE8

Regards
Vairamuthu.G.S

Grid

answered on 03 Jan 2014

3 answers

167 views

Beginner grid questions

I just downloaded the trial version, and I'm having problems creating a simple grid. I tries three different "variations" and none seem to work.

First, I tried this:

@(Html.Kendo().Grid(Model).Name("ConnectionManagementSystems").Columns(c => { c.

I don't get intellisense for c.Bound method, so something is wrong.

I then tried

@(Html.Kendo().Grid<ConnectionManagement.Models.ConnectionManagement2Model></ConnectionManagement.Models.ConnectionManagement2Model>

But it thinks that the model is an html tag and not the model class.

I then tried

<script>

$(document).ready(function () {

$("#connectionManagementSystems").kendoGrid();

});

</script>

<div id="connectionManagementSystems">

<table>

<tr>

<th>

@Html.DisplayNameFor(model => model.SiteAddress)

</th>

<th>

@Html.DisplayNameFor(model => model.SiteAddressCity)

</th>

<th>

@Html.DisplayNameFor(model => model.SiteAddressState)

</th>

<th>

@Html.DisplayNameFor(model => model.SiteAddressZipCode)

</th>

<th>

@Html.DisplayNameFor(model => model.SiteId)

</th>

<th>

@Html.DisplayNameFor(model => model.SiteName)

</th>

<th>

@Html.DisplayNameFor(model => model.SystemId)

</th>

<th>

@Html.DisplayNameFor(model => model.SystemType)

</th>

<th></th>

</tr>

@foreach (var item in Model) {

<tr>

<td>

@Html.DisplayFor(modelItem => item.SiteAddress)

</td>

<td>

@Html.DisplayFor(modelItem => item.SiteAddressCity)

</td>

<td>

@Html.DisplayFor(modelItem => item.SiteAddressState)

</td>

<td>

@Html.DisplayFor(modelItem => item.SiteAddressZipCode)

</td>

<td>

@Html.DisplayFor(modelItem => item.SiteId)

</td>

<td>

@Html.DisplayFor(modelItem => item.SiteName)

</td>

<td>

@Html.DisplayFor(modelItem => item.SystemId)

</td>

<td>

@Html.DisplayFor(modelItem => item.SystemType)

</td>

<td>

@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |

@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |

@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })

</td>

</tr>

}

</table>

</div>

But this places the headers at the bottom of the grid.

It seems that there are many different ways to create grids, so what is the best way and why don't the above work?

Thanks
Alex

Grid

answered on 02 Jan 2014

3 answers

769 views

ForeignKey column not working in PopUp edit mode: doesn't show the correct item selected

Hello! :)

I've searched for all over the place (understatement) for a solution to my case to no avail until now. First, I'll explain my scenario:
- I have an OpenAccess Model exposed as a WCF Data Service (oData v3);
- I have an Kendo MVC Application;
- I have a View with a grid, set for PopUp editing, AJAX Bound;
Before posting some code, let me explain my issue/difficulty. I have an entity with these properties:
- TextoID
- Titulo;
- Corpo;
- TipoTextoID;
- TipoTexto;

There is a ForeignKey column set to the TipoTextoID property which get's correctly populated either in in-line or pop-up mode. But when it comes to changing data, it only works in-line mode. This is my issue I need it to work in a popup, since the "Corpo" property is bound to a KendoUI Editor.
When in the popup, it does not show the correct value on the dropdown. It shows always the first item on the dropdown.
Honestly I'm feeling stupid. I tried almost every sample, post, article I could find to no avail and I'm clueless.
I hope someone can help me on this. Thanks in advance to all!

So, here's the code.
The view:

01.@model IEnumerable<KendoMVC.CostSimulatorService.Texto>

02.

03.@{

04. ViewBag.Title = "Textos";

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

06.}

07.

08.<h2>Textos</h2>

09.

10.@(Html.Kendo().Grid(Model) // Bind the grid to the Model property of the view

11. .Name("Grid")

12. .Columns(columns =>

13. {

14. columns.Bound(p => p.Titulo); //Create a column bound to the "ProductID" property

15. columns.Bound(p => p.IsPrivado)

16. .ClientTemplate("<input type='checkbox' #= IsPrivado ? checked='checked': '' # class='chkbx' />")

17. .Width(170); //Create a column bound to the "ProductName" property

18. columns.ForeignKey(p => p.TipoTextoID,

19. (System.Collections.IEnumerable)ViewData["TiposTexto"],

20. "TipoTextoID",

21. "Designacao")

22. .Title("Tipo de conteúdo").Width(170);

23. columns.Command(command =>

24. {

25. command.Edit();

26. command.Destroy().Text("Remover");

27. }).Width(200).Title("Acções");

28. })

29. .ToolBar(commands => commands.Create())

30. .Editable(editable => editable.Mode(GridEditMode.PopUp)

31. .TemplateName("Texto")

32. .Window(builder => builder

33. .Width(800)

34. .Height(570)

35. .Modal(true)

36. .Resizable(c => c.Enabled(true))

37. .Animation(true)

38. .Title("Editar conteúdo")))

39. .DataSource(dataSource => dataSource

40. .Ajax() //specify server type

41. .PageSize(20)

42. .Events(events => events.Error("error_handler"))

43. .Model(model =>

44. {

45. model.Id(texto => texto.TextoID); // Specify the property which is the unique identifier of the model

46. model.Field(texto => texto.TextoID).Editable(false); // Make the ProductID property not editable

47. })

48. .Create(create => create.Action("CreateTexto", "Textos"))

49. .Read(read => read.Action("ReadTextos", "Textos"))

50. .Update(update => update.Action("UpdateTexto", "Textos"))

51. .Destroy(destroy => destroy.Action("DestroyTexto", "Textos")))

52. .Pageable() // Enable paging

53. .Sortable() // Enable sorting

54. .Selectable()

55. .Filterable()

56. .Scrollable()

57. )

58.

59.<script type="text/javascript">

60.

61. $(document).ready(function() {

62. $("form.k-edit-form").kendoValidator();

63. });

64.

65. function error_handler(e) {

66. if (e.errors) {

67. var message = "Errors:\n";

68. $.each(e.errors, function (key, value) {

69. if ('errors' in value) {

70. $.each(value.errors, function () {

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

72. });

73. }

74. });

75. alert(message);

76. }

77. }

78.</script>

Next, then template:

01.@using System.Web.Mvc.Html;

02.

03.@model KendoMVC.CostSimulatorService.Texto

04.

05.@Html.HiddenFor(model => model.TextoID)

06.<div id="divWrapper" style="width:99%; float:left; height:520px; margin-left:2px;">

07. <div>

08. @Html.LabelFor(model => model.Titulo)

09. </div>

10. <div>

11. @Html.TextBoxFor(model => model.Titulo, new { @class="k-textbox" , style = "width: 480px;" })

12. @Html.ValidationMessageFor(model => model.Titulo)

13. </div>

14. <div>

15. @Html.LabelFor(model => model.Corpo)

16. </div>

17. <div style="width:98%;">

18. @(Html.Kendo().EditorFor(model => model.Corpo)

19. .HtmlAttributes(new { style = "width: 740px;height:350px" })

20. .ImageBrowser(imageBrowser => imageBrowser

21.

.Image("~/Content/Uploads/Images/{0}")

22.

.Read("Read", "Textos")

23.

.Create("Create", "Textos")

24.

.Destroy("Destroy", "Textos")

25.

.Upload("Upload", "Textos")

26.

.Thumbnail("Thumbnail", "Textos"))

27. .Messages(m => m.DialogCancel("Cancelar")

28. .DialogInsert("Inserir")

29. .ImageAltText("Texto alternativo"))

30. )

31. @Html.ValidationMessageFor(model => model.Corpo)

32. </div>

33. <div>

34. @Html.LabelFor(model => model.TipoTextoID)

35. </div>

36. <div>

37. @Html.HiddenFor(model => model.TipoTextoID)

38. @(Html.Kendo().DropDownListFor(model => model.TipoTextoID)

39. .Name("TiposTexto")

40. .DataTextField("Designacao")

41. .DataValueField("TipoTextoID")

42. .BindTo((System.Collections.IEnumerable)

43. ViewData["TiposTexto"]))

44. </div>

45. <div style="float:left; width:155px;">

46. @Html.LabelFor(model => model.IsPrivado)

47. </div>

48. <div style="float:left;">

49. @Html.CheckBoxFor(model => model.IsPrivado)

50. @Html.ValidationMessageFor(model => model.IsPrivado)

51. </div>

52.</div>

The controller:

001.using System;

002.using System.Data.Common.CommandTrees.ExpressionBuilder;

003.using System.IO;

004.using System.Linq;

005.using System.Web;

006.using System.Web.Mvc;

007.using Kendo.Mvc.Extensions;

008.using Kendo.Mvc.UI;

009.using KendoMVC.CostSimulatorService;

010.using KendoMVC.ImageBrowser.Models;

011.

012.namespace KendoMVC.Controllers

013.{

014. public partial class TextosController : EditorImageBrowserController

015. {

016. #region Propriedades e Campos

017.

018. private const string ContentFolderRoot = "~/Content/";

019. private const string PrettyName = "Images/";

020. private static readonly string[] foldersToCopy = new[] { "~/Content/Uploads/Shared/" };

021.

022. #endregion

023.

024. #region CRUD

025.

026. #region ReadTextos

027.

028. public ActionResult ReadTextos([DataSourceRequest]DataSourceRequest request)

029. {

030. CostSimulatorModel modelo = new CostSimulatorModel(new Uri(@"http://localhost:53212/CostSimulatorModelService.svc/"));

031.

032. IQueryable<Texto> textos = modelo.Textos;

033. DataSourceResult resultado = textos.ToDataSourceResult(request);

034. ViewData["Textos"] = textos;

035. return Json(resultado, JsonRequestBehavior.AllowGet);

036. }

037.

038. #endregion

039.

040. #region CreateTexto

041.

042. [ValidateInput(false)]

043. public ActionResult CreateTexto([DataSourceRequest]DataSourceRequest request, Texto texto)

044. {

045. if (ModelState.IsValid)

046. {

047. CostSimulatorModel modelo = new CostSimulatorModel(new Uri(@"http://localhost:53212/CostSimulatorModelService.svc/"));

048.

049. // Create a new Product entity and set its properties from the posted ProductViewModel

050. Texto entity = new Texto

051. {

052. TextoID = texto.TextoID,

053. Titulo = texto.Titulo,

054. Corpo = texto.Corpo,

055. IsPrivado = texto.IsPrivado,

056. TipoTextoID = texto.TiposTexto != null ? texto.TiposTexto.TipoTextoID : texto.TipoTextoID,

057. TiposTexto = texto.TiposTexto

058. };

059. modelo.AddToTextos(entity);

060. // Insert the entity in the database

061. modelo.SaveChanges();

062. // Get the ProductID generated by the database

063. texto.TextoID = entity.TextoID;

064. return Json(new[] { entity }.ToDataSourceResult(request, ModelState));

065. }

066. // Return the inserted product. The grid needs the generated ProductID. Also return any validation errors.

067. return Json(new[] { texto }.ToDataSourceResult(request, ModelState));

068. }

069.

070. #endregion

071.

072. #region UpdateTexto

073.

074. [ValidateInput(false)]

075. public ActionResult UpdateTexto([DataSourceRequest]DataSourceRequest request, Texto texto)

076. {

077. if (ModelState.IsValid)

078. {

079. CostSimulatorModel modelo = new CostSimulatorModel(new Uri(@"http://localhost:53212/CostSimulatorModelService.svc/"));

080.

081. // Create a new Product entity and set its properties from the posted ProductViewModel

082. var entity = new Texto

083. {

084. TextoID = texto.TextoID,

085. Titulo = texto.Titulo,

086. Corpo = texto.Corpo,

087. IsPrivado = texto.IsPrivado,

088. TipoTextoID = texto.TiposTexto != null ? texto.TiposTexto.TipoTextoID : texto.TipoTextoID,

089. TiposTexto = texto.TiposTexto

090. };

091. // Attach the entity

092. modelo.AttachTo("Textos", entity);

093. modelo.UpdateObject(entity);

094. // Update the entity in the database

095. modelo.SaveChanges();

096. return Json(new[] { entity }.ToDataSourceResult(request, ModelState));

097. }

098. // Return the updated product. Also return any validation errors.

099. return Json(new[] { texto }.ToDataSourceResult(request, ModelState));

100. }

101.

102. #endregion

103.

104. #region DestroyTexto

105.

106. public ActionResult DestroyTexto([DataSourceRequest]DataSourceRequest request, Texto texto)

107. {

108. if (ModelState.IsValid)

109. {

110. CostSimulatorModel modelo = new CostSimulatorModel(new Uri(@"http://localhost:53212/CostSimulatorModelService.svc/"));

111.

112. // Create a new Product entity and set its properties from the posted ProductViewModel

113. var entity = new Texto

114. {

115. TextoID = texto.TextoID

116. };

117. // Attach the entity

118. modelo.AttachTo("Textos", entity);

119. // Delete the entity

120. modelo.DeleteObject(entity);

121.

122. // Delete the entity in the database

123. modelo.SaveChanges();

124. return Json(new[] { entity }.ToDataSourceResult(request, ModelState));

125. }

126. // Return the removed product. Also return any validation errors.

127. return Json(new[] { texto }.ToDataSourceResult(request, ModelState));

128. }

129.

130. #endregion

131.

132. #endregion

133.

134. #region ImageBrowser Code

135.

136. /// <summary>

137. /// Gets the base paths from which content will be served.

138. /// </summary>

139. public override string ContentPath

140. {

141. get

142. {

143. return CreateUserFolder();

144. }

145. }

146.

147. private string CreateUserFolder()

148. {

149. var virtualPath = Path.Combine(ContentFolderRoot, "Uploads", PrettyName);

150.

151. var path = Server.MapPath(virtualPath);

152. if (!Directory.Exists(path))

153. {

154. Directory.CreateDirectory(path);

155. foreach (var sourceFolder in foldersToCopy)

156. {

157. CopyFolder(Server.MapPath(sourceFolder), path);

158. }

159. }

160. return virtualPath;

161. }

162.

163. private void CopyFolder(string source, string destination)

164. {

165. if (!Directory.Exists(destination))

166. {

167. Directory.CreateDirectory(destination);

168. }

169.

170. foreach (var file in Directory.EnumerateFiles(source))

171. {

172. var dest = Path.Combine(destination, Path.GetFileName(file));

173. System.IO.File.Copy(file, dest);

174. }

175.

176. foreach (var folder in Directory.EnumerateDirectories(source))

177. {

178. var dest = Path.Combine(destination, Path.GetFileName(folder));

179. CopyFolder(folder, dest);

180. }

181. }

182.

183. #endregion

184. }

185.}

This is a copy of my StackOverflow initial post (which got 0 replies in 3 days, so I had to come here :) )

Cheers and thanks in advance!

Grid

answered on 30 Dec 2013

3 answers

191 views

Popup edit button logic and placement

Is it possible to move to edit button to the toolbar?

I have a grid of users and would the user logged in should only be allowed to edit their own info.

The solution I’m looking for is either:

1: only show edit button for the row containing them self

2. An edit button in the toolbar that opens the edit form with their info.

My code so far:

@(Html.Kendo().TabStrip()

    .Name("Afdelinger")

    .Items(tabstrip =>


{

        tabstrip.Add()

            .Text("Odense")

            .Selected(true)

            .Content(

                @<text>

                    @RenderEmployeeGrid("Odense")

                </text>

            );

        tabstrip.Add()

            .Text("Købbenhavn")

            .Content(

                @<text>

                    @RenderEmployeeGrid("København")

                </text>

            );

    })

)

@helper RenderEmployeeGrid(string office)

{


@(


Html.Kendo().Grid<ADUser>()

        .Name("ActiveDirectoryUsers" + office)

        .Columns(columns =>

        {

            columns.Bound(p =>
p.ThumbnailPhoto64).Width(96).ClientTemplate("<img width='96'
height='96' src='data:image/png;base64,#=ThumbnailPhoto64#' />");

            columns.Bound(m =>
m.DisplayName).Width(300);

            columns.Bound(m =>
m.Mail).Width(125).ClientTemplate("<a href='mailto:#= Mail #'>#= Mail
#</a>");

            columns.Bound(m =>
m.TelephoneNumber).Width(125).ClientTemplate("<a href='tel:#=
TelephoneNumber #'>#= TelephoneNumber #</a>");

            columns.Bound(m =>
m.Mobile).Width(125).ClientTemplate("<a href='tel:#= Mobile #'>#= Mobile
#</a>");


         columns.Command(commands
=>

            {

                commands.Custom("Vis").Click("showDetails");

                commands.Edit();

            }).Title("Commands").Width(200);

        })

        .ToolBar(toolbar =>

          {

              toolbar.Custom().Text("Click
me").Action("ADUser_Update", "ADUser");

          })

        .Sortable()

        .Filterable()

        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ADUser_Update"))

        .Pageable(pageable => pageable

            .Refresh(true)

            .PageSizes(true)

            .ButtonCount(10))

            .Events(events =>
events.DataBound("hideEditButton"))

        .DataSource(dataSource => dataSource

            .Ajax()

            .Read(read => read.Action("MembersByOffice_JSON", "ADUser", new { Office = office }))

            .Update(update => update.Action("ADUser_Update", "ADUser"))

            .PageSize(10)

            .Sort(sort => sort.Add(m =>
m.DisplayName))

            .Model(model => {

                model.Id(p =>
p.SAmAccountName);

                model.Field(field =>
field.ThumbnailPhoto).Editable(false);

            })

        )

    )

}

Grid

answered on 27 Dec 2013