그리드 셀에 jqwidget 드롭 다운리스트의 데이터베이스 바인딩

Question

jqwidget 그리드 cellediting 예제 (jqxGrid 왼쪽 메뉴 아래 편집/편집 열기)에서 데이터가 클라이언트에서 생성됩니다. ASP.NET MVC3 프로젝트 내에서 드롭 다운 목록을 어떻게 바인딩 할 수 있습니까? (데모 탭의 제품 컬럼 아래에 드롭 다운 목록이 있습니다)

Answer 1

은, 하나는 데이터 소스 (또는 데이터 어댑터)에 바인딩한다을 selectedIndex를 설정해야합니다. 그런 다음, 행을 갱신하기 위해 선택 값을 select에 유지해야합니다.

{ text: 'Urun', columntype: 'dropdownlist', datafield: 'UrunAdi', width: 177, 
        initeditor: function (row, cellvalue, editor) { 
         var urunId = $('#jqxgrid').jqxGrid('getcellvalue', row, "UrunId"); 
         editor.jqxDropDownList({ displayMember: 'UrunAdi', source: dropdownListAdapter, selectedIndex: urunId }); 
         $(document).on('select', editor, function (event) { 
          selectedUrunId = editor.jqxDropDownList('getSelectedIndex'); 
         }); 
        } 
} 

변수 어쩌면 jqxgrid 초기화 전에 var selectedUrunId = -1; 같이 전역으로 정의되어야한다 "selectedUrunId"

열 정의는 같이 할 수있다. 그런 다음 updaterow 정의 (소스 정의에 있음)에서 선택한 드롭 다운 값을 사용해야합니다.

이

if (selectedUrunId != undefined && selectedUrunId != -1) { 
        rowdata.UrunId = selectedUrunId; 
        selectedUrunId = -1; 
       } 

이 시나리오의 전체 장면은 다음과 같습니다 :

 // prepare the data 
     var gridSource = { 
      datatype: "json", 
      datafields: [{ name: 'KargoId' }, { name: 'UrunAdi' }, { name: 'UrunId', type: 'int' }], 
      url: 'BindGrid', 
      updaterow: function (rowid, rowdata) { 
       // synchronize with the server - send update command 
       if (selectedUrunId != undefined && selectedUrunId != -1) { 
        rowdata.UrunId = selectedUrunId; 
        selectedUrunId = -1; 
       }     

       var data = $.param(rowdata); 

       $.ajax({ 
        dataType: 'json', 
        url: 'UpdateEditGrid', 
        data: data, 
        success: function (data, status, xhr) { 
         gridDataAdapter.dataBind();        
        }, 
        error: function (xhr, status, error) { 
         alert(JSON.stringify(xhr)); 
        } 
       }); 
      } 
     }; 

     var gridDataAdapter = new $.jqx.dataAdapter(gridSource); 

     var dropdownSource = { 
      datatype: "json", 
      datafields: [{ name: 'UrunId' }, { name: 'UrunAdi'}], 
      url: 'BindDropdown' 
     }; 

     var selectedUrunId = -1; 
     var dropdownListAdapter = new $.jqx.dataAdapter(dropdownSource); 

     // initialize jqxGrid 
     $("#jqxgrid").jqxGrid(
     { 
      width: 670, 
      source: gridDataAdapter, 
      editable: true, 
      theme: theme, 
      selectionmode: 'singlecell', 
      columns: [ 
       { text: '#', datafield: 'KargoId', width: 40 },     
       { text: 'Urun', columntype: 'dropdownlist', datafield: 'UrunAdi', width: 177, 
        initeditor: function (row, cellvalue, editor) { 
         var urunId = $('#jqxgrid').jqxGrid('getcellvalue', row, "UrunId"); 
         editor.jqxDropDownList({ displayMember: 'UrunAdi', source: dropdownListAdapter, selectedIndex: urunId }); 
         $(document).on('select', editor, function (event) { 
          selectedUrunId = editor.jqxDropDownList('getSelectedIndex'); 
         }); 
        } 
       }] 
     }); 

Answer 2

'createeditor'라는 함수를 사용하여 안에있는 DropDownList를 초기화 할 수 있습니다.

열 정의 :

{ text: 'Proyecto', columntype: 'dropdownlist', datafield: 'jobid', width: 10, 
         createeditor: function (row, cellvalue, editor) { 
          editor.jqxDropDownList({ displayMember: 'displaylabel', valueMember: 'catalogvalue', source: dropdownListAdapter }); 
         } 
} 

드롭 다운리스트의 데이터 어댑터가 유사한 코드를 사용하여 초기화 할 수 있습니다 : 데이터베이스와 드롭 다운리스트 초기화하면

source = { 
    datatype: "xml", 
    datafields: [ 
    { name: 'CompanyName' }, 
    { name: 'ContactName' }, 
    { name: 'ContactTitle' }, 
    { name: 'City' }, 
    { name: 'Country' }, 
    { name: 'Address' } 
    ], 
    async: false, 
    record: 'Table', 
    url: 'Default.aspx/GetCustomers', 
}; 
var dropdownListAdapter = new $.jqx.dataAdapter(source, 
    { contentType: 'application/json; charset=utf-8'} 
);