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

RadGrid edit form template layout not properly when add new record in IE8

4 Answers 222 Views

Grid

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

ChainHome Yang asked on 22 Jun 2010, 03:52 AM

Hi Telerik,

You can see the results below and understand what I say.

I use edit form template for insert or update a record,

It looks fine when editing, but bad when adding.

FireFox and Opera work fine!

Any idea to solve this program?

IE8 result FireFox result

Code:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="pageMgrChannelIn.aspx.cs" Inherits="_ASP_Channels_pageMgrChannelIn" %>
 
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
            <html xmlns="http://www.w3.org/1999/xhtml">
 
            <head runat="server">
 
                <title></title>
 
                <style type="text/css">
 
                    body  { font-family:Courier New; }
 
                    #tableEditForm { font-size:medium; width:600px; }
 
                    #tableEditForm .Col1 { font-size:medium; width:140px; text-align:right; }
 
                    #tableEditForm .Col2 { font-size:medium; width:360px; text-align:left; }
 
                    .editItem { font-size:medium; font-family:Courier New; }
 
                </style>
 
            </head>
 
            <body>
 
            <form id="_frmMgrChannel" runat="server">
 
                <telerik:RadScriptManager    ID="_managerScript" runat="server" />
 
                <telerik:RadSkinManager      ID="_managerSkin"   runat="server" Skin="Vista" />
 
                <telerik:RadAjaxManager      ID="_managerAjax"   runat="server" DefaultLoadingPanelID="_pnlAjaxLoad">
 
                    <AjaxSettings>
 
                        <telerik:AjaxSetting AjaxControlID="_gridChannel">
 
                            <UpdatedControls>
 
                                <telerik:AjaxUpdatedControl ControlID="_gridChannel" />
 
                            </UpdatedControls>
 
                        </telerik:AjaxSetting>
 
                    </AjaxSettings>
 
                </telerik:RadAjaxManager>
 
                <telerik:RadAjaxLoadingPanel ID="_pnlAjaxLoad"   runat="server" />
 
                <telerik:RadScriptBlock      ID="_scriptBlock"   runat="server">
 
                    <script language="javascript" type="text/javascript" src="../../_Javascripts/jsPageMgrChannelIn.js"></script>
 
                    <script language="javascript" type="text/javascript">
 
                        function pageLoad() { m_oView = $find("<%= _gridChannel.ClientID %>").get_masterTableView(); }
 
                    </script>
 
                </telerik:RadScriptBlock>
 
                <telerik:RadGrid ID="_gridChannel" runat="server" DataSourceID="_dsoChannelIn" GridLines="None" Height="600" AllowSorting="true">
 
                    <ClientSettings>
 
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
 
                        <Selecting AllowRowSelect="true" />
 
                        <ClientEvents OnPopUpShowing="_grid_OnPopUpShowing" OnCommand="_grid_OnCommand" />
 
                    </ClientSettings>
 
                    <MasterTableView AllowAutomaticInserts="true" AllowAutomaticUpdates="true"
 
                            AutoGenerateColumns="false" CommandItemDisplay="Top"
 
                            AlternatingItemStyle-Font-Size="Medium" AlternatingItemStyle-Font-Names="Courier New"
 
                            ItemStyle-Font-Size="Medium" ItemStyle-Font-Names="Courier New"
 
                            DataKeyNames="channelInID" ClientDataKeyNames="channelInID"
 
                            EditMode="EditForms" EditFormSettings-PopUpSettings-Modal="true">
 
                        <Columns>
 
                            <telerik:GridEditCommandColumn ButtonType="ImageButton" UpdateText="修改" />
 
                            <telerik:GridBoundColumn    DataField="channelInID"       DataType="System.String" HeaderText="新聞管道代碼" UniqueName="channelInID"       SortExpression="channelInID"       MaxLength="8" />
 
                            <telerik:GridBoundColumn    DataField="channelInName"     DataType="System.String" HeaderText="新聞管道"     UniqueName="channelInName"     SortExpression="channelInName"     MaxLength="16" />
 
                            <telerik:GridNumericColumn  DataField="keepDays"          DataType="System.Int16"  HeaderText="保存日數"     UniqueName="keepDays"          SortExpression="keepDays"          MaxLength="3" />
 
                            <telerik:GridDropDownColumn DataField="channelType"       DataType="System.String" HeaderText="管道類別"     UniqueName="channelType"       SortExpression="channelType"       DataSourceID="_dsxChannelType" ListTextField="text" ListValueField="value" DropDownControlType="RadComboBox" />
 
                            <telerik:GridDropDownColumn DataField="channelEditIDCopy" DataType="System.String" HeaderText="複製至編輯台" UniqueName="channelEditIDCopy" SortExpression="channelEditIDCopy" DataSourceID="_dsxChannelEdit" ListTextField="text" ListValueField="value" DropDownControlType="RadComboBox" />
 
                            <telerik:GridDropDownColumn DataField="language"          DataType="System.String" HeaderText="語系"         UniqueName="language"          SortExpression="language"          DataSourceID="_dsxLanguage"    ListTextField="text" ListValueField="value" DropDownControlType="RadComboBox" />
 
                        </Columns>
 
                        <EditFormSettings EditFormType="Template" InsertCaption="新增" CaptionFormatString="修改 {0}" CaptionDataField="channelInID"
 
                                FormMainTableStyle-Font-Size="Medium" PopUpSettings-Width="500" PopUpSettings-Modal="true">
 
                            <FormTemplate>
 
                                <table id="tableEditForm" rules="none">
 
                                    <thead><tr><td></td><td></td></tr></thead>
 
                                    <tbody>
 
                                    <tr>
 
                                        <td class="Col1"><label>新聞管道代碼</label></td>
 
                                        <td class="Col2"><telerik:RadTextBox ID="_txtChannelInID"   runat="server" MaxLength="8"  Font-Size="Medium" Font-Names="Courier New" Width="200" Text='<%# Bind("channelInID") %>' /></td>
 
                                    </tr>
 
                                    <tr>
 
                                        <td class="Col1"><label>新聞管道</label></td>
 
                                        <td class="Col2"><telerik:RadTextBox ID="_txtChannelInName" runat="server" MaxLength="16" Font-Size="Medium" Font-Names="Courier New" Width="200" Text='<%# Bind("channelInName") %>' /></td>
 
                                    </tr>
 
                                    <tr>
 
                                        <td class="Col1"><label>保存日數</label></td>
 
                                        <td class="Col2"><telerik:RadNumericTextBox ID="_txtKeepDays"    runat="server" Font-Size="Medium" Font-Names="Courier New" MaxLength="3" MaxValue="999" MinValue="0"  NumberFormat-DecimalDigits="0" Text='<%# Bind("keepDays") %>' /></td>
 
                                    </tr>
 
                                    <tr>
 
                                        <td class="Col1"><label>管道類別</label></td>
 
                                        <td class="Col2"><telerik:RadComboBox ID="_cboChannelType"       runat="server" Font-Size="Medium" Font-Names="Courier New" Width="300" DataSourceID="_dsxChannelType" DataValueField="value" DataTextField="text" DropDownCssClass="editItem" SelectedValue='<%# Bind("channelType") %>' /></td>
 
                                    </tr>
 
                                    <tr>
 
                                        <td class="Col1"><label>複製至編輯台</label></td>
 
                                        <td class="Col2"><telerik:RadComboBox ID="_cboChannelEditIDCopy" runat="server" Font-Size="Medium" Font-Names="Courier New" Width="300" DataSourceID="_dsxChannelEdit" DataValueField="value" DataTextField="text" DropDownCssClass="editItem" SelectedValue='<%# Bind("channelEditIDCopy") %>' /></td>
 
                                    </tr>
 
                                    <tr>
 
                                        <td class="Col1"><label>語系</label></td>
 
                                        <td class="Col2"><telerik:RadComboBox ID="_cboLanguage"          runat="server" Font-Size="Medium" Font-Names="Courier New" Width="300" DataSourceID="_dsxLanguage"    DataValueField="value" DataTextField="text" DropDownCssClass="editItem" SelectedValue='<%# Bind("language") %>' /></td>
 
                                    </tr>
 
                                    </tbody>
 
                                    <tfoot>
 
                                    <tr><td colspan="2">
 
                                        <asp:Button ID="_btnUpdate" runat="server" CommandName="Update" CausesValidation="true"  Text="儲存" />
 
                                        <asp:Button ID="_btnCancel" runat="server" CommandName="Cancel" CausesValidation="false" Text="取消" />
 
                                    </td></tr>
 
                                    </tfoot>
 
                                </table>
 
                            </FormTemplate>
 
                        </EditFormSettings>
 
                    </MasterTableView>
 
                </telerik:RadGrid>
 
                <asp:XmlDataSource ID="_dsxLanguage"     runat="server" DataFile="~/App_Data/uiData/comboLanguage.xml"    XPath="/Items/Item" />
 
                <asp:XmlDataSource ID="_dsxChannelEdit"  runat="server" DataFile="~/App_Data/uiData/comboChannelEdit.xml" XPath="/Items/Item" />
 
                <asp:XmlDataSource ID="_dsxChannelType"  runat="server" DataFile="~/App_Data/uiData/comboChannelType.xml" XPath="/Items/Item" />
 
                <asp:ObjectDataSource ID="_dsoChannelIn" runat="server" SelectMethod="dt_getChannel" TypeName="clsAP_uiData">
 
                    <SelectParameters>
 
                        <asp:Parameter Name="sChannelType" Type="String" DefaultValue="In" />
 
                    </SelectParameters>
 
                </asp:ObjectDataSource>
 
            </form>
 
            </body>
 
            </html>

