Questions on UI for ASP.NET MVC Forum

2 answers

521 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

169 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

140 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

530 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

54 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

922 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

712 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

3 answers

2.0K+ views

How to Hide a specific row in Kendo UI Grid

Hi,

I would like to hide a specific row in a Kendo UI MVC Grid. Can anybody please help me in this.

---Satish

Grid

answered on 19 May 2014

5 answers

221 views

ClientTemplate column problem

I have a grid with ClientTemplate columns which render to buttons for navigating to other MVC pages. The first column renders to:
<td role="gridcell"><a href="/WebPortal/Patient/GetPatient/500507" class="btn btn-sm">View Patient</a></td>

However, when I add the .Events parameter, then the ClientTemplate columns do not work and render as:
<td>500507</td>

I want to execute a DataBound event but it messes up the columns. Any ideas? Code follows:

@(Html.Kendo().Grid(Model)

.Name("PatientSearchGrid")

.Columns(columns =>

{

columns.Bound(e => e.LName).Title("Last Name");

columns.Bound(e => e.FName).Title("First Name");

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

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

columns.Bound(e => e.ID).Hidden();

columns.Bound(e => e.ID).ClientTemplate(

"<a href='" + Url.Action("GetPatient", "Patient") + "/#= ID #'" + "class='btn btn-sm'>View Patient</a>"

).Width(110).Title("");

columns.Bound(e => e.ID).ClientTemplate(

"<a href='" + Url.Action("CreateAccount", "Patient") + "/#= ID #'" + "class='btn btn-sm'>Create Account</a>"

).Width(127).Title("");

})

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

.Pageable(pageable => pageable

.PageSizes(true).PageSizes(new int[] { 20, 50, 100 })

.ButtonCount(5))

.Sortable()

.Filterable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Sort(s => s.Add(n => n.LName))

.PageSize(20)

.ServerOperation(false))

//.Events(events => events.DataBound("dataBound"))

)

Grid

answered on 19 May 2014

2 answers

89 views

DataViz & Grid datasource

I was looking around for an example of how to use the grid control has the datasource for the DataViz control. Would like the pie chart to change based on the filtered data shown in the grid. Thanks

General Discussions

answered on 19 May 2014