How to use Grid with complex object and post Grid data with other model's fields?

[Damon]

I made a demo project with two entity types: TestModel1 and TestModel2. TestModel1 has a collection property called TestModel2s, which is ICollection<TestModel2>.
Then I use TestModel1 as MVC model type, and I want to bind TestModel2s to a Grid, while editing TestModel1's properties with the grid in the same form. I tried several times to post to the server, the TestModel2s properties was always null.

Is there any simple way to go through this small problem? I think this complex object is not complex at all. Please refer to the home index.cshtml page, that is a simple demo. Attachments are size limited, so the attached demo project hasn't include the kendo's files.
My further requirement is to edit a ICollection<T> property in a column, how can I bind the ICollection<TestModel1> to a Grid and edit ICollection<TestModel2> (field m=>m.TestModel2s) ?

Anxious waiting it.

[Boyan Dimitrov]

Hello Damon,

 

I believe that our Submit form containing grid along with other input elements code library is what you are looking for. This code library shows an approach how to submit a form which contains a Grid and other input elements to the server. 

 

Regards,
Boyan Dimitrov
Telerik

[Damon]

Hi Boyan,

I tried Submit form containing grid along with other input elements code, but when I clicked "Add" button, the Firefox browser warned me that "ReferenceError: index is not defined", the same as Opera with Webkit engine.

What's wrong with this column bound?

columns.Bound(m => m.Name)
                .ClientTemplate("#= Name #" +
                    "<input type='hidden' name='Products[#=index(data)#].Name' value='#= Name #' />"
                  );

[Damon]

Sorry Boyan,

I haven't seen that there was a <script/> block at the bottom of .cshtml file.

I tried to make that function more flexible like this:

<script>

    function index(dataItem) {
        var data = $("#TestModel2s").data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);
    }

    function indexOfGridRow(dataItem, collectionName) {
        var data = $("#" + collectionName).data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);
    }

</script>

 

Then I used indexOfGridRow instead of index in the Index.cshtml, it worked.

Well done, thanks.

[Damon]

Hello Boyan,

I've replied at the forum and marked your reply as the answer, and I was trying to give a better JS approach to achieve the goal.

I'll keep watching the thread.

[Manikanth]

Hi Boyan,how does validation works if the grid is in popup along with text fields.Because when am trying to update the popup by only changing the grid values.The update button is not triggering.There should be a complete demo on this.

[Boyan Dimitrov]

Hello,

Could you please try the this link since this project should be a bit newer compared to the one in my link. The validation should work as expected since the validation itself does nothing to do with the client template. Basically when a field is updated and it passed the validation the client template (the value for the hidden input should be updated). 

Regards,
Boyan Dimitrov
Progress Telerik