4 Answers, 1 is accepted

answered on 22 Jun 2010, 10:04 AM

Hello ChainHome,

I am not able to reproduce the problem on my side. Here is my test page, based on yours. Let me know if I am missing something.

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

DataRow dr;

int rowsNum = 30;

string[][] colsInfo = {

new string[] { "channelInID", "number" },

new string[] { "channelInName", "string" },

new string[] { "keepDays", "number" }

};

for (int i = 0; i < colsInfo.Length; i++)

{

switch (colsInfo[i][1])

{

case "string":

dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(String)));

break;

case "number":

dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(Int32)));

break;

case "date":

dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(DateTime)));

break;

case "bool":

dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(Boolean)));

break;

default:

break;

}

for (int j = 1; j <= rowsNum; j++)

{

dr = dt.NewRow();

for (int k = 0; k < colsInfo.Length; k++)

{

switch (colsInfo[k][1])

{

case "string":

dr[colsInfo[k][0]] = String.Format("{0} Row{1}", colsInfo[k][0], j);

break;

case "number":

dr[colsInfo[k][0]] = j;

break;

case "date":

dr[colsInfo[k][0]] = DateTime.Now;

break;

case "bool":

dr[colsInfo[k][0]] = j % 2 == 1 ? true : false;

break;

default:

break;

}

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

body { font-family:Courier New; }

#tableEditForm { font-size:medium; width:600px; }

#tableEditForm .Col1 { font-size:medium; width:140px; text-align:right; }

#tableEditForm .Col2 { font-size:medium; width:360px; text-align:left; }

.editItem { font-size:medium; font-family:Courier New; }

</style>

</head>

<body>

<form id="_frmMgrChannel" runat="server">

<telerik:RadScriptManager ID="_managerScript" runat="server" />

<telerik:RadSkinManager ID="_managerSkin" runat="server" Skin="Vista" />

<telerik:RadAjaxManager ID="_managerAjax" runat="server" DefaultLoadingPanelID="_pnlAjaxLoad">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="_gridChannel">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="_gridChannel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="_pnlAjaxLoad" runat="server" />

<telerik:RadGrid ID="_gridChannel" runat="server" OnNeedDataSource="RadGrid_NeedDataSource" GridLines="None" Height="600" AllowSorting="true">

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView AllowAutomaticInserts="true" AllowAutomaticUpdates="true"

AutoGenerateColumns="false" CommandItemDisplay="Top"

AlternatingItemStyle-Font-Size="Medium" AlternatingItemStyle-Font-Names="Courier New"

ItemStyle-Font-Size="Medium" ItemStyle-Font-Names="Courier New"

DataKeyNames="channelInID" ClientDataKeyNames="channelInID"

EditMode="EditForms" EditFormSettings-PopUpSettings-Modal="true">

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" UpdateText="修改" />

<telerik:GridBoundColumn DataField="channelInID" DataType="System.String" HeaderText="新聞管道代碼" UniqueName="channelInID" SortExpression="channelInID" MaxLength="8" />

<telerik:GridBoundColumn DataField="channelInName" DataType="System.String" HeaderText="新聞管道" UniqueName="channelInName" SortExpression="channelInName" MaxLength="16" />

<telerik:GridNumericColumn DataField="keepDays" DataType="System.Int16" HeaderText="保存日數" UniqueName="keepDays" SortExpression="keepDays" MaxLength="3" />

</Columns>

<EditFormSettings EditFormType="Template" InsertCaption="新增" CaptionFormatString="修改 {0}" CaptionDataField="channelInID"

FormMainTableStyle-Font-Size="Medium" PopUpSettings-Width="500" PopUpSettings-Modal="true">

<FormTemplate>

<table id="tableEditForm" rules="none">

<thead><tr><td></td><td></td></tr></thead>

<tbody>

<tr>

<td class="Col1"><label>新聞管道代碼</label></td>

<td class="Col2"><telerik:RadTextBox ID="_txtChannelInID" runat="server" MaxLength="8" Font-Size="Medium" Font-Names="Courier New" Width="200" Text='<%# Bind("channelInID") %>' /></td>

</tr>

<tr>

<td class="Col1"><label>新聞管道</label></td>

<td class="Col2"><telerik:RadTextBox ID="_txtChannelInName" runat="server" MaxLength="16" Font-Size="Medium" Font-Names="Courier New" Width="200" Text='<%# Bind("channelInName") %>' /></td>

</tr>

<tr>

<td class="Col1"><label>保存日數</label></td>

<td class="Col2"><telerik:RadNumericTextBox ID="_txtKeepDays" runat="server" Font-Size="Medium" Font-Names="Courier New" MaxLength="3" MaxValue="999" MinValue="0" NumberFormat-DecimalDigits="0" Text='<%# Bind("keepDays") %>' /></td>

</tr>

<tr>

<td class="Col1"><label>管道類別</label></td>

<td class="Col2"><telerik:RadComboBox ID="_cboChannelType" runat="server" Font-Size="Medium" Font-Names="Courier New" Width="300" /></td>

</tr>

<tr>

<td class="Col1"><label>複製至編輯台</label></td>

<td class="Col2"><telerik:RadComboBox ID="_cboChannelEditIDCopy" runat="server" Font-Size="Medium" Font-Names="Courier New" Width="300" /></td>

</tr>

<tr>

<td class="Col1"><label>語系</label></td>

<td class="Col2"><telerik:RadComboBox ID="_cboLanguage" runat="server" Font-Size="Medium" Font-Names="Courier New" Width="300" /></td>

</tr>

</tbody>

<tfoot>

<tr><td colspan="2">

<asp:Button ID="_btnUpdate" runat="server" CommandName="Update" CausesValidation="true" Text="儲存" />

<asp:Button ID="_btnCancel" runat="server" CommandName="Cancel" CausesValidation="false" Text="取消" />

</td></tr>

</tfoot>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Accepted

answered on 23 Jun 2010, 07:50 AM

320945-grid.gif

Hi ChainHome,

Well, strangely enough, here is how the page looks on my side. Please check with a browser tool whether the table cell widths (140px etc) are being applied.

The problem should not be related to RadGrid, as this is a template with custom HTML.

Greetings,
Dimo
the Telerik team

answered on 23 Jun 2010, 09:29 AM

Hi Dimo:

Thanks for your hint, I opened IE8 developer tool and switched browser mode to 'IE8 Compact View'

and document mode to 'IE8 Standard'. It did a good job!

Note:

Browser Mode Document Mode EditForms RadGrid

IE8 Compact View IE8 Standard OK OK

IE8 Compact View IE7 Standard * OK

IE8 IE8 Standard OK $

IE8 IE7 Standard * $

IE7 IE7 Standard * $

*: editforms layout not what I design.

$: RadGrid columns' width not auto fit.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadGrid edit form template layout not properly when add new record in IE8

4 Answers, 1 is accepted