Ajax Binding ClientTemplate issue with Create Action

[Darren Mann]

Hi,

Using a simple ClientTemplate for a details url in a grid which worked in Telerik.MVC product the same cannot be said for Kendo UI.

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

    .Name("VehicleGroupGrid")

    .Columns(column =>

    {

        column.Bound(p => p.Title).ClientTemplate("<a href='/VehicleGroup/Details/#= Id #'>#= Title #</a>");

        column.Command(command => { command.Edit(); command.Destroy(); });

    })

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

    .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine))

    .Sortable()

    .DataSource(dataSource => dataSource

            .Ajax()

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

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

            .Create(create => create.Action("CreateVehicleGroup", "VehicleGroup"))

            .Read(read => read.Action("GetVehicleGroups", "VehicleGroup"))

            .Update(update => update.Action("UpdateVehicleGroup", "VehicleGroup"))

            .Destroy(destroy => destroy.Action("DestroyVehicleGroup", "VehicleGroup"))

    )

     

)

When I attempt to add a new item I get a Microsoft JScript runtime error 'Id' is undefined.

If I don't use a ClientTemplate then the grid works fine.

Thanks in advance

[Nikolay Rusev]

Hello Darren,

Unfortunately we are unable to replicate this error. Can you please send us runnable app that replicates it, so we can debug it locally and assist you further?


All the best,
Nikolay Rusev
the Telerik team

[Mathias]

I have the same problem. In a ClientTemplate it is just possible to use the property which is bound to the column. In the above example, the ID-property isn't bound to the column and so on you get an error.

In addition to that, if you bind nothing to a column you are also not able to use any property. My old Telerik grids had columns which were just Templates with ClientTemplates (using some properties) - Now this isn't possible anymore. I can bind one property to this column but as soon as I need two in my ClientTemplates,... not possible.

[cxu]

In the "Editing custom editor (editing_custom.cshtml)" page of the sample application, if one try to add "Create" feature by modifying line
.ToolBar(toolBar => toolBar.Save())
by
.ToolBar(toolBar => { toolBar.Create(); toolBar.Save(); })
The following error message will popup
Microsoft JScript runtime error: 'Employee' is undefined

[Jason]

I am having the same exact issue with the editing_custom.cshtml file in the sample application.  I'd love to get some feedback on how it is possible to create new records when the view model you are binding against contains other view models (for drop down lists).

Hopefully someone is able to get further along than I have.  I think this is related to the following post.

http://www.kendoui.com/forums/ui/grid/problems-with-data-binding-dropdownlist-in-grid.aspx 

It looks like the Category is initialized with default values for the child objects, in the javascript notation.  However, is there an equivalent in the MVC Wrappers that can be used.  I've tried various attempts and making this work, but they all fail with a Serialization issue or some other nonsense.

Thanks!

[Nikolay Rusev]

Hello Jason,

I am afraid that we do not fully understand what issues you are facing by using custom editors. Can you elaborate a bit more on the matter?

There are few examples showing editing of foreign keys:
http://demos.kendoui.com/web/grid/editing-custom.html
http://demos.kendoui.com/web/grid/foreignkeycolumn.html

There are also similar demos in the dedicated examples of Kendo UI for ASP.NET MVC.

Regards,
Nikolay Rusev
the Telerik team

[Jason]

This example is exactly what I am trying to accomplish.

http://demos.kendoui.com/web/grid/editing-custom.html 


However, I am using the MVC Wrappers, and I do not see a way to make this example work.  Specifically, the example on that page with Razor syntax is not lined up with the example you are showing on the page.  The Category field in the example needs to show a dropdown, but I also want to be able to add new rows to the grid.  

I have edited the sample MVC project shipped with the Kendo framework.  Within the editing_custom.cshtml razor file, I added .ToolBar(toolBar => { toolBar.Create(); toolBar.Save(); }) to allow new row creation.  The application bombs after that has been added.  (See cxu's comment just before mine).

Hopefully you are able to shed some light on this issue.

Thanks!

[Nikolay Rusev]

Hello Jason,

I see what you mean. You will have to add default value for the Employee field in that case as otherwise the grid will not know how to deal with that object on client.

model.Field(p => p.Employee).DefaultValue(
 new ClientEmployeeViewModel()
 {
  EmployeeName = "Foo"
 }
);

Regards,
Nikolay Rusev
the Telerik team

[BigzampanoXXl]

I still tried that and it doesn't work that way :( When I add the Default Value I always get the following error: "Cannot serialize objects of type Kendo.Mvc.Examples.Models.ClientEmployeeViewModel"

I tried it different ways. Witch the EmployeeName, ID, both, ... doesn't work. What do I do wrong?

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ClientOrderViewModel>()

    .Name("Grid")   

    .Columns(columns => {       

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

        columns.Bound(p => p.Employee).ClientTemplate("#=Employee.EmployeeName#");

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

    })

    .ToolBar(toolBar => { toolBar.Save(); toolBar.Create().Text("Add Employee"); })

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

    .Pageable()

    .Sortable()

    .Scrollable()

    .DataSource(dataSource => dataSource       

        .Ajax()        

        .Batch(true)

        .ServerOperation(false)

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

        .Model(model => {

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

            model.Field(p => p.OrderID).Editable(false);

            model.Field(p => p.Employee).DefaultValue( new ClientEmployeeViewModel() { EmployeeName = "Andrew Fuller", EmployeeID = 2 });

        })     

        .Read(read => read.Action("EditingCustom_Read", "Grid"))

        .Update(update => update.Action("EditingCustom_Update", "Grid"))      

    )

)

