Hide/Show Column Breaks Grid Appearance

[Chinonso]

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

[Stefan]

Hello, Chinonso,

Thank you for the details.

This is expected as when the columns are shown or hidden the set fixed width of the column is enforced.

In cases like this one, we recommend having one column with no width set preferably not a column that will not be hidden or shown dynamically as hiding this column will lead to the same result:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#columns

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Chinonso]

:(  Ok.