[Solved] Two controls in the Grid.

[Akash]

Hi,

According to my requirement I need to show Tab Strip and a Grid inside the Grid. I have been able to do this using on server side. But I need to do this on Client side, but unable to do so. Attached is the code I am trying  on but not able to render two controls in the Detail view.Client templet of the Grid. So can some body will please help me with this?

Html.Telerik().Grid<AvailableHotels>()
        .Name("HotelSearchResult")
        .Columns(columns =>
        {

            columns.Bound(p => p.HotelCode).Hidden(true);
            columns.Bound(p => p.HotelName).ClientTemplate(
            @"<#= HotelName #>"

            ).Title("");
        })
        .DetailView(detailView => detailView.ClientTemplate(
            Html.Telerik().TabStrip()
            .Name("TabStrip_<#= HotelCode #>")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text(Html.GlobalResource("Dynamicpackage", "Hotel_Overview")).Content(() => { }).LoadContentFrom("GetAvailableHotelsOverview", "SearchResults", new RouteValueDictionary { { "hotelcode", "<#= HotelCode #>" } });
                items.Add().Text(Html.GlobalResource("Dynamicpackage", "Pictures")).Content(() => { }).LoadContentFrom("GetAvailableHotelsPictures", "SearchResults", new RouteValueDictionary { { "hotelcode", "<#= HotelCode #>" } });
                items.Add().Text(Html.GlobalResource("Dynamicpackage", "Map")).Content(() => { }).LoadContentFrom("GetAvailableHotelsGoogleMap", "SearchResults", new RouteValueDictionary { { "hotelcode", "<#= HotelCode #>" } });
                items.Add().Text(Html.GlobalResource("Dynamicpackage", "Details")).Content(() => { }).LoadContentFrom("GetAvailableHotelsDetails", "SearchResults", new RouteValueDictionary { { "hotelcode", "<#= HotelCode #>" } });
                items.Add().Text(Html.GlobalResource("Dynamicpackage", "Facility")).Content(() => { }).LoadContentFrom("GetAvailableHotelsFacility", "SearchResults", new RouteValueDictionary { { "hotelcode", "<#= HotelCode #>" } });
            }).ToHtmlString()

            Html.Telerik().Grid<HotelRoomDetails>()
                .Name("HotelRoom_" + "<#HotelCode#>")
                .Columns(columns =>
                    {
                        columns.Bound(p => p.RateDescription.RoomNum).ClientTemplate(
                        "Cybage").Width(70).Title("");
                    })
                    .DataBinding(binding => binding.Ajax().Select("GetHotelRooms", "SearchResults", new { availableHotels = Model, hotelCode = "<#= HotelCode #>" }))
                    .HtmlAttributes(new { @class = "rmdt-content" })
                    .ClientEvents(events => events.OnLoad("grid_bound"))
                    .Sortable()
                    .ToHtmlString()


        .RowAction(row =>
        {
            row.DetailRow.Expanded = true;
        })
        .DataBinding(p => p.Ajax().Select("GetAvailableHotelsTest", "SearchResults"))
        .Pageable(paging => paging.Enabled(true).PageSize(10).PageTo(1).Position(Telerik.Web.Mvc.UI.GridPagerPosition.Top))
        .Scrollable(scrolling => scrolling.Height(700))
        .HtmlAttributes(new { style = "width: 910px" })
         .ClientEvents(events => events.OnDataBound("OnDataBound()"))
         .Render();