How to hide total sum column and row in Kendo UI asp.net mvc Pivot grid

862 Views Asked by At

In the Pivot grid (Kendo UI asp.net MVC), I have tried to hide the last column and row but could not succeed (ie. the column and row that shows total field which is default in the grid). I search on google but I didn't get the correct answer.

Can anyone help me to do?

@(Html.Kendo().PivotGrid<xxx>()
    .Name("xxxx")
    .HtmlAttributes(new { @class = "hidden-on-narrow" })
    .Filterable(true)
    .Height(600)
    .DataCellTemplateId("dataCellTemplate")
    .ColumnHeaderTemplateId("headerTemplate")
    .RowHeaderTemplateId("rowHeaderTemplate")
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Transport(transport => transport.Read("xxx_Read", "xxx"))
        .Schema(schema => schema
            .Cube(cube => cube
                .Dimensions(dimensions =>
                {
                    dimensions.Add(model => model.SSName).Caption("SSName");
                    dimensions.Add(model => model.SVName).Caption("SVName");
                })
            )
        )
        .Columns(columns =>
        {
            columns.Add("SSName").Expand(true);
        })
        .Rows(rows => rows.Add("SVName").Expand(true))
    )
    Events(events =>
       events.DataBound("xxxx_dataBound");
       events.DataBinding("xxxx_dataBinding");
    )
2

There are 2 best solutions below

0
On

Change the width to 0

this.columnsHeader.find("table colgroup col:last-child").css({ width: 0 });
this.content.find("table colgroup col:last-child").css({ width: 0 });
this.element.find(".k-grid-footer").hide();
1
On

You can hide the column using this

 var grid = $("#xxxx").data("kendoGrid");
 grid.hideColumn("SVName");

for displaying it

 grid.showColumn("SVName");