[Jason]

I also tried that, and it didn't work for me either.  Same result as BigzampanoXXI.  Hopefully there is a work around, as this makes the grids unusable for me.  Also, I can't get sorting to work on these DropDownList fields, because you can't set the sort field separately from the bound field.  Hopefully we can get an answer to both questions from the experts?

I know there is a workaround to this issue, but it is messy.  Set the field to the DropDownList foreign key for binding (EmployeeName), and then set the Name field of the DropDownList to EmployeeName also.  Finally, write custom function to update the underlying model in the OnEdit event, populating the correct EmployeeID from the selected EmployeeName.  However, this is a total hack, and I'd much prefer to get this working via the MVC way, as it is cleaner for our purposes (plus we have around 10 grids that would require this hack).

[Nikolay Rusev]

Hello guys,

"Cannot serialize objects of type Kendo.Mvc.Examples.Models.ClientEmployeeViewModel"
The mentioned error should avoided if you update to latest internal build.

Regards,
Nikolay Rusev
the Telerik team

[Darren Mann]

Hi,

Latest internal build resolves my issue reported at the beginning of this thread. Thanks for the change.

Darren

[Mathias]

Hi,

Nikolay thanks for your solution. I tried it also with my project with the last internal build - works fine, but not perfekt. If you add a new row (also in your sample project) the text in the dropdown-field is "null". But in the last internal build there was said: "Grid should not display the string "null" or "undefined" when the cell value is null or undefined"

Will this also be fixed?

[Nikolay Rusev]

Hello Mathias,

You can set the default value as follow (it can be set to empty string):

model.Field(p => p.Other).DefaultValue(
 new KendoCustomEditor.Models.Other() { Text = "(default)" });

Regards,
Nikolay Rusev
the Telerik team

[King]

This may have resolved the ClientTemplate problem in the GRID, but it broke the Menus.

[Atanas Korchev]

Hello King,

 We are not sure what you mean.

All the best,
Atanas Korchev
the Telerik team

[King]

When I added the new build (dll), and js files, the problem with the CliientTemplate passing in the value was fixed, but the menus that we created looked like a list of options.  The menus were no longer menus.

The following attachment is suppose to be menus:

[Atanas Korchev]

Hi,

 What is "the menu we created"? What menus are you referring to? This forum thread is not related to any menus. Please provide more details and sample code. 

Regards,
Atanas Korchev
the Telerik team

[King]

I know that the thread is not related to menus.  However, your build that you recommended to fix the issue with the ClientTemplate broke the kendo menus.  I listed this ClientTemplate problem as a ticket, and did not get any help whatsoever.

[Atanas Korchev]

Hello King,

I will reply to your support ticket as I don't think the problem is related to this forum thread.

Greetings,
Atanas Korchev
the Telerik team

[Philip]

I just started working with KendoUI and have been using this thread to help work through my issues.
Referencing this example: http://demos.kendoui.com/web/grid/editing-custom.htm

How would I validate the user has selected a DivisionExecutive in my code sample below?  Currently, the dropdownlist defaults to the first value in the select list, however, the actual value is NULL in the controller method causing an exception.  I tried adding [Required] to the property in the View Model, but this does not help.

Thanks in advance!

<%: Html.Kendo().Grid<HOC.Models.DivisionViewModel>()

                .Name("Division")

                .Columns(columns =>

                {

                    columns.Bound(p => p.DivisionID).Visible(false);

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

                    columns.Bound(p => p.DivisionExecutive).ClientTemplate("#=DivisionExecutive.ExecutiveName#").Width(250);

                    columns.Bound(p => p.CodePrefix).Width(100);

                    columns.Bound(p => p.IsActive).Width(60)

                        .HtmlAttributes(new { style = "text-align: center" })

                        .ClientTemplate("# if(IsActive) { # <img height='16' width='16' alt='Connected' src='" +

                            Url.Content("~/img/ui-check-box.png") + "' /> # } else {# <img alt='Not Connected' src='" +

                            Url.Content("~/img/ui-check-box-uncheck.png") + "' /> # } #");

 

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

                        .HtmlAttributes(new { style = "text-align: center" });

                })

                .ToolBar(toolBar => toolBar.Create())

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

                .Pageable()

                .Sortable()

                .DataSource(dataSource => dataSource

                    .Ajax()

                    .ServerOperation(false)

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

                    .Model(model => {

                        model.Id(d => d.DivisionID);

                        model.Field(d => d.DivisionExecutive).DefaultValue(

                            new HOC.Models.DivisionExecutiveViewModel() {

                                ExecutiveID = 0,

                                ExecutiveName = ""

                            });

                    })

                    .Read(read => read.Action("ReadDivisions", "Division"))

                    .Update(update => update.Action("UpdateDivision", "Division"))

                    .Create(create => create.Action("AddDivision", "Division"))

                )

                %>