asp net bootstrap grid initialize combo box column in batch edit mode - asp net bootstrap grid initialize combo box column in batch edit mode ซอร์สโค้ดดาวน์โหลด

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

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

Grid View สำหรับ ASP.NET BOOTSTRAP - วิธีเริ่มต้นคอลัมน์กล่องคอมโบในโหมดแก้ไขแบตช์

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างเทมเพลตรายการแก้ไขของคอลัมน์คอมโบเพื่อเชื่อมโยงคอลัมน์กับแหล่งข้อมูลที่ผ่านการกรองและกำหนดค่าฟังก์ชันการแก้ไขเซลล์ของกริดในโหมดแบทช์

เริ่มต้นคอลัมน์กล่องคอมโบ

ภาพรวม

ทำตามขั้นตอนด้านล่างเพื่อเริ่มต้นคอลัมน์กล่องคอมโบในโหมดแก้ไขแบตช์:

เพิ่มการควบคุม BootstrapGridView ลงในหน้าของคุณและเติมด้วยคอลัมน์

สร้างคอลัมน์กล่องคอมโบและระบุการตั้งค่าคุณสมบัติ CombBoBox สำหรับโหมดมุมมอง ในการผูกคอลัมน์กล่องคอมโบกับแหล่งข้อมูลจัดการ itemRequestedByValue และ itemRequestedByFilterCondition ของคอลัมน์และกรองแหล่งข้อมูล

< 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 ( ) ;
}

ระบุคุณสมบัติ EditItemTemplate ของคอลัมน์เพิ่มการควบคุม BootstrapcomboBox ไปยังเทมเพลตเพื่อใช้ในโหมดแก้ไขและเปิดใช้งานคุณสมบัติ enableCallbackMode จัดการรายการฝั่งเซิร์ฟเวอร์คอมโบของ BoxRequestedByFilterCondition และ itemRequestedByValue และกรองแหล่งข้อมูลตามค่าของฟิลด์อื่น ๆ

< 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 ( ) ;
}

ในการเริ่มต้นการควบคุมกล่องคอมโบบนไคลเอนต์ให้จัดการเหตุการณ์ BatchEditStartEditing ตช์ของกริดและ BatchEditEndEditing ตามที่แสดงในตัวอย่างต่อไปนี้: มุมมองกริดสำหรับ ASP.NET WEB แบบฟอร์ม - วิธีการใช้เทมเพลตรายการแก้ไขในโหมดแบตช์

 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 ) ;
}

หากต้องการส่งผ่านค่าฟิลด์ใหม่ไปยังเซิร์ฟเวอร์ให้ใช้การควบคุมฟิลด์ที่ซ่อนอยู่และเรียกใช้วิธี PerformCallback ของกล่องคอมโบ
```
 function RefreshData ( currentTypeID ) {
    hf1 . Set ( 'currentTypeID' , currentTypeID ) ;
    bsCombobox . PerformCallback ( ) ;
} 
```