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

Tampilan Grid untuk ASP.NET Bootstrap - Cara Menginisialisasi Kolom Kotak Kombo Dalam Mode Edit Batch

Contoh ini menunjukkan cara membuat templat item edit kolom kombo kolom untuk mengikat kolom ke sumber data yang difilter dan mengkonfigurasi fungsionalitas edit sel grid dalam mode batch.

Ringkasan

Ikuti langkah -langkah di bawah ini untuk menginisialisasi kolom kotak kombo dalam mode Edit Batch:

1. Tambahkan kontrol BootstrapGridView ke halaman Anda dan isi dengan kolom.

2. Buat kolom kotak kombo dan tentukan pengaturan PropertiesComboBox untuk mode tampilan. Untuk mengikat kolom kotak kombo ke sumber data, tangani ItemRequestedByValue kolom dan ItemRequestedByFilterCondition events dan filter sumber data.

   < 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. Tentukan properti EditIteMtemplate kolom, tambahkan kontrol BootstrapComboBox ke templat untuk menggunakannya dalam mode edit, dan mengaktifkan properti EnableCallBackMode. Tangani item sisi-server box combo yang diragukan lagi oleh acara COMPO dan itemRequestedByValue dan memfilter sumber data berdasarkan nilai-nilai bidang lain.

   < 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. Untuk menginisialisasi kontrol kotak kombo pada klien, tangani BatchEditStartEditing BatchEditEndEditing

    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. Untuk meneruskan nilai bidang baru ke server, gunakan kontrol bidang tersembunyi dan hubungi metode Combo's PerformCallback .

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

File untuk ditinjau

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

Dokumentasi

• Mode Edit Batch

Lebih banyak contoh

• Tampilan Grid untuk Formulir Web ASP.NET - Cara Mengimplementasikan Template Item Edit dalam Mode Batch

Apakah contoh ini membahas persyaratan/tujuan pengembangan Anda?

(Anda akan diarahkan ke DevExpress.com untuk mengirimkan tanggapan Anda)