This is a migrated thread and some comments may be shown as answers.

Odd Resizing of GridEditCommandColumn w/ ImageButton

5 Answers 257 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 23 Mar 2012, 05:23 PM
Hello
I have an strange issue w/ the GridEditColumn expanding to a very large size in order to stretch the RadGrid to fill the horizontal display area, but only when the ButtonType of that column is set to "ImageButton".  When using "LinkButton" or "PushButton", all the columns of the RadGrid expand proportionally to fill the horizontal display.  The underlying data connection is an Oracle db, and the issue happens on different tables (but not all of them). It seems to depend on the total number of columns and therefore the total horizontal width of the grid.  If there are more columns than can be displayed, the horizontal scroll bar appears as expected. When the entire grid can be displayed, the columns expand proportionally to fit the width, but not if using "ImageButton",  In that case, the GridEditColumn is not proportionally expanded, but is overly wide.

Please see attached screen shots. I've tried changing the image used for the GridEditColumn, but that had no affect.
Using Telerik version: 2009.3.1314.20

Code is as follows:
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Width="100%"<br>        Height="100%" FullScreenMode="True" BorderSize="0" ResizeWithBrowserWindow="true" ResizeMode="Proportional" ResizeWithParentPane="False"><br> <telerik:RadPane ID="HeaderPane" runat="server" CssClass="header" Height="48px" Scrolling="None"><br> <table id="TableHeader" width="100%" style="height: 100%; "><br>  <tbody><br>  <tr valign="middle"><br>   <td style="font-size: 10pt; color: white;" width="48px"><br>    <img alt="" src="Images/CodeMaintLogo.gif" /><br>   </td><br>   <td align="left" style="font-size: 14pt; color: white;">&nbsp;Code Maintenance&nbsp;&nbsp;<br>   </td><br>   <td align="left" style="font-size: 10pt; color: white;" width="50px"><br>    <asp:Label ID="LinkOptions" runat="server" Font-Underline="True" ForeColor="White" Text="Options"> </asp:Label><br>   </td><br>   <td align="left" style="font-size: 10pt; color: white;" width="50px"><br>    <asp:Label ID="LabelLogout" runat="server" Font-Underline="True" ForeColor="White" Text="Logout"></asp:Label><br>   </td><br>   <td align="left" style="font-size: 10pt; color: white;" width="50px"><br>    <asp:Label ID="LabelUserID" runat="server" Font-Bold="True" Font-Size="12pt" Font-Underline="False" ForeColor="White"></asp:Label><br>   </td><br>  </tr><br>  </tbody><br> </table><br> </telerik:RadPane><br><br> <telerik:RadPane ID="MainPane" runat="server" Scrolling="None"><br>  <telerik:RadSplitter ID="RadSplitter2" runat="server" Width="100%" Height="100%" LiveResize="True" BorderSize="0"  FullScreenMode="True"><br>   <telerik:RadPane ID="TreePane" runat="server" CssClass="treepane_default" Width="300px" Height="100%"><br>    <telerik:RadTreeView ID="TreeView1" runat="server" SingleExpandPath="True"></telerik:RadTreeView><br>   </telerik:RadPane><br>   <br>   <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Height="100%" Width="100%" /><br>    <telerik:RadPane ID="GridPane" runat="server" BackColor="#E0E0E0" Height="100%" Scrolling="None" Width="100%"><br>     <br>     <telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticDeletes="True" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" CssClass="MasterTable_Default" GridLines="None" PageSize="15" ShowDesignTimeSmartTagMessage="False" ShowGroupPanel="True" ShowStatusBar="True" Skin="Web20" Width="100%" Height="100%"><br>     <PagerStyle AlwaysVisible="True" BackColor="#D2D6DB" ForeColor="Blue" Mode="NextPrevAndNumeric"></PagerStyle><br>     <ClientSettings AllowDragToGroup="True" AllowGroupExpandCollapse="True"><br>      <Scrolling AllowScroll="True" ScrollHeight="100%"></Scrolling><br>      <ClientEvents OnColumnMouseOut="OnColumnMouseOut" OnColumnMouseOver="OnColumnMouseOver" OnFilterMenuShowing="OnFilterMenuShowing" OnGridCreated="GridCreated" OnRowDblClick="RowDblClick" /><br>     </ClientSettings><br>    <br>    <MasterTableView CellPadding="1" CommandItemDisplay="Top" EditMode="InPlace" GridLines="None" GroupLoadMode="Client"><br>      <HeaderStyle CssClass="grid_header" ForeColor="White" Wrap="False"></HeaderStyle><br>      <CommandItemTemplate><br>       <table width="900px" style="height: 100%"><br>        <tr align="left" valign="middle"><br>         <td align="center"><br>          <img alt="" src="RadControls/Grid/Skins/AddRecord.gif" style="border: 0px" /><br>          <asp:LinkButton ID="btnAdd" runat="server" CommandName="InitInsert" Text="Add new item"></asp:LinkButton><br>         </td><br>         <td align="center"><br>          <img alt="" src="Images/Filter.JPG" style="border: 0px" /><br>          <asp:LinkButton ID="BtnFilter" runat="server" CommandName="ShowFilter" Text="Show filter"></asp:LinkButton><br>         </td><br>         <td align="center"><br>          <img alt="" src="Images/Import.JPG" style="border: 0px" /><br>          <asp:LinkButton ID="BtnImport" runat="server" CommandName="Import" Text="Import data"></asp:LinkButton><br>         </td><br>         <td align="center"><br>          <img alt="" src="Images/Export.JPG" style="border: 0px" /><br>          <asp:LinkButton ID="BtnExport" runat="server" CommandName="Export" Text="Export data"></asp:LinkButton><br>         </td><br>         <td align="center"><br>          <img alt="" src="Images/History.JPG" style="border: 0px" /><br>          <asp:LinkButton ID="BtnHistory" runat="server" CommandName="History" Text="History"></asp:LinkButton><br>         </td><br>         <td align="center"><br>          <img alt="" src="RadControls/Grid/Skins/Refresh.gif" style="border: 0px" /><br>          <asp:LinkButton ID="btnRefresh" runat="server" CommandName="Rebind" Text="Refresh data"></asp:LinkButton><br>         </td><br>         <td> &#160; </td><br>        </tr><br>       </table><br>      </CommandItemTemplate><br>    <br>      <EditFormSettings CaptionFormatString="Update Code Table" ColumnNumber="2"><br>       <FormStyle BackColor="#EEF2EA" BorderColor="#6788BE" BorderStyle="Solid" BorderWidth="1px" CssClass="Grid_EditForm"></FormStyle><br>       <EditColumn ButtonType="PushButton" UniqueName="EditCommandColumn1"><br>       </EditColumn><br>       <FormTableButtonRowStyle HorizontalAlign="Center"></FormTableButtonRowStyle><br>       <FormTableStyle CellPadding="2" CellSpacing="0" CssClass="module" GridLines="Horizontal" /><br>       <FormCaptionStyle CssClass="Grid_EditFormHeader" Font-Bold="True" HorizontalAlign="Left" /><br>       <FormMainTableStyle CellPadding="3" CellSpacing="0" /><br>       <FormTableItemStyle Wrap="False" /><br>      </EditFormSettings><br>      <Columns><br>       <telerik:GridEditCommandColumn ButtonType="ImageButton" Reorderable="False" ShowSortIcon="False"><br>        <HeaderStyle ForeColor="DimGray" Width="20px" /><br>        <ItemStyle HorizontalAlign="Center" Width="20px" /><br>       </telerik:GridEditCommandColumn><br><br>       <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="DELETE" ConfirmText="Are you sure you want to Delete this record?" HeaderButtonType="PushButton" ImageUrl="~/RadControls/Grid/Skins/Web20/Delete.gif" Reorderable="False" ShowSortIcon="False" UniqueName="DeleteColumn"><br>        <ItemStyle HorizontalAlign="Center" /><br>       </telerik:GridButtonColumn><br>      </Columns><br>      <br>      <ExpandCollapseColumn Resizable="False" Visible="False"><br>       <HeaderStyle Width="20px"></HeaderStyle><br>      </ExpandCollapseColumn><br><br>      <RowIndicatorColumn Visible="False"><br>       <HeaderStyle Width="20px"></HeaderStyle><br>      </RowIndicatorColumn><br><br>      <FilterItemStyle BackColor="#D6D6D6" Wrap="False" /><br>      <EditItemStyle BackColor="#DCFC5C" VerticalAlign="Middle" Wrap="False" /><br>    </MasterTableView><br><br>    <EditItemStyle BackColor="#DCFC5C" VerticalAlign="Middle" Wrap="False"></EditItemStyle><br>    <ExportSettings><br>     <Pdf PageBottomMargin="" PageFooterMargin="" PageHeaderMargin="" PageHeight="11in" PageLeftMargin="" PageRightMargin="" PageTopMargin="" PageWidth="8.5in" /><br>    </ExportSettings><br>    <br>    <FilterItemStyle Wrap="False" /><br>    <GroupHeaderItemStyle BackColor="#FFEBCC" Font-Bold="True" Wrap="False" /><br>   </telerik:RadGrid><br>  </telerik:RadPane><br> </telerik:RadSplitter><br></telerik:RadPane><br><br><telerik:RadPane ID="FooterPane" runat="server" CssClass="footer" Height="20px"><br> <div style="text-align: right"><br><asp:Label ID="LabelVersion" runat="server" Font-Size="7pt" ForeColor="White" Text="1.0.0"></asp:Label><br><br></div><br></telerik:RadPane> <br></telerik:RadSplitter>

