Grid custom editing example

[Cool Breeze]

Hello,

I am attempting to setup a scenario similar to your "Grid custom editing" example however I have a few questions regarding how the combobox/dropdown is bound.

In the .cshtml file you have the following code when setting up the Category column:

columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(160);

I've  got a few questions on this. I've tried to track down the "ClientTemplate" property in the Kendo documentation and haven't found a thing, so could you explain what is going on here? I'm assuming the #=Category.CategoryName# is basically saying show the CategoryName property of the object that is bound to the list item, but I'm not really sure. If I'm wrong, please tell me what is being done with this syntax.

Next, I see where you are setting the DefaultValue by accessing ViewData["defaultCategory"], but I don't see anywhere that you access ViewData["categories"] which is what I am assuming you are binding the dropdownlist to.

Are there pieces of this little app that is displayed online that you are not showing the code to? Can you explain how the drop down is being databound to the list of categories?

What I am after is that the grid would be bound to a collection on my viewmodel and the combox would be bound to another property on the viewmodel.

Thanks for any help!

[Cool Breeze]

Basically what I'm looking for is a popup edit form with dropdowns to select descriptions while attaching the ID's to the model.

[Cool Breeze]

I guess the edit mode doesn't really matter.

I think I am close. Here is my view:

@model Web.ViewModels.MaintainZonesViewModel

@{
    ViewBag.Title = "Maintain Zones";
}

<h2>Maintain Zones</h2>

@(Html.Kendo().Grid(Model.Zones)
    .Name("MaintainZonesGrid")
    .Columns(columns =>
    {
        columns.Bound(zone => zone.ZoneName).Title("Name");
        columns.Bound(zone => zone.Page).Title("Page").ClientTemplate("#=Page.PageName#").Width(125);
        columns.Bound(zone => zone.ContentType).Title("Content Type").ClientTemplate("#=ContentType.Description#").Width(125); ;

        columns.Command(command => { command.Destroy(); }).Width(110);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable(scr=>scr.Height(430))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(zone => zone.ZoneId);
            model.Field(zone => zone.ZoneId).Editable(false);
            model.Field(zone => zone.Page).DefaultValue(Model.DefaultPage);
            model.Field(zone => zone.ContentType).DefaultValue(Model.DefaultContentType);
        })
        .Create( create => create.Action("AddZone", "SiteAdministrator"))
        .Update( update => update.Action("UpdateZone", "SiteAdministrator"))
        .Destroy( delete => delete.Action("RemoveZone", "SiteAdministrator"))
        )
     )

I have two partial views defined each named after the data type of the column ("Page" and "ContentType") as described at the bottom of the page here: http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq. Still no DropDownList in edit mode, just an ugly form with all of my objects properties. I feel like I have to be pretty close, anyone have any thoughts? Thanks!

[Cool Breeze]

I stumbled upon this:

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates

Followed it to the T, and still no dropdown.

[Cool Breeze]

I guess I didn't follow it closely enough, moving my partial view to the "EditorTemplates" folder did the trick. I also found out from that article that the name of the widget has to match the name of the property being edited. I'm glad I finally got it working but it would have gone a lot quicker if all of the code was available with the examles, the custom editor example is missing all kinds of critical code. Unless the source for the examples comes with the product and I just haven't been able to find it... that would have worked too.

[Daniel]

Hi,

The demos are available in a sample application that is included with the installation. Please check this documentation topic for more detailed information on this mater.
Regarding the ClientTemplate - the string passed to the method will be used for a Kendo Template and evaluated in the context of the row item. The following documentation topics provide more detailed information on customizing the cell content and the Kendo Templates:

• How do I customize the way a property is displayed in a grid bound column
• Kendo UI Templates

Regards,
Daniel
Telerik

 

 

[Cool Breeze]

Awesome. Having access to all of the code for the sample applications will help out a ton, thank you for pointing me in the right direction and for providing some other links to useful documentation.

[Cool Breeze]

Daniel, there is no "Examples" directory inside my wrappers\aspnetmvc folder. No wonder I couldn't find it before. I have a DevCraft complete license and have downloaded and installed everything, but I'll try again.

[Cool Breeze]

Just installed 2014 Q1 and the examples are now there, thanks!