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

Vue de grille pour ASP.NET Bootstrap - Comment initialiser une colonne de boîte combinée en mode édition par lots

Cet exemple montre comment créer le modèle d'élément de modification d'une colonne combinée pour lier la colonne à une source de données filtrée et configurer la fonctionnalité d'édition de cellule de la grille en mode lot.

Aperçu

Suivez les étapes ci-dessous pour initialiser une colonne de boîte combinée en mode d'édition par lots:

1. Ajoutez un contrôle BootstrapGridView à votre page et remplissez-le avec des colonnes.

2. Créez une colonne de boîte combinée et spécifiez ses paramètres PropertiesCombobox pour le mode d'affichage. Pour lier une colonne de boîte combinée à une source de données, gérez les événements de la colonne ItemRetedByValue et ItemrequestByFilterCondition et filtrez la source de données.

   < 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. Spécifiez la propriété EditItemTemplate de la colonne, ajoutez un contrôle BootstrapComboBOX au modèle pour l'utiliser en mode édition et activez sa propriété ImpactibleCallBackMode. Gérez les éléments côté serveur de la boîte combo inférieurs des événements de FilterCondution et élément de la surface et filtrez la source de données en fonction des valeurs des autres champs.

   < 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. Pour initialiser le contrôle de la boîte combinée sur le client, gérez les événements BatchEditStartEditing and BatchEditEndEditing de la grille comme démontré dans l'exemple suivant: Vue de grille pour les formulaires Web ASP.NET - Comment implémenter un modèle d'élément d'édition en mode lot.

    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. Pour passer la nouvelle valeur de champ au serveur, utilisez un contrôle de champ caché et appelez la méthode PerformCallback de la boîte combo.

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

Fichiers à réviser

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

Documentation

• Mode d'édition par lots

Plus d'exemples

• Vue de grille pour les formulaires Web ASP.NET - Comment implémenter un modèle d'élément d'édition en mode lot

Cet exemple répond-il à vos exigences / objectifs de développement?

(Vous serez redirigé vers Devexpress.com pour soumettre votre réponse)