Questions on UI for ASP.NET MVC Forum

6 answers

1.7K+ views

popup editor with kendo dropdownlist for nullable field

I have an ajax grid using popup edit mode and kendo dropdownlists in the popup. On the post to the controller the dropdownlist value is not bound to the model property if the model property is a nullable int. If I use the regular mvc dropdownlist the value posts fine. I also have a kendo dropdownlist of states (text and value are both string) and that posts fine to the model property of string.

I am using the internal build from 8/31.

The Grid:

@(Html.Kendo().Grid<Contact>()

.Name("ContactGrid")

.Columns(columns =>

{

columns.Bound(x => x.LastName).Title("Last Name");

columns.Bound(x => x.FirstName).Title("First Name");

columns.Command(command => { command.Edit(); command.Destroy(); }).Title("Actions").Width(200);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(100)

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

.Read("_Read", "Clients")

.Update("_Update", "Clients")

.Create("_Create", "Clients")

.Destroy("_Destroy", "Clients")

)

.ToolBar(toolbar => toolbar.Create().Text("Add New Client"))

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

.Sortable()

.Scrollable(scrollable => scrollable.Virtual(true).Height(280))

.Events(events => events.Edit("edit"))

)

Model's editor template

<div class="mvceditor-label">

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

</div>

<div class="mvceditor-field">

@Html.Kendo().DropDownListFor(x => x.State).BindTo(new SelectList(@ViewBag.States, "Abbreviation", "Name"))

</div>

<div class="mvceditor-label">

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

</div>

<div class="mvceditor-field">

@Html.DropDownListFor(x => x.LabId, new SelectList(@ViewBag.Labs, "Id", "Description"))

</div>

<div class="mvceditor-label">

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

</div>

<div class="mvceditor-field">

@Html.Kendo().DropDownListFor(x => x.TierId).BindTo(new SelectList(@ViewBag.Tiers, "Id", "Description"))

@Html.ValidationMessageFor(x => x.TierId)

</div>

The Model:

public class Contact

{

public int? Id { get; set; }

[Required(ErrorMessage="Required")]

[DisplayName("First Name *")]

public string FirstName { get; set; }

[Required(ErrorMessage = "Required")]

[DisplayName("Last Name *")]

public string LastName { get; set; }

[Required(ErrorMessage = "Required")]

[DisplayName("User Tier *")]

public int? TierId { get; set; }

public string State { get; set; }

[DisplayName("Default Lab")]

public int? LabId { get; set; }

public string LastUpdateBy { get; set; }

}

Controller:

public ActionResult Index()

{

SetupLists();

return View();

}

public ActionResult _Read([DataSourceRequest] DataSourceRequest request)

{

return Json(contactsService.Get().ToDataSourceResult(request));

}

[HttpPost]

public ActionResult _Create([DataSourceRequest] DataSourceRequest request, Contact contact)

{

if (ModelState.IsValid)

{

contact.LastUpdateBy = User.Identity.Name;

contactsService.Create(contact);

}

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

}

[HttpPost]

public ActionResult _Update([DataSourceRequest] DataSourceRequest request, Contact contact)

{

if (ModelState.IsValid)

{

contact.LastUpdateBy = User.Identity.Name;

contactsService.Update(contact);

}

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

}

private void SetupLists()

{

IList<Lab> labs = labsService.Get();

labs.Insert(0, new Lab { Description = "" });

IList<Tier> tiers = tiersService.Get();

tiers.Insert(0, new Tier { Description = "" });

IList<Institution> institutions = institutionsService.Get();

institutions.Insert(0, new Institution { Description = "" });

IList<Contact> contacts = contactsService.Get();

contacts.Insert(0, new Contact { FullName = "" });

IList<Grant> grants = grantsService.Get();

grants.Insert(0, new Grant { Description = "" });

IList<State> states = statesService.Get();

states.Insert(0, new State { Name = "" });

ViewBag.Labs = labs;

ViewBag.Tiers = tiers;

ViewBag.Institutions = institutions;

ViewBag.Contacts = contacts;

ViewBag.Grants = grants;

ViewBag.States = states;

}

Grid

answered on 21 Aug 2013

2 answers

147 views

How do I RenderAs with Html.Kendo().Chart() ?

There doesn't appear to be an extension for this feature that is documented as an available method and is easily reachable using the JavaScript implementation. I would expect it to be directly off the Chart() method, but it's not there.

It is vaguely referenced here (http://www.kendoui.com/forums/permalink/boGkX66aG2OF1P8AAFTdxQ), but I can't tell where.

We're using 2013.1.514.

@(Html.Kendo().Chart().RenderAs()) //<-- this doesn't work.

Chart

answered on 21 Aug 2013

1 answer

197 views

When using a master detail grid with a client template, I am getting a syntax error

I am using a master detail grid in Ajax mode with a client grid in a client template. If I don't include the client template, everything is fine. When I do include the client template, I get a syntax error for every line in the master grid. The syntax error is the ImageId (the model id) of the master grid. I can see no reference to it anywhere in the runtime code.

A second, somewhat related question is how do I reference items in the client grid? For instance when I am creating the client grid in the template, I can get the value of the ImageId from the master grid using "#=ImageId#'. However, if I try to reference the fields of the client grid data structure the same way I get an error saying it can't find the field. I am assuming this is because it is looking in the master grid data structure. How do I reference the client data structure's fields?

Thank you,
Kerry

The aspx is included below:

01.<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<int?>" %>

02.<%@ Import Namespace="WellsFargo.NewsPub.Web.UI.Areas.Attachment.Models" %>

03.<%

04.

var workflowUrl = Url.Content("~/" + Constants.Areas.Attachment + "/" + Constants.Controllers.Image + "/" + Constants.ImageController.ExecuteImageWorkflowCommand);

05.%>

06.<% Html.Kendo().Grid<ImageModel>()

07. .Name("PublicationImagesGrid")

08. .DataSource(dataSource => dataSource

09. .Ajax()

10. .Model(model => model.Id(i => i.ImageId))

11. .Read(Constants.ImageController.ReadPublicationImages, Constants.Controllers.Image, new { publicationId = Model })

12. .Destroy(destroy => destroy.Action(Constants.ImageController.DeleteImage, Constants.Controllers.Image))

13. )

14. .HtmlAttributes(new { @class = "image-grid" })

15. .Columns(columns =>

16. {

17. columns.Bound(pub => pub.PublicationId).Hidden(true);

18. columns.Bound(pub => pub.ImageId);

19. columns.Bound(c => c.Thumbnail)

20. .Title("Thumbnail")

21. .Width(1)

22. .ClientTemplate("<img src='#= ThumbnailSrc #" + "' alt='#= Tag #' />");

23. columns.Bound(pub => pub.ImageSortOrder).Title("Sort Order");

24. columns.Bound(c => c.FileName)

25. .Title("File Name")

26. .Width(1);

27. columns.Bound(c => c.Dimensions)

28. .Width(1);

29. columns.Bound(c => c.Tag);

30. columns.Bound(c => c.Caption);

31. columns.Bound(c => c.ImageId)

32. .ClientTemplate("#= get_image_approval_control('"

33. + workflowUrl

34. + "', ImageId, 1, '"

35. + Constants.ImageController.ReadPublicationImages + "', "

36. + (int)DataConstants.ImageStatus.Approved + ", "

37. + (int)DataConstants.ImageStatus.Rejected + ", "

38. + (int)DataConstants.ImageStatus.ApprovalRequired + ") #")

39. .Width(150)

40. .Title("Status");

41. columns.Command(command => command.Destroy());

42. columns.Bound(c => c.Height).Hidden(true);

43. })

44. .ClientDetailTemplateId("child-image-template")

45. .ToolBar(toolbar => toolbar.Template(() =>

46. { %> <a onclick='create_image(<%= Model %>)' class='k-button'>Add New Image</a> <% }))

47. .Events(e => e

48. .DataBound("image_grid_data_bound")

49. )

50. .Render();

51.%>

52.

53.<script id="child-image-template" type="text/x-kendo-template">

54. <%= Html.Kendo().Grid<ChildImageDto>()

55. .Name("ChildImages_#=ImageId#")

56.

.DataSource(ds => ds.Ajax().Read(Constants.ImageController.ReadChildImages, Constants.Controllers.Image, new {parentImageIdStr = "#=ImageId#"}))

57. .Columns(col => {

58. col.Bound(i => i.ChildImageId);

59. col.Bound(i => i.MimeType);

60. col.Bound(i => i.Dimensions);

61. col.Bound(i => i.BinarySrc).ClientTemplate("<img src='#=BinarySrc#' alt='#=Tag#' />");

62. })

63. .ToClientTemplate() %>

64.</script>

Grid

answered on 21 Aug 2013

1 answer

231 views

[Solved] Append item - Success Callback not working

Hello Kendo UI Team,

I'm trying to add and select a new item to a treeview with remote datasource. This works as long as the branch of the tree is already loaded. If the branch is not loaded, the append-method returns null as documented. I tried to add a success callback method but it seems as if it is never called.

function createNewItem() {

var tree = $("#dvTree").data("kendoTreeView");

var selected = tree.dataItem(tree.select());

var newnode = { text: '<new>', type:itemtype };

newelement = tree.append(newnode, $(tree.select()), function () { alert("success"); });

console.log(newelement);

if (newelement) {

tree.select(newelement);

tree.trigger("select", { node: newelement });

}

Am I trying a wrong approach here? Kendo UI Version is 2013.2.716.

Thanks in advance.

TreeView

answered on 21 Aug 2013

6 answers

367 views

[Solved] How to edit scedule event window

when clicking on a event in the schedule, it opens a window, how can we edit that window, or replace it with another,
thanks.

Scheduler

answered on 21 Aug 2013

1 answer

865 views

how to click kendo grid bound column to open a new pop up window?

How to click kendo grid bound column to open a new window?
I want the command text be the bound column data. click the data cell to open a new window.

ie how to make the text "bounddata" to show the grid bound column data, for example if its' a data filed , I want the date to show in the cell, click the cell link to pop up a new window.

columns.Command(command => command.Custom("ViewDetails").Text(bounddata)Click("showDetails"));

ie, for the example http://demos.kendoui.com/web/grid/custom-command.html,

I like to open the detail window by clicking the Title link instead of click "View Detail".
How to do this? Can you provide detail sample code?

Thanks!

Grid

answered on 21 Aug 2013

2 answers

115 views

Scheduler doesn't display correctly in even a minimal configuration

I have what I consider the basics of kendo scheduler installed and it doesn't display correctly. I tried pasting the code from the kendo scheduler basic demo and experienced the same issues. Attached is a screenshot of what I see in Chrome. Below is a minimal page.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<link href="Content/kendo/kendo.common.min.css" rel="stylesheet" />

<link href="Content/kendo/kendo.default.min.css" rel="stylesheet" />

<script src="Scripts/jquery.min.js"></script>

<script src="Scripts/kendo.all.min.js"></script>

</head>

<body>

<div class="k-content">

<div id="mydiv"></div>

</div>

<script>

$(function () {

$("#mydiv").kendoScheduler({

height: 600

});

</script>

</body>

</html>

Scheduler

answered on 20 Aug 2013

4 answers

338 views

[Solved] Option Label not Rendering

I am using the latest internal build (Kendo UI Complete v2013.2.814) of KendoUI and have noticed if I return empty lists to a dropdown the OptionLabel is no longer rendering correctly.

Example Usage:

@(Html.Kendo().DropDownListFor(model => model.EmploymentId)

.OptionLabel("* Not Selected")

.DataTextField("Name")

.DataValueField("Id")

.BindTo(Model.Employments)

.Events(e => e.Select("EmploymentSelected")))

DropDownList

answered on 20 Aug 2013

1 answer

413 views

Kendo Grid update and Web API

Hi,
I am following the example
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},

However, when I am using my Web API address for update, it shows "Request Method:GET Status Code:405 Method Not Allowed". My Web api Update method is a HttpPost method. Any suggestions please??

-Nahid

Grid

answered on 20 Aug 2013

1 answer

357 views

Html.Kendo() vs Html.Telerik() and other documentation issues

I am relatively new to MVC and web programming in general but have used almost all the other Telerik controls (Forms, WPF, Silverlight). I downloaded and installed what I believe to be the Q2 2013 Kendo MVC controls. All of the documentation and examples use Html.Kendo()... But all I can find are Html.Telerik()... This would not be a problem except the documentation and demos do NOT match the api I appear to have. For example I am working with the Grid control and there is no OnChange event like in the demos and documentation but there are OnRowSelect and OnRowSelected events which are not documented.

Am I missing something?

Thanks
Dave Goughnour

General Discussions

answered on 20 Aug 2013