검도의 데이터 소스에 항목을 수동으로 추가하는 방법 UI Combobox

Question

서블릿에서받은 JSON 문자열로 채워지는 콤보 상자가 있습니다. 내가 수동으로 데이터 소스 comboBoxDataSource.add({key: "062", value: "Total"});에 항목을 추가 할 때까지

$(document).ready(function() { 
    //Combobox Init (From Servlet) 
    var comboBoxDataSource = new kendo.data.DataSource({ 
     transport : { 
      read : { 
       url : "net/samso/action/common/ComboAction?flag=SRCHGT_IO_GB", // url to remote data source 
       dataType : "json", 
       type : 'GET' 
      } 
     }, 
     schema : { 
      model : { 
       fields : { 
        key : { 
         type : "string" 
        }, 
        value : { 
         type : "string" 
        } 
       } 
      } 
     } 
    }); 

    //Manually add an item 
    comboBoxDataSource.add({key: "062", value: "Total"}); 

    //Initialize Combobox 
    $("#cb_srchgt_io_gb").kendoComboBox({ 
     dataSource : comboBoxDataSource, 
     dataTextField : "value", 
     dataValueField : "key" 
    }) 
}); 

코드는 잘 작동합니다. 항목을 추가하면 데이터 소스의 JSON 데이터에서 채워진 다른 항목이 제거됩니다.

왜 이런 일이 발생합니까?

Answer 1

문제는 데이터 소스가 비동기 적으로 초기화된다는 것입니다. 즉, combobox이 초기화 될 때로드가 시작되지만 서버에서 데이터가 다시 수신 될 때까지 작업이 완료되지 않습니다. 그런 다음 그 요소를 호출해야합니다. 서버에서로드하는 데 밀리 초 또는 초가 걸릴 수 있기 때문에 add 문을 샘플 코드 끝으로 옮길 수도 있습니다. 서버로부터 수신되는 것과 요소를 추가하려면

, 당신은 사용할 수 있습니다 :

$(document).ready(function() { 
    //Combobox Init (From Servlet) 
    var comboBoxDataSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url  : "net/samso/action/common/ComboAction?flag=SRCHGT_IO_GB", // url to remote data source 
       dataType: "json", 
       type : 'GET' 
      } 
     }, 
     schema : { 
      model: { 
       fields: { 
        key : { type: "string" }, 
        value: { type: "string" } 
       } 
      }, 
      data: function(result) { 
       //Manually add an item 
       result.push({key: "062", value: "Total"}); 
       return result 
      } 
     } 
    }); 

    //Initialize Combobox 
    $("#cb_srchgt_io_gb").kendoComboBox({ 
     dataSource : comboBoxDataSource, 
     dataTextField : "value", 
     dataValueField: "key" 
    }) 
}); 

당신은 e.response에 같은 일 requestEnd 이벤트를 사용하고 여분의 요소를 밀어을 할 수 있습니다

requestEnd: function (e) { 
    console.log("e", e); 
    e.response.push({key: "062", value: "Total"}); 
} 

기본적으로 서버에서 데이터를받은 후 시작되는 모든 이벤트가 정상입니다.