What's New?

[CLOSED] Two column combo in grid rowediting plugin

  1. #1
    Nov 07, 2012, 5:56 PM

    [CLOSED] Two column combo in grid rowediting plugin

    Hi Daniil, I would like to ask you how to manage two column combo in gridpanel with rowediting plugin. I have used code:

                  <ColumnModel ID="columnmodelTestAddr" runat="server">
                        <Columns>
                            <ext:Column ID="Column1"  runat="server"   DataIndex="ZoneId"   Text="Zone"    Width="45" >
                               <Editor>
                                    <ext:ComboBox ID="cbZone" runat="server"  TypeAhead="true" TypeAheadDelay="100"  ForceSelection="true"
                                        StoreID="StoreComboZone" DisplayField="ZoneName" ValueField="ZoneId">
                                        <ListConfig Width="300" >
                                            <ItemTpl ID="ItemTpl1" runat="server">
                                                <Html>
						                            <div>
							                                {ZoneName} {ZoneDesc}
						                            </div>
				                  </Html>    
                                            </ItemTpl>
                                        </ListConfig>   
                                    </ext:ComboBox>
                               </Editor>
                                <Renderer  Handler="return record.data.ZoneName;" />
                            </ext:Column>
    and after combo is opened ZoneName and ZoneDesc must be displayed ( width should grow ). Our code does not work properly. Thank you for help.ASAPCH
    Last edited by Baidaly; Nov 08, 2012 at 11:44 PM.
  2. #2
    Nov 08, 2012, 12:06 AM
    Hello!

    Try this example:

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e) {
        this.ComboStore.DataSource = new object[]
        {
            new object[]{"AL", "Alabama", "The Heart of Dixie"},
            new object[] { "AK", "Alaska", "The Land of the Midnight Sun"},
            new object[] { "AZ", "Arizona", "The Grand Canyon State"},
            new object[] { "AR", "Arkansas", "The Natural State"}
        };

        this.ComboStore.DataBind();

        if (!X.IsAjaxRequest) {
            var store = this.GridPanel1.GetStore();

            store.DataSource = new List<object>
            {
                new { 
                    Name = "Bill Little", 
                    State = "Arkansas",
                    Active = true
                },
                new { 
                    Name = "Bob Jones", 
                    State = "Alaska",
                    Active = true
                }
            };

            store.DataBind();
        }
    }
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
    
    <style type="text/css">
        .cbStates-list
        {
            width: 298px;
            font: 11px tahoma,arial,helvetica,sans-serif;
        }
        
        .cbStates-list th
        {
            font-weight: bold;
        }
        
        .cbStates-list td, .cbStates-list th
        {
            padding: 3px;
        }
        
        .list-item
        {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    
    <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="400" Frame="true"
        Title="Employees">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Sorters>
                    <ext:DataSorter Property="start" Direction="ASC" />
                </Sorters>
                <Model>
                    <ext:Model runat="server" Name="Employee">
                        <Fields>
                            <ext:ModelField Name="name" Mapping="Name" Type="String" />
                            <ext:ModelField Name="state" Mapping="State" Type="String" />
                            <ext:ModelField Name="active" Mapping="Active" Type="Boolean" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <Plugins>
            <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
        </Plugins>
        <ColumnModel>
            <Columns>
                <ext:RowNumbererColumn runat="server" Width="25" />
                <ext:Column runat="server" Text="Name" DataIndex="name" Flex="1">
                    <Editor>
                        <ext:TextField runat="server"></ext:TextField>
                    </Editor>
                </ext:Column>
                <ext:Column runat="server" Text="State" DataIndex="state" Flex="1">
                    <Editor>
                        <ext:ComboBox ID="cbStates" runat="server" EmptyText="Select State" TypeAhead="true"
                            ForceSelection="true" DisplayField="state" ValueField="state" MinChars="1" MatchFieldWidth="false"
                            PageSize="10">
                            <Store>
                                <ext:Store ID="ComboStore" runat="server" IsPagingStore="true" PageSize="10">
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="abbr" />
                                                <ext:ModelField Name="state" />
                                                <ext:ModelField Name="nick" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ListConfig Width="320" Height="300" ItemSelector=".x-boundlist-item">
                                <Tpl runat="server">
                                    <Html>
                                        <tpl for=".">
						                        <tpl if="[xindex] == 1">
							                        <table class="cbStates-list">
								                        <tr>
									                        <th>State</th>
									                        <th>Nick</th>
								                        </tr>
						                        </tpl>
						                        <tr class="x-boundlist-item">
							                        <td>{state}</td>
							                        <td>{nick}</td>
						                        </tr>
						                        <tpl if="[xcount-xindex]==0">
							                        </table>
						                        </tpl>
					                        </tpl>
                                    </Html>
                                </Tpl>
                            </ListConfig>
                            <Triggers>
                                <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                            </Triggers>
                            <Listeners>
                                <BeforeQuery Handler="this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                <TriggerClick Handler="if (index == 0) { 
                                                               this.focus().clearValue(); 
                                                               trigger.hide();
                                                           }" />
                                <Select Handler="this.getTrigger(0).show();" />
                            </Listeners>
                        </ext:ComboBox>
                    </Editor>
                </ext:Column>
                <ext:CheckColumn runat="server" Text="Active?" DataIndex="active" Width="50">
                    <Editor>
                        <ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
                    </Editor>
                </ext:CheckColumn>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Nov 08, 2012, 4:19 PM
    Quote Originally Posted by Baidaly View Post
    Hello!

    Try this example:

    ..... <ListConfig Width="320" Height="300" ItemSelector=".x-boundlist-item">
    <Tpl runat="server">
    <Html>
    <tpl for=".">
    <tpl if="[xindex] == 1">
    <table class="cbStates-list">
    <tr>
    <th>State</th>
    <th>Nick</th>
    </tr>
    </tpl>
    <tr class="x-boundlist-item">
    <td>{state}</td>
    <td>{nick}</td>
    </tr>
    <tpl if="[xcount-xindex]==0">
    </table>
    </tpl>
    </tpl>
    </Html>
    </Tpl>
    </ListConfig>
    ...
    [/CODE]
    Hi Baidaly, thanks for your reply. I know this example. OK it works,but after openning combo(by clicking down arrow) I need to expand the width of the combo (combo width in grid is 45px and after opening combo should be 250px ). Now the combos content is not readable(too narrow). How to setup combo to do this? Thanks. ASAPCH
  4. #4
    Nov 08, 2012, 4:52 PM
    Well, I came to it. In my combo tag, I forgot to set MatchFieldWidth="false". Thanks

Similar Threads

  1. [OPEN] [#103] RowEditing Plugin - Format bug?
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 29, 2012, 6:57 AM
  2. because errors Notifier plugin RowEditing gridPanel with no editing allowed
    By billy in forum 2.x Help
    Replies: 5
    Last Post: Nov 30, 2012, 2:18 PM
  3. [CLOSED] About the rowEditing plugin.
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 10, 2012, 11:31 AM
  4. [CLOSED] Grid RowEditing Plugin - Height
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 13, 2012, 9:00 PM
  5. [CLOSED] Problem with DirecEvent in a rowEditing plugin
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 24, 2012, 1:25 PM

Tags for this Thread

Posting Permissions