This is a migrated thread and some comments may be shown as answers.

Grid Details not shown in proper place

6 Answers 23 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sanjay
Top achievements
Rank 1
Sanjay asked on 22 Jan 2014, 08:12 AM
I am trying to open a grid as the detail template inside a grid but it seems it is not opening is correct place. Please help. The detail steps with screenshot is the attached document.

The code to open the grid is as below

Grid Definition and related code
@(Html.Kendo().Grid().Name("grvInvSplit")
        .TableHtmlAttributes(new { style = "table-layout: fixed;" })
        .ClientDetailTemplateId("ViewGridItemDetails")
        .DataSource(dataSource => dataSource.Ajax()
                                            .Batch(false)
                                            .ServerOperation(false)
                                            .Read(...)
                                            .Create(..)
                                            .Update(..)
                                            .Model(model => model.Id(p => p.GridRowNum))
                                            .Model(model => model.Field(p => p.GridRowNum).DefaultValue(-1))
                                            .Events(events => events.RequestEnd("onGridRqstEnd")
                                                                    .Error("onGridError"))
                   )
        .Columns(cols =>
        {           
            ...
            ...
        })
        .EnableCustomBinding(false)
        .Selectable()
        .Pageable()
        .Resizable(resizing => resizing.Columns(true))
        .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InLine)
                 .DisplayDeleteConfirmation(false)
                 )
        .Events(events => events.DataBound("onGridDataBound")
                                .Save("onGridSave")
                                .Edit("onGridEdit")
                                .Change("onGridChange")
                                .DetailExpand("gridViewChrgDetailExpand")  
               )
        )
         
 
<script id="ViewGridItemDetails" type="text/x-kendo-template">
    <div id="ViewGridItemDetailsRow_#= GridRowNum #">
    Loading ...
    </div>
</script>
 
<script>
gridViewChrgDetailExpand: function (e) {       
   $("#ViewGridItemDetailsRow_" + selectedGridRow.GridRowNum).html(<html>);
}
</script>

Please help to solve the issue.

regards,
Sanjay

6 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 23 Jan 2014, 02:39 PM
Hi Sanjay,

From the provided information it seems that the details Grids have the same ID for each row - possible reason for this behavior is all records in the Grid to have the same IDs. Could you please confirm if all rows in the master Grid have unique IDs?

Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sanjay
Top achievements
Rank 1
answered on 24 Jan 2014, 01:46 AM
Hi Vladimir,
Yes I have checked the id is unique. I have added the details in the attached document.
Regards,
Sanjay
0
Daniel
Telerik team
answered on 27 Jan 2014, 07:06 PM
Hello Sanjay,

Unfortunately, the provided code does not indicate what is causing the problem? How are you loading/initializing the Grid in the detail? Could you provide the code that you are using? As Vladimir suggested, this behavior will occur when the initialization script for the Grid searches for an element by ID that already exists. The ID selector returns only the first matched element and so the Grid in the second row will not be initialized when the first row is expanded first.
Also, I am not sure what logic are you executing in the detailExpand event but this event is triggered each time the detail is expanded. If you have some initialization script for the detail then I would suggest to use the detailInit event instead.

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sanjay
Top achievements
Rank 1
answered on 05 Feb 2014, 06:44 AM
Dear Daniel,

I have attached the output from F12. To show the ID is unique for each row.  Also I have attached the detailed code for your reference.

I hope using this you can track the problem.

Regards,
Sanjay

Code Section

