Grid inside BeginCollectionItem Helper Extension

[Jason]

Does anyone have any experience using a Telerik Kendo Grid inside of the BeginCollectionItem HTML helper?

I have a view that lists a number of Users.  Each time you select a user, that user's details (defined inside an Editor Template which contains the Kendo Grid) are populated into a Kendo Panel Bar.  The HTML.BeginCollectionItem extension is being used because you can have "n" number of Users selected at a given time, and I want the user to be able to see multiple Editor Templates at once.

This has worked well for various different controls in the editor template (Kendo Text Boxes, Kendo Combo Boxes, etc.), but the grid is giving us problems.  The grid can display the data just fine, but when you click on a cell to edit its values, a generic Javascript error is thrown: "Uncaught SyntaxError: Unexpected identifier".  If you dig a little deeper, this is the code block that apparently has the problem (which I believe is kendo code):

(function(d<br>/**/) {<br>return (((d.Users || {})[c57d5c44-c352-4935-8cd7-b3ef45a697f2] || {}).Username)<br>})

I believe the issue revolves around how the BeginCollectionItem extension names the controls inside the Editor Template, but I haven't been able to resolve it.  Has anyone seen anything similar?

[Jason]

I made up a simple example to showcase what I am seeing, stripping out all the unnecessary information:

My Index view, which just has a button to add a new user (which loads another instance of the Editor Template):

@using (Html.BeginForm())
{
    <input type="button" id="add-user" value="Add User" />
    <input type="submit" id="save-button" value="Save" />

    <div id="user-list">
        @foreach (var viewModel in Model.Users)
        {
            Html.RenderPartial("GetUser", viewModel);
        }
    </div>
}


<script>
    $(document).ready(function () {
        $('#add-user').on('click', function () {
            $.ajax({
                async: false,
                url: '/User/GetUser'
            }).success(function (partialView) {
                $('#user-list').append(partialView);
            });
        });
    });
</script>

My GetUser view:

@model UserViewModel

@(Html.Kendo().Grid<EmailAddressViewModel>()
    .Name("userAddresses_" + Model.UserId)
    .Editable(e => e.Mode(GridEditMode.InCell))
    .Columns(c =>
    {
        c.Bound(m => m.EmailAddressId);
        c.Bound(m => m.Address);
        c.Bound(m => m.Type);
        c.Bound(m => m.Active);
    })
    .DataSource(d =>
        d.Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Read(read => read.Action("GetAddresses", "User"))
        .Model(m => m.Id(t => t.EmailAddressId))
    )
)

 

This displays the grid with a few records, but when you click on one of the cells to edit it (for instance, you want to edit the email address), you see that Javascript error thrown.

[Jason]

Sorry, that didn't properly display my GetUser partial view.  You can see it here: 

@using (Html.BeginCollectionItem("Users"))
{
    @Html.EditorFor(m => m)
}

The code above with the Grid is my User Editor Template.

[T. Tsonev]

Hi,

As far as I can see BeginCollectionItem puts GUIDs as prefix to inputs. As a result we get an input named as "Users[5b0d6bb0-99a8-4f26-a901-c8076c1aad11].EmailAddressId". This doesn't play very well with the Grid InCell editing mode.

My advice would be to use the InLine or PopUp editing as they don't apply those prefixes.

I hope this helps.

Regards,
T. Tsonev
Telerik