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 191 Views
Grid
This is a migrated thread and some comments may be shown as answers.
ChainHome Yang
Top achievements
Rank 1
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

Sort by
0
Dimo
Telerik team
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"
  
<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
0
ChainHome Yang
Top achievements
Rank 1
answered on 22 Jun 2010, 01:49 PM

Hellow Dimo:

  Unfortunately the code you provide do not work fine on my side (Windows XP),

  but I put the code on server side (Windows Server 2008), it did a good job!

  Note: I used my computer's IE8 browsed local and server side and get different results likes below.

different results

0
Accepted
Dimo
Telerik team
answered on 23 Jun 2010, 07:50 AM
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
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
0
ChainHome Yang
Top achievements
Rank 1
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.

Tags
Grid
Asked by
ChainHome Yang
Top achievements
Rank 1
Answers by
Dimo
Telerik team
ChainHome Yang
Top achievements
Rank 1
Share this question
or