Hi there guys and gals, I have a grid and i am try to hide and show columns based on the selected month from a drop-down list. If selected month is January, then show the JComment column if it is February, then hide the JComment column and show the FComment column. The hide and show functionality works but unfortunately, it breaks the grid appearance, the all columns are compressed in width and blank space on the right of the grid appears. i have tried calling the resize grid function, i have tried fixing this through css, but to no avail. How do i fix this?
Here is the Grid logic
@(Html.Kendo().Grid<P2I_UI.Models.ViewM.MinistryImpactVM>()
.Name(
"peopleMinistryImpact"
)
.Columns(columns =>
{
columns.Bound(c => c.StatisticName).Title(
"StatisticName "
).Width(35);
columns.Bound(c => c.MinistryGroup).Title(
"Ministry <br/> Group"
).Width(25);
columns.Bound(c => c.AgeGroup).Title(
"Age"
).Width(25);
columns.Bound(c => c.AnnualGoal).Title(
"Annual <br/> Goal"
).Width(30).ClientTemplate(
"#=(AnnualGoal == null) ? ' ' : kendo.toString(AnnualGoal,',0')#"
);
columns.Bound(c => c.October).Title(
"Oct."
).Width(30).ClientTemplate(
"#=(October == null) ? ' ' : kendo.toString(October,',0')#"
);
columns.Bound(c => c.November).Title(
"Nov."
).Width(30).ClientTemplate(
"#=(November == null) ? ' ' : kendo.toString(November,',0')#"
);
columns.Bound(c => c.December).Title(
"Dec."
).Width(30).ClientTemplate(
"#=(December == null) ? ' ' : kendo.toString(December,',0')#"
);
columns.Bound(c => c.January).Title(
"Jan."
).Width(30).ClientTemplate(
"#=(January == null) ? ' ' : kendo.toString(January,',0')#"
);
columns.Bound(c => c.JanuaryComment).Title(
"JComment."
).Width(50).Hidden();
columns.Bound(c => c.February).Title(
"Feb."
).Width(30).ClientTemplate(
"#=(February == null) ? ' ' : kendo.toString(February,',0')#"
);
columns.Bound(c => c.FebruaryComment).Title(
"FComment."
).Width(50).Hidden();
columns.Bound(c => c.March).Title(
"Mar."
).Width(30).ClientTemplate(
"#=(March == null) ? ' ' : kendo.toString(March,',0')#"
);
columns.Bound(c => c.MarchComment).Title(
"MComment."
).Width(50).Hidden();
columns.Bound(c => c.April).Title(
"Apr."
).Width(30).ClientTemplate(
"#=(April == null) ? ' ' : kendo.toString(April,',0')#"
);
columns.Bound(c => c.May).Title(
"May."
).Width(30).ClientTemplate(
"#=(May == null) ? ' ' : kendo.toString(May,',0')#"
);
columns.Bound(c => c.June).Title(
"Jun."
).Width(30).ClientTemplate(
"#=(June == null) ? ' ' : kendo.toString(June,',0')#"
);
columns.Bound(c => c.July).Title(
"Jul."
).Width(30).ClientTemplate(
"#=(July == null) ? ' ' : kendo.toString(July,',0')#"
);
columns.Bound(c => c.August).Title(
"Aug."
).Width(30).ClientTemplate(
"#=(August == null) ? ' ' : kendo.toString(August,',0')#"
);
columns.Bound(c => c.September).Title(
"Sep."
).Width(30).ClientTemplate(
"#=(September == null) ? ' ' : kendo.toString(September,',0')#"
);
columns.Bound(c => c.FiscalYearToDate).Title(
"FYTD."
).Width(30).ClientTemplate(
"#=(FiscalYearToDate == null) ? ' ' : kendo.toString(FiscalYearToDate,',0')#"
);
columns.Bound(c => c.PercentageOfPlan).Title(
"% of <br/> Plan."
).Width(30).ClientTemplate(
"#=(PercentageOfPlan == null) ? ' ' : kendo.toString(PercentageOfPlan,'p')#"
);
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(events =>
{
events.Edit(
"onEditMinistryImpact"
);
})
.AutoBind(
false
)
.DataSource(dataSource => dataSource
.Ajax()
.Sort(s =>
{
s.Add(p => p.SortOrder).Ascending();
s.Add(p => p.MinistryGroupCategoryID).Ascending();
s.Add(p => p.AgeCategoryID).Ascending();
})
.ServerOperation(
false
)
.Batch(
true
)
.Model(model =>
{
model.Id(p => p.MinistryImpactID);
model.Field(p => p.StatisticName).Editable(
false
);
model.Field(p => p.MinistryGroup).Editable(
false
);
model.Field(p => p.AgeGroup).Editable(
false
);
model.Field(p => p.FiscalYearToDate).Editable(
false
);
model.Field(p => p.PercentageOfPlan).Editable(
false
);
})
.Read(read => read.Action(
"MinistryImpact_Read"
,
"MinistryImpact"
).Data(
"additionalData"
))
.Update(update => update.Action(
"MinistryImpact_Update"
,
"MinistryImpact"
))
)
)
Js Logic
function
onMonthChange(e)
{
var
selectedMonthIndex =
this
.value();
var
peopleMinistry = $(
"#peopleMinistryImpact"
).data(
"kendoGrid"
);
if
(parseInt(selectedMonthIndex) === parseInt(0))
{
peopleMinistry.showColumn(
"JanuaryComment"
);
peopleMinistry.hideColumn(
"FebruaryComment"
);
peopleMinistry.hideColumn(
"MarchComment"
);
}
else
if
(parseInt(selectedMonthIndex) === parseInt(1)) {
peopleMinistry.hideColumn(
"JanuaryComment"
);
peopleMinistry.showColumn(
"FebruaryComment"
);
peopleMinistry.hideColumn(
"MarchComment"
);
}
else
if
(parseInt(selectedMonthIndex) === parseInt(2)) {
peopleMinistry.hideColumn(
"JanuaryComment"
);
peopleMinistry.hideColumn(
"FebruaryComment"
);
peopleMinistry.showColumn(
"MarchComment"
);
}
peopleMinistry.resize();
// force the layout readjustment without setting a new height
peopleMinistry.resize(
true
)
}
CSS
<style>
#peopleMinistryImpact.k-grid-header {
padding
:
0
!important
;
}
#peopleMinistryImpact.k-grid-content {
overflow-y:
visible
;
}
#peopleMinistryImpact > .k-grid-header > div > table,
#peopleMinistryImpact > .k-grid-content > table {
width
:
100%
!important
;
}
#peopleMinistryImpact {
min-width
:
1250px
;
}
</style>
Thanks for the help