Radgrid - accessing hidden rows client side

[Jerry]

Is it possible to hide specific rows but still have access to them client side?  I need to pull and update cell data from the hidden rows.  My updates are handled in batch edit value changed function.  Any ideas or advise would be great.  

I have tried to hide/show with batch edit opening and closing but this makes the rows visible to the user while they are editing fields.

If I hide the rows server side in pre render event I can't seem to access client side, unless I am doing something incorrectly.

Thanks!

[Attila Antal]

Hi Jerry,

RadGrid by default will display all rows that are present in the data source. However, you can use CSS to visually hide rows of your choice. For instance, you can add a class on the Server-Side which will then visually hide the row element when Rendered on the Page.

The hidden CSS class 

Create a CSS rule with the class name "hidden"

.RadGrid tr.hidden {
    display: none;
}

 

Add the hidden CSS class on the Server-Side

In the ItemDataBound event, you can assign the "hidden" CSS class to the rows per your conditions.

Here is one example:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    // If row is a Data Item
    if (e.Item is GridDataItem)
    {
        var dataItem = (GridDataItem)e.Item;

        // To Preserve the embedded row styles
        // Check if Row is Alternating item
        bool isAlternatingItem = e.Item.ItemType == GridItemType.AlternatingItem;

        // Prepare the Row specific CSS class
        string rowSpecificCssClass = isAlternatingItem ? "rgAltRow" : "rgRow";

        // Get the OrderID from the records.
        // GetDataKeyNames() method requires the Field to be present in the DataKeyNames property. e.g. DataKeyNames="OrderID"
        var orderId = (int)dataItem.GetDataKeyValue("OrderID");

        // Condition
        bool IsHidden = orderId % 4 == 0;

        // If condition is met
        if (IsHidden)
            dataItem.CssClass = string.Format("{0} hidden", rowSpecificCssClass); // apply the .hidden CSS class to the row along with the Row Specific class.
    }
}

 

Show hidden rows on Client-Side

Since rows are visually hidden using CSS, you can simply remove the "hidden" CSS class from the elements to show the rows.

Example button for showing the hidden rows:

<telerik:RadButton runat="server" ID="RadButton1" Text="ShowHiddenRows" AutoPostBack="false" OnClientClicked="ShowHiddenRows" />

 

JavaScript - ShowHiddenRows function

function ShowHiddenRows(sender, args) {
    // jQuery code to remove the "hidden" class from the hidden rows.
    $telerik.$('.RadGrid tr.hidden').removeClass('hidden');
}

 

Hide rows on Client-Side

To hide rows on the Client-Side, you can use the same approach by adding the "hidden" CSS class to the row elements of your choice

Button to hide the rows

<telerik:RadButton runat="server" ID="RadButton2" Text="Hide rows 4 and 8" AutoPostBack="false" OnClientClicked="HideRows" />

 

JavaScript - HideRows function

function HideRows(sender, args) {
    // JavaScript code to find the rows with OrderID 4 and 8 in the Grid
    // https://docs.telerik.com/devtools/aspnet-ajax/general-information/get-client-side-reference
    var grid = $find('<%= RadGrid1.ClientID %>');

    // https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/overview
    var masterTable = grid.get_masterTableView();
    var dataItems = masterTable.get_dataItems();

    // Loop through the rows
    for (var i = 0; i < dataItems.length; i++) {
        var dataItem = dataItems[i];

        // Get the OrderID of the row.
        // getDataKeyValue() requires the field to be present in the ClientDataKeyNames property. e.g. ClientDataKeyNames="OrderID"
        // https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/accessing-values-and-controls/client-side/accessing-items
        // https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/accessing-values-and-controls/client-side/accessing-cells#getdatakeyvalue
        var orderId = parseInt(dataItem.getDataKeyValue("OrderID"));

        if (orderId == 4 || orderId == 8) {
            // get the row element 
            var rowElement = dataItem.get_element();

            // jQuery to add the "hidden" class to the row element
            // https://docs.telerik.com/devtools/aspnet-ajax/general-information/using-jquery/using-jquery#using-the-jquery-brought-by-telerik
            $telerik.$(rowElement).addClass('hidden');
        }
    }
}

 

 

