Popup Editing for complex type

[Shahar]

Hi,

I looked at the example in  http://demos.kendoui.com/web/grid/editing-popup.html (ASP.NET MVC)

Kendo.Mvc.Examples.Models.ProductViewModel is a simple object,

I am interested in supporting Create and Update of an object that relates to other objects (in a Parent child manner)

For example : Lets say the grid shows  Students and a Student relates to Phones via StudentPhones
The popup should enable the user to edit/create a Student with its Phones all together.

I wonder if you can supply me  a project that shows how to handle the Create and Update in a similar scenario to the one I described.

 

Thanks in advance.

Lauri

p.s. My app is an N-Tier app using EntityFramework

 

[Vladimir Iliev]

Hi Shachar,

 
Please check the attached example of Grid hierarchy editing using PopUp edit mode - you can use it as a baseline to achieve the desired behavior. 

Also I would suggest to check this demo in our CodeLibrary which demonstrates how to configure Grid Ajax Hierarchy (3 level) Editing.

Kind Regards,
Vladimir Iliev
Telerik

[Shahar]

Hi,
Thanks for the examples ,
Still I wonder if there is a way that a controller will get a Parent with its children populated as a single parameter to the Create/Update Action (Navigation Property in EntityFramework),
Is there a way that the user will perform his Insert(s)/Update(s)/Delete(s) OFFLINE (in the UI) and when he will press Save the modified Model will be send to the controller?

[Petur Subev]

Hello Shachar,

Check the following code library which shows a work-around how to perform single request to update both the nested and the master Grids.

http://www.kendoui.com/code-library/mvc/grid/grid-popup-editing-navigation-property-collection-with-nested-grid.aspx


I hope this helps.

Regards,
Petur Subev
Telerik

[Shahar]

Hi,
Thanks for the example, Still have some issues , hopeyou can help,
My grid in the popup is based on StudentCourseViewModel (corresponding to TerritoryViewModel in the example)
StudentCourseViewModel  has 4 fields studentId, couseId, FromDate ToDate
I need that when the user adds a row  to the StudentCourse grid in the StudentViewModel.chtml Editor the following controls will be used
1. Courses Dropdown
2. A control for selecting Date and Time
3. A control for selecting Date and Time
How do I make the grid show these controls?
by the way I need that the courses selected by the user will not have duplicates , How do I enforce that?

Another thing I need to know is regarding Validation , in My MVC3 app I use DataAnnotations for validation and placed some @Html.ValidationMessageFor
in few places in the popup UI,For some reason although I see the ErrorMessage I customized in my DataAnnotations , only one error is shown at a time and it is placed
on top of  the Update button. Can't I use @Html.ValidationMessageFor where I want the error message to show? How do I do Model Validation on the client side
(I need to enforce there will be at least one row in the studenCources grid)
How do I do validation of a row in the StudentCourse grid (e.g. Course and FromDate are reqired, ToDate>=FromDate etc.)

Tanks,
Lauri
 

 

[Vladimir Iliev]

Hi Shachar,

Please find the answers of your questions below:

1) How do I make the grid show these controls? - you can check this article for more information about the EditorTemplates in the Grid. 

2) I need that the courses selected by the user will not have duplicates , How do I enforce that? - you can add custom validation function which to validate this field against the other records in the Grid. This can be achieved by extending the Grid build-in validator:

e.g.:

(function ($, kendo) {
    //Extending the Grid build in validator
    $.extend(true, kendo.ui.validator, {
        rules: {
            // custom rules
            custom: function (input, params) {
                if (input.is("#Category")) {
                    //If the input is LastSupply
                    var ddl = $(input).data("kendoDropDownList");
                    var grid = $(input).closest("[data-role=grid]").data("kendoGrid");
                    var allRecords = grid.dataSource.data();

                    //validate the input agains other records in the grid

                    if (isNotValid) {
                        return false;
                    }
                }
                //return true if the validation pass
                return true;
            }
        },
        messages: { //custom rules messages
            custom: function (input) {
                // return the message text
                return "Please select another option";
            }
        }
    });
})(jQuery, kendo);

3) Can't I use @Html.ValidationMessageFor where I want the error message to show? How do I do Model Validation on the client side - basically this is the correct way of specifying the place of the validation message - if you need additional help I would suggest to open an new support thread / forum post with more details about what exactly you are trying to achieve.

4) How do I do validation of a row in the StudentCourse grid (e.g. Course and FromDate are required, ToDate>=FromDate etc.) - please check the second answer above which demonstrates how to add custom validation to the Grid. 
Kind Regards,
Vladimir Iliev
Telerik