[Solved] Context Menu messes up column widths

[Christopher Ronak]

Hi there,
I'm trying out the new context menu capability for the grid (which is an awesome addition by the way), but I find that when I de-select any column, the column widths collapse and the grid area shrinks to about half width. I've played around with a number of settings to zero-in as to what's causing it to do that, but I've come up with nothing. I've inserted my grid declaration below to see if there's something I'm missing.

Thanks for any help!

Chris

<%= Html.Telerik().Grid<AggregateResourceTransaction>()
        .Name("ProjectTransactionsGrid")
        .Localizable(CompanyEntity.Load().CultureCurrency)
        .ClientEvents(events => events
                .OnDataBinding("onPTGDataBinding")
                .OnDataBound("onPTGDataBound")
                .OnRowDataBound("onPTGRowDataBound"))
        .ToolBar(commands =>
        {
            commands
                .Custom()
                .HtmlAttributes(new
                {
                    id = "export"
                })
                .Text("Export to Excel")
                .Action("ExportCsv", "ProjectAnalyzer", new
                {
                    projectId = ViewData["ProjectId"],
                    fromDate = ViewData["ProjectTransactionFromDate"],
                    toDate = ViewData["ProjectTransactionToDate"]
                });
            commands
                .Custom()
                .HtmlAttributes(new
                {
                    id = "exportPdf"
                })
                .Text("Export to Pdf")
                .Action("ExportPdf", "ProjectAnalyzer", new
                {
                    projectId = ViewData["ProjectId"],
                    fromDate = ViewData["ProjectTransactionFromDate"],
                    toDate = ViewData["ProjectTransactionToDate"]
                });
        })
        .Columns(columns =>
        {
            columns.Bound(x => x.ResourceName).Title("Resource Name").Width(75 + (int)ViewData["WidthSuppliment"]).HtmlAttributes(new { style = "text-align:left" })
                .Aggregate(aggregates => aggregates.Count())
                .ClientGroupFooterTemplate("Count: <#= Count #>")
                .FooterHtmlAttributes(new { style = "text-align:right; font-weight:bold" })
                .ClientFooterTemplate("Count: <#= Count #>");
            columns.Bound(x => x.ResourceClassName).Title("Class").Width(60 + (int)ViewData["WidthSuppliment"]).HtmlAttributes(new { style = "text-align:left" });
            columns.Bound(x => x.TotalQuantity).Title("Qty").Width(35).HtmlAttributes(new { style = "text-align:center" })
                .Aggregate(aggregates => aggregates.Sum())
                .ClientGroupFooterTemplate("Sum: <#= Sum #>");
            columns.Bound(x => x.RateTypeName).Title("Rate").Width(50).HtmlAttributes(new { style = "text-align:center" });
            columns.Bound(x => x.TaskName).Title("Task")
                .Width(150).HtmlAttributes(new { style = "text-align:left" });
            columns.Bound(x => x.WorkDate).Format("{0:yyyy-MMM-dd}")
                .Width(60).Title("Work Date").HtmlAttributes(new { style = "text-align:center" });
            columns.Bound(x => x.InvoiceNumber)
                .Width(60).Title("Invoice Number").Visible((bool)ViewData["HasInvoiceTransactions"])
                .HeaderHtmlAttributes(new { style = "text-align:center" })
                .HtmlAttributes(new { style = "text-align:center" });
            columns.Bound(x => x.Comments)
                .Width(80).Title("Comments").HtmlAttributes(new { style = "text-align:left" });
            columns.Bound(x => x.ResourceTypeName)
                .Width(42).Title("Type").HtmlAttributes(new { style = "text-align:center" });
            columns.Bound(p => p.TotalCost)
                .Aggregate(aggregates => aggregates.Sum())
                .ClientGroupFooterTemplate("Sum: <#= $.telerik.formatString('{0:C}', Sum) #>")
                .ClientFooterTemplate("<#= $.telerik.formatString('{0:C}', Sum) #>")
                .FooterHtmlAttributes(new { style = "text-align:right; font-weight:bold" })
                .Format("{0:C}").Title("Cost")
                .Width(60).HtmlAttributes(new { style = "text-align:right" });
            columns.Bound(x => x.TotalBillable).Visible((bool)ViewData["ShowRevenue"])
                .Aggregate(aggregates => aggregates.Sum())
                .ClientGroupFooterTemplate("Sum: <#= $.telerik.formatString('{0:C}', Sum) #>")
                .ClientFooterTemplate("<#= $.telerik.formatString('{0:C}', Sum) #>")
                .FooterHtmlAttributes(new { style = "text-align:right; font-weight:bold" })
                .Format("{0:C}").Title(ViewData["RevenueType"].ToString())
                .Width(65)
                .HtmlAttributes(new { style = "text-align:right" });
            columns.Bound(x => x.Margin).Visible((bool)ViewData["ShowRevenue"])
                .Format("{0:p}")
                .Title("Margin")
                .Width(45)
                .Aggregate(aggregates => aggregates.Average())
                .ClientGroupFooterTemplate("Av <#= $.telerik.formatString('{0:p}', Average) #>")
                .ClientFooterTemplate("<#= $.telerik.formatString('{0:p}', Average) #>")
                .FooterHtmlAttributes(new { style = "text-align:right; font-weight:bold" })
                .HtmlAttributes(new { style = "text-align:right" });
        })

        .DataBinding(dataBinding => dataBinding
            .Ajax()
            .OperationMode(GridOperationMode.Client)
            .Select("_List", "ProjectAnalyzer", new
            {
                projectId = ViewData["ProjectId"],
                fromDate = ViewData["ProjectTransactionFromDate"],
                toDate = ViewData["ProjectTransactionToDate"]
            }))
        .Groupable()
        .Scrollable(scrolling => scrolling.Height(500))
        .ColumnContextMenu()
        .Sortable()
        .Filterable()
        .Selectable()
        .Resizable(resize => resize.Columns(true))
        .NoRecordsTemplate(ViewData["EmptyGridMessage"].ToString())
%>

[Nikolay Rusev]

Hello Christopher,

Here is a brief descriptions of how showing/hiding column should behave:
When hiding column grid table element will shrink in order to preserve the width of the columns. If you hide a column that does not have width set the table element will shrink in order to persist other columns width.
If you hide a column that has a width set and have at least one column without width, the column that does not have width set will expand and other columns will preserve their width.

Regards,
Nikolay Rusev
the Telerik team