I have the following Kendo UI Grid. I am using .Net Core 2.1 and Kendo 2019.1.220. I have this grid on the page in a partial view. I also have a checkbox on the parent page. How can I get the column header below with the title "Design Integration" to lock when the checkbox is checked and unlocked when the checkbox is unchecked using the change event on the checkbox?
@(Html.Kendo().Grid<DIStatus.Models.DistatusForGrid>()
.Name(componentName: "DIStatusGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action(actionName: "DIStatusGrid_Read", controllerName: "Home"))
.Update(update => update.Action("DIStatusGrid_Update", "Home"))
.PageSize(pageSize: 50)
)
.Columns(columns =>
{
columns.Command(command =>
{
command.Custom("Edit").Text("Edit Page").Click(handler: "btnEdit");
command.Custom("Delete").Text("Delete").Click(handler: "btnDelete");
command.Edit().Text("Inline Edit").HtmlAttributes(new { id="btnInlineEdit"});
}).Width(85).Locked(true).Lockable(true).HtmlAttributes(new { @style = "text-align:center;background-color:mistyrose;" }).HeaderHtmlAttributes(new { style= "background-color:mistyrose;" });
columns.Bound(p => p.Id).Title(text: "Id").Width(pixelWidth: 70).Filterable(value: false).Visible(false);
columns.Group(group => group
.Title("Design Integration").HtmlAttributes(new { id="headerDI", name= "headerDI" }).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign", style = "font-weight:900;" }).Locked(true).Lockable(true)
.Columns(di =>
{
di.Bound(p => p.ShipId).Title(text: "Ship Id").Width(pixelWidth: 60).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.UnitId).Title(text: "Unit Id").Width(pixelWidth: 60).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.AuthorityTypeId).Title(text: "Authority Type").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.Milestone).Title(text: "Milestone").Width(pixelWidth: 80).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.TrackingNumber).Title(text: "Tracking # (IFC, A/I, etc.)").Width(pixelWidth: 150).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.ReferenceNumber).Title(text: "Related / Ref # / Drawing #").Width(pixelWidth: 125).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.Description).Title(text: "Description").Width(pixelWidth: 300).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Group(g => g.Title("Model Impacter").HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign", style = "font-weight:900;" })
.Columns(mi =>
{
mi.Bound(p => p.RespDrawings).Title(text: "Resp Drawings").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
mi.Bound(p => p.AffectedDrawings).Title(text: "Affected Drawings").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
})
);
di.Bound(p => p.Compartment).Title(text: "Compartment").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.Originator).Title(text: "Originator or D.I. Checker").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.DateEntered).Title(text: "Date Entered").Width(pixelWidth: 85).Editable("IsDIEditable").Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.DisciplineId).Title(text: "Discipline").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.AssignedTo).Title(text: "Assigned to Person").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.NeedDate).Title(text: "Need Date").Width(pixelWidth: 100).Editable("IsDIEditable").Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.ViolationId).Title(text: "YES=1 Clr Violation, Other or Hard Hit").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.PresidentsGoal).Title(text: "Pres Goal").Width(pixelWidth: 70).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
})
);
columns.Group(g2 => g2
.Title("Transfer Info").HeaderHtmlAttributes(new { @class = "DIStatusGridOrangeHeader CenterAlign", style = "font-weight:900;" }).Locked(false).Lockable(true)
.Columns(ti =>
{
ti.Group(g => g.Title("Email Required").HeaderHtmlAttributes(new { @class = "DIStatusGridOrangeHeader CenterAlign FontColRed", style = "font-weight:900;" })
.Columns(er =>
{
er.Bound(p => p.TransferDisciplineId).Title(text: "Disc IFC Is being transfered to").Width(pixelWidth: 100).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridOrangeHeader CenterAlign" });
er.Bound(p => p.TransferDesigner).Title(text: "Designer Name").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridOrangeHeader CenterAlign" });
er.Bound(p => p.TransferDate).Title(text: "Designer Date Accepted").Width(pixelWidth: 85).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridOrangeHeader CenterAlign" });
})
);
})
);
columns.Group(g3 => g3
.Title("Discipline Currently Assigned To").HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign", style = "font-weight:900;" }).Locked(false).Lockable(true)
.Columns(dcat =>
{
dcat.Bound(p => p.ClearedBy).Title(text: "Cleared by / Assigned to (Name)").Width(pixelWidth: 100).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
dcat.Bound(p => p.ActionTaken).Title(text: "Action Taken / Clearance Comments").Width(pixelWidth: 400).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
dcat.Bound(p => p.Status).Title(text: "Status").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
dcat.Bound(p => p.PentRelatedItem).Title(text: "Pent Related Item").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
dcat.Group(g2 => g2.Title("Manager Approval").HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign", style = "font-weight:900;" })
.Columns(ma =>
{
ma.Bound(p => p.SatAsIs).Title(text: "Sat As Is").Width(pixelWidth: 80).Editable("IsManagerEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridRoseHeader CenterAlign" });
ma.Bound(p => p.ManagerApproval).Title(text: "Sat as is (Email reqd)").Editable("IsManagerEditable").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridRoseHeader CenterAlign" });
ma.Bound(p => p.ManagerApprovalDate).Title(text: "Manager Approval Date").Editable("IsManagerEditable").Width(pixelWidth: 85).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridRoseHeader CenterAlign" });
ma.Bound(p => p.ManagerApprovalExplanation).Title(text: "Manager Approval Explanation").Editable("IsManagerEditable").Width(pixelWidth: 250).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridRoseHeader CenterAlign" });
})
);
dcat.Bound(p => p.ClearanceCompleteDate).Title(text: "Clearance Complete Date").Width(pixelWidth: 85).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
dcat.Bound(p => p.Reserved).Title(text: "Reserved").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
})
);
columns.Group(g4 => g4
.Title("Des Int").HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign", style = "font-weight:900;" }).Locked(false).Lockable(true)
.Columns(compt =>
{
compt.Group(g2 => g2.Title("Compt").HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign", style = "font-weight:900;" })
.Columns(cpt =>
{
cpt.Bound(p => p.IfcbackChecker).Title(text: "IFC Back Check Compl (Name)").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign" });
cpt.Bound(p => p.IfcbackCheckerDate).Title(text: "IFC Back Check Compl (Date)").Width(pixelWidth: 100).Editable("IsDIEditable").Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign" });
cpt.Bound(p => p.DesignChangeToFix).Title(text: "Did Design Change to Fix IFC").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign" });
})
);
compt.Group(g2a => g2a.Title("Reject").HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign FontColRed", style = "font-weight:900;" })
.Columns(rej1 =>
{
rej1.Bound(p => p.RejectedBy).Title(text: "IFC Back Check Rejected (Name)").Width(pixelWidth: 125).Editable("IsDIEditable").Filterable(value: true).Visible(true).HtmlAttributes(new { @class = "FontColRed", Style = "text-align:left;" }).HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign RedHeaderFont" });
})
);
compt.Group(g2b => g2b.Title("Reject").HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign FontColRed", style = "font-weight:900;" })
.Columns(rej1 =>
{
rej1.Bound(p => p.RejectedDate).Title(text: "IFC Back Check Rejected (Date)").Width(pixelWidth: 85).Editable("IsDIEditable").Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HtmlAttributes(new { @class = "FontColRed", Style = "text-align:left;" }).HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign RedHeaderFont" });
})
);
})
);
columns.Group(g5 => g5
.Title("Disc").HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign", style = "font-weight:900;" }).Locked(false).Lockable(true)
.Columns(disc =>
{
disc.Bound(p => p.DiscBackFixName).Title(text: "Disc Back Fix Compl (Name)").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
disc.Bound(p => p.DiscBackFixDate).Title(text: "Disc Back Fix Compl (Date)").Width(pixelWidth: 85).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
})
);
columns.Bound(p => p.Remarks).Title(text: "Remarks / RFS #").Width(pixelWidth: 200).Filterable(value: true).Locked(false).Lockable(true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridCyanHeader CenterAlign" });
columns.Group(g6 => g6
.Title("Des Int").HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign", style = "font-weight:900;" }).Locked(false).Lockable(true)
.Columns(loc =>
{
loc.Bound(p => p.Location).Title(text: "Location").Width(pixelWidth: 75).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
loc.Bound(p => p.OptSeq).Title(text: "Opt Seq").Width(pixelWidth: 75).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
})
);
})
.Events(e => e.DataBound("dataBound"))
.HtmlAttributes(new { style = "height:800px;border:solid;border-width:thin;overflow:auto;width:100%;" })
.Pageable(pageable => pageable
.Input(enabled: true)
.Numeric(enabled: false)
.Refresh(enabled: true)
)
.Sortable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(false))
.Scrollable(scr => scr.Height(pixelHeight: 400))
.Selectable()
.Filterable()
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.InLine))
)
13 Answers, 1 is accepted
Rank 1
Almost there. I figured out I can change it like below. I can examine it in the developer tools and see that the locked value changes but the grid still does not reflect that the change has taken place. Any idea why the column would show the locked value appropriately but the grid still does not lock or unlock the columns?
e.checked ? $('#DIStatusGrid').data().kendoGrid.columns[1].locked = true : $('#DIStatusGrid').data().kendoGrid.columns[1].locked = false;
To achieve the desired outcome, I would recommend using the lockColumn and unlockColumn methods:
- https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/lockcolumn
- https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/unlockcolumn
Please, have in mind that in order to use the above methods, the grid must be initialized with at least one locked column.
Regards,
Preslav
Progress Telerik
Rank 1
Generally speaking, the correct syntax of locking the ShipId column should be:
$("#DIStatusGrid").data("kendoGrid").lockColumn("ShipId");Further, I should let you know that locking a column in multi-column headers scenario is possible at the topmost level only. Thus, could you please elaborate on how do you try to move the ShipId column outside of the grouped columns? If it is still in the Design Integration group, locking it is not doable.
I look forward to hearing from you.
Regards,
Preslav
Progress Telerik
Rank 1
Here is what I have changed my code to look like. I can set the header to locked and unlocked like you show above and I can inspect it using the developers tab console and see that the value for locked does change to true or false as desired. However, the columns on the grid do not freeze or unfreeze on the page. If I have the "Design Integration" header locked upon initialization it is locked on the page properly. When I check the box and execute the code $("#DIStatusGrid").data("kendoGrid").unlockColumn("Design Integration"); I inspect and see that the value for lock did indeed change to false but the columns still remain locked on the grid when scrolling. I know I have to be overlooking something simple but I just have not been able to figure it out.
@(Html.Kendo().Grid<DIStatus.Models.DistatusForGrid>
()
.Name(componentName: "DIStatusGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action(actionName: "DIStatusGrid_Read", controllerName: "Home"))
.Update(update => update.Action("DIStatusGrid_Update", "Home"))
.PageSize(pageSize: 50)
)
.Columns(columns =>
{
columns.Command(command =>
{
command.Custom("Edit").Text("Edit Page").Click(handler: "btnEdit");
command.Custom("Delete").Text("Delete").Click(handler: "btnDelete");
command.Edit().Text("Inline Edit").HtmlAttributes(new { id = "btnInlineEdit" });
}).Width(85).Locked(true).Lockable(true).HtmlAttributes(new { @style = "text-align:center;background-color:mistyrose;" }).HeaderHtmlAttributes(new { style = "background-color:mistyrose;" });
columns.Group(g0 => g0.Title("Ship").HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign", style = "font-weight:900;color:lime;" }).Locked(true).Lockable(true)
.Columns(si =>
{
si.Bound(p => p.Id).Title(text: "Id").Width(pixelWidth: 70).Filterable(value: false).Visible(false);
si.Bound(p => p.ShipId).Title(text: "Ship Id").Width(pixelWidth: 60).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
})
);
columns.Group(g1 => g1.Title("Design Integration").HtmlAttributes(new { id = "headerDI", name = "headerDI" }).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign", style = "font-weight:900;height:25px;" }).Locked(false).Lockable(true)
.Columns(di =>
{
di.Bound(p => p.UnitId).Title(text: "Unit Id").Width(pixelWidth: 60).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.AuthorityTypeId).Title(text: "Authority Type").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.Milestone).Title(text: "Milestone").Width(pixelWidth: 80).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.TrackingNumber).Title(text: "Tracking # (IFC, A/I, etc.)").Width(pixelWidth: 150).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.ReferenceNumber).Title(text: "Related / Ref # / Drawing #").Width(pixelWidth: 125).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.Description).Title(text: "Description").Width(pixelWidth: 300).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Group(di1 => di1.Title("Model Impacter").HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign", style = "font-weight:900;" })
.Columns(mi =>
{
mi.Bound(p => p.RespDrawings).Title(text: "Resp Drawings").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
mi.Bound(p => p.AffectedDrawings).Title(text: "Affected Drawings").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
})
);
di.Bound(p => p.Compartment).Title(text: "Compartment").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.Originator).Title(text: "Originator or D.I. Checker").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.DateEntered).Title(text: "Date Entered").Width(pixelWidth: 85).Editable("IsDIEditable").Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.DisciplineId).Title(text: "Discipline").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.AssignedTo).Title(text: "Assigned to Person").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.NeedDate).Title(text: "Need Date").Width(pixelWidth: 100).Editable("IsDIEditable").Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.ViolationId).Title(text: "YES=1 Clr Violation, Other or Hard Hit").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
di.Bound(p => p.PresidentsGoal).Title(text: "Pres Goal").Width(pixelWidth: 70).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
})
);
columns.Group(g2 => g2.Title("Transfer Info").HeaderHtmlAttributes(new { @class = "DIStatusGridOrangeHeader CenterAlign", style = "font-weight:900;" }).Locked(false).Lockable(true)
.Columns(ti =>
{
ti.Group(ti1 => ti1.Title("Email Required").HeaderHtmlAttributes(new { @class = "DIStatusGridOrangeHeader CenterAlign FontColRed", style = "font-weight:900;" })
.Columns(er =>
{
er.Bound(p => p.TransferDisciplineId).Title(text: "Disc IFC Is being transfered to").Width(pixelWidth: 100).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridOrangeHeader CenterAlign" });
er.Bound(p => p.TransferDesigner).Title(text: "Designer Name").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridOrangeHeader CenterAlign" });
er.Bound(p => p.TransferDate).Title(text: "Designer Date Accepted").Width(pixelWidth: 85).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridOrangeHeader CenterAlign" });
})
);
})
);
columns.Group(g3 => g3.Title("Discipline Currently Assigned To").HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign", style = "font-weight:900;" }).Locked(false).Lockable(true)
.Columns(dcat =>
{
dcat.Bound(p => p.ClearedBy).Title(text: "Cleared by / Assigned to (Name)").Width(pixelWidth: 100).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
dcat.Bound(p => p.ActionTaken).Title(text: "Action Taken / Clearance Comments").Width(pixelWidth: 400).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
dcat.Bound(p => p.Status).Title(text: "Status").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
dcat.Bound(p => p.PentRelatedItem).Title(text: "Pent Related Item").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
dcat.Group(g2 => g2.Title("Manager Approval").HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign", style = "font-weight:900;" })
.Columns(ma =>
{
ma.Bound(p => p.SatAsIs).Title(text: "Sat As Is").Width(pixelWidth: 80).Editable("IsManagerEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridRoseHeader CenterAlign" });
ma.Bound(p => p.ManagerApproval).Title(text: "Sat as is (Email reqd)").Editable("IsManagerEditable").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridRoseHeader CenterAlign" });
ma.Bound(p => p.ManagerApprovalDate).Title(text: "Manager Approval Date").Editable("IsManagerEditable").Width(pixelWidth: 85).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridRoseHeader CenterAlign" });
ma.Bound(p => p.ManagerApprovalExplanation).Title(text: "Manager Approval Explanation").Editable("IsManagerEditable").Width(pixelWidth: 250).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridRoseHeader CenterAlign" });
})
);
dcat.Bound(p => p.ClearanceCompleteDate).Title(text: "Clearance Complete Date").Width(pixelWidth: 85).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
dcat.Bound(p => p.Reserved).Title(text: "Reserved").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
})
);
columns.Group(g4 => g4.Title("Des Int").HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign", style = "font-weight:900;" }).Locked(false).Lockable(true)
.Columns(compt =>
{
compt.Group(compt1 => compt1.Title("Compt").HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign", style = "font-weight:900;" })
.Columns(cpt =>
{
cpt.Bound(p => p.IfcbackChecker).Title(text: "IFC Back Check Compl (Name)").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign" });
cpt.Bound(p => p.IfcbackCheckerDate).Title(text: "IFC Back Check Compl (Date)").Width(pixelWidth: 100).Editable("IsDIEditable").Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign" });
cpt.Bound(p => p.DesignChangeToFix).Title(text: "Did Design Change to Fix IFC").Width(pixelWidth: 100).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign" });
})
);
compt.Group(g2a => g2a.Title("Reject").HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign FontColRed", style = "font-weight:900;" })
.Columns(rej1 =>
{
rej1.Bound(p => p.RejectedBy).Title(text: "IFC Back Check Rejected (Name)").Width(pixelWidth: 125).Editable("IsDIEditable").Filterable(value: true).Visible(true).HtmlAttributes(new { @class = "FontColRed", Style = "text-align:left;" }).HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign RedHeaderFont" });
})
);
compt.Group(g2b => g2b.Title("Reject").HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign FontColRed", style = "font-weight:900;" })
.Columns(rej1 =>
{
rej1.Bound(p => p.RejectedDate).Title(text: "IFC Back Check Rejected (Date)").Width(pixelWidth: 85).Editable("IsDIEditable").Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HtmlAttributes(new { @class = "FontColRed", Style = "text-align:left;" }).HeaderHtmlAttributes(new { @class = "DIStatusGridSeaGreenHeader CenterAlign RedHeaderFont" });
})
);
})
);
columns.Group(g5 => g5.Title("Disc").HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign", style = "font-weight:900;" }).Locked(false).Lockable(true)
.Columns(disc =>
{
disc.Bound(p => p.DiscBackFixName).Title(text: "Disc Back Fix Compl (Name)").Width(pixelWidth: 85).Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
disc.Bound(p => p.DiscBackFixDate).Title(text: "Disc Back Fix Compl (Date)").Width(pixelWidth: 85).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridYellowHeader CenterAlign" });
})
);
columns.Bound(p => p.Remarks).Title(text: "Remarks / RFS #").Width(pixelWidth: 200).Filterable(value: true).Locked(false).Lockable(true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridCyanHeader CenterAlign" });
columns.Group(g6 => g6.Title("Des Int").HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign", style = "font-weight:900;" }).Locked(false).Lockable(true)
.Columns(loc =>
{
loc.Bound(p => p.Location).Title(text: "Location").Width(pixelWidth: 75).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
loc.Bound(p => p.OptSeq).Title(text: "Opt Seq").Width(pixelWidth: 75).Editable("IsDIEditable").Filterable(value: true).Visible(true).HeaderHtmlAttributes(new { @class = "DIStatusGridLimeHeader CenterAlign" });
})
);
})
.Events(e => e.DataBound("dataBound"))
.HtmlAttributes(new { style = "height:800px;border:solid;border-width:thin;width:auto;" })
.Pageable(pageable => pageable
.Input(enabled: true)
.Numeric(enabled: false)
.Refresh(enabled: true)
)
.Sortable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(false))
.Scrollable(scr => scr.Height(pixelHeight: 400))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Filterable()
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.InLine))
)
Based on the provided description and code, I created a test project that locks and unlocks a column.
Having said that, could you please check the attached project, and let me know if it is working okay on your side?
I look forward to your reply.
Regards,
Preslav
Progress Telerik
Rank 1
I don't see a project attached. Can you please provide a link for it?
Thanks.
I am attaching the project to this post.
I assume that there was an error during the attaching process that I missed. Please excuse me for that.
Regards,
Preslav
Progress Telerik
Rank 1
Thanks you. your example does indeed work. However if I change the code of your grid to the code below to add another grouping and run it, each time the grid sets the column to "Unlock" the sub headers (titles) swap from the first group to the second group and vice versa. The column data stays in the right place but the column titles swap places. Any ideas on that?
@(Html.Kendo().Grid<TelerikMvcApp4.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false).Locked(true).Width(300);
columns.Group(g1 => g1
.Title("Design Integration")
.Locked(true)
.Columns(di =>
{
di.Bound(x => x.Freight).Width(300);
di.Bound(x => x.OrderDate).Format("{0:MM/dd/yyyy}").Width(300);
})
);
columns.Group(g2 => g2
.Title("Design Integration2")
.Locked(false)
.Columns(di2 =>
{
di2.Bound(p => p.ShipName).Title("ShipName in group Design Integration2").Width(1100);
di2.Bound(p => p.ShipCity).Title("ShipCity in group Design Integration2").Width(1000);
})
);
columns.Bound(p => p.ShipName).Title("ShipName not in group").Width(500);
columns.Bound(p => p.ShipCity).Title("ShipCity not in group").Width(500);
})
.Pageable()
.Sortable()
.ColumnMenu()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
Rank 1
Maybe this will help. I have attached a stripped down version of my application that will show you my issue. I am using Visual Studio Professional 2017, version 15.9.9. Telerik 2019.1.220 And using .Net Core 2.1 MVC5
I had to split the .vs folder out of the main folder and zip it separately so I could upload them.
I appreciate all you are doing to help me get this sorted out.
Richard
I checked the provided project. Unfortunately, I am not able to run it on my side.
I also tested the code of the modified project. This behavior is a bug, and it is already logged in our internal issue tracking system(ID - 4682). I raised its priority. After testing different approaches, I am sorry to say that I was not able to find a suitable workaround for this bug. The only thing that might work is resetting the columns via the setOptions method, however, this will recreate the Grid, and a new request will be sent to the server.
Regards,
Preslav
Progress Telerik
Rank 1
Sorry for the delay in responding. The only difference I can see with the project you provided, which works, and my project, which still does not work, is that yours is using Net Framework 4.6.1 and mine is using Net Core 2.1. Could it be related to net core? I can paste my grid into your project and it will somewhat work.
Rich
The problem is related to the JavaScript that we are using for both ASP.NET MVC and Core controls. I can confirm that the problem is not related to the Core framework.
Further, I checked the issue item, and I saw that a developer from my team is already working on fixing it. Having said that, if everything goes as expected, we will include the fix with one of our next releases.
Regards,
Preslav
Progress Telerik