How to show or hide rows by template column

[Ryan]

Hi Telerik,

In my case, I want to show or hide any rows by clicking the link in template column in rad grid, click '+' to show the current row and '-' to hdie the current row.  And whatever the user chooses show or hide, keep the column that contians sign '+' and '-' to re-show and re-hide the current row. ( the UI is as shown below) How to achieve it? Look forward to your reply.

Thanks in advance.

[Princy]

Hi Ryan,

I guess you want to hide the columns in a row on a Template column Button Click and show the hidden columns on the same button click. Please take a look into the sample code snippet i tried.

ASPX:

<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" runat="server">
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:LinkButton ID="button1" runat="server" onclick="butt_Click" Text="Hide" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridButtonColumn UniqueName="ProductID" DataTextField="ProductID" HeaderText="ProductID" ></telerik:GridButtonColumn>
            <telerik:GridBoundColumn UniqueName="ProductName" Aggregate="Count" DataField="ProductName" HeaderText="ProductName"></telerik:GridBoundColumn>
            <telerik:GridButtonColumn UniqueName="UnitsInStock"  CommandName="select" Text="click"  ></telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void button1_Click(object sender, EventArgs e)
{
   LinkButton btn = (LinkButton)sender;
    GridDataItem ditem = (GridDataItem)btn.NamingContainer;
    if (btn.Text == "Hide")
    {
        ditem["ProductID"].Visible = false;
        ditem["ProductName"].Visible = false;
        ditem["UnitsInStock"].Visible = false;
        btn.Text = "show";
    }
    else
    {
        ditem["ProductID"].Visible = true;
        ditem["ProductName"].Visible = true;
        ditem["UnitsInStock"].Visible = true;
        btn.Text = "Hide";
    }
}

Thanks,
Princy.

[Ryan]

Hi Princy,

It really does the tricks. Thanks.

Now, I have a question. In the solution you provided, you use the server control , LinkButton, in the template column which will cause post back. How can we realize the same functionality maybe with the html control on the client side without causing post back?

Best Regards,
Ryan

[Princy]

Hello Ryan,

Try the following code to achieve your scenario.
aspx:

<telerik:GridTemplateColumn HeaderText="dropdown" UniqueName="Name">
  <ItemTemplate>
    <input type="button" value="hide" onclick="click(this);return false;"/>
 </ItemTemplate>
</telerik:GridTemplateColumn>

JS:

function click(id) {
  var master = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
  var row = master.get_dataItems()[0];
  var cell = master.getCellByColumnUniqueName(row, "UniqueName");
  if (id.defaultValue == "hide")
 {
     cell.className = "hide";
     id.defaultValue = "Show";
 }
 else
 {
   cell.className = "show";
   id.defaultValue = "hide";
 }
}

CSS:

.hide
{
display:none;
}
.show
{
display:block;
}

Thanks,
Princy.