How to Show/hide Detail tables from Master Table edit forms Link buttons onClick events.

9 posts, 0 answers
  1. gc_0620
    gc_0620 avatar
    225 posts
    Member since:
    Feb 2008

    Posted 16 Jul 2010 Link to this post

    Hi,

    Environment: VS 2008 SP1, RadControls for ASP.NET AJAX Q1 2010 NET35.

    I have a Radgrid with 2 Independant Detail Tables. My questions are:

    1) Is it possible to Hide/Show Detail Tables from Master Table Edit forms Link Button Onclick Events (LinkButton5 and LinkButton6 are in this page)?

    2) In Initial Page load event, show Detail Table (Name="Detail") by default but hide Detail Table1 (Name="Detail1") .

    3) Can the currently active (unhiden) Detail Table name be displayed in a Master Table label after link buttons onclick event as well as on initial page load event?
     

    Below are my codes. But Onlclick events of Link Buttons are not working.

     

    Thanks

    gc_0620

    ______________ 

    <%-- Beginning Block of Rad Grid --%>                              
    <telerik:RadGrid ID="RadGrid1" runat="server">
      
    <%-- Beginning Block of Master Table --%>                
    <MasterTableView DataKeyNames="PersonTableID" Name="Master" Font-Size="11px" DataSourceID="SqlDataSource3"
                        AllowFilteringByColumn="true" CommandItemDisplay="Top">
                         <RowIndicatorColumn>
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </RowIndicatorColumn>
                          
                            <%-- Beginning Block of Detail Table --%>                
                        <DetailTables>
                            <telerik:GridTableView runat="server" DataSourceID="SqlDataSource4" DataKeyNames="JobPersonID"
                                ShowHeader="true" Width="100%" Name="Detail" AllowAutomaticDeletes="true" ClientDataKeyNames "JobPersonID"
                                  
                               
                                <ParentTableRelation>
                                    <telerik:GridRelationFields DetailKeyField="PersonId" MasterKeyField="PersonTableID" />
                                </ParentTableRelation>
                                  
                                <Columns>
                                 '''
                                 '''
                      
                                </Columns>
                                <EditFormSettings EditFormType="Template" FormCaptionStyle-CssClass="form-controls">
                                    <FormCaptionStyle CssClass="form-controls"></FormCaptionStyle>
                                    <FormTemplate>
                                        '''
                                        '''
                                    </FormTemplate>
                                </EditFormSettings>
                            </telerik:GridTableView>
                             
                        </DetailTables>   
                        <%-- Ending Block of Detail Table --%>  
      
                        <%-- Beginning Block of Detail Table1 --%>                              
                       <DetailTables>
                            <telerik:GridTableView runat="server" DataSourceID="SqlDataSource5" DataKeyNames="JobPersonID"
                                ShowHeader="true" Width="100%" Name="Detail1" AllowAutomaticDeletes="true" ClientDataKeyNames "JobPerson_SecondaryID"
                                  
                               
                                <ParentTableRelation>
                                    <telerik:GridRelationFields DetailKeyField="PersonId" MasterKeyField="PersonTableID" />
                                </ParentTableRelation>
                                  
                                  
                                <Columns>
                                 '''
                                 '''
                                     
                                </Columns>
                                <EditFormSettings EditFormType="Template" FormCaptionStyle-CssClass="form-controls">
                                    <FormCaptionStyle CssClass="form-controls"></FormCaptionStyle>
                                    <FormTemplate>
                                        '''
                                        '''
                                    </FormTemplate>
                                </EditFormSettings>
                            </telerik:GridTableView>
                             
                        </DetailTables>
                        <%-- Ending Block of Detail Table1 --%>                               
                          
                        <ExpandCollapseColumn Visible="True">
                        </ExpandCollapseColumn>
                        <Columns>
                        '''
                        '''
                        </Columns>
                <%-- Beginning Block of Master Table Edit Forms --%>                              
                        <EditFormSettings EditFormType="Template">
                            <FormTemplate>
                                <table id="Table2" class="form-controls" cellspacing="2" cellpadding="1" width="100%"
                                    border="0" rules="none" style="border-collapse: collapse;background:#DCDCDC;">
                                    <tr>
                                          
                                          
                                        <td>
                                        Show Hide Detail Forms:
                                        </td>
                                       <td>
                                               
                                             <asp:LinkButton ID="LinkButton5" onclick = "HideDetail_ShowDetail1_Click"  runat="server">Hide Detail but Show Detail1</asp:LinkButton>
                                              <asp:LinkButton ID="LinkButton5" onclick = "HideDetail1_ShowDetail_Click"  runat="server">Hide Detail1 but Show Detail</asp:LinkButton>
      
      
      
                                        </td>
                                       </tr>
                                </table>
                            </FormTemplate>
                        </EditFormSettings>
                        <%-- Ending Block of Master Table Edit Forms --%>                              
                    </MasterTableView>
                <%-- Ending Block of Master Table --%>                              
                    <ClientSettings>
                        <Selecting AllowRowSelect="True" />
                    </ClientSettings>
                </telerik:RadGrid>
    <%-- Ending Block of Rad Grid --%>                              
    ___________
      
    protected void HideDetail_ShowDetail1_Click(object sender, System.EventArgs e)
        {
             
            RadGrid1.MasterTableView.DetailTables[0].Visible = false;
            RadGrid1.MasterTableView.DetailTables[1].Visible = true;
        }
      
    protected void HideDetail1_ShowDetail_Click(object sender, System.EventArgs e)
        {
             
            RadGrid1.MasterTableView.DetailTables[1].Visible = false;
            RadGrid1.MasterTableView.DetailTables[0].Visible = true;
        }

     

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jul 2010 Link to this post

    Hello,

    1: Try the following code snippet to achieve your first scenario.

    C#:
    protected void HideDetail_ShowDetail1_Click(object sender, EventArgs e)
        {
            foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
            {
                RadGrid1.MasterTableView.Items[item.ItemIndex].ChildItem.NestedTableViews[0].Visible = false;
                RadGrid1.MasterTableView.Items[item.ItemIndex].ChildItem.NestedTableViews[1].Visible = true;
            }
         }
        protected void HideDetail1_ShowDetail_Click(object sender, EventArgs e)
        {
            foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
            {
                RadGrid1.MasterTableView.Items[item.ItemIndex].ChildItem.NestedTableViews[0].Visible = true;
                RadGrid1.MasterTableView.Items[item.ItemIndex].ChildItem.NestedTableViews[1].Visible = false;
            }
        }

    2. For your second scenario, try the following code in DetailTableDataBind event.

    C#:
    protected void RadGrid1_DetailTableDataBind(object source, GridDetailTableDataBindEventArgs e)
        {
            if (!IsPostBack)
            {
                if (e.DetailTableView.Name == "Detail1")
                {
                    e.DetailTableView.Visible = false;
                }
            }
        }

    3. I am not sure where you have placed the Label in MasterTable. You can try the following method to access the name of DetailTable and display it according to your requirement.

    C#:
    string detailTablename1= RadGrid1.MasterTableView.DetailTables[0].Name;
    string detailTablename2 = RadGrid1.MasterTableView.DetailTables[1].Name;

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. gc_0620
    gc_0620 avatar
    225 posts
    Member since:
    Feb 2008

    Posted 19 Jul 2010 Link to this post

    Thanks Princy, your solution works.  A quick question is that is it possible to Show Expand/Collapse Column only after LinkButtons onclick event? Below is the link of one of your post that you answered to fellow memmber "Ed McCarroll" how to hide expand/collapse columns in RadGrid1_PreRender event using CSS.

    http://www.telerik.com/community/forums/aspnet-ajax/grid/hide-disable-expand-column.aspx

    This solution is ideal also to me, I would like to hide the expand/collapse column when Master Table columns are in Grid Bound  but I would like to show them when Master Table is in GridEditTable mode or preferably on click event of any of those 2 linkbuttons from my original post. The whole issue here is that this project requires users must open the Master Table 1st and later child tables.

    As  always (past and the present) your help is sincerely appreciated. 

    All the best,

    gc_0620

     


  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Jul 2010 Link to this post

    Hello,

    You can initially hide the ExpandCollapse column by using the following code in ColumnCreated event. Since the ColumnCreated event is fired after Button click, use a global variable as a flag for setting the ExpandCollapseColumn visibility. Give a try with the following code and see whether it helps.

    C#:
    protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
      {
          if (e.Column.UniqueName == "ExpandColumn" && i == 0)
          {
                e.Column.Visible = false;
          }  
      }
     
      int i = 0;
     
      protected void HideDetail_ShowDetail1_Click(object sender, EventArgs e)
      {
          i = 1;
          RadGrid1.Rebind();
          foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
          {
              RadGrid1.MasterTableView.Items[item.ItemIndex].ChildItem.NestedTableViews[0].Visible = false;
              RadGrid1.MasterTableView.Items[item.ItemIndex].ChildItem.NestedTableViews[1].Visible = true;
          }
      }
     
      protected void HideDetail1_ShowDetail_Click(object sender, EventArgs e)
      {
          i = 1;
          RadGrid1.Rebind();
          foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
          {
              RadGrid1.MasterTableView.Items[item.ItemIndex].ChildItem.NestedTableViews[0].Visible = true;
              RadGrid1.MasterTableView.Items[item.ItemIndex].ChildItem.NestedTableViews[1].Visible = false;
          }
      }


    Thanks,
    Princy.
  6. gc_0620
    gc_0620 avatar
    225 posts
    Member since:
    Feb 2008

    Posted 20 Jul 2010 Link to this post

    Princy.

    Thanks for your prompt response.

    But there is one issue. The moment I click Edit commandItemTemplateItem LinkButton in Master Table, the whole edit form shifts towards right, It is not properly alligned with the GridDataitems. Attached are the screenshots (GridBeforeEditLinkButtonClick.jpg and  GridAfterEditLinkButtonClick.jpg)

    Thanks

    gc_0620
  7. Kiara
    Kiara avatar
    309 posts
    Member since:
    Jul 2006

    Posted 26 Jul 2010 Link to this post

    Use IE developer toolbar or FireBug to check the styles and alignment applied to the grid's edit form by checking the page html. The info you can gather can help in addressing the visual glitch.

    Kiara
  8. Jittu
    Jittu avatar
    18 posts
    Member since:
    Sep 2012

    Posted 07 Sep 2012 Link to this post

    How Can I get the row click even only on Detail table. How would I differentiate between the Master Table and the Detail table row click.
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Sep 2012 Link to this post

    Hi Rajini,

    You can differentiate the detailtable and mastertableview by the following condition.
    C#:
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
        {
            if (e.CommandName == "RowClick" && e.Item.OwnerTableView.Name == "Master")
            {//checking for mastertable
            }
            if (e.CommandName == "RowClick" && e.Item.OwnerTableView.Name == "DeatilTable1")
            {//checking for detailtable
            }
    }

    Thanks,
    Princy.
  10. Jittu
    Jittu avatar
    18 posts
    Member since:
    Sep 2012

    Posted 10 Sep 2012 Link to this post

    Thanks Princy. I got the answer from one of your posts.
    Thanks Alot.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017