Main Grid Definition :
<form name="frmEditInvItems" id="frmEditInvItems">
        @(Html.Kendo().Grid<Mol.Ar.NonBlInv.Common.Models.InvSplit>().Name("grvInvSplit")
        .TableHtmlAttributes(new { style = "table-layout: fixed;" })
        .ClientDetailTemplateId("ViewGridItemDetails")
        .DataSource(dataSource => dataSource.Ajax()
                                            .Batch(false)
                                            .ServerOperation(false)
                                            .Read("InvItemsGridRead", "InvItems", new { invNo = Model.InvNo, currentAgentId = Mol.Infra.Common.MolContext.Current.AgentId })
                                            .Create("GridInsert", "InvItems", new { InvNo = Model.InvNo, currentAgentId = Mol.Infra.Common.MolContext.Current.AgentId })
                                            .Update("GridUpdate", "InvItems", new { InvNo = Model.InvNo, currentAgentId = Mol.Infra.Common.MolContext.Current.AgentId })
                                            .Model(model => model.Id(p => p.GridRowNum))
                                            .Model(model => model.Field(p => p.GridRowNum).DefaultValue(-1))
                                            .Model(model => model.Field(p => p.InvNo).DefaultValue(Model.InvNo))
                                            .Model(model => model.Field(p => p.SeqNo).DefaultValue(0))
                                            .Events(events => events.RequestEnd("Mol.Ar.NonBlInv.Ux.InvItems.onGridRqstEnd")
                                                                    .Error("Mol.Ar.NonBlInv.Ux.InvItems.onGridError")
                                                                    .RequestStart("Mol.Ar.NonBlInv.Ux.InvItems.AdjInvSplitGrid")
                                                                    )                   )
        .Columns(cols =>
        {
            cols.Template(@<text></text>).Width(25).Title("").ClientTemplate("<div class='gridAction' param-InvNo='#= InvNo #' param-SeqNo='#= SeqNo #' param-EqpNo='#= EqpNo #'></div>");
            cols.Bound(m => m.EqpNo)
                .Width(100)
                .Title("Equipment No")
                .EditorTemplateName("InvItemEqpNo")
                .EditorViewData(new { gridfldEqp = fldEqp })
                ;
            cols.Bound(m => m.EqpChkd)
                .Width(30)
                .Title("")
                .EditorTemplateName("InvItemEqpChkDig")
                .EditorViewData(new { gridfldEqp = fldEqp })
                ;
            cols.Bound(m => m.EqpType)
                .Width(50)
                .Title("Type")
                .HtmlAttributes(new { id = "EqpTyp-efcc", style = "text-transform: uppercase;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;", maxlength = "4" }).EditorTemplateName("InvItemEqpTyp");
            cols.Bound(m => m.VslName)
                .Width(155)
                .Title("Vessel Name")
                .EditorTemplateName("InvItemVslName")
                .EditorViewData(new { gridfldVsl = fldVsl })
                ;
            cols.Bound(m => m.VslCode)
                .Width(45)
                .Title("Vessel")
                .EditorTemplateName("InvItemVslCode")               
                ;
            cols.Bound(m => m.VoyCode)
                .Width(90)
                .Title("Voyage")
                .EditorTemplateName("InvItemVoyCode")
                .EditorViewData(new { gridfldVsl = fldVsl })
                ;
            cols.Bound(m => m.LineCode)
                .Width(40)
                .Title("Line")
                .EditorTemplateName("InvItemLineCode")
                .EditorViewData(new { gridfldVsl = fldVsl })
                ;
            cols.Bound(m => m.BlNo)
                .Width(110)
                .Title("B/L No")
                .EditorTemplateName("InvItemBlNo")
                .EditorViewData(new { gridfldBl = fldBl })
                ;
            cols.Bound(m => m.BkgNo)
                .Width(110)
                .Title("Bkg No")
                .EditorTemplateName("InvItemBkgNo")
                .EditorViewData(new { gridfldBkg = fldBkg })
                ;           
            cols.ForeignKey(m => m.EqpSlsRsnNotNull, (SelectList)ViewBag.SlsRsnDropDown, "Value", "Text")
                                                  .Width(110)
                                                  .Title("Sales Reason")
                                                  .EditorTemplateName("InvItemSlsRsn")
                                                  .EditorViewData(new { gridfldSlsRsn = fldSlsRsn })
                                                  ;           
            cols.Bound(m => m.DryRfrFlgbool)
                            .Width(45)
                            .Title("RAD")
                            .ClientTemplate("<input type='checkbox' disabled='disabled' name='DryRfrFlgbool' ${DryRfrFlgbool? checked='checked' : '' } />");
           
            cols.Bound(m => m.UserRmks)
                .Width(330)
                .Title("Remarks")
                .EditorTemplateName("InvItemUserRmks");        })
        .EnableCustomBinding(false)
        .Selectable()
        .Pageable()
        .Resizable(resizing => resizing.Columns(true))
        .TableHtmlAttributes(new { style = "table-layout:fixed;" })
        .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InLine)
            .Enabled(isInvSplitEditable)
                                    .DisplayDeleteConfirmation(false)
                 )
        .Events(events => events.DataBound("Mol.Ar.NonBlInv.Ux.InvItems.onGridDataBound")
                                .Save("Mol.Ar.NonBlInv.Ux.InvItems.onGridSave")
                                .Edit("Mol.Ar.NonBlInv.Ux.InvItems.onGridEdit")
                                .Change("Mol.Ar.NonBlInv.Ux.InvItems.onGridChange")
                                .DetailExpand("Mol.Ar.NonBlInv.Ux.InvItems.gridViewChrgDetailExpand")
               )
        )