Any advise would be greatly appreciated.

5 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 29 Mar 2012, 06:17 PM
Hello,

To resolve this problem you should remove ItemStyle-Width property from the GridEditColumn declaration. Modify your code as below and let me know about the result:
<telerik:GridEditCommandColumn ButtonType="ImageButton" Reorderable="False" ShowSortIcon="False"><br>        <HeaderStyle ForeColor="DimGray" Width="20px" /><br>       
<ItemStyle HorizontalAlign="Center" /><br>

Greetings,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Michael
Top achievements
Rank 1
answered on 29 Mar 2012, 08:02 PM
Hi Pavlina
   I made the change as directed, but it didn't fix the issue.  All it did was center the pencil icon w/in the overly-extended column. Please see the attached file GridImageButton_2.jpg.  Please advise.

<telerik:GridEditCommandColumn ButtonType="ImageButton" Reorderable="False" ShowSortIcon="False">
 
<HeaderStyle  
ForeColor="DimGray" Width="20px" />
 <
ItemStyle 
HorizontalAlign="Center" />
</
telerik:GridEditCommandColumn>  
 
0
Pavlina
Telerik team
answered on 30 Mar 2012, 05:48 PM
Hi, Michael

Can you send us a live URL where this problem can be observed? We will inspect it locally and advice you further.

Regards,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Michael
Top achievements
Rank 1
answered on 30 Mar 2012, 06:36 PM

Unfortunately, it is a client's intranet site, and is not accessible to the public.  I'm guessing you not able to reproduce it w/ your own code? 

What else can you suggest? 
Thank you,
Michael

0
Pavlina
Telerik team
answered on 04 Apr 2012, 10:29 PM
Hello Michael,

You can open a formal support ticket and attach a sample project in which the described problem can be observed. Thus we will be able to debug it locally and provide a solution/fix.

Regards,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Michael
Top achievements
Rank 1
Share this question
or