How to hide PivotRows when their header names are empty or null in ExcelLikeLayout
This KB document explains how to hide PivotRows in relational server mode when their header names are empty or null.
Solution:
You can hide the PivotRows along with child members when the row header names are null or empty in ExcelLikeLayout by following the below steps.
Step 1:
Render the PivotGrid as your platform needs.
JavaScript
$("#PivotGrid1").ejPivotGrid(
{
url: "../api/RelationalGrid", renderSuccess: "successEvent", layout: ej.PivotGrid.Layout.ExcelLikeLayout
});
MVC
@Html.EJ().Pivot().PivotGrid("PivotGrid1").Locale("en-US").Url(Url.Content("~/api/RelationalGrid")).Layout(PivotGridLayout.ExcelLikeLayout).ClientSideEvents(cl=>cl.RenderSuccess("successEvent"))
ASP
<ej:PivotGrid ID="PivotGrid1" runat="server" Url="../api/RelationalGrid" Layout="ExcelLikeLayout"> <clientsideevents rendersuccess="successEvent" /> </ej:PivotGrid>
Step 2:
Add the following code in the “renderSuccess” event.
function renderSuccess(args) {
var tRows = this.element.find(".e-pivotGridTable").find("tbody tr");
for(var i=0; i< tRows.length; i++)
{
if (tRows[i].firstChild.innerText == " ") { //Check the PivotRow is empty
var countRows = parseInt(tRows[i].firstChild.getAttribute("data-i").split(",")[1]);
var startRow = parseInt(tRows[i].firstChild.getAttribute("data-i").split(",")[0]); // Starting position of the respective row
{
for (var j = startRow; j < countRows; j++) {
tRows[j].remove();
}
}
}
}
}
