How do I control grid Expand column

[AkAlan]

I want to change some behaviour in the the expand column of a RadGrid. I don't seem to have any control over the column even though I am adding code that seems like it should provide control. For instance I add this line in my .aspx page :

<ExpandCollapseColumn Visible="false"></ExpandCollapseColumn>
It doesn't matter if I choose True or False, the column is still there. 
I change the button type or any of the options I get in intellisense but the grid renders the same. 
I want to add a header to the column for my users since they don't seem to comprehend what the arrow is for 
without instructions. I'm posting what I think is the relevant markup in case I did something wrong here. 
Thanks for any help. 
 
<telerik:RadGrid    ID="RadGrid1"
                       EnableAJAX="True"
                       DataSourceID="sdsRefrigerantCylinders"
                       runat="server"
                       Width="100%"
                       AutoGenerateColumns="False"
                       PageSize="20"
                       AllowSorting="True"
                       Skin="Outlook"
                       AllowPaging="True"
                       AllowAutomaticUpdates="True"
                       AllowAutomaticInserts="True"
                       ShowStatusBar="True"
                       GridLines="None">
       <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

   <MasterTableView    DataSourceID="sdsRefrigerantCylinders"
                       CommandItemDisplay="top"
                       CommandItemSettings-AddNewRecordText="Insert New Cylinder"
                       DataKeyNames="CylinderID,SiteID"
                       AllowMultiColumnSorting="true"
                       AllowAutomaticUpdates="true"
                       AllowAutomaticInserts="true"
                       Name="Cylinders">
  <ExpandCollapseColumn Visible="True" ButtonType="PushButton" ItemStyle-BackColor="red">
           </ExpandCollapseColumn>

 <Columns>
               <telerik:GridEditCommandColumn HeaderStyle-Width="50px"  EditText="Edit Cylinder" >
                   <HeaderStyle Width="50px"></HeaderStyle>
               </telerik:GridEditCommandColumn>

               <telerik:GridTemplateColumn UniqueName="CylinderID" HeaderText="Cylinder ID" SortExpression="CylinderID" DataField="CylinderID"
                   ItemStyle-Width="50px" HeaderStyle-Width="50px">
                   <ItemTemplate>
                       <asp:Label ID="lblCylinderID" runat="server" Text='<%# Eval("CylinderId") %>'></asp:Label>
               </ItemTemplate>

                   <HeaderStyle Width="50px"></HeaderStyle>
                   <ItemStyle Width="50px"></ItemStyle>
               </telerik:GridTemplateColumn>

               <telerik:GridTemplateColumn UniqueName="CylinderSerNo" HeaderText="Serial No" SortExpression="CylinderSerialNO"  HeaderStyle-Wrap="true"
                   ItemStyle-Width="75px" HeaderStyle-Width="70px">
                   <ItemTemplate>
                       <asp:Label ID="lblSerNo" runat="server"  Text='<%# Eval("CylinderSerialNO") %>'></asp:Label>
                   </ItemTemplate>
                   <EditItemTemplate>
                       <telerik:RadTextBox ID="rtbSerNo" runat="server" Text='<%# Bind("CylinderSerialNo") %>'>
                       </telerik:RadTextBox>
                   </EditItemTemplate>
                   <HeaderStyle Width="75px"></HeaderStyle>
                   <ItemStyle Width="75px"></ItemStyle>
               </telerik:GridTemplateColumn>

[Shinu]

Hi,

Please try the following code snippet to give Header Text for the ExpandCollapseColumn.

C#:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    (RadGrid1.MasterTableView.GetColumn("ExpandColumn") as GridExpandColumn).HeaderText = "Your text";
    RadGrid1.Rebind();
}

Let me know if there is any concern.

Thanks,
Shinu.

[AkAlan]

I tried this and it does allow me to add header text but now I can no longer expand the row.

[Shinu]

Hi,

Please try the following code snippet.

C#:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        (RadGrid1.MasterTableView.GetColumn("ExpandColumn") as GridExpandColumn).HeaderText = "Your Text";
        RadGrid1.Rebind();
    }
}

Thanks,
Shinu.

[AkAlan]

Thanks Shinu, that worked perfectly, thanks for helping. I do have one follow up, how do I change the default black triangle to something like a plus or custom png? Thanks agian.

[Shinu]

Hi,

You can change the Image of the ExpandCollapseColumn using an ASPX code or CSS.

ASPX:

<MasterTableView ExpandCollapseColumn-ButtonType="ImageButton"   ExpandCollapseColumn-CollapseImageUrl="Images/Collapse.gif" ExpandCollapseColumn-ExpandImageUrl="Images/Expand.gif">

OR

CSS:

<style>
    .rgExpand
    {
      background:url('Images/image1.jpg') center center no-repeat !important;
    }

   .rgCollapse
    {
      background:url('Images/image2.jpg') center center no-repeat !important;
    }

</style>

Thanks,
Shinu.

[Wellington]

Hi Shinu, Do you know how to put a Linkbutton or a ImageButton in the header of Expand Column ?

[Shinu]

Hi,

You can try the approach mentioned in the following code library.
Custom expand/collapse column with ExpandAll/CollapseAll image button in the header

Thanks,
Shinu.

[Sheshagiri]

Hi,
    I have a rad grid like,

 <telerik:RadGrid ID="radgdTaskViewByUser" runat="server" OnPreRender="Page_PreRenderComplete"             OnNeedDataSource="radgdTaskViewByUser_NeedDataSource" Height="100%"  AllowPaging="true"  PageSize="200"   
   OnItemCommand="radgdTaskViewByUser_OnItemCommand"     AutoGenerateColumns="false" CellSpacing="0" >
        <ClientSettings>
                      <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        </ClientSettings>
      <MasterTableView AllowSorting="true"      DataKeyNames="tskhParentID,tskhTaskID,tskhChildID" Width="100%"  >
                  <SelfHierarchySettings  ParentKeyName="tskhParentID"  KeyName="tskhChildID"      />
                              <Columns>
                               <telerik:GridBoundColumn DataField="tskhComments" HeaderText="Task Name"  ></telerik:GridBoundColumn>
                                                              <telerik:GridButtonColumn ButtonType="ImageButton"      CommandName="imgBtnViewComments"  ImageUrl="~/Images/AddComment.jpg" ShowFilterIcon="true"  HeaderText="Add Comments" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" >
                                                              </telerik:GridButtonColumn>
                                 </Columns>
               </MasterTableView>
 <ClientSettings AllowExpandCollapse="true">
       </ClientSettings>
   </telerik:RadGrid>
aspx.cs:
protected void Page_Load(object sender, EventArgs e)
    {
        
     
        if ( radgdTaskViewByUser.EnableLinqExpressions)
        {
            radgdTaskViewByUser.MasterTableView.FilterExpression = @"(Convert.ToInt32(iif(it[""tskhParentID""]==Convert.DBNull,null,it[""tskhParentID""])) =0)";

        }
        else
        {
            radgdTaskViewByUser.MasterTableView.FilterExpression = "tskhParentID=0";
        }
       
            
    }
    
    protected void radgdTaskViewByUser_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        
        radgdTaskViewByUser.DataSource // radgrid binding      
      
    }
 protected void radgdTaskViewByUser_OnItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == "imgBtnViewComments")
        {
tskhChildID = int.Parse(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["tskhChildID"].ToString()); //view state
            tskhTaskID = Convert.ToInt16(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["tskhTaskID"].ToString());//view state
            imgBtnClickAddCommentstoTaskHistory();  // calling function    
            }
}
 protected void imgBtnClickAddCommentstoTaskHistory()
    {
        mpeAddComments.Show();  // It is Popup and It has one text box for adding Task (Comment) and save button
    }
protected void btnSaveAndClose_Click1(object sender, ImageClickEventArgs e)
    {
// here is onclick event of popup for  save 
with the help of Parent ID(PID) and Child ID(CID), here i can  inserting new Item
radgrid1.Rebind() 
}
After clicking event the item will inserted under parent node. but it will not  appears in radgrid

>Parent A                                        PID=1
    >   --Child A1                              CID= 3    //   it is parent node of Child AA1 Now its PID is 3 
                  ---- Child AA1                CID=5
>Parent B                                        PID=2
      -- Child B1                             CID=4

                              //   if I insert Child B2(CID=6) under Parent B then grid will be,
>Parent A
     >  --Child A1 
              --Child AA1            
>Parent B
           ---Child B1
                            if i use radgrid1.Rebind() or radgrid1.MaterTableView.Rebind(); then grid will be
>Parent A
>Parent B

            After expanding only you will get Child B2 under Parent B like,
>Parent A
>Parent B// Expanding
   --Child B1
   --Child B2

My Problem:
                 I want Child B2 Should appears under Parent B after Clicking the save button like
 >Parent A
> Parent B
      --- Child B1
      --- Child B2  // with out expanding it should automatically appears under Parent while Saving



 

[Sheshagiri]

Sorry friend,
   i did mistake near ID assigning to Parent..
see it is like this,


>Parent A                                        CID=1   //  parent node of Child A1 is Parent A and Now its PID is 1
    >   --Child A1                              CID= 3   //   parent node of Child AA1  is Child A1 and Now its PID is 3 
                  ---- Child AA1                CID=5   
>Parent B                                        CID=2
      -- Child B1                             CID=4


my table is like

