Grid hierarchy not evaluating client-side expression for grid name uniqueness

[Tobania]

Hello,

I have the following test code on my view:

@(Html.Telerik()
    .Grid<RequestLegalEntityModel>()
    .Name("gridScheduleOfValues")
    .TableHtmlAttributes(new { style = "table-layout: fixed" })
    .Columns(c =>
    {
        c.Bound(m => m.Name).Title("Legal Entity");
    })
    .DataBinding(db => db.Ajax()
        .Select("SelectEntities", "GridTest")
    )
    .DetailView(details =>
        details.ClientTemplate(

            Html.Telerik().Grid<PropertySovMaterialDamageLocationModel>()
                .Name("gridLegalEntity_<#= LegalEntityId #>")
                .DataBinding(db => db.Ajax()
                    .Select("SelectMDLocations", "GridTest", new { legalEntityId = "<#= LegalEntityId #>" })
                )
                .Columns(c =>
                {
                    c.Bound(m => m.RequestLocationName);
                })
                .ToHtmlString()
        )
    )
)

When the page is rendered on the client, the second grid's ID is rendered as such:

<div id="gridLegalEntity_____LegalEntityId___" class="t-widget t-grid">

Whilst it should render something along the lines of

<div id="gridLegalEntity_98451" class="t-widget t-grid">

Notice how I use the same client-side expression on the Select databinding handler and it does work there.
I.e, when I click open the first record, it will perform an ajax callback to my controller and the url does contain "?legalEntityId=98451" and not "?legalEntityId=___LegalEntityId___"

.DataBinding(db => db.Ajax()
    .Select("SelectMDLocations", "GridTest",
        new {
            legalEntityId = "<#= LegalEntityId #>"
        }
    )
)

So bottom line is:

This works, it correctly replaces "<#= LegalEntityId #>" with the actual ID value of the parent:

.DataBinding(db => db.Ajax()
    .Select("SelectMDLocations", "GridTest",
        new {
            legalEntityId = "<#= LegalEntityId #>"
        }
    )
)

This does NOT work, it replaces "<#= LegalEntityId #>" with "___LegalEntityId__":

.Name("gridLegalEntity_<#= LegalEntityId #>")

Any ideas?

[Pechka]

Hi

I think client expressions are surrounded with #= # instead of <#= #> which is used in MVC Extensions.

[Tobania]

Nope, I've been following the online documentation:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-master---detail-client-detail-template-and-hierarchy.html#ClientHierarchy

[Tobania]

Bump, does anyone see the problem with my setup?

[Tobania]

Hello,

I've tracked it down to being a bug in the version of the internal build we're using. (2012.1.522.340)

