Questions on UI for ASP.NET MVC Forum

1 answer

206 views

Adding custom toolbar command to Export

Hi,

<script>

$(function () {

$("#grid").kendoGrid({

height: 600,

columns: [

{ field: "ENTITY_CATEGORY", width: "250px" },

{ field: "ENTITY_CODE", width: "250px" }

{ command: ["edit"], title:" ", width:"200px"}], //["edit","destroy"]

editable: {

mode: "popup",

confirmation: "Are you sure you want to delete this record?",

confirmDelete: "Delete",

cancelDelete: "Cancel",

template: kendo.template($("#popup_editor").html())

},

pageable: true,

sortable: true,

filterable: true,

toolbar: ["create"], // specify toolbar commands

dataSource: {

serverPaging: true,

serverFiltering: true,

serverSorting: true,

pageSize: 10,

schema: {

data: "Data",

total: "Total",

// errors : "error",

model: {

id: "ENTITY_KEY",

fields: {

ENTITY_KEY: { editable: false, nullable: true },

ENTITY_CATEGORY: { validation: { required: true } },

ENTITY_CODE: { validation: { required: true } }

}

},

batch: true,

transport: {

create: {

url: "@Url.Action("Create_Entity", "Load")",

type: "POST"

},

read: {

url: "@Url.Action("Read_Entity", "Load")",

contentType: "application/json",

type: "POST"

},

update: {

url:"@Url.Action("Update_Entity", "Load")",

type: "POST"

},

destroy: {

url: "@Url.Action("Destroy_Entity", "Load")",

type: "POST"

},

parameterMap: function(data, operation) {

if (operation != "read") {

var result = {};

for (var i = 0; i < data.models.length; i++) {

var entity = data.models[i];

for (var member in entity) {

result["newEntity[" + i + "]." + member] = entity[member];

}

return result;

}

else {

return JSON.stringify(data)

}

});

</script>

<script type="text/javascript">

function onDataBound(e) {

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

// ask the parameterMap to create the request object for you

var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))

.options.parameterMap({

page: grid.dataSource.page(),

sort: grid.dataSource.sort(),

filter: grid.dataSource.filter()

});

// Get the export link as jQuery object

var $exportLink = $('#export');

// Get its 'href' attribute - the URL where it would navigate to

var href = $exportLink.attr('href');

// Update the 'sort' parameter with the grid's current sort descriptor

href = href.replace(/sort=([^&]*)/, 'sort=' + requestObject.sort || '~');

//update filter descriptor with the filters applied

href = href.replace(/filter=([^&]*)/, 'filter=' + (requestObject.filter || '~'));

// Update the 'href' attribute

$exportLink.attr('href', href);

}

$(function () {

$("#export").on("click", function () {

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

var href = this.href;

this.href = href.replace(/columns=([^&]*)/, 'columns=' + kendo.stringify(grid.columns));

});

})

function getColumns(gridColumns) {

var columns = [];

for (var i = 0; i < gridColumns.length; i++) {

if (gridColumns[i].field && !gridColumns[i].hidden) {

columns.push(gridColumns[i].field)

}

return columns.join(",");

}

</script>

I trying to add custom toolbar button for Export to Excel in the toolbar and call the onDataBound function How do i add them ?

Grid

answered on 22 May 2014

2 answers

198 views

Grid in Partial View with Editor Template

I've got a grid that is in a partial view (loaded into the content of a tabstrip). The grid has an update command which calls a post method on my controller. This is all working properly but the popup window for the editor template does not close after it posts. I know it has to do with what I am returning from my post method but I'm not sure what I should return to allow the window to close. Normally I pass back my view model to the partial view and that is what I am doing now and the window stays open. I've also tried just return PartialView() but with the same result.

Here is my controller post method:

[HttpPost]

public ActionResult UpdateAttachment(int proposalID, AttachmentsViewModel vm)

{

User user = new User();

int user_id = user.GetUserIDByBNLAccount(User.Identity.Name);

if (CheckProposalReadAccess(user_id, proposalID))

{

using (var context = new PASSEntities())

{

var model = context.Proposal_Attachments.Find(vm.ID);

model.Inappropriate_Content = vm.Inappropriate_Content;

context.Entry(model).State = System.Data.EntityState.Modified;

context.SaveChanges();

return PartialView(vm);

}

else

{

return PartialView();

}

Grid

answered on 22 May 2014

1 answer

718 views

Pass in parameter AND get selected values

Greetings,

I'm looking for a way to pass in Model data in an on change event on the combo box but also easily retrieve the selected value.

Note, this changes the onChange event delcaration from something like:
.Events(e =>
{
e.Change("ddlOnChange");
})

To:
.Events(e =>
{
e.Change("ddlOnChange('" + Model.Values + "')");
})

Which means
function ddlOnChange(e) {
alert(e); // <-- is no longer valid, because the event is now the passed in object
alert("value: " + this.value()); // Also no longer works, because 'this' becomes the page as a whole
};

Any easy way to do this other than Jquery to the id of the control and snag the value?

Any help would be greatly appreciated.

ComboBox

answered on 21 May 2014

2 answers

509 views

Child Grid Not Passing Correct Id to Controller

Hi

I'm using the latest Q1 2014 commercial updtaes for the UI toolkit.
I have a standard Parent-Child Kendo Grid where i can add and update a record in the parent and i wanted to do the same in the child grid. The parent grid worked fine but i couldn't get the child grid to insert a record. The code is as follows:

view:

<div style="width:800px;font-size:x-small; padding-top:40px;">

@(Html.Kendo().Grid<DRS2014.Models.PathAccountCode>()

.Name("GridRules")

.Columns(columns =>

{

columns.Bound(e => e.Id);

columns.Bound(e => e.Debtors_Account_Code).Title("Debtors<br/>Account<br/>Code");

columns.Bound(e => e.Email).Width(100);

columns.Bound(e => e.EmailConfirmed).Title("Email<br/>Confirmed?").Width(40);

columns.Bound(e => e.BackingReportFormat).Title("Report<br/>Format");

columns.Bound(e => e.BackingReportType).Title("Report<br/>Type");

columns.Bound(e => e.InvoiceType).Title("Invoice<br/>Type");

columns.Command(command => { command.Edit().Text(" "); }).Width(80);

})

.Sortable()

.Pageable()

//.Scrollable()

.ClientDetailTemplateId("detailsTemplate")

//.HtmlAttributes(new { style = "height:430px;" })

.DataSource(dataSource => dataSource

.Ajax()

.Model(m=>m.Id(p=>p.Id))

.PageSize(10)

.Read(read => read.Action("GetPathAccounts", "Admin"))

.Create(create=>create.Action("InsertPathAccount","Admin"))

.Update(update=>update.Action("UpdatePathAccount","Admin"))

.Destroy(delete=>delete.Action("DeletePathAccount","Admin"))

)

.Events(e=>e.Edit("onEdit"))

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

.Editable(editable=>editable

.Mode(GridEditMode.PopUp))

.Filterable()

)

<br />

</div>

<script id="detailsTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<DRS2014.Models.PathAccountCust>()

.Name("Data_#=Id#")

//.Events(e=>e.Edit("onEdit2"))

.Columns(columns=>

{

columns.Bound(o => o.CustGlobalCode);

columns.Bound(o => o.CustName);

columns.Bound(o => o.CustLocation);

columns.Command(command => { command.Edit().Text(" "); });

})

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

.Editable(editable=>editable

.Mode(GridEditMode.PopUp))

.DataSource(dataSource=>dataSource

.Ajax()

// .Aggregates(agg=>

//{

// agg.Add(p => p.Apportionment).Sum();

//})

.Model(m=>m.Id(x=>x.Id))

//.Events(events => events.Error("error"))

.PageSize(10)

.Read(read=>read.Action("GetPathAccountCust","Admin", new { Id = "#= Id #" }))

.Create(create=>create.Action("InsertPathAccountCust","Admin", new { Id = "#= Id #" }))

.Update(update=>update.Action("UpdatePathAccountCust","Admin"))

.Destroy(delete=>delete.Action("DeletePathAccountCust","Admin"))

)

//.Pageable(p=>p.Refresh(true))

.Sortable()

.ToClientTemplate())

</script>

Controller:

public

ActionResult InsertPathAccountCust([DataSourceRequest] DataSourceRequest request, Models.PathAccountCust newAccountCust,

int Id)

{

try

{

newAccountCust.AccountNoId = Id;

_PriceRepository.insertPathAccountCodeCust(newAccountCust);

return Json(new[] { newAccountCust }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);

}

catch (Exception ex)

{

ModelState.AddModelError("ERR1", ex.Message);

return Json(ModelState.ToDataSourceResult(), JsonRequestBehavior.AllowGet);

}

When i break in the controller, the Id value is always 0.
I checked in fiddler and it seems the view is passing back a value correctly as i can see the Id in there.

I tried many variations on this but could not get this to work at all.
However, I saw that both the parent and child grid had a primary key "Id" so i decided to test the system by changing the parent code to "pId".

View:

<div style="width:800px;font-size:x-small; padding-top:40px;">

@(Html.Kendo().Grid<DRS2014.Models.PathAccountCode>()

.Name("GridRules")

.Columns(columns =>

{

columns.Bound(e => e.pId);

columns.Bound(e => e.Debtors_Account_Code).Title("Debtors<br/>Account<br/>Code");

columns.Bound(e => e.Email).Width(100);

columns.Bound(e => e.EmailConfirmed).Title("Email<br/>Confirmed?").Width(40);

columns.Bound(e => e.BackingReportFormat).Title("Report<br/>Format");

columns.Bound(e => e.BackingReportType).Title("Report<br/>Type");

columns.Bound(e => e.InvoiceType).Title("Invoice<br/>Type");

columns.Command(command => { command.Edit().Text(" "); }).Width(80);

})

.Sortable()

.Pageable()

//.Scrollable()

.ClientDetailTemplateId("detailsTemplate")

//.HtmlAttributes(new { style = "height:430px;" })

.DataSource(dataSource => dataSource

.Ajax()

.Model(m=>m.Id(p=>p.pId))

.PageSize(10)

.Read(read => read.Action("GetPathAccounts", "Admin"))

.Create(create=>create.Action("InsertPathAccount","Admin"))

.Update(update=>update.Action("UpdatePathAccount","Admin"))

.Destroy(delete=>delete.Action("DeletePathAccount","Admin"))

)

.Events(e=>e.Edit("onEdit"))

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

.Editable(editable=>editable

.Mode(GridEditMode.PopUp))

.Filterable()

)

<br />

</div>

<script id="detailsTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<DRS2014.Models.PathAccountCust>()

.Name("Data_#=pId#")

//.Events(e=>e.Edit("onEdit2"))

.Columns(columns=>

{

columns.Bound(o => o.CustGlobalCode);

columns.Bound(o => o.CustName);

columns.Bound(o => o.CustLocation);

columns.Command(command => { command.Edit().Text(" "); });

})

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

.Editable(editable=>editable

.Mode(GridEditMode.PopUp))

.DataSource(dataSource=>dataSource

.Ajax()

// .Aggregates(agg=>

//{

// agg.Add(p => p.Apportionment).Sum();

//})

.Model(m=>m.Id(x=>x.Id))

//.Events(events => events.Error("error"))

.PageSize(10)

.Read(read=>read.Action("GetPathAccountCust","Admin", new { pId = "#= pId #" }))

.Create(create=>create.Action("InsertPathAccountCust","Admin", new { pId = "#= pId #" }))

.Update(update=>update.Action("UpdatePathAccountCust","Admin"))

.Destroy(delete=>delete.Action("DeletePathAccountCust","Admin"))

)

//.Pageable(p=>p.Refresh(true))

.Sortable()

.ToClientTemplate())

</script>

Controller:

public

ActionResult InsertPathAccountCust([DataSourceRequest] DataSourceRequest request, Models.PathAccountCust newAccountCust,

int pId)

{

try

{

newAccountCust.AccountNoId = pId;

_PriceRepository.insertPathAccountCodeCust(newAccountCust);

return Json(new[] { newAccountCust }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);

}

catch (Exception ex)

{

ModelState.AddModelError("ERR1", ex.Message);

return Json(ModelState.ToDataSourceResult(), JsonRequestBehavior.AllowGet);

}

THIS WORKS! Just changing the parent primary Key to pId in the database and then changing all the references of this Id to "pId" allows the child grid to add and update records and the controller receives the correct Id passing to it.
But the question is why? Your examples have demos with both parent and child primary keys as "Id" and i have a colleague who has developed a similar parent-child grid and he uses "Id" in both tables too yet the kendo grid insert works for him.

My route config is:

public static void RegisterRoutes(RouteCollection routes)

{

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(

name: "Default",

url: "{controller}/{action}/{id}",

defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

);

}

I don't really want to be modifying my table primary key names so please could you let me know if i have missed something or whether there is a different problem with this grid setup that i've tried to implement?

Thank you,

Shuja

Grid

answered on 21 May 2014

1 answer

146 views

Update kendo grid format based off another field?

Is it possible to change the format and the input of one grid field column based off another grid field column. For example, If I had one column field that contains percent, date, string, or number and the other field contains the data (always stored as a string), it is possible to change the display output and editable options of the data based on the other field. Any examples of this would be greatly appreciated. Note that the only editable field is the data field but each row could have a different format based off the other field.

Grid

answered on 21 May 2014

5 answers

135 views

Editor in mobilelayout is readonly

Hello,

i am trying to Display Kendo Editor inside mobile layout. the Editor loads but it is readonly and do not Display any text. It is readonly and i cannot write anything, but clicking on menus seems to work. Fails on Safari ios and also on android and WP 8.

Anamika

Editor

answered on 20 May 2014

3 answers

523 views

Upload validation

Hello,

I'm using the upload control in async mode and am passing back the empty string to signify success from my post routine. I need to validate that the file extensions and file size are within certain specs when files are uploaded. I have seen posts about handling this in jquery and using an alert to display the message but a) I prefer not to use alerts and b) it shows the alert but still goes to the post method (even with the e.preventDefault in place).

I would prefer to do the checks in the post method and return a string that I can display so it would look like my usual validation. I know that the empty string signifies success and anything else signifies failure but when I try to trap this in onError it doesn't capture it. I'm sure there is a way to do this but I am missing something.

Here is my view:

@model PASS.ViewModels.Proposals.AttachmentsViewModel

<div class="editor-container">

@Html.Hidden("Form_Disabled", ViewData["FormDisabled"])

<p>File uploads can not exceed 1MB each and must be of the following file types: pdf, jpg, gif, png.</p>

<div class="editor-label">

@Html.Label("File(s):")

</div>

<div class="editor-field">

@(Html.Kendo().Upload()

.Name("Upload")

.Async(async => async

.Save("AddAttachments", "Proposals", new { proposalID = Model.Proposal_ID })

)

</div>

<br class="clear" />

<br />

@(Html.Kendo().Grid<PASS.ViewModels.Proposals.AttachmentsViewModel>()

.Name("Attachments")

.Columns(columns =>

{

columns.Bound(c => c.File_Name).ClientTemplate("<a href='" + Url.Action("LoadAttachment", "Proposals") + "/#= ID #'>" + "#= File_Name #" + "</a>").Title("File Name");

columns.Bound(c => c.File_Size).Title("Size");

columns.Bound(c => c.Content_Type).Title("Type");

columns.Command(command => { command.Destroy(); }).Width(90);

})

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(c => c.ID))

.Read(read => read.Action("GetAttachments", "Proposals", new { proposalID = Model.Proposal_ID }))

.Destroy(destroy => destroy.Action("DeleteAttachment", "Proposals"))

)

<br />

<p>Upoaded files will not be available for viewing until they have been reviewed.</p>

</div>

<script type="text/javascript">

$(document).ready(function () {

var formDisabled = $('#Form_Disabled').val();

if (formDisabled == "True") {

$('#Upload').data('kendoUpload').disable();

$('#Attachments').data('kendoGrid').bind("dataBound", function () {

$('.k-grid-delete', '#Attachments').hide();

})

}

$('#Upload').data('kendoUpload').bind("success", function () {

$('#Attachments').data('kendoGrid').dataSource.read();

})

});

</script>

Here is my post method:

[HttpPost]

public ActionResult AddAttachments(int proposalID, IEnumerable<HttpPostedFileBase> upload)

{

int user_id = Convert.ToInt32(((Claim)((ClaimsIdentity)Thread.CurrentPrincipal.Identity).FindFirst(a => a.Type.Equals("UserID"))).Value);

var return_message = "";

if (CheckProposalReadAccess(user_id, proposalID))

{

using (var context = new PASSEntities())

{

foreach (var file in upload)

{

if (Path.GetExtension(file.FileName) != ".pdf" || Path.GetExtension(file.FileName) != ".jpg" || Path.GetExtension(file.FileName) != ".gif" || Path.GetExtension(file.FileName) != ".png")

{

return_message = "Uploads must be one of the following file types: pdf, jpg, gif, png.";

break;

}

if (file.ContentLength > 1024)

{

return_message = "Uploads can not be larger than 1MB each.";

break;

}

Proposal_Attachments model = new Proposal_Attachments()

{

Proposal_ID = proposalID,

Upload_Date = DateTime.Now,

File_Name = Path.GetFileName(file.FileName),

File_Size = file.ContentLength,

Content_Type = file.ContentType,

File_Contents = new byte[file.ContentLength],

};

file.InputStream.Read(model.File_Contents, 0, file.ContentLength);

context.Proposal_Attachments.Add(model);

context.SaveChanges();

}

return Content(return_message);

}

else

{

return RedirectToAction("Index");

}

Thanks!

Upload

answered on 20 May 2014

1 answer

51 views

Problems with Upload widget in MVC with IE7

This code works properly in IE8+, but in IE7 it uploads the file twice:

@(Html.Kendo().Upload()
    .Name("uploadFile")
    .Multiple(false)
    .Async(save => save
                              .Save("DoSomething", "SomeController", new { ... })
                              .AutoUpload(true))
      .Events(events => events
                  .Upload("...")
                  .Success("...")
                  .Error("..."))
)

I also can't disable the upload widget via this command because $("#uploadFile").data("kendoUpload") returns undefined:
     $("#uploadFile").data("kendoUpload").disable();

My Kendo.Mvc version is v4.0.30319.

Any ideas?
Thanks!
--Berry

Upload

answered on 20 May 2014

3 answers

890 views

Need help adding a multiselect or dropdown in my grid

Hi,

I'm working on a user management system in asp.net mvc, where I display all my users in a grid using KendoUI. However, I have a string based list of user roles, which I need to display as a dropdown in my edit view. Since my view is generated based on my model, I'm not really sure how to accomplish this.

Here's how my model looks like:

public class UserModel

{

#region Properties

[Display(Name = @"Username")]

[Required]

public string UserName { get; set; }

[Required]

public string Name { get; set; }

[Display(Name = @"E-mail")]

[EmailAddress]

public string Email { get; set; }

public string Phone { get; set; }

public string Company { get; set; }

[DataType(DataType.Password)]

[Display(Name = @"Password")]

[Required]

public string PasswordHash { get; set; }

[Display(Name= @"Roles")]

public List<string> UserRoles { get; set; }

[ScaffoldColumn(false)]

public string UserRoleIcon { get; set; }

[ScaffoldColumn(false)]

public string UserRoleIconInverted { get; set; }

#endregion

public UserModel()

{

}

public UserModel(UserContract userContract)

{

SetupUserModel(userContract);

}

private void SetupUserModel(UserContract userContract)

{

UserName = userContract.UserName;

Name = userContract.Name;

Email = userContract.Email ?? "";

Phone = userContract.Phone ?? "";

Company = userContract.Company ?? "";

PasswordHash = userContract.PasswordHash ?? "";

UserRoles = new List<string>();

if (userContract.UserRoles != null)

{

foreach (var userRole in userContract.UserRoles)

{

UserRoles.Add(userRole);

}

SelectUserRoleIcon(UserRoles);

}

// TODO: Hierarchy on roles and selecting images?

private void SelectUserRoleIcon(IEnumerable<string> userRoles)

{

foreach (var userRole in userRoles)

{

switch (userRole.ToLower())

{

case "administrator":

UserRoleIcon = "Administrator.png";

UserRoleIconInverted = "Administrator_Black.png";

break;

case "operator":

UserRoleIcon = "Operator.png";

UserRoleIconInverted = "Operator_Black.png";

break;

case "supervisor":

UserRoleIcon = "Supervisor.png";

UserRoleIconInverted = "Supervisor_Black.png";

break;

default:

UserRoleIcon = "Guest.png";

UserRoleIconInverted = "Guest_Black.png";

break;

}

Here's my grid:

@(Html.Kendo().Grid<Stimline.Xplorer.Services.Models.User.UserModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.UserName);

columns.Bound(p => p.Name);

columns.Bound(p => p.Email);

columns.Bound(p => p.Phone);

columns.Bound(p => p.UserRoles);

columns.Command(command => { command.Edit(); }).Width(160);

})

.ToolBar(toolbar => toolbar.Create())

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

.Pageable()

.Sortable()

.Scrollable()

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

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

.Model(model => model.Id(p => p.UserName))

.Create(update => update.Action("EditingPopup_Create", "UserManagement"))

.Read(read => read.Action("EditingPopup_Read", "UserManagement"))

.Update(update => update.Action("EditingPopup_Update", "UserManagement"))

//.Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))

)

I don't really need to display the column with selected roles in the grid, but what I do need is the possibility to add / edit them from the popup. Preferably as a multiselect list, as a user could have several roles. I've tried following this example, but can't seem to manage to get it right.
See the attached images for a description of how it looks now.

Grid

answered on 20 May 2014

1 answer

684 views

Refreshing edited row after pressing update when using Inline Edit

I'm working on an application which I have now almost finished but I have one thing that I really need to sort out before I release. I return a dataset of around 600 rows to the grid. I then chose to Edit one of these rows and change the value in a ComboBox Editor template. For example, I might change it from Jan Jones to John Smith.

This all works fine at the database level. However, when I press Update the values displayed in the Display template are still Jan Jones and not John Smith. So far, the only way I've been able to get this to work is by using a dataSource refresh in the onSync event. However, this is taking at least 15 seconds to reload the entire grid.I guess it is returning the entire dataset and not just the currently displayed page.

Presumably, I am doing something wrong somewhere but I am not sure where. Any help would be most useful as I have been scratching my head on this for a while now.

Controller

01.public JsonResult GetTestDetailed([DataSourceRequest] DataSourceRequest request)

02.{

03. var testTable = dataAccessLayer.GetDataTable("select statement here"

);

                          //testTable will be about 600 rows

04. var testDictionary = (from DataRow row in

testTable.Rows select testTable.Columns.Cast<DataColumn>  ().ToDictionary(column => column.ColumnName, column => row[column].ToString())).ToList().AsQueryable();

05. return Json(testDictionary.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

06. }

07. }

08.

09. [AcceptVerbs(HttpVerbs.Post)]

10. public ActionResult Update([DataSourceRequest] DataSourceRequest request, TestDirectoryDetail testDetail)

11. {

12. dataAccessLayer.Update(testDetail);

13. return Json(new[] { testDetail }.ToDataSourceResult(request, ModelState));

14. }

Grid

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

02. function onSync(e) {

03. var grid = $('#TestGrid').data('kendoGrid');

04. grid.dataSource.read();

05. }

06.</script>

07.

08.@(Html.Kendo().Grid((IEnumerable<DirectoryDetail>)ViewBag.Details)

09. .Name("TestGrid")

10. .HtmlAttributes(new { style = "height:850px;" })

11. .Editable(editable => editable.Mode(GridEditMode.InLine))

12. .Events(e => e.SaveChanges("onSaveChanges"))

13. .Filterable()

14. .Groupable()

15. .Pageable() // Enable pageing

16. .Scrollable(scr=>scr.Height("auto"))

17. .Sortable() // Enable sorting

18. .DataSource(dataSource => dataSource

19. .Ajax()

20. .Events(events => events.Error("error_handler").Sync("onSync"))

21. .PageSize(15)

22. .Model(model =>

23. {

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

25. })

26. .Update(update => update.Action("Update", "Home"))

27. .Read(read => read.Action("GetPracticesDetailed", "Home"))

28. )

29. .Columns(columns =>

30. {

31. columns.Bound(m => m.PracticeId).Title("Id");

32. columns.Bound(m => m.PayManager).Width(150).Title("DPM").Template(m => m.PayManager).EditorTemplateName("PayManagerDropDown").ClientTemplate("#:PayManager#");

33. columns.Command(command => command.Edit()).Title("Actions");

34. })

35. .Resizable(resize => resize.Columns(true)))

Dropdown

01.@(Html.Kendo().ComboBox()

02.        .Name("PayManagerId")

03.        .Filter(FilterType.StartsWith)

04.        .HtmlAttributes(new {style = "width:auto;"})

05.        .Placeholder("Type beginning of name to select new pay manager")

06.        .DataTextField("FullName")

07.        .DataValueField("userid")

08.        .AutoBind(true)

09.        .Suggest(true)

10.        .DataSource(source => source.Read(read => read.Action("GetUsers", "Home")).ServerFiltering(false)))

Grid

answered on 20 May 2014