Grid inside BeginCollectionItem Helper Extension

4 posts, 0 answers
  1. Jason
    Jason avatar
    4 posts
    Member since:
    Feb 2015

    Posted 07 Mar 2016 Link to this post

    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?

  2. Jason
    Jason avatar
    4 posts
    Member since:
    Feb 2015

    Posted 07 Mar 2016 Link to this post

    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);
        $(document).ready(function () {
            $('#add-user').on('click', function () {
                    async: false,
                    url: '/User/GetUser'
                }).success(function (partialView) {

    My GetUser view:

    @model UserViewModel
        .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 =>
            .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.

  3. Jason
    Jason avatar
    4 posts
    Member since:
    Feb 2015

    Posted 07 Mar 2016 Link to this post

    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.

  4. T. Tsonev
    T. Tsonev avatar
    2822 posts

    Posted 10 Mar 2016 Link to this post


    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.

    T. Tsonev
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top