Complete Code Example

<style>
    .RadGrid tr.hidden {
        display: none;
    }
</style>

<telerik:RadButton runat="server" ID="RadButton1" Text="ShowHiddenRows" AutoPostBack="false" OnClientClicked="ShowHiddenRows" />

<telerik:RadButton runat="server" ID="RadButton2" Text="Hide rows 4 and 8" AutoPostBack="false" OnClientClicked="HideRows" />

<script>
    function ShowHiddenRows(sender, args) {
        // jQuery code to remove the "hidden" class from the hidden rows.
        // https://docs.telerik.com/devtools/aspnet-ajax/general-information/using-jquery/using-jquery#using-the-jquery-brought-by-telerik
        $telerik.$('.RadGrid tr.hidden').removeClass('hidden');
    }

    function HideRows(sender, args) {
        // JavaScript code to find the rows with OrderID 4 and 8 in the Grid
        // https://docs.telerik.com/devtools/aspnet-ajax/general-information/get-client-side-reference
        var grid = $find('<%= RadGrid1.ClientID %>');

        // https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/overview
        var masterTable = grid.get_masterTableView();
        var dataItems = masterTable.get_dataItems();

        // Loop through the rows
        for (var i = 0; i < dataItems.length; i++) {
            var dataItem = dataItems[i];

            // Get the OrderID of the row.
            // getDataKeyValue() requires the field to be present in the ClientDataKeyNames property. e.g. ClientDataKeyNames="OrderID"
            // https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/accessing-values-and-controls/client-side/accessing-items
            // https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/accessing-values-and-controls/client-side/accessing-cells#getdatakeyvalue
            var orderId = parseInt(dataItem.getDataKeyValue("OrderID"));

            if (orderId == 4 || orderId == 8) {
                // get the row element 
                var rowElement = dataItem.get_element();

                // jQuery to add the "hidden" class to the row element
                // https://docs.telerik.com/devtools/aspnet-ajax/general-information/using-jquery/using-jquery#using-the-jquery-brought-by-telerik
                $telerik.$(rowElement).addClass('hidden');
            }
        }
    }
</script>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemDataBound="RadGrid1_ItemDataBound">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID" ClientDataKeyNames="OrderID" EditMode="Batch" CommandItemDisplay="Top">
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                SortExpression="OrderDate" UniqueName="OrderDate">
            </telerik:GridDateTimeColumn>
            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                SortExpression="Freight" UniqueName="Freight">
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="ShipName"
                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                SortExpression="ShipName" UniqueName="ShipName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry"
                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                SortExpression="ShipCountry" UniqueName="ShipCountry">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

<script runat="server">
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        (sender as RadGrid).DataSource = Enumerable.Range(1, 10).Select(x => new
        {
            OrderID = x,
            OrderDate = DateTime.Now.Date.AddDays(x),
            Freight = x * .1,
            ShipName = "Name " + x,
            ShipCountry = "Country " + x
        });
    }

    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        // If row is a Data Item
        if (e.Item is GridDataItem)
        {
            var dataItem = (GridDataItem)e.Item;

            // To Preserve the embedded row styles
            // Check if Row is Alternating item
            bool isAlternatingItem = e.Item.ItemType == GridItemType.AlternatingItem;

            // Prepare the Row specific CSS class
            string rowSpecificCssClass = isAlternatingItem ? "rgAltRow" : "rgRow";

            // Get the OrderID from the records.
            // GetDataKeyNames() method requires the Field to be present in the DataKeyNames property. e.g. DataKeyNames="OrderID"
            var orderId = (int)dataItem.GetDataKeyValue("OrderID");

            // Condition
            bool IsHidden = orderId % 4 == 0;

            // If condition is met
            if (IsHidden)
                dataItem.CssClass = string.Format("{0} hidden", rowSpecificCssClass); // apply the .hidden CSS class to the row along with the Row Specific class.
        }
    }
</script>

 

 

Regards,
Attila Antal
Progress Telerik

[Jerry]

Thanks, this worked perfectly for what I needed to do.