Gridview Overlaps its Container (Tabcontainer) when Row is edited. RSS

• • Reply
  

  hitesh.gawha...

  Member

  163 Points

  83 Posts

  Gridview Overlaps its Container (Tabcontainer) when Row is edited.

  Jun 29, 2012 11:14 AM|LINK

  Hi, 

       I am using a gridview which in under a tabpanel in a tabcontainer. When I edit a dropdown in edit template, based on selected value next column's dropdownlist is polulated with a table, but doing this, my gridview width increases as the newly bound second dropdown width increases. Gridview overlaps the tabcontainer border on right side. 

       How can I set the tab container borders according to gridview size, so that my gridview always remains under the border ?

       My code is as follows :

       

  <cc1:TabContainer ID="TabContainer1" Width="100%" runat="server" BorderWidth ="0px"  BorderStyle="None" ActiveTabIndex="0" TabStripPlacement="Top" OnActiveTabChanged="TabContainer1_ActiveTabChanged">
  
                                      <cc1:TabPanel ID="TabPanel2" runat="server" CssClass = "CustomTabStyle" BorderWidth ="0px" BorderStyle="None" HeaderText="KPI Creation" TabIndex="0" Width="1000px">
                                          <HeaderTemplate>
                                              KPI Creation
                                          </HeaderTemplate>
                                          <ContentTemplate runat="server" >
                                          
                                           <table runat="server" style="size:auto">
                                             <tr runat="server">
                                             <td runat="server">
                                               
                            <asp:GridView ID="GridView1" runat="server"
          AutoGenerateColumns = "False" Font-Names = "Arial"
          Font-Size = "11pt"
           AllowPaging ="True"  ShowFooter = "True"
          OnPageIndexChanging = "OnPaging" onrowediting="EditCustomer" OnRowDataBound = "GridView1_RowDataBound"
          onrowupdating="UpdateCustomer"  onrowcancelingedit="CancelEdit" OnRowDeleting = "GridView1_RowDeleting" >
         <Columns>
         
        
        <asp:TemplateField  HeaderText = "Item No" visible = "False">
      <ItemTemplate>
          <asp:Label ID="lblno" runat="server"
          Text='<%# Eval("ID")%>'></asp:Label>
      </ItemTemplate>
       <FooterTemplate>
          <asp:TextBox ID="txtno" Width = "40px"
              MaxLength = "5" runat="server"></asp:TextBox>
      </FooterTemplate>
            <ItemStyle Width="30px" />
     </asp:TemplateField>
        
        <asp:TemplateField HeaderText="Category"><ItemTemplate> <%#Eval("category")  %> </ItemTemplate>
        <EditItemTemplate>
        <asp:DropDownList ID="ddcategory" runat="server" DataTextField="category" DataValueField ="category">
                  <asp:ListItem>- Select Category -</asp:ListItem>
                  <asp:ListItem>Growth</asp:ListItem>
                  <asp:ListItem>Game Changer</asp:ListItem>
                  <asp:ListItem>Performance</asp:ListItem>
                  <asp:ListItem>Process</asp:ListItem>
        </asp:DropDownList>
        </EditItemTemplate>
        <FooterTemplate>
                  <asp:DropDownList ID="ddcategory" runat="server" AutoPostBack="true" DataTextField="category" DataValueField ="category">
                  <asp:ListItem>- Select Category -</asp:ListItem>
                  <asp:ListItem>Growth</asp:ListItem>
                  <asp:ListItem>Game Changer</asp:ListItem>
                  <asp:ListItem>Performance</asp:ListItem>
                  <asp:ListItem>Process</asp:ListItem>
                  </asp:DropDownList>
        </FooterTemplate>
        </asp:TemplateField>
        
        
         <asp:TemplateField HeaderText="Grouping" >
                  <ItemTemplate><%#Eval("grouping") %></ItemTemplate>
                  <EditItemTemplate>
                      <asp:DropDownList ID="ddgroup" runat="server" AutoPostBack="true" OnSelectedIndexChanged = "Grouping_SelectedIndexChanged" AppendDataBoundItems="true" DataTextField="grouping" DataValueField ="grouping">
                      </asp:DropDownList>
                  </EditItemTemplate>
                   <FooterTemplate>
                   <asp:DropDownList ID="ddgroup" runat="server" AutoPostBack="true" OnSelectedIndexChanged = "Grouping_SelectedIndexChanged" DataTextField="grouping" DataValueField ="grouping"></asp:DropDownList>
              </FooterTemplate>
                </asp:TemplateField>
        
               <asp:TemplateField HeaderText="KPI" >
                  <ItemTemplate><%#Eval("kpi_name") %></ItemTemplate>
                  <EditItemTemplate>
                      <asp:DropDownList ID="ddkpi" runat="server" AppendDataBoundItems="true" DataTextField="kpi_name" DataValueField ="kpi_name">
                      </asp:DropDownList>
                  </EditItemTemplate>
                   <FooterTemplate>
                   <asp:DropDownList ID="ddkpi" runat="server" AutoPostBack="true" DataTextField="kpi_name" DataValueField ="kpi_name"></asp:DropDownList>
              </FooterTemplate>
                </asp:TemplateField>
              
          
            <asp:TemplateField HeaderText="Business" >
                  <ItemTemplate><%#Eval("bus_name")%></ItemTemplate>
                  <EditItemTemplate>
                      <asp:DropDownList ID="ddbus" runat="server" AppendDataBoundItems="true" DataTextField="bus_name" DataValueField ="bus_name">
                      </asp:DropDownList>
                  </EditItemTemplate>
                   <FooterTemplate>
                   <asp:DropDownList ID="ddbus" runat="server" AutoPostBack="true" DataTextField="bus_name" DataValueField ="bus_name"></asp:DropDownList>
              </FooterTemplate>
                </asp:TemplateField>
          
          <asp:TemplateField  HeaderText = "Description">
              <ItemTemplate>
                  <asp:Label ID="lbldesc" runat="server" Text='<%# Eval("description")%>'></asp:Label>
              </ItemTemplate>
              <EditItemTemplate>
                  <asp:TextBox ID="txtdescription" runat="server" Text='<%# Eval("description")%>' TextMode="MultiLine" Width="95%" style="overflow:auto;"></asp:TextBox>
              </EditItemTemplate>
              <FooterTemplate>
                  <asp:TextBox ID="txtdescription" runat="server" TextMode="MultiLine" style="overflow:auto;"></asp:TextBox>
              </FooterTemplate>
              <ItemStyle Width="150px" />
          </asp:TemplateField>
          
          <asp:TemplateField HeaderText = "Weightage" >
              <ItemTemplate>
                  <asp:Label ID="lblwt" runat="server" Text='<%# Eval("kpi_wt")%>'></asp:Label>
              </ItemTemplate>
              <EditItemTemplate>
                  <asp:TextBox ID="txtkpiwt" runat="server" Width="80px" Text='<%# Eval("kpi_wt")%>'></asp:TextBox>
              </EditItemTemplate>
              <FooterTemplate>
                  <asp:TextBox ID="txtkpiwt" Width="80px" runat="server"></asp:TextBox>
              </FooterTemplate>
          </asp:TemplateField>
          
           <asp:TemplateField HeaderText="Month" >
                  <ItemTemplate><%#Eval("month")%></ItemTemplate>
                  <EditItemTemplate>
                      <asp:DropDownList ID="ddmonth" runat="server" AppendDataBoundItems="true" DataTextField="month" DataValueField ="month">
                      </asp:DropDownList>
                  </EditItemTemplate>
                   <FooterTemplate>
                   <asp:DropDownList ID="ddmonth" runat="server" AutoPostBack="true" DataTextField="month" DataValueField ="month"></asp:DropDownList>
              </FooterTemplate>
                </asp:TemplateField>
                
                 <asp:TemplateField HeaderText="Year" >
                  <ItemTemplate><%#Eval("year")%></ItemTemplate>
                  <EditItemTemplate>
                      <asp:DropDownList ID="ddyear" runat="server" AppendDataBoundItems="true" DataTextField="year" DataValueField ="year">
                      </asp:DropDownList>
                  </EditItemTemplate>
                   <FooterTemplate>
                   <asp:DropDownList ID="ddyear" runat="server" AutoPostBack="true" DataTextField="year" DataValueField ="year"></asp:DropDownList>
              </FooterTemplate>
                </asp:TemplateField>
          
          <asp:TemplateField HeaderText = "Add">
               <FooterTemplate>
                  <asp:ImageButton ID="btnAdd" runat="server" Text="Add" OnClick = "AddNewCustomer" Font-Size="10pt" Width="40px" ImageUrl="Images/add.jpg" ToolTip = "Add" />
              </FooterTemplate>
          </asp:TemplateField>
          
          <asp:TemplateField HeaderText="Edit">
      <ItemTemplate>
        <asp:ImageButton ID="ImageButton1" CommandName="Edit" Runat="Server"
        Font-Size="8pt" Width="30px" ImageUrl="Images/edit2.jpg" ToolTip = "Edit" />
      </ItemTemplate>
      <EditItemTemplate>
        <asp:ImageButton ID="ImageButton2" CommandName="Update" Runat="Server"
        Font-Size="8pt" Width="30px" ImageUrl="Images/update2.jpg" ToolTip = "Update"/>
        <asp:ImageButton ID="ImageButton3" CommandName="Cancel" Runat="Server"
        Font-Size="8pt" Width="30px" ImageUrl="Images/cancel2.jpg" ToolTip = "Cancel"/>
      </EditItemTemplate>
       <FooterTemplate>
         <asp:ImageButton ID="ImageButton5" runat="server" width="50px" height="40px" OnClick ="btnSubmit_Click"
         ImageUrl="Images/submit2.jpg" ToolTip = "Submit" ImageAlign="Middle" />
              </FooterTemplate>
      
    </asp:TemplateField>
          
          <asp:TemplateField HeaderText="Delete">
      <ItemTemplate>
        <asp:ImageButton ID="ImageButton4" CommandName="Delete" Runat="Server"
        Font-Size="8pt" Width="30px" ImageUrl="Images/delete2.jpg" ToolTip = "Delete" />
      </ItemTemplate>
      </asp:TemplateField>
          
          
                </Columns>
                
                              <AlternatingRowStyle CssClass="AltRowStyle" BackColor="#C2D69B" />
                              <EditRowStyle CssClass="EditRowStyle" />
                              <EmptyDataRowStyle CssClass="EmptyRowStyle" />
                              <HeaderStyle CssClass="HeaderStyle" />
                              <PagerStyle CssClass="PagerStyle" />
                
                 <RowStyle CssClass="RowStyle" />
                              <SelectedRowStyle CssClass="SelectedRowStyle" />
                 </asp:GridView>
                                            </td>
                                             </tr>
                                             </table>
                                                         
                                          </ContentTemplate>
                                      </cc1:TabPanel>
  </cc1:TabContainer>

    

    

   

  Please Mark My Reply as Answer if it helped You.
