What's New?

[CLOSED] Chrome RowEditor commandColumn shown on edit mode

Page 1 of 2 12 LastLast
  1. #1
    Jun 28, 2013, 1:08 PM

    [CLOSED] Chrome RowEditor commandColumn shown on edit mode

    Hi

    I'm using ExtNetV2.1R4377 and I have a problem with GridPanels on Chrome V26.0.1410.64.

    Click image for larger version.  Name: roweditor.png  Views: 27  Size: 5.8 KB  ID: 6469

    As you can see, I can see half part of CommandButton. In IE and Firefox it works fine. But in chrome, header columns grows up more than expected.
    Last edited by Daniil; Jul 11, 2013 at 3:38 AM. Reason: [CLOSED]
  2. #2
    Jun 28, 2013, 3:12 PM
    Hi @softmachine2011,

    Please provide a test case.
  3. #3
    Jul 01, 2013, 9:08 AM 
    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server"> 
	protected void Page_Load(object sender, EventArgs e) { 
		if (!X.IsAjaxRequest) { 
			var store = this.GridPanel1.GetStore(); 
			store.DataSource = new List<object> { 
				new { Name = "Bill Foot", 
					Email = "bill.foot@object.net", 
					Start = new DateTime(2007, 2, 5), 
					Salary = 37000, Active = true 
				}
			}			
			store.DataBind(); 
		} 
	}
</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 id="Head1" runat="server">
    <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <h1>GridPanel with RowEditor Plugin</h1>
    <ext:GridPanel ID="GridPanel1" runat="server">
        <Store>
            <ext:Store ID="Store3" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="name" Mapping="Name" Type="String" />
                            <ext:RecordField Name="email" Mapping="Email" Type="String" />
                            <ext:RecordField Name="start" Mapping="Start" Type="Date" />
                            <ext:RecordField Name="salary" Mapping="Salary" Type="Float" />
                            <ext:RecordField Name="active" Mapping="Active" Type="Boolean" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <Plugins>
            <ext:RowEditor ID="RowEditor1" runat="server" SaveText="Update" ClicksToEdit="1" />
        </Plugins>
        <View>
            <ext:GridView ID="GridView1" runat="server" />
        </View>
        <ColumnModel>
            <Columns>
                <ext:RowNumbererColumn />
                <ext:Column ColumnID="name" Header="First Name" DataIndex="name" Width="220" Sortable="true">
                    <Editor>
                        <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Email" DataIndex="email" Width="150">
                    <Editor>
                        <ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email" />
                    </Editor>
                </ext:Column>
                <ext:DateColumn Header="Start Date" DataIndex="start" Format="MM/dd/yyyy" Width="100"
                    Sortable="true">
                    <Editor>
                        <ext:DateField ID="DateField1" runat="server" AllowBlank="false" MinDate="01.01.2006"
                            MinText="Can not have a start date before the Company existed." />
                    </Editor>
                </ext:DateColumn>
                <ext:NumberColumn Header="Salary" DataIndex="salary" Format="$0,0.00" Width="100"
                    Sortable="true">
                    <Editor>
                        <ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" MinValue="1"
                            MaxValue="150000" />
                    </Editor>
                </ext:NumberColumn>
                <ext:BooleanColumn Header="Active" DataIndex="active" Align="Center" Width="50" TrueText="Yes"
                    FalseText="No">
                    <Editor>
                        <ext:Checkbox ID="Checkbox1" runat="server" />
                    </Editor>
                </ext:BooleanColumn>
                <ext:CommandColumn Width="25" Hideable="false" Editable="false">
                    <Commands>
                        <ext:GridCommand CommandName="Delete" Icon="Delete">
                            <ToolTip Text="Delete" />
                        </ext:GridCommand>
                    </Commands>
                </ext:CommandColumn>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    </form>
</body>
</html>
  4. #4
    Jul 01, 2013, 2:50 PM
    I don't think this code sample is runnable with Ext.NET v2, but it looks suitable for v1.

    I'm using ExtNetV2.1R4377
    Could you, please, clarify what Ext.NET version are you actually using?
  5. #5
    Jul 01, 2013, 3:14 PM
    I'm sorry,

    I was confused because I use 2 different versions. This is official v1.3 Release.

    Thanks
  6. #6
    Jul 02, 2013, 5:55 AM
    I can reproduce the issue with v1.3, but cannot with v1.7 or the latest from SVN.

    So, I can suggest to update.
  7. #7
    Jul 02, 2013, 6:38 AM
    Hi,

    I can't update to the latest version, so can you provide a workaround?

    Thanks
  8. #8
    Jul 02, 2013, 1:57 PM
    I am not sure we can, but we will try.
  9. #9
    Jul 03, 2013, 5:05 AM
    Here is the fix. Please add into the page's <head>.

    Fix
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
    Ext.chromeVersion = Ext.isChrome ? parseInt(( /chrome\/(\d{2})/ ).exec(navigator.userAgent.toLowerCase())[1],10) : NaN;

    Ext.grid.ColumnModel.override({
        getTotalWidth : function(includeHidden) {
            var boxsizeadj,
                i,
                len;
                    
            if (!this.totalWidth) {
                boxsizeadj = (Ext.isChrome && Ext.chromeVersion > 18 ? 2 : 0);
                this.totalWidth = 0;
                for (i = 0, len = this.config.length; i < len; i++) {
                    if (includeHidden || !this.isHidden(i)) {
                        this.totalWidth += (this.getColumnWidth(i) + boxsizeadj);
                    }
                }
            }

            return this.totalWidth;
        }
    });
</script>
  10. #10
    Jul 03, 2013, 7:14 AM
    Fix worked perfectly!

    Thanks!
Page 1 of 2 12 LastLast

Similar Threads

  1. Disable Roweditor on View mode
    By Siva in forum 1.x Help
    Replies: 1
    Last Post: Mar 22, 2013, 7:35 PM
  2. [CLOSED] Focus first field in RowEditor when shown.
    By pj_martins in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 22, 2011, 3:50 PM
  3. [CLOSED] Detect Grid Edit Mode
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 25, 2011, 7:18 PM
  4. [CLOSED] when roweditor in Add/Update mode
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 09, 2010, 5:22 PM
  5. [CLOSED] [1.0] Row edit mode and stopEditing
    By edigital in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 31, 2010, 6:04 PM

Posting Permissions