</form><script id="ViewGridItemDetails" type="text/x-kendo-template">   
    <div id="GridDetailsRow_#=GridRowNum#">  
    Loading ...
    </div>
</script>

Details Grid Definition
@(Html.Kendo().Grid<Mol.Ar.NonBlInv.Common.Models.InvDtl>().Name("grvInvChrgForEqp")
        .TableHtmlAttributes(new { style = "table-layout: fixed;" })
        .DataSource(dataSource => dataSource.Ajax()
                                            .ServerOperation(false)
                                            .Read(   "GridDtlRead"  , "InvItems", new { InvNo = Model.InvNo, SeqNo = Model.SeqNo, currentAgentId=Mol.Infra.Common.MolContext.Current.AgentId })
                    )
        .Columns(cols =>
        {
            cols.Bound(m => m.ChrgCode).Width(30).Title("Chrg").HtmlAttributes(new { id = "ChrgCode-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;" }).EditorTemplateName("InvChrgChrgCode");
            cols.Bound(m => m.TarfItemNo).Width(70).Title("Item No.").HtmlAttributes(new { id = "TarfItemNo-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;" }).EditorTemplateName("InvChrgTarfItemNo");
            cols.Bound(m => m.BasCode).Width(30).Title("Basis").HtmlAttributes(new { id = "BasCode-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;" }).EditorTemplateName("InvChrgBasCode");            cols.Bound(m => m.RatedAt).Width(40).Title("Rated At").HtmlAttributes(new { id = "RatedAt-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;text-align:right;" });
            cols.Bound(m => m.UmRatedAt).Width(30).Title("UM").HtmlAttributes(new { id = "UmRatedAt-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;" }).EditorTemplateName("InvChrgUM");            cols.Bound(m => m.Rate).Width(30).Title("Rate").HtmlAttributes(new { id = "Rate-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;text-align:right;" });
            cols.Bound(m => m.Currency).Width(30).Title("Curr").HtmlAttributes(new { id = "Currency-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;" }).EditorTemplateName("InvChrgCurrency");            cols.Bound(m => m.RatePer).Width(30).Title("Per").HtmlAttributes(new { id = "RatePer-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;" }).EditorTemplateName("InvChrgRatePer");
            cols.Bound(m => m.Amount).Width(70).Title("Amount").HtmlAttributes(new { id = "Amount-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;text-align:right;" });            cols.Bound(m => m.LocalCurrency).Width(40).Title("Loc. Curr").HtmlAttributes(new { id = "LocalCurr-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;text-align:right;" });
            cols.Bound(m => m.LocalAmount).Width(70).Title("Loc. Amount").HtmlAttributes(new { id = "LocalAmt-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;text-align:right;" });
            cols.Bound(m => m.PrefAmount).Width(70).Title("Pref. Amount").HtmlAttributes(new { id = "PrefAmt-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;text-align:right;" });
                       
            cols.Bound(m => m.ExchRate).Width(70).Title("Exch. Rate").HtmlAttributes(new { id = "ExchRate-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;text-align:right;" });
            cols.Bound(m => m.MulDivFlg).Width(40).Title("Mul/Div").HtmlAttributes(new { id = "MulDivFlg-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;text-align:right;" });           
            cols.Bound(m => m.ExRateDt).Width(90).Title("Exch. Rate Date").HtmlAttributes(new { id = "ExRateDt-efcc", style = "white-space: nowrap; overflow: hidden;  width: 100%;" }).Format(Util.GetDfltDateFmtGrid()).EditorTemplateName("KendoDate");
       
        })
        )