I have copied over all my code and started a new telerik MVC3 project using the opensource license (2012.1.214.340) and the grids work fine (they all get their seperate unique ID's)

[Tobania]

This is the code I have used for testing. It can be copied and pasted directly into an existing test project, no database interaction required.

View:

@model GridTestModel
@using Telerik.Web.Mvc.UI;
@using ClientSideValidationBug001.Models;
@using System.Web.Script.Serialization;
@using System.Text;
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">
    function LegalEntities_DataBound(e) {
        var grid = $(this).data('tGrid');
        expandFirstRow(grid, e.row);
    }

    function expandFirstRow(grid, row) {
        if (grid.$rows().index(row) == 0) {
            grid.expandRow(row);
        }
    }

</script>
@(Html.Telerik().Grid<TestLegalEntity>()
    .Name("gridLegalEntities")
    .TableHtmlAttributes(new { style = "table-layout: fixed" })
    .Columns(c =>
    {
        c.Command(com =>
        {
            com.Edit().ButtonType(GridButtonType.Image);
            com.Delete().ButtonType(GridButtonType.Image);
        }).Width(75);
        c.Bound(m => m.Name).Title("Legal Entity");
    })
    .DataKeys(dk => dk.Add(m => m.Id))
    .DataBinding(db => db.Ajax().OperationMode(GridOperationMode.Server)
        .Select("SelectLegalEntities", "GridTest", new { requestId = Model.RequestId })
        .Update("UpdateLegalEntity", "GridTest")
        .Insert("InsertLegalEntity", "GridTest", new { requestId = Model.RequestId })
        .Delete("DeleteLegalEntity", "GridTest")
    )
    .ClientEvents(e => e.OnRowDataBound("LegalEntities_DataBound"))
    .DetailView(d =>
        d.ClientTemplate(

            Html.Telerik().Grid<TestLocation>()
                .Name("gridLocations_<#= Id #>")
                .Columns(c =>
                {
                    c.Command(com =>
                    {
                        com.Edit().ButtonType(GridButtonType.Image);
                        com.Delete().ButtonType(GridButtonType.Image);
                    });
                    c.Bound(m => m.Name);
                    c.Bound(m => m.Address);
                    c.Bound(m => m.Postcode);
                    c.Bound(m => m.City);
                    c.Bound(m => m.State);
                    c.Bound(m => m.Country);
                })
                .DataKeys(dk => dk.Add(m => m.Id))
                .DataBinding(db => db.Ajax().OperationMode(GridOperationMode.Server)
                    .Select("SelectLocations", "GridTest", new { legalEntityId = "<#= Id #>" })
                    .Insert("InsertLocation", "GridTest", new { legalEntityId = "<#= Id #>" })
                    .Update("UpdateLocation", "GridTest", new { legalEntityId = "<#= Id #>" })
                    .Delete("DeleteLocation", "GridTest", new { legalEntityId = "<#= Id #>" })
                )
                .ToHtmlString()
        )
    )
)

Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Telerik.Web.Mvc;
using ClientSideValidationBug001.Models;

namespace ClientSideValidationBug001.Controllers
{
    public class GridTestController : Controller
    {
        private static GridTestModel _myModel;
        public GridTestModel MyModel
        {
            get
            {
                if (_myModel == null)
                {
                    _CreateModel();
                }

                return _myModel;
            }
            set
            {
                _myModel = value;
            }
        }


        public ActionResult Index()
        {
            return View(MyModel);
        }

        private void _CreateModel()
        {
            _myModel = new GridTestModel()
            {
                RequestId = 1234,
                LegalEntities = new List<TestLegalEntity>()
                {
                    new TestLegalEntity()
                    {
                        Id = 1,
                        RequestId = 1234,
                        Name = "Legal Entity 1",
                        Locations = new List<TestLocation>()
                        {
                            new TestLocation()
                            {
                                Id = 1,
                                TestLegalEntityId = 1,
                                Name = "Test location 1",
                                Address = "Test address 1",
                                Postcode = "134679",
                                City = "Test city 1",
                                State = "Test state 1",
                                Country = "Test country 1",
                                MaterialDamageDetails = new TestLocationMaterialDamageDetails()
                                {
                                    Id = 1,
                                    TestLocationId = 1,
                                    BuildingValuationTypeId = 1,
                                    ContentsValuationTypeId = 2,
                                    StockValuationTypeId = 3,
                                    Other1ValuationTypeId = 4,
                                    Other1LabelText = "My custom label"
                                },
                                MaterialDamageData = new TestLocationMaterialDamageData()
                                {
                                    Id = 1,
                                    TestLocationId = 1,
                                    BuildingInsured = 100,
                                    ContentsInsured = 100,
                                    StockInsured = 100,
                                    StockPercentage = 100,
                                    Other1Insured = 100,
                                    TotalRate = 2,
                                    TotalPremium = 100,
                                    UseTotalRate = true
                                },
                                BusinessInterruptionDetails = new TestLocationBusinessInterruptionDetails()
                                {
                                    Id = 1,
                                    TestLocationId = 1,
                                    Other1LabelText = "My custom label"
                                },
                                BusinessInterruptionData = new TestLocationBusinessInterruptionData()
                                {
                                    Id = 1,
                                    TestLocationId = 1,
                                    GrossProfitInsured = 100,
                                    WagesInsured = 100,
                                    ICOWInsured = 100,
                                    Other1Insured = 100,
                                    TotalRate = 2,
                                    UseTotalRate = true,
                                    TotalPremium = 100
                                }
                            },
                            new TestLocation()
                            {
                                Id = 2,
                                TestLegalEntityId = 1,
                                Name = "Test location 1.2",
                                Address = "Test address 1.2",
                                Postcode = "134679",
                                City = "Test city 1.2",
                                State = "Test state 1.2",
                                Country = "Test country 1.2",
                                MaterialDamageDetails = new TestLocationMaterialDamageDetails()
                                {
                                    Id = 2,
                                    TestLocationId = 2,
                                    BuildingValuationTypeId = 1,
                                    ContentsValuationTypeId = 2,
                                    StockValuationTypeId = 3,
                                    Other1ValuationTypeId = 4,
                                    Other1LabelText = "My custom label"
                                },
                                MaterialDamageData = new TestLocationMaterialDamageData()
                                {
                                    Id = 2,
                                    TestLocationId = 2,
                                    BuildingInsured = 100,
                                    ContentsInsured = 100,
                                    StockInsured = 100,
                                    StockPercentage = 100,
                                    Other1Insured = 100,
                                    TotalRate = 2,
                                    TotalPremium = 100,
                                    UseTotalRate = true
                                },
                                BusinessInterruptionDetails = new TestLocationBusinessInterruptionDetails()
                                {
                                    Id = 2,
                                    TestLocationId = 2,
                                    Other1LabelText = "My custom label"
                                },
                                BusinessInterruptionData = new TestLocationBusinessInterruptionData()
                                {
                                    Id = 2,
                                    TestLocationId = 2,
                                    GrossProfitInsured = 100,
                                    WagesInsured = 100,
                                    ICOWInsured = 100,
                                    Other1Insured = 100,
                                    TotalRate = 2,
                                    UseTotalRate = true,
                                    TotalPremium = 100
                                }

                            }
                        }
                    },
                    new TestLegalEntity()
                    {
                        Id = 2,
                        RequestId = 1234,
                        Name = "Legal Entity 2",
                        Locations = new List<TestLocation>()
                        {
                            new TestLocation()
                            {
                                Id = 3,
                                TestLegalEntityId = 2,
                                Name = "Test location 2",
                                Address = "Test address 2",
                                Postcode = "134679",
                                City = "Test city 2",
                                State = "Test state 2",
                                Country = "Test country 2",
                                MaterialDamageDetails = new TestLocationMaterialDamageDetails()
                                {
                                    Id = 3,
                                    TestLocationId = 3,
                                    BuildingValuationTypeId = 1,
                                    ContentsValuationTypeId = 2,
                                    StockValuationTypeId = 3,
                                    Other1ValuationTypeId = 4,
                                    Other1LabelText = "My custom label"
                                },
                                MaterialDamageData = new TestLocationMaterialDamageData()
                                {
                                    Id = 3,
                                    TestLocationId = 3,
                                    BuildingInsured = 100,
                                    ContentsInsured = 100,
                                    StockInsured = 100,
                                    StockPercentage = 100,
                                    Other1Insured = 100,
                                    TotalRate = 2,
                                    TotalPremium = 100,
                                    UseTotalRate = true
                                },
                                BusinessInterruptionDetails = new TestLocationBusinessInterruptionDetails()
                                {
                                    Id = 3,
                                    TestLocationId = 3,
                                    Other1LabelText = "My custom label"
                                },
                                BusinessInterruptionData = new TestLocationBusinessInterruptionData()
                                {
                                    Id = 3,
                                    TestLocationId = 3,
                                    GrossProfitInsured = 100,
                                    WagesInsured = 100,
                                    ICOWInsured = 100,
                                    Other1Insured = 100,
                                    TotalRate = 2,
                                    UseTotalRate = true,
                                    TotalPremium = 100
                                }
                            }
                        }
                    },
                    new TestLegalEntity()
                    {
                        Id = 3,
                        RequestId = 1234,
                        Name = "Legal Entity 3",
                        Locations = new List<TestLocation>()
                        {
                            new TestLocation()
                            {
                                Id = 4,
                                TestLegalEntityId = 3,
                                Name = "Test location 3",
                                Address = "Test address 3",
                                Postcode = "134679",
                                City = "Test city 3",
                                State = "Test state 3",
                                Country = "Test country 3",
                                MaterialDamageDetails = new TestLocationMaterialDamageDetails()
                                {
                                    Id = 4,
                                    TestLocationId = 4,
                                    BuildingValuationTypeId = 1,
                                    ContentsValuationTypeId = 2,
                                    StockValuationTypeId = 3,
                                    Other1ValuationTypeId = 4,
                                    Other1LabelText = "My custom label"
                                },
                                MaterialDamageData = new TestLocationMaterialDamageData()
                                {
                                    Id = 4,
                                    TestLocationId = 4,
                                    BuildingInsured = 100,
                                    ContentsInsured = 100,
                                    StockInsured = 100,
                                    StockPercentage = 100,
                                    Other1Insured = 100,
                                    TotalRate = 2,
                                    TotalPremium = 100,
                                    UseTotalRate = true
                                },
                                BusinessInterruptionDetails = new TestLocationBusinessInterruptionDetails()
                                {
                                    Id = 4,
                                    TestLocationId = 4,
                                    Other1LabelText = "My custom label"
                                },
                                BusinessInterruptionData = new TestLocationBusinessInterruptionData()
                                {
                                    Id = 4,
                                    TestLocationId = 4,
                                    GrossProfitInsured = 100,
                                    WagesInsured = 100,
                                    ICOWInsured = 100,
                                    Other1Insured = 100,
                                    TotalRate = 2,
                                    UseTotalRate = true,
                                    TotalPremium = 100
                                }
                            }
                        }
                    }
                }
            };
        }

        #region Telerik Grid callbacks

        #region Legal entities grid callbacks

        [HttpPost]
        [GridAction]
        public ActionResult SelectLegalEntities(int requestId)
        {
            var entities = MyModel.LegalEntities.Where(x => x.RequestId == requestId);

            return View(new GridModel(entities));
        }

        [HttpPost]
        [GridAction]
        public ActionResult InsertLegalEntity(int requestId)
        {
            var entity = new TestLegalEntity();
            entity.RequestId = requestId;

            if (TryUpdateModel<TestLegalEntity>(entity))
            {
                var lastId = MyModel.LegalEntities.OrderByDescending(x => x.Id).Last().Id;

                entity.Id = (lastId + 1);

                MyModel.LegalEntities.ToList().Add(entity);
            }

            return SelectLegalEntities(requestId);
        }

        [HttpPost]
        [GridAction]
        public ActionResult UpdateLegalEntity(int id)
        {
            var current = MyModel.LegalEntities.SingleOrDefault(x => x.Id == id);

            TryUpdateModel<TestLegalEntity>(current);

            return SelectLegalEntities(current.RequestId);
        }

        [HttpPost]
        [GridAction]
        public ActionResult DeleteLegalEntity(int id)
        {
            var entity = MyModel.LegalEntities.SingleOrDefault(x => x.Id == id);

            if (entity != null)
            {
                MyModel.LegalEntities.ToList().Remove(entity);
            }

            return SelectLegalEntities(entity.RequestId);
        }

        #endregion

        #region Locations grid callbacks

        [HttpPost]
        [GridAction]
        public ActionResult SelectLocations(int legalEntityId)
        {
            var entity = MyModel.LegalEntities.SingleOrDefault(x => x.Id == legalEntityId);

            if (entity != null)
            {
                return Json(entity.Locations);
            }
            else
            {
                throw new Exception(string.Format("Legal entity with ID {0} not found!", legalEntityId));
            }
        }

        [HttpPost]
        [GridAction]
        public ActionResult InsertLocation(int legalEntityId)
        {
            var entity = MyModel.LegalEntities.SingleOrDefault(x => x.Id == legalEntityId);

            if (entity != null)
            {
                var location = new TestLocation();
                location.TestLegalEntityId = legalEntityId;

                if (TryUpdateModel<TestLocation>(location))
                {
                    var lastId = entity.Locations.OrderByDescending(x => x.Id).Last().Id;

                    location.Id = (lastId + 1);

                    entity.Locations.ToList().Add(location);
                }

                return Json(entity.Locations);
            }
            else
            {
                throw new Exception(string.Format("Legal entity with ID {0} not found!", legalEntityId));
            }
        }

        [HttpPost]
        [GridAction]
        public ActionResult UpdateLocation(int id, int legalEntityId)
        {
            var entity = MyModel.LegalEntities.SingleOrDefault(x => x.Id == legalEntityId);

            if (entity != null)
            {
                var location = entity.Locations.SingleOrDefault(x => x.Id == id);

                if (location == null)
                {
                    throw new Exception(string.Format("Location with ID {0} for Legal entity with ID {1} not found!", id, legalEntityId));
                }

                TryUpdateModel<TestLocation>(location);

                return Json(entity.Locations);
            }
            else
            {
                throw new Exception(string.Format("Legal entity with ID {0} not found!", legalEntityId));
            }
        }

        [HttpPost]
        [GridAction]
        public ActionResult DeleteLocation(int id, int legalEntityId)
        {
            var entity = MyModel.LegalEntities.SingleOrDefault(x => x.Id == legalEntityId);

            if (entity != null)
            {
                var location = entity.Locations.SingleOrDefault(x => x.Id == id);

                if (location == null)
                {
                    throw new Exception(string.Format("Location with ID {0} for Legal entity with ID {1} not found!", id, legalEntityId));
                }

                entity.Locations.ToList().Remove(location);

                return Json(entity.Locations);
            }
            else
            {
                throw new Exception(string.Format("Legal entity with ID {0} not found!", legalEntityId));
            }
        }

        #endregion

        #endregion
    }
}

Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ClientSideValidationBug001.Models
{
    public class GridTestModel
    {
        public int RequestId { get; set; }
        public IEnumerable<TestLegalEntity> LegalEntities;
    }

    public class TestLegalEntity
    {
        public int Id { get; set; }
        public int RequestId { get; set; }

        public string Name { get; set; }

        public IEnumerable<TestLocation> Locations { get; set; }
    }

    public class TestLocation
    {
        public int Id { get; set; }
        public int TestLegalEntityId { get; set; }

        public string Name { get; set; }
        public string Address { get; set; }
        public string Postcode { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Country { get; set; }

        public TestLocationMaterialDamageData MaterialDamageData { get; set; }
        public TestLocationMaterialDamageDetails MaterialDamageDetails { get; set; }
        public TestLocationBusinessInterruptionData BusinessInterruptionData { get; set; }
        public TestLocationBusinessInterruptionDetails BusinessInterruptionDetails { get; set; }
    }

    public class TestLocationMaterialDamageData
    {
        public int Id { get; set; }
        public int TestLocationId { get; set; }

        public decimal? BuildingInsured { get; set; }
        public decimal? ContentsInsured { get; set; }
        public decimal? StockInsured { get; set; }
        public decimal? StockPercentage { get; set; }
        public decimal? Other1Insured { get; set; }
        public decimal? TotalRate { get; set; }
        public bool UseTotalRate { get; set; }
        public decimal? TotalPremium { get; set; }
    }

    public class TestLocationMaterialDamageDetails
    {
        public int Id { get; set; }
        public int TestLocationId { get; set; }

        public int BuildingValuationTypeId { get; set; }
        public int ContentsValuationTypeId { get; set; }
        public int StockValuationTypeId { get; set; }
        public int Other1ValuationTypeId { get; set; }

        public string Other1LabelText { get; set; }
    }

    public class TestLocationBusinessInterruptionData
    {
        public int Id { get; set; }
        public int TestLocationId { get; set; }

        public decimal? GrossProfitInsured { get; set; }
        public decimal? WagesInsured { get; set; }
        public decimal? ICOWInsured { get; set; }
        public decimal? Other1Insured { get; set; }
        public decimal? TotalRate { get; set; }
        public bool UseTotalRate { get; set; }
        public decimal? TotalPremium { get; set; }
    }

    public class TestLocationBusinessInterruptionDetails
    {
        public int Id { get; set; }
        public int TestLocationId { get; set; }

        public string Other1LabelText { get; set; }
    }
}

Might need to change the namespaces and using statements in certain places.