asp net bootstrap grid initialize combo box column in batch edit mode
1.0.0
이 예제는 콤보 박스 열의 편집 항목 템플릿을 작성하여 열을 필터링 된 데이터 소스에 바인딩하고 배치 모드에서 그리드의 셀 편집 기능을 구성하는 방법을 보여줍니다.
배치 편집 모드에서 콤보 박스 열을 초기화하려면 아래 단계에 따라 다음과 같습니다.
페이지에 BootStrapGridView 컨트롤을 추가하고 열로 채우십시오.
콤보 박스 열을 생성하고보기 모드에 대한 속성 ComboBox 설정을 지정하십시오. 콤보 박스 열을 데이터 소스에 바인딩하려면 열의 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 ( ) ;
}열의 editemtemplate 속성을 지정하고 템플릿에 bootstrapcombobox 컨트롤을 추가하여 편집 모드에서 사용하고 enablecallbackmode 속성을 활성화하십시오. 콤보 박스의 서버 측 항목을 requestedByFilterCondition 및 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 웹 양식의 그리드보기 - 배치 모드에서 항목 템플릿 편집을 구현하는 방법.
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 ( ) ;
} (응답을 제출하려면 devexpress.com으로 리디렉션됩니다)
