How do I control grid Expand column

13 posts, 1 answers
  1. AkAlan
    AkAlan avatar
    121 posts
    Member since:
    Jun 2009

    Posted 18 Jun 2012 Link to this post

    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>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Jun 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. AkAlan
    AkAlan avatar
    121 posts
    Member since:
    Jun 2009

    Posted 19 Jun 2012 Link to this post

    I tried this and it does allow me to add header text but now I can no longer expand the row.
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Jun 2012 Link to this post

    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.
  6. AkAlan
    AkAlan avatar
    121 posts
    Member since:
    Jun 2009

    Posted 20 Jun 2012 Link to this post

    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.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jun 2012 Link to this post

    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.
  8. Wellington
    Wellington avatar
    1 posts
    Member since:
    Apr 2013

    Posted 01 Apr 2013 Link to this post

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



  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Apr 2013 Link to this post

    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.
  10. Sheshagiri
    Sheshagiri avatar
    4 posts
    Member since:
    Sep 2014

    Posted 24 Sep 2014 Link to this post

    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



     



  11. Sheshagiri
    Sheshagiri avatar
    4 posts
    Member since:
    Sep 2014

    Posted 26 Sep 2014 in reply to Sheshagiri Link to this post

    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..
  12. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 29 Sep 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Sheshagiri
    Sheshagiri avatar
    4 posts
    Member since:
    Sep 2014

    Posted 30 Sep 2014 in reply to Maria Ilieva Link to this post

    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..













  14. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 02 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017