asp net bootstrap grid initialize combo box column in batch edit mode

Visualização da grade para asp.net bootstrap - Como inicializar uma coluna de caixa combinada no modo de edição em lote

Este exemplo demonstra como criar o modelo de item de edição de uma coluna de combinação para vincular a coluna a uma fonte de dados filtrada e configurar a funcionalidade de edição de células da grade no modo em lote.

Visão geral

Siga as etapas abaixo para inicializar uma coluna da caixa de combinação no modo de edição em lote:

1. Adicione um controle de bootstrapGridView à sua página e preencha -o com colunas.

2. Crie uma coluna da caixa de combinação e especifique suas configurações de PropriedadesComboBox para o modo de visualização. Para vincular uma coluna da caixa de combinação a uma fonte de dados, lide com o itemRequestEnDbyValue e itemRequestes da coluna Eventos e filtre a fonte de dados.

   < dx:BootstrapGridViewComboBoxColumn FieldName = " YourFieldName " ... >
       < PropertiesComboBox ValueField = " YourFieldName "	OnItemRequestedByValue = " OnItemRequestedByValue_View "
       OnItemsRequestedByFilterCondition = " OnItemsRequestedByFilterCondition_View " TextFormatString = " {0}|{1}... " >
           < Fields >
           <!-- ... -->
           </ Fields >
       </ PropertiesComboBox >
       <!-- ... -->
   </ dx:BootstrapGridViewComboBoxColumn >

    protected void OnItemRequestedByValue_View ( object source , ListEditItemRequestedByValueEventArgs e ) {
       if ( e . Value == null ) return ;
       int subTypeID = ( int ) e . Value ;
       BootstrapComboBox editor = source as BootstrapComboBox ;
       editor . DataSource = ItemTypeFactory . GetItemSubTypes ( ) . Where ( s => s . SubTypeID == subTypeID ) ;
       editor . DataBind ( ) ;
   }
   protected void OnItemsRequestedByFilterCondition_View ( object source , ListEditItemsRequestedByFilterConditionEventArgs e ) {
       BootstrapComboBox editor = source as BootstrapComboBox ;
       editor . DataSource = ItemTypeFactory . GetItemSubTypes ( ) . Where ( s => s . SubTypeDescription . Contains ( e . Filter )
       || s . SubTypeName . Contains ( e . Filter )
       || s . SubTypeID . ToString ( ) . Contains ( e . Filter ) ) ;
       editor . DataBind ( ) ;
   }

3. Especifique a propriedade EditItemTemplate da coluna, adicione um controle de bootstrapcomboBox ao modelo para usá -lo no modo de edição e habilite sua propriedade EnableCallbackMode. Lidar com os itens do lado do servidor da caixa combinada e o itens do lado do servidor e os eventos do FilterCondition e do itemRequestByValue e filtram a fonte de dados com base nos valores de outros campos.

   < dx:BootstrapGridViewComboBoxColumn Caption = " ItemSubType " FieldName = " SubTypeID " VisibleIndex = " 4 " >
       <!-- ... -->
       < EditItemTemplate >
           < dx:BootstrapComboBox ID = " bsCombobox " runat = " server " EnableCallbackMode = " true " ClientInstanceName = " bsCombobox " OnItemRequestedByValue = " OnItemRequestedByValue " OnItemsRequestedByFilterCondition = " OnItemsRequestedByFilterCondition " ValueField = " SubTypeID " TextFormatString = " SubTypeID: {0} ---- Desription: {1} " >
               < Fields >
                   <!-- ... -->
               </ Fields >
               < ClientSideEvents LostFocus = " bsCombobox_LostFocus " />
           </ dx:BootstrapComboBox >
       </ EditItemTemplate >
   </ dx:BootstrapGridViewComboBoxColumn >

    protected void OnItemRequestedByValue ( object source , ListEditItemRequestedByValueEventArgs e ) {
       // ...
       int typeID = GetCurrentItemTypeID ( ) ;
       List < SubType > subTypes ;
       if ( typeID > - 1 )
           subTypes = ItemTypeFactory . GetItemSubTypes ( ) . Where ( s => s . TypeID == typeID && s . SubTypeID . ToString ( ) == id ) . ToList ( ) ;
       // ...
       editor . DataSource = subTypes ;
       editor . DataBind ( ) ;
   }
   
   protected void OnItemsRequestedByFilterCondition ( object source , ListEditItemsRequestedByFilterConditionEventArgs e ) {
       BootstrapComboBox editor = source as BootstrapComboBox ;
       int typeID = GetCurrentItemTypeID ( ) ;
       List < SubType > subTypes ;
       if ( typeID > - 1 )
           subTypes = ItemTypeFactory . GetItemSubTypes ( ) . Where ( s => s . TypeID == typeID && ( s . SubTypeDescription . Contains ( e . Filter )
           // ...
       editor . DataSource = subTypes ;
       editor . DataBind ( ) ;
   }

4. Para inicializar o controle da caixa de combinação do cliente, manuseie os eventos BatchEditEndEditing BatchEditStartEditing da Grid, como demonstrado no exemplo seguinte: Visualização de grade para formulários da Web ASP.NET - Como implementar um modelo de item de edição no modo de lote.

    function OnBatchEditStartEdit ( s , e ) {
       var currentTypeID = grid . batchEditApi . GetCellValue ( e . visibleIndex , 'TypeID' ) ;
       var cellInfo = e . rowValues [ ColIndexByName ( 'SubTypeID' ) ] ;
       this . setTimeout ( function ( ) {
       bsCombobox . SetValue ( cellInfo . value ) ;
       bsCombobox . SetText ( cellInfo . text ) ;
       } , 0 ) ;
       RefreshData ( currentTypeID ) ;
   }
   function OnBatchEditEndEdit ( s , e ) {
       var cellInfo = e . rowValues [ ColIndexByName ( 'SubTypeID' ) ] ;
       cellInfo . value = bsCombobox . GetValue ( ) ;
       cellInfo . text = bsCombobox . GetText ( ) ;
       bsCombobox . SetValue ( null ) ;
   }

5. Para passar o novo valor de campo para o servidor, use um controle de campo oculto e ligue para o método PerformCallback da caixa de combinação.

    function RefreshData ( currentTypeID ) {
       hf1 . Set ( 'currentTypeID' , currentTypeID ) ;
       bsCombobox . PerformCallback ( ) ;
   } 

Arquivos para revisar

• Default.aspx (vb: default.aspx)
• Default.aspx.cs (vb: default.aspx.vb)

Documentação

• Modo de edição em lote

Mais exemplos

• Visualização da grade para formulários da web asp.net - Como implementar um modelo de item de edição no modo de lote

Este exemplo aborda seus requisitos/objetivos de desenvolvimento?

(Você será redirecionado para Devexpress.com para enviar sua resposta)