• • Reply
  

  hitesh.gawha...

  Member

  163 Points

  83 Posts

  Re: Gridview Overlaps its Container (Tabcontainer) when Row is edited.

  Jun 30, 2012 09:07 AM|LINK

  Please help on this.

  Please Mark My Reply as Answer if it helped You.
• • Reply
  

  Song-Tian - ...

  All-Star

  43705 Points

  4304 Posts

  Microsoft

  Re: Gridview Overlaps its Container (Tabcontainer) when Row is edited.

  Jul 02, 2012 07:51 AM|LINK

  Hi,

  I suggest you debug with IE Developer Tools when edit. And then change some css style. Any more question, plsease feel free to reply.

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store
  
  • Edited by Song-Tian - MSFT on Jul 02, 2012 07:51 AM
  • Marked as answer by Song-Tian - MSFT on Jul 05, 2012 05:47 AM
• • Reply
  

  hitesh.gawha...

  Member

  163 Points

  83 Posts

  Re: Gridview Overlaps its Container (Tabcontainer) when Row is edited.

  Jul 07, 2012 07:03 AM|LINK

  Thanks,

    Other way round, I have enabled the scrollbars in Tabcontainer by :

  <cc:Tabcontainer ScrollBar = "Auto">

  The Page and gridview still expanding but it is under the tabcontainer now with horizontal scroll bars.
  
  

  Please Mark My Reply as Answer if it helped You.
  • Marked as answer by hitesh.gawhade on Jul 07, 2012 07:03 AM