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

[gc_0620]

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;
    }

 

[Princy]

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.

[gc_0620]

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

 

[Princy]

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.

[gc_0620]

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

[Kiara]

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

[Jittu]

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.

[Princy]

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.

[Jittu]

Thanks Princy. I got the answer from one of your posts.
Thanks Alot.