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
Please help to solve the issue.
regards,
Sanjay
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
0
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
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
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
Yes I have checked the id is unique. I have added the details in the attached document.
Regards,
Sanjay
0
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
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
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
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
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:
You should assign a unique name possibly by using the posted values to generate it, in order to avoid the problem.
Regards,
Daniel
Telerik
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")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
Rank 1
answered on 07 Feb 2014, 01:36 AM
Dear Daniel,
After making the name unique it is working perfectly.
Thanks
Regards,
Sanjay
After making the name unique it is working perfectly.
Thanks
Regards,
Sanjay