tskhTsakID  tskhChildID tskhParentID tskhComments
     11            1                      Null          Parent A
     12            2                      Null          Parent B
     11            3                          1          Child A1
     12            4                          2          Child B1
     11            5                          3          Child AA1
      12            6                         2          Child B2
But, my problem is not solved.. solution Please..

[Maria Ilieva]

Hi Sheshagiri,

As based on the provided information it is a bit difficult to determine what the exact reason for the presented issue is, I would suggests you to open a regular support ticket and send us an isolated runnable version of your application.
Thus we will be able to debug it locally and advise you further.


Regards,
Maria Ilieva
Telerik

 

 

[Sheshagiri]

Hi Maria,

Okay,
first of all, i will modify previous program and try to make it simple, 
 See  for my application, I referring  below link,

 http://www.telerik.com/help/aspnet-ajax/grid-self-referencing-hierarchy.html

 same thing i am using, but i have one textbox and image button for inserting taskcomments ,

<table>
       <tr>
             <td>
             <asp:Label ID="lblAddComments" Text="Write your Comments" runat="server"></asp:Label>
             </td>     
             <td>
            <asp:TextBox ID="txtbxAddComments" runat="server"></asp:TextBox>
           </td>
     </tr>
    </table>
        <telerik:RadGrid  ID="RadGrid1" runat="server"   OnNeedDataSource="RadGrid1_NeedDataSource" Height="100%"    
                           OnItemCommand="RadGrid1_ItemCommand"      AutoGenerateColumns="false" CellSpacing="0" >
                 <ClientSettings>
                          <Scrolling AllowScroll="true" />
                 </ClientSettings>
                             <MasterTableView AllowSorting="true"   DataKeyNames="ID,ParentID,Name" Width="100%"    >
                                           <SelfHierarchySettings    ParentKeyName="ParentID"  KeyName="ID"      />       
                                                       <Columns>
                                                               <telerik:GridBoundColumn DataField="Name"   HeaderText="Task Name or Comments"   >                    </telerik:GridBoundColumn>
                                                               <telerik:GridButtonColumn ButtonType="ImageButton"         CommandName="imgBtnViewComments"  ImageUrl="~/Images/AddComment.jpg" ShowFilterIcon="true"  HeaderText="Add Comments" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" >
                                                               </telerik:GridButtonColumn>
                                                       </Columns>                                             
                                         </MasterTableView>
                             <ClientSettings AllowExpandCollapse="true">
                         </ClientSettings>
   </telerik:RadGrid>
</form>
</body>
</html>

code:
protected void Page_Load(object sender, EventArgs e)
    {
        if (RadGrid1.EnableLinqExpressions)
        {
            RadGrid1.MasterTableView.FilterExpression = @"(Convert.ToInt32(iif(it[""ParentID""]==Convert.DBNull,null,it[""ParentID""])) =0)";
        }
        else
        {
            RadGrid1.MasterTableView.FilterExpression = "ParentID=0";
        }

    }
    protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = GetDataTable("Select * from Self_ReferenceTable");
    }
public DataTable GetDataTable(string query)
    {
        SqlConnection con = new SqlConnection("local database sheshagiri");
        con.Close();
        con.Open();

        SqlDataAdapter adopt = new SqlDataAdapter(query, con);
        DataTable dt = new DataTable();
        adopt.Fill(dt);
        return dt;     
    }
 public int ID
    {
        get
        {
            return Convert.ToInt32(ViewState["ID"]);
        }
        set
        {
            ViewState["ID"] = value;
        }
    }


protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {


        if (e.CommandName == "imgBtnViewComments")
        {
            ID = int.Parse(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["ID"].ToString());  // ID=1      
            PutDataTable();
        }
    }

public void PutDataTable()
    {
        string Comments = txtbxAddComments.Text;

        SqlConnection conn = new SqlConnection("Local database sheshagiri");
        conn.Close();
        conn.Open();
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = conn;

        cmd = new SqlCommand("insert into Self_ReferenceTable(Name,ParentID) values('"+ Comments +"','"+ID+ "')", conn);
        cmd.ExecuteNonQuery();

    }

if you click image button of ''Andrew" row , the comment(TaskName both same) "Stive(ID=12 and ParentID=1)" will insert under Andrew. But wont display, After inserting also grid as it is above,
I want the inserted comment should display under Andrew without expand again,
 solution please,thank you..

[Maria Ilieva]

Hi Sheshagiri,

Unfortunately, even after carefully revised the provided code on my end, I'm still not able to completely understand what the exact requirement you have is.
Could I kindly ask you to visualize the current state of your scenario and the one that you aim to achieve by sending presentation with exact data in it? This will help us to catch the application logic and provide straight to-the-point solution for your case.

Regards,
Maria Ilieva
Telerik