kogrid - Dyanmic ColumDefs

Question

런타임시 kogrid에서 columnDefs를 변경해야하지만 많은 행운이 필요하지 않습니다.

보기가로드 될 때 데이터 원본을 기본값으로 설정하고 있습니다. 사용자가 드롭 다운 목록에서 선택하면 ChangeDataSource라는 메서드가 실행됩니다. 이 메소드 내에서 columdefs 및 데이터 소스를 변경하지만 kogrid는 여전히 기본 데이터 소스 및 columndefs를 표시합니다. 여기

여기

http://jsfiddle.net/wood0615/cw56z/6/는 코드 - 내가 있도록 코딩 수있는 방법

<div class="gridStyle" data-bind="koGrid: gridOptions"></div> 
     <select id="Select6" tabindex="3" style="width: 190px" data-bind=" options: InstrumentTypes, value: modalInstrumentTypeValue, optionsValue: 'OptionValue', optionsText: 'OptionText', validationOptions: { insertMessages: false }, event: { change: ChangeDataSource }"> 
     </select> 

VIEWMODEL-

var modalInstrumentTypeValue = ko.observable(); 


function mainVm(){ 
    var self = this; 
    this.modalInstrumentTypeValue = ko.observable(); 
    this.InstrumentTypes = ko.observableArray([{OptionText: "Moroni", OptionValue: 50}, 
            {OptionText: "Tiancum", OptionValue: 43}, 
            {OptionText: "Jacob", OptionValue: 27}, 
            {OptionText: "Nephi", OptionValue: 29}, 
            {OptionText: "Enos", OptionValue: 34}]); 

    this.myData = ko.observableArray([{name: "Moroni", age: 50}, 
            {name: "Tiancum", age: 43}, 
            {name: "Jacob", age: 27}, 
            {name: "Nephi", age: 29}, 
            {name: "Enos", age: 34}]); 


    this.myData2 = ko.observableArray([{Client: "Acme", Address: '123 Somewhere street'}, 
            {Client: "Johnsons", Address: '123 Here street'}, 
            {Client: "AdLib", Address: '123 Now street'}, 
            {Client: "Tough", Address: '123 Main street'}, 
            {Client: "Mars", Address: '123 Sommer street'}]); 
    this.gridOptions = { 
    data: self.myData, 
    columnDefs: [{ field: 'name', displayName: 'Client Name', width: 140 }, 
       { field: 'age', displayName: 'Age', width: 100 } 
       ]}; 

     this.saveState = function() { 

} 

     this.ChangeDataSource = function (tab) { 


     gridOptions = { 
    data: self.myData2, 
     columnDefs: [{ field: 'Client', displayName: 'Client', width: 140 }, 
       { field: 'Address', displayName: 'Address', width: 100 } 
       ]}; 
    } 
}; 


    ko.applyBindings(new mainVm()); 

보기 -

입니다 illistrate-하는 jsfiddle입니다 내 viewmodel에서 데이터 소스와 columndefs가 변경되면 뷰도 그에 따라 nges?

Answer 1

ChangeDataSource 함수는 gridOptions을 다시 설정하는 대신 관찰 가능을 업데이트해야합니다.

this.cols = ko.observableArray([{ 
    field: 'name', 
    displayName: 'Client Name', 
    width: 140 
}, { 
    field: 'age', 
    displayName: 'Age', 
    width: 100 
}]); 

this.gridOptions = { 
    data: self.myData, 
    columnDefs: self.cols 
}; 

this.ChangeDataSource = function (tab) { 
    self.myData(self.myData2()); 
    self.cols([{ 
     field: 'Client', 
     displayName: 'Client', 
     width: 140 
    }, { 
     field: 'Address', 
     displayName: 'Address', 
     width: 100 
    }]); 
} 

Updated fiddle