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

Hide/Show Column Breaks Grid Appearance

2 Answers 652 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chinonso
Top achievements
Rank 1
Chinonso asked on 02 Jul 2018, 02:26 PM

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

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 04 Jul 2018, 06:05 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Chinonso
Top achievements
Rank 1
answered on 05 Jul 2018, 07:04 PM
:(  Ok.
Tags
Grid
Asked by
Chinonso
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Chinonso
Top achievements
Rank 1
Share this question
or