Read controller Method for the master grid
public ActionResult InvItemsGridRead([Kendo.Mvc.UI.DataSourceRequest]Kendo.Mvc.UI.DataSourceRequest request, string invNo)
        {
            MolContext molContext = MolContext.Current;
            long rowCnt = 0;
            InvSplitParam invSplitParam = new InvSplitParam();
            invSplitParam.InvNo = invNo;
            //get the data
            IOperation<MolContext, InvSplitParam, SearchResult<InvSplit>> invSplits = new GetInvSplitSearchResult();
            SearchResult<InvSplit> InvSplits = invSplits.Execute(MolContext.Current, invSplitParam);            if (InvSplits != null) {
                foreach (InvSplit selected in InvSplits.Items)
                {
                    rowCnt++;
                    selected.GridRowNum = rowCnt;
                }
            }           
            var result = new DataSourceResult()
            {
                Data = InvSplits.Items,
                Total = InvSplits.TotalCount.HasValue ? (InvSplits.TotalCount.Value) : 0 // Total number of records
            };            if (InvSplits.HasErrors)
            {
                ModelState.AddModelError("Error", InvSplits.ErrorMessage);
                return Json(ModelState.ToDataSourceResult());
            }           
            return Json(result, JsonRequestBehavior.AllowGet);
        }
Read controller Method for the details grid
public ActionResult GridDtlRead([Kendo.Mvc.UI.DataSourceRequest]Kendo.Mvc.UI.DataSourceRequest request, InvQryParam queryParam)
        {            MolContext molContext = MolContext.Current;
            IOperation<MolContext, InvQryParam, IEnumerable<InvDtl>> invDtlsFindByKey = new Mol.Ar.NonBlInv.Client.InvDtlsFindByKey();
            IEnumerable<InvDtl> InvDtls = invDtlsFindByKey.Execute(MolContext.Current, queryParam);                       return Json(InvDtls.ToDataSourceResult(request));
        }

JQuery function for details expansion:
gridViewChrgDetailExpand: function (e) {
        var grid = $("#grvInvSplit").data("kendoGrid");
        var selectedGridRow= gridSelectedRecord(grid);
        $.ajax({
            type: "POST",
            url: "/Ar/NonBlInv/InvItems/ViewChrgsForEqp",
            async: true,
            contyentType: "application/json",
            traditional: true,
            data: {
                invNo: selectedGridRow.InvNo,
                seqNo: selectedGridRow.SeqNo,
                eqpNo: selectedGridRow.EqpNo
            },
            success: function (result) {
                $("#GridDetailsRow_" + selectedGridRow.GridRowNum).html(result);               
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("Failed to get details information - " + errorThrown);
            }
        }).done(function () {
        });
    },
0
Accepted
Daniel
Telerik team
answered on 06 Feb 2014, 03:53 PM
Hello Sanjay,

Yes, the <div> elements and the code to set the HTML are using the unique values but the at least in the code that you provided for the detail Grid, the Name is the same:
Details Grid Definition
@(Html.Kendo().Grid<Mol.Ar.NonBlInv.Common.Models.InvDtl>().Name("grvInvChrgForEqp")
You should assign a unique name possibly by using the posted values to generate it, in order to avoid the problem.

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sanjay
Top achievements
Rank 1
answered on 07 Feb 2014, 01:36 AM
Dear Daniel,

After making the name unique it is working perfectly.

Thanks

Regards,
Sanjay
Tags
Grid
Asked by
Sanjay
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Sanjay
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or