[Solved] Drill Down issue

[william]

Hi All,

So far the grid works fine. However, at the current lowest level, because the details we display change depending upon the parent record type, we use an Ajax call amd populate the data, without strictly binding the columns. This is where my problem now is, as I want to go a further level, but cant figure out how to attach the next level. Here's a code snippet so far. I'm happy to write another Ajax server side event, it's just binding it that's the issue:

@(Html.Telerik().Grid<PolicyDetailZonesViewModel>()
                    .Name("Zones")
                    .ToolBar(toolbar => toolbar.Template(
                        @<text>
        <button id="AddZone" type="submit" value="AddZone">
            Add Zone</button>
        @Html.DropDownListFor(pz => pz.PolicyZoneID, new SelectList(Model.PolicyZoneTypes, "Value", "Text"))
        <span>  </span>
        @Html.Label("Name:")
        <span> </span>
        @Html.TextBoxFor(pz => pz.NewPolicyZoneName)
        </text>))
                    .DataKeys(keys => keys.Add(r => r.PolicyID).RouteKey("PolicyZoneID"))
                    .DataBinding(dataBinding => dataBinding.Ajax().OperationMode(GridOperationMode.Client).Select("GetPolicyDetailZones", "Policy", new { policyID = Model.PolicyID, policyVersion = Model.PolicyVersion }))
                    .Columns(columns =>
                    {
                        columns.Bound(r => r.PolicyZoneID)
                            .ClientTemplate(
                                @Html.ActionLink("Edit", "Edit", "PolicyZone", new { policyZoneID = "<#= PolicyZoneID #>" }, new { title = "Edit Zone" }).ToHtmlString() + " " +
                                @Html.Encode("<a class='deleteZone' href='#' policyZoneID='<#= PolicyZoneID #>', url='PolicyZone/DeleteZone'>Delete</a>")
                                //@Html.ActionLink("Delete", "Delete", "PolicyZone", new { policyID = "<#= PolicyID #>", policyVersion = "<#= PolicyVersion #>", policyZoneID = "<#= PolicyZoneID #>" }, new { title = "Delete Zone" }).ToHtmlString()
                            )
                            .Width(100)
                            .Title("Commands");
                        columns.Bound(pz => pz.TypeName).Title("Type").Width(10);
                        columns.Bound(pz => pz.Name).Title("Name").Width(10);
                        columns.Bound(pz => pz.GrossSum).Title("Gross").Format("{0:0.00}").Width(10)
                            .Aggregate(aggregates => aggregates.Sum())
                            .ClientFooterTemplate("Total: <#= typeof Sum != 'undefined' ? $.telerik.formatString('{0:0.00}', Sum) : 0 #>")
                            .HtmlAttributes(new { style = "text-align:right" });
                        columns.Bound(pz => pz.EffectiveFromDate).Title("Effective From Date").Format("{0:d}").Width(11);
                        columns.Bound(pz => pz.EffectiveToDate).Title("Effective To Date").Format("{0:d}").Width(11);
                    })
                    .Pageable()
                    .RowAction(row =>
                    {
                        if (row.IsAlternate)
                        {
                            row.HtmlAttributes["style"] = "background:aliceblue;";
                        }
                    })
                    .ClientEvents(events => events.OnDataBound("activateZoneDelete"))
                                            .DetailView(detailView => detailView.ClientTemplate(
                                                Html.Telerik().Grid<PolicyDetailSectionViewModel>()
                                                .Name("detailview_<#= PolicyZoneID #>")
                                                .DataKeys(keys => keys.Add(section => section.SectionID))
                                                .DataBinding(dataBinding => dataBinding.Ajax().Select("GetPolicyDetailSections", "Policy", new { policyZoneID = "<#= PolicyZoneID #>" }))
                                                .Columns(columns =>
                                                {
                                                    columns.Bound(r => r.SectionID)
                                                        .ClientTemplate(
                                                            @Html.ActionLink("Edit", "Edit", "<#= ControllerName #>", new { policyZoneID = "<#= PolicyZoneID #>", sectionID = "<#= SectionID #>" }, new { title = "Edit Section" }).ToHtmlString()
                                                        )
                                                        .Width(100)
                                                        .Title("Commands");
                                                    columns.Bound(section => section.SectionType);
                                                    columns.Bound(section => section.SectionName);
                                                    columns.Bound(section => section.Gross).Title("Gross").Format("{0:0.00}").Width(10).HtmlAttributes(new { style = "text-align:right" })
                                                        .Aggregate(aggregates => aggregates.Sum())
                                                        .ClientFooterTemplate("Total: <#= typeof Sum != 'undefined' ? $.telerik.formatString('{0:0.00}', Sum) : 0 #>");
                                                    columns.Bound(section => section.EffectiveFromDate).Title("Effective From Date").Format("{0:d}").Width(11);
                                                    columns.Bound(section => section.EffectiveToDate).Title("Effective To Date").Format("{0:d}").Width(11);

                                                })
                                                    .DetailView(detailview => detailview.ClientTemplate("<div id='section_<#= ControllerName #>_<#= SectionID #>_<#= PolicyZoneID #>'>Loading section summary data<img src='/Content/bar-circle.gif' /></div>"))
                                                                .ClientEvents(events => events.OnDetailViewExpand("displaySectionDataByType"))
                                                .ToHtmlString()

                        ))

             )

[william]

Still not resolved

[william]

Ok,
I've had a little success, but it's still not right. I get my child grid displaying, but it's replacing the existing level as opposed to opening below as a child of the existing view.  Here's the javascript/jquery to the code already posted.

function displaySectionDataByType(event) {
        $.ajaxSetup({
            cache: false
        });

        var cell = event.detailRow.cells[1];
        var section = $('div', cell).attr("id");
        $.ajax({
            url: rootDir + "Policy/GetSectionSummaryData?sectionData=" + section,
            type: 'GET',
            dataType: 'html',
            success: function (data) {
                var ff = $('#' + section).html(data);
                $('#' + section).html(data);
                $("#discounts_TotalsTable").delegate("td img", "click", function (event) {
                    event.preventDefault();
                    displayRisk(ff);
                    $("#discounts_TotalsTable").unbind("click");
                });

            },
            error: function () {
                $('#' + section).html("<span style='color: red;'>An error occured fetching section summary data...</span>");
            }
        });

    }

function displayRisk(event) {
        //var cell = event.detailRow.cells[1];
        //var section = $('div', cell).attr("id");
        $.ajax({
            url: rootDir + "Policy/GetRiskSummaryData?sectionData=" + event.selector.substr(1),
            type: 'GET',
            dataType: 'html',
            success: function (data) {
               $(event).html(data);
            },
            error: function () {
                $(event).html("<span style='color: red;'>An error occured fetching risk summary data...</span>");
            }
        });
    }