This is a migrated thread and some comments may be shown as answers.

Grid custom editing example

8 Answers 60 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Cool Breeze
Top achievements
Rank 1
Cool Breeze asked on 18 Mar 2014, 06:23 PM
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!

8 Answers, 1 is accepted

Sort by
0
Cool Breeze
Top achievements
Rank 1
answered on 20 Mar 2014, 04:17 AM
Basically what I'm looking for is a popup edit form with dropdowns to select descriptions while attaching the ID's to the model.
0
Cool Breeze
Top achievements
Rank 1
answered on 20 Mar 2014, 06:09 AM
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!

0
Cool Breeze
Top achievements
Rank 1
answered on 20 Mar 2014, 07:15 AM
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.
0
Cool Breeze
Top achievements
Rank 1
answered on 20 Mar 2014, 07:23 AM
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.
0
Daniel
Telerik team
answered on 20 Mar 2014, 04:15 PM
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:


Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Cool Breeze
Top achievements
Rank 1
answered on 20 Mar 2014, 06:15 PM
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.
0
Cool Breeze
Top achievements
Rank 1
answered on 20 Mar 2014, 06:35 PM
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.
0
Cool Breeze
Top achievements
Rank 1
answered on 20 Mar 2014, 06:40 PM
Just installed 2014 Q1 and the examples are now there, thanks!
Tags
Grid
Asked by
Cool Breeze
Top achievements
Rank 1
Answers by
Cool Breeze
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or