It would be great if telerik can provide remove blank data rows on column which helps when dealing with huge data.
I am able to achieve the logic with below code.
var grid = $find('<%= RadGrid_MeaInfo.ClientID %>');
// MasterTable
var masterTable =
grid.get_masterTableView();
// Items/Rows
var dataItems = masterTable.get_dataItems();
for (var i = 0; i <
dataItems.length; i++) {
var item =
masterTable.getCellByColumnUniqueName(dataItems[i], "TriggerMan")
debugger;
if (item.innerHTML ==
"" || item.innerHTML == undefined) {
masterTable.hideItem(i);
}
}
Hi Revanth,
Thank you for your request!
Hiding rows when a cell is empty requires little to no coding by using the Grid's APIs.
Example C# - using the ItemDataBound event
// Event triggers when data is bound to RadGrid rows
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
// if the item is the data item
if (e.Item is GridDataItem)
{
var dataItem = (GridDataItem)e.Item;
// access the cell's text
var cellText = dataItem["ColumnUniqueName"].Text;
// check if the cell is empty
if (string.IsNullOrEmpty(cellText) || cellText == " ")
{
// Visually hide the row (it will still be rendered)
dataItem.Display = false;
}
}
}
Example VB - using the ItemDataBound event
'Event triggers when data is bound to RadGrid rows
Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
'if the item is the data item
If TypeOf e.Item Is GridDataItem Then
Dim dataItem = CType(e.Item, GridDataItem)
'access the cell's text
Dim cellText = dataItem("ColumnUniqueName").Text
'check if the cell is empty
If String.IsNullOrEmpty(cellText) OrElse cellText = " " Then
'Visually hide the row (it will still be rendered)
dataItem.Display = False
End If
End If
End Sub
JavaScript - using the GridCreated event
// Event triggers when data is bound to RadGrid rows
function OnGridCreated(sender, args) {
// Get reference to the GridDataItems collection
var dataItems = sender.get_masterTableView().get_dataItems();
// Loop through the dataItems
for (var rowIndex = 0; rowIndex < dataItems.length; rowIndex++) {
var dataItem = dataItems[rowIndex];
// Get the cell Text
var cellText = dataItem.get_cell("ColumnUniqueName").innerText.trim();
// Condition to check if the cell is empty
if (cellText == "" || cellText == " ") {
// Visually hide the row
dataItem.set_visible(false);
}
}
}
Important: I highly recommend that you hide/remove/exclude the rows from the data source before binding them to RadGrid. Otherwise, the Grid will not display the correct amount of rows defined in the PageSize property. E.g. if a page should contain 10 rows, out of which 3 are hidden, only 7 rows will be displayed.
Every record in the data source will be rendered on the page. Even if visually hidden, the rows will still be present physically.
Also, if the desired cell of all records is empty, then no rows will be displayed, only the pager.
Example screenshot showing the scenario of having all the items hidden. The Grid keeps track of the records and the pager is still rendered.
As this scenario is rather uncommon but can be easily achieved using the APIs, we prefer not to implement it as a built-in Feature.
Regards,
Attila Antal
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.