web datagrid hide rows

Hi,

our requirement was to get all the accounts and details for a client. We get this data using Stored procedure and fill custom oject and bind grid to custom object. After binding we hide the rows based on certain logic in Javascript. If the user wants to see the rest of the data, we provided them with checkbox. If checkbox is checked, then we show all rows. On server side, when we are looping thru rows, we check whether row is hidden or not and then do rest of the logic like this:

foreach (Ultragridrow row in UltraWebGrid1.Rows){

if (!row.Hidden)

 this worked fine with ultrawebgrid. With WebDatagrid GridRecord, there is no 'hidden' property to check. So, how can I hide the rows and check whether each row is hidden or not.

Thanks,

Spunny

 

 

 

Hello Spunny,

Currently there is no built-in property for row hiding and you can hide mainly grid columns – http://help.infragistics.com/Help/NetAdvantage/ASPNET/2011.2/CLR4.0/html/WebDataGrid_Hiding_a_Column.html

What you can do to overcome this is to use CSS classes and assign them to the needed rows like this (in “InitializeRow” event):

protected void WebDataGrid1_InitializeRow(object sender, Infragistics.Web.UI.GridControls.RowEventArgs e)

    {

 

        if (e.Row.Index == 2)

        {

            e.Row.CssClass = "hideRow"; // hide the row with index 2

        }

    }

 

<style type="text/css">  

    .hideRow

    {

        visibility:hidden;

        display:none;

    }

 

    </style>

 

Unfortunately there is no “isHidden” Boolean property that can be used to check if row is hidden or not.

I hope that this approach will work in your scenario.

Hello Spunny,

Inform me if you need additional assistance with this question.

I saw your answer. I tried and it works. Then I tried to move the same logic to Javascript to do client side row hiding because I do not want to have postback to the server. However, it does not work. My code snippet is below. Could you be so kind to let me know why the following does not work? Thanks.

 

var templateGrid = $find(m_templateGridId);

var rowsLength = templateGrid.get_rows().get_length();

 
                 for (var i = 0; i < rowsLength; i++) {
 
                     var currentRow = templateGrid.get_rows().get_row(i);
                     currentRow.CssClass = "hiderow";

                   }

The style looks like this.

.hideRow {
	visibility: hidden;
	display: none;
}

Hi aschoi,

The objects are not the same on the client and the server.  On the client you should do the following

$util.addCompoundClass(currentRow.get_element(), "hiderow");

instead of 

currentRow.CssClass = "hiderow";

Your line of code just makes a property on the javascript object, but does not actually change the DOM element's className property.

regards,
David Young 

Hide is working fine but if i want to show the rows again on a button click how will i do. Tried by adding "showrow" css class but its not working.

This solution only hides the button in the rightmost column, not the entire row, which is what I'm looking for (in javascript).

Cliff

I'm meaning in my grid which has 4 columns, the first with a ddl provider, 2 & 3 with read only data and the 4th column with a button.  When they click on the button, I want to hide the entire row, but this solution only seems to hide the button (template row).

Cliff