View combobox data in gridpanel

  1. #1

    View combobox data in gridpanel

    Good night

    I have a combobox with a gridpanel (classical relation City / State) and a database with two tables cited.

    The gridpanel displays the name of the cities and the state is chosen in the combobox. It's working. But when you save, you see the state ID and not the state name on the grid cities.

    in the code above, tables are PRODUTO and MARCA, corresponding respectively to CITY and STATE.

    Following partial code:

    Thanks

     <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
     
                ConnectionString="<%$ ConnectionStrings:conexaoDados %>" 
                DeleteCommand="DELETE FROM [PRODUTO] WHERE [COD_PRODUTO] = @original_COD_PRODUTO" 
                InsertCommand="INSERT INTO [PRODUTO] ([DESCRICAO],[PRECO_CUSTO],[PRECO_VENDA],[COD_MARCA]) VALUES (@DESCRICAO, @PRECO_CUSTO, @PRECO_VENDA, @COD_MARCA);SELECT @newId = @@Identity;" 
                OldValuesParameterFormatString="original_{0}" 
                SelectCommand="SELECT * FROM [PRODUTO]" 
                UpdateCommand="UPDATE [PRODUTO] SET [DESCRICAO] = @DESCRICAO, [PRECO_CUSTO] = @PRECO_CUSTO, [PRECO_VENDA] = @PRECO_VENDA, [COD_MARCA] = @COD_MARCA WHERE [COD_PRODUTO] = @original_COD_PRODUTO">
                <DeleteParameters>
                    <asp:Parameter Name="original_COD_PRODUTO" Type="Int32" />
                    <asp:Parameter Name="original_DESCRICAO" Type="String" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Direction="Output" Name="newId" Type="Int32" />
                    <asp:Parameter Name="DESCRICAO" Type="String" />
                    <asp:Parameter Name="PRECO_CUSTO" Type="Double" /> 
                    <asp:Parameter Name="PRECO_VENDA" Type="Double" /> 
                    <asp:Parameter Name="COD_MARCA" Type="Int32" />                                
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="DESCRICAO" Type="String" />
                    <asp:Parameter Name="original_COD_PRODUTO" Type="Int32" />
                    <asp:Parameter Name="original_DESCRICAO" Type="String" />
                    <asp:Parameter Name="original_PRECO_CUSTO" Type="Double" /> 
                    <asp:Parameter Name="original_PRECO_VENDA" Type="Double" /> 
                    <asp:Parameter Name="original_COD_MARCA" Type="Int32" /> 
                </UpdateParameters>
            </asp:SqlDataSource>
    
             <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
     
                ConnectionString="<%$ ConnectionStrings:conexaoDados %>" 
                OldValuesParameterFormatString="original_{0}" 
                SelectCommand="SELECT * FROM [MARCA]">
            </asp:SqlDataSource>
    
            <ext:Store ID="Store1" 
                runat="server" 
                DataSourceID="SqlDataSource1" 
                ShowWarningOnFailure="false"
                OnAfterDirectEvent="Store1_AfterDirectEvent"
                OnBeforeDirectEvent="Store1_BeforeDirectEvent" 
                OnAfterRecordInserted="Store1_AfterRecordInserted"
                OnRefreshData="Store1_RefreshData"
                UseIdConfirmation="true"> 
                <Reader>
                    <ext:JsonReader IDProperty="COD_PRODUTO">
                        <Fields>
                            <ext:RecordField Name="COD_PRODUTO" Type="Int" />
                        </Fields>
                        <Fields>
                            <ext:RecordField Name="DESCRICAO" Type="String"/>
                        </Fields>
                        <Fields>
                            <ext:RecordField Name="PRECO_CUSTO" Type="Float"/>
                        </Fields>
                         <Fields>
                            <ext:RecordField Name="PRECO_VENDA" Type="Float"/>
                        </Fields>
                        <Fields>
                            <ext:RecordField Name="COD_MARCA" Type="Int"/>
                        </Fields>
                    </ext:JsonReader>
                </Reader>
                <SortInfo Field="DESCRICAO" Direction="ASC" />
                <Listeners>
                    <LoadException Handler="Ext.Msg.alert('Suppliers - Load failed', e.message || e);" />
                    <CommitFailed Handler="Ext.Msg.alert('Suppliers - Commit failed', 'Reason: ' + msg);" />
                    <SaveException Handler="Ext.Msg.alert('Suppliers - Falha ao tentar salvar!', e.message || e);" />
                    <CommitDone Handler="Ext.Msg.alert('Suppliers - Commit', 'Dados salvos com sucesso!');" />
                </Listeners>      
            </ext:Store>
    
    
            <ext:Store ID="Store2" 
                runat="server" 
                DataSourceID="SqlDataSource2" 
                ShowWarningOnFailure="false"
                UseIdConfirmation="true"> 
                <Reader>
                    <ext:JsonReader IDProperty="COD_MARCA">
                        <Fields>
                            <ext:RecordField Name="COD_MARCA" />
                        </Fields>
                        <Fields>
                            <ext:RecordField Name="DESCRICAO" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
                <SortInfo Field="DESCRICAO" Direction="ASC" />
            </ext:Store>
    
    
    
                                 <ext:Window 
                                        ID="Window1" 
                                        runat="server"
                                        Collapsible="true"
                                        Maximizable="true"
                                        Icon="User" 
                                        Title="Cadastro de Marcas"
                                        CenterOnLoad="false"
                                        Layout="Fit" Closable="true" Draggable="true" Maximized="true" Border="false">
    
                                     <Items>                                           
                                     <ext:GridPanel 
                                             ID="GridPanel1" 
                                             runat="server"  
                                             Title="Produtos" 
                                             AutoExpandColumn="DESCRICAO"
                                             StoreID="Store1" 
                                             forceFit="true"
                                             AutoScroll="false"
                                             Frame="false"
                                             TrackMouseOver="true"
                                             StripeRows="true"
                                             Header="false"
                                             Border="false"
                                             Icon="Add" AutoHeight="false" DefaultType="panel" ForceLayout="False" AutoWidth="False" Region="None" HideBorders="False" BodyBorder="false" Closable="False" Collapsed="False" Collapsible="True" Draggable="false" Footer="true" MaxHeight="1000px" AutoDoLayout="false">
                                             <Plugins>
                                                <ext:RowEditor ID="RowEditor1" runat="server" SaveText="Salvar" CancelText="Cancelar" />
                                             </Plugins>
    
    
                   <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="Button1" runat="server" Text="Inserir" Icon="Add">
                               <Listeners>
                                  <Click Handler="#{GridPanel1}.insertRecord(0, {});#{GridPanel1}.getView().focusRow(0);#{GridPanel1}.getSelectionModel().selectFirstRow();#{CadastroProduto}.show();"/>                                       
                                  
                               </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button2" runat="server" Text="Salvar" Icon="DiskBlack">
                               <Listeners>
                                  <Click Handler="#{GridPanel1}.save();#{GridPanel1}.reload();" />
                               </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button3" runat="server" Text="Excluir" Icon="Delete">
                               <Listeners>
                                   <Click Handler="deleteRows(#{GridPanel1});" />
                               </Listeners>
                            </ext:Button>
    
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                                            
                                            
                                             <SelectionModel>
                                                 <ext:RowSelectionModel 
                                                     ID="SelectedRowModel1" 
                                                     runat="server" 
                                                     SingleSelect="true">
                                                  <Listeners>
                                                    <RowSelect Handler="#{FormPanel1}.getForm().loadRecord(record);" />
                                                  </Listeners> 
                                                 </ext:RowSelectionModel>                                       
                                             </SelectionModel> 
                                             
                                             <ColumnModel ID="ColumnModel1" runat="server">
                                                 <Columns>
                                                     <ext:Column 
                                                         ColumnID="COD_PRODUTO" 
                                                         DataIndex="COD_PRODUTO" 
                                                         Header="Código">
                                                         
                                                         <Editor>
                                                             <ext:TextField ID="TextField1" runat="server" />
                                                         </Editor>
                                                     </ext:Column>
                                                     <ext:Column 
                                                         ColumnID="DESCRICAO" 
                                                         DataIndex="DESCRICAO" 
                                                         Header="Descrição">
                                                         <Editor>
                                                             <ext:TextField ID="TextField2" runat="server" />
                                                         </Editor>
                                                     </ext:Column>
                                                     <ext:Column 
                                                         ColumnID="PRECO_CUSTO" 
                                                         DataIndex="PRECO_CUSTO" 
                                                         Header="Preço de Custo">
                                                         <Renderer Format="UsMoney" />
                                                         <Editor>
                                                             <ext:TextField ID="TextField3" runat="server" />
                                                         </Editor>
                                                     </ext:Column>
                                                     <ext:Column 
                                                         ColumnID="PRECO_VENDA" 
                                                         DataIndex="PRECO_VENDA" 
                                                         Header="Preço de Venda">
                                                         <Renderer Format="UsMoney" />
                                                         <Editor>
                                                             <ext:TextField ID="TextField4" runat="server" />
                                                         </Editor>
                                                     </ext:Column>
                                                     <ext:Column 
                                                         ColumnID="COD_MARCA" 
                                                         DataIndex="COD_MARCA" 
                                                         Header="Cód Marca">
                                                         
                                                         <Editor>
                                                                 <ext:ComboBox ID="Marca" runat="server" 
                                                                  StoreID="Store2" 
                                                                  TypeAhead="true" 
                                                                  Mode="Local"
                                                                  ForceSelection="true" 
                                                                  TriggerAction="All" 
                                                                  DisplayField="DESCRICAO" 
                                                                  ValueField="COD_MARCA"
                                                                  EmptyText="Loading..." 
                                                                  ValueNotFoundText="Loading...">
                                                                 </ext:ComboBox>
                                                         </Editor>
                                                     </ext:Column>
                                                   </Columns>
                                                </ColumnModel>                                    
    
                                        <BottomBar>
                                            <ext:PagingToolbar ID="PagingToolbar1" 
                                                runat="server" 
                                                PageSize="10" 
                                                StoreID="Store1" 
                                                DisplayInfo="true" 
                                                AutoHeight="False" ClassicButtonStyle="False" Flat="False">
      
                                                  
    
    
                                             </ext:PagingToolbar>
                                        </BottomBar>
                                        <SaveMask ShowMask="true" />
                                        <LoadMask ShowMask="true" />
    
                                    </ext:GridPanel>
                                </Items>
                           </ext:Window>
  2. #2
    I think you should add a renderer on your record:

    example:

    <script type="text/javascript">
    
    function codMarcaRenderer(value, meta, record, rowIndex, colIndex, store) 
    {
      return Ext.getCmp('store2').getById(value).data.DESCRICAO;	
    }
    </script>

    In your code:
    <ext:Column
                         ColumnID="COD_MARCA"
                         DataIndex="COD_MARCA"
                         Header="Cód Marca">
                          
                         <Renderer Fn="codMarcaRenderer" />
                                   
                         <Editor>
                          <ext:ComboBox ID="Marca" runat="server"
                          StoreID="Store2"
                          TypeAhead="true"
                          Mode="Local"
                          ForceSelection="true"
                          TriggerAction="All"
                          DisplayField="DESCRICAO"
                          ValueField="COD_MARCA"
                          EmptyText="Loading..."
                          ValueNotFoundText="Loading...">
                         </ext:ComboBox>
                        </Editor>
    </ext:Column>
  3. #3
    Hi Alainfo,

    The sample loading was forever but it helped me understand and could do what he wanted

    thanks!

    Below solution:

        <script type="text/javascript">
            var MarcaRenderer = function (value) {
                var r = Store2.getById(value);
    
                if (Ext.isEmpty(r)) {
                    return "";
                }
    
                return r.data.DESCRICAO;
            };
        </script>
    <Renderer Fn="MarcaRenderer" />

Similar Threads

  1. [CLOSED] put a data view inside a data view,
    By farisqadadeh in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Mar 14, 2011, 7:58 PM
  2. [CLOSED] Can't bind / view ViewData data in Ext.Net controls
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 14, 2011, 12:45 PM
  3. [CLOSED] Data View
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 14, 2010, 6:52 PM
  4. Replies: 1
    Last Post: Nov 12, 2010, 12:29 PM
  5. [CLOSED] View text data in new windows or combobox
    By ppettigrew in forum 1.x Legacy Premium Help
    Replies: 18
    Last Post: Jul 26, 2010, 11:30 AM

Posting Permissions