This is a migrated thread and some comments may be shown as answers.

How to show or hide rows by template column

3 Answers 255 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 31 May 2012, 07:45 AM
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.

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 31 May 2012, 11:25 AM
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.
0
Ryan
Top achievements
Rank 1
answered on 05 Jun 2012, 03:12 AM
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
0
Princy
Top achievements
Rank 2
answered on 05 Jun 2012, 11:05 AM
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.
Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Ryan
Top achievements
Rank 1
Share this question
or