[CLOSED] Locked column and row alignment

  1. #1

    [CLOSED] Locked column and row alignment

    Hi,

    In the attached image you can see that, in the presence of a locked column, the rows are not aligned properly.

    This is my code:

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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></title>
     
            <ext:ResourcePlaceHolder ID="MainResourcePlaceHolder" runat="server" />
            <script type="text/javascript">
                var userId = parseInt(0);
                var periodId = parseInt(0);
                var setUser = function (index) {
                    if (dsUsers.getCount() > 0) {
                        var rec;
                        if (index) {
                            rec = dsUsers.getAt(index);
                        }
                        else {
                            rec = dsUsers.getAt(0);
                        }
                        userId = parseInt(rec.get('EmployeeId'));
                        cboUsers.setValue(userId);
                    }
                };
                var setPeriod = function (index) {
                    if (dsPeriods.getCount() > 0) {
                        var rec;
                        if (index) {
                            rec = dsPeriods.getAt(index);
                        }
                        else {
                            rec = dsPeriods.getAt(0);
                        }
                        periodId = parseInt(rec.get("TimeEntryPeriodId"));
                        cboPeriods.setValue(parseInt(rec.get('TimeEntryPeriodId')));
                    }
                }
                var formatDeltaDays = function (value, meta, record) {
                    if (value != 0) {
                        meta.attr = String.format('style="background-color:{0};color:{1};"', (value > 0) ? "#00FF00" : "#FF0000", (value > 0) ? "#000000" : "#FFFFFF");
                    }
                    return value;
                };
                var loadData = function () {
                    dsTimeTimeSheetByEmployee.load({
                        callback: function (r, options, success) {
                            if (success) {
                                if (dsTimeTimeSheetByEmployee.getCount() > 0) {
                                    MainGridPanel.getView().focusRow(0);
                                    MainGridPanel.selModel.selectRow(0);
                                }
                            }
                        }
                    });
                };
                var initData = function () {
                    dsUsers.load({
                        callback: function (r, options, success) {
                            if (success) {
                                dsPeriods.load({
                                    callback: function (r, options, success) {
                                        if (success) {
                                            setUser();
                                            setPeriod();
                                            loadData();
                                        }
                                    }
                                })
                            }
                        }
                    });
                };
                Ext.onReady(initData);
            </script>
     
            <style type="text/css">
                .x-grid3-hd-inner
                {
                    text-align: center;
                }
            </style> 
        </head>
        <body>
            <ext:ResourceManager ID="MainScriptManager" runat="server" RemoveViewState="true"/>
     
            <ext:Store ID="dsTimeTimeSheetByEmployee" runat="server" AutoLoad="false">
                <Proxy>
                    <ext:HttpProxy Url="/TimeEntry/GetTimeSheetForValidationByEmployee/" />
                </Proxy>
                <Reader>
                    <ext:JsonReader IDProperty="Sequence" Root="data" TotalProperty="total">
                        <Fields>
                            <ext:RecordField Name="EmployeeId" />
                            <ext:RecordField Name="EmployeeCode" />
                            <ext:RecordField Name="EmployeeName" SortDir="ASC"/>
                            <ext:RecordField Name="ExpectedDays" Type="Int"/>
                            <ext:RecordField Name="TotalDays" Type="Int"/>
                            <ext:RecordField Name="DeltaDays" Type="Int"/>
                            <ext:RecordField Name="ExpectedHours" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
                <Listeners>
                    <BeforeLoad Handler="#{PanelDayWest}.body.mask('Caricamento mese ...', 'x-mask-loading');" />
                    <Load Handler="#{PanelDayWest}.body.unmask();" />
                    <Exception Handler="#{PanelDayWest}.body.unmask();" />
                </Listeners>
                <BaseParams>
                    <ext:Parameter Name="userId" Value="userId" Mode="Raw" />
                    <ext:Parameter Name="periodId" Value="periodId" Mode="Raw" />
                </BaseParams>
                <SortInfo Field="EmployeeName" Direction="ASC" />
            </ext:Store>
            <ext:ViewPort ID="MainViewPort" runat="server" Layout="fit">
                <Items>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <North MarginsSummary="5 5 5 5">
                            <ext:Panel 
                                ID="PanelNorth" 
                                runat="server" 
                                Title="Selezione" 
                                Height="60" 
                                Padding="2"
                                Frame="true" 
                                Icon="UserSuit">
                                <Items>
                                    <ext:Toolbar ID="TopToolbar" runat="server" EnableOverflow="false" Flat="true">
                                        <Items>
                    <ext:SelectBox
                     ID="cboUsers" 
                     runat="server" 
                     HiddenName="EmployeeId"
                     DisplayField="EmployeeName"
                     ValueField="EmployeeId"
                     FieldLabel="Risorsa"
                                                LabelWidth="45"
                     AllowBlank="false"
                                                Width="240"
                                                ListWidth="130"
                     EmptyText=".....">
                                                <Store>
                                                    <ext:Store ID="dsUsers" runat="server" AutoLoad="false">
                                                        <Proxy>
                                                            <ext:HttpProxy Url="/Employee/GetUserListForTimeEntry/" />
                                                        </Proxy>
                                                        <Reader>
                                                            <ext:JsonReader IDProperty="EmployeeId" Root="data">
                                                                <Fields>
                                                                    <ext:RecordField Name="EmployeeId" Type="Int"/>
                                                                    <ext:RecordField Name="EmployeeCode" />
                                                                    <ext:RecordField Name="EmployeeName" />
                                                                </Fields>
                                                            </ext:JsonReader>
                                                        </Reader>
                                                    </ext:Store>
                                                </Store>
                                            </ext:SelectBox>
                                            <ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
                                            <ext:SelectBox
                     ID="cboPeriods" 
                     runat="server" 
                     HiddenName="TimeEntryPeriodId"
                     DisplayField="TimeEntryPeriodName"
                     ValueField="TimeEntryPeriodId"
                     FieldLabel="Periodo"
                                                LabelWidth="45"
                     AllowBlank="false"
                                                Width="190"
                                                ListWidth="130"
                     EmptyText=".....">
                                                <Store>
                                                    <ext:Store ID="dsPeriods" runat="server" AutoLoad="false">
                                                        <Proxy>
                                                            <ext:HttpProxy Url="/General/GetAllOpenTimeEntryPeriods/" />
                                                        </Proxy>
                                                        <Reader>
                                                            <ext:JsonReader IDProperty="TimeEntryPeriodId" Root="data">
                                                                <Fields>
                                                                    <ext:RecordField Name="TimeEntryPeriodId"/>
                                                                    <ext:RecordField Name="TimeEntryPeriodName" />
                                                                    <ext:RecordField Name="DateFrom" Type="Date" />
                                                                    <ext:RecordField Name="DateTo" Type="Date" />
                                                                    <ext:RecordField Name="IsClosed" Type="Boolean" />
                                                                </Fields>
                                                            </ext:JsonReader>
                                                        </Reader>
                                                    </ext:Store>
                                                </Store>
                                            </ext:SelectBox>
                                        </Items>
                                    </ext:Toolbar>
                                </Items>
                            </ext:Panel>
                        </North>
                        <Center MarginsSummary="0 5 5 5" Collapsible="true">
                            <ext:Panel
                                ID="PanelDayWest"
                                runat="server" 
                                Frame="true" 
                                Title="Riepilogo giornaliero"
                                Width="282"
                                Icon="CalendarViewMonth"
                                Layout="Fit">
                                <Items>
                                    <ext:GridPanel
                                        ID="MainGridPanel" 
                                        runat="server" 
                                        Header="false"
                                        Border="false"
                                        TrackMouseOver="true"
                                        StoreID="dsTimeTimeSheetByEmployee"
                                        AutoExpandColumn="EmployeeName">
     
                                        <ColumnModel ID="MainColumnModel" runat="server">
                                            <Columns>
                                                <ext:CommandColumn Width="30" Align="Center" Locked="true">
                                                    <Commands>
                                                        <ext:GridCommand Icon="TableEdit" CommandName="Edit">
                                                            <ToolTip Text="Modifica Riga" />
                                                        </ext:GridCommand>
                                                    </Commands>
                                                </ext:CommandColumn>
                                                <ext:Column ColumnID="EmployeeName" DataIndex="EmployeeName" Header="Nome Risorsa&lt;br /&gt;&nbsp;" Locked="true" />
                                                <ext:Column ColumnID="ExpectedDays" DataIndex="ExpectedDays" Header="gg.&lt;br /&gt;Attesi" Width="60" Align="Right" Sortable="false" Resizable="false"  Wrap="true" />
                                                <ext:Column ColumnID="TotalDays" DataIndex="TotalDays" Header="gg.&lt;br /&gt;Caricati" Width="60" Align="Right" Sortable="false" Resizable="false" />
                                                <ext:Column ColumnID="DeltaDays" DataIndex="DeltaDays" Header="gg.&lt;br /&gt;Delta" Width="60" Align="Right" Sortable="false" Resizable="false">
                                                    <Renderer Fn="formatDeltaDays"  />
                                                </ext:Column>
                                            </Columns>
                                        </ColumnModel>
     
                                        <SelectionModel>
                                            <ext:RowSelectionModel ID="MainRowSelectionModel" runat="server" />
                                        </SelectionModel>
     
                                    <View>
                                        <ext:LockingGridView ID="MainGridView" runat="server" />
                                    </View>
                                    </ext:GridPanel>
                                </Items>
                            </ext:Panel>
                        </Center>
                    </ext:BorderLayout>
                </Items>
            </ext:ViewPort>
        </body>
    </html>
    Bye,
    Stefano
    Last edited by Daniil; Oct 20, 2010 at 12:22 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please use the SyncHeights property of LockingGridView control.

    Example
    <ext:LockingGridView ID="MainGridView" runat="server" SyncHeights="true"/>
  3. #3
    OK, thanks.

    Stefano

Similar Threads

  1. [CLOSED] Grid column alignment + row expander
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 14, 2012, 12:50 PM
  2. Replies: 8
    Last Post: Jan 13, 2012, 4:13 PM
  3. [CLOSED] GridPanel Column Header Alignment
    By ArcadisUS in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 08, 2011, 2:51 PM
  4. [CLOSED] Locked ImageCommand Column
    By paulc in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 24, 2011, 12:08 PM
  5. [CLOSED] Column alignment with scrollbars in GridPanel
    By jsemple in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Mar 09, 2009, 3:58 PM

Posting Permissions