2013-01-15 2 views
0

KendoUI 그리드의 set을 사용하여 요소를 수정하면 선택 항목이 제거됩니다.KendoUI 그리드 수정 셀 제거 선택

는 KendoUI DataSource는 다음과 같이 정의 된 경우 :

var dataSource = new kendo.data.DataSource({ 
    data : [ 
     { "id": 1, "item": "item1", "value": "foo" }, 
     { "id": 2, "item": "item2", "value": "foo" }, 
     { "id": 3, "item": "item3", "value": "foo" }, 
     { "id": 4, "item": "item4", "value": "foo" } 
    ], 
    pageSize: 5 
}); 

grid 같은 : 나는 행을 클릭하면 (선택) 한 후 사용하여 다음을 모델을 업데이트

var grid = $("#grid").kendoGrid({ 
    dataSource: dataSource, 
    columns : [ 
     { field: "item", title: "Item" }, 
     { field: "value", title: "Value" } 
    ], 
    selectable: "row" 
}).data("kendoGrid"); 

코드 :

dataSource.data()[0].set("value", "bar"); 

선택이 손실됩니다. JSFiddle에서

샘플 코드 here

방법 :

  1. 어떤 행을 선택합니다.
  2. 첫 번째 행의 value을 변경하려면 버튼을 클릭하십시오.

로컬 DataSource을 업데이트 할 때 선택을 보존하는 방법이 있습니까?

답변

2

데이터 소스의 변경 이벤트가 발생하여 그리드가 반응하여 다시 그려지는 경우 예상되는 동작입니다. 다음과 같이 필드를 자동 업데이트 할 수 있습니다.

dataSource.data()[0].value = "bar"; 

그러나 변경 이벤트가 트리거되지 않으며 그리드도 업데이트되지 않습니다.

'새로 고침'사이의 그리드 선택을 유지하려면 this 코드 라이브러리 기사에서 다룬 접근 방식을 사용할 수 있습니다. 쿠키 또는 메모리에 저장할 수 있습니다. 귀하의 책임입니다.

감사합니다.

+0

물론이 좋은 이유가이 동작입니다하지만이 예상되는 나에게 매우 이상한 보이는

var selected = grid.select(); var next = selected.next(); var nextUid = next.data("uid"); var dataItem = grid.dataItem(selected); if (dataItem) { dataItem.set("value", dataItem.get("value") - 1); if (next.length) grid.select($("#grid").find("*[data-uid='" + nextUid + "']")); } 
. 아무튼 대답이 받아 들여졌습니다. – OnaBai

+0

Grid는 선택에 대해 아무 것도 모른다. CSS 클래스 일 뿐이다. Grid 요소가 다시 만들어지면 클래스가 사라집니다. 그것만큼이나 간단합니다. –

+0

간단히 말하면 전체 행을 다시 그리는 것이 더 쉽다는 것을 알고 있습니다. 그러나이 경우 선택 항목은 제거되고'change' 이벤트는 발생하지 않습니다. 다시 말하지만 우리는 행의 이전 버전에 '변경'을 바인딩하고 다시 그려야한다는 것을 알고 있지만 프로그래머는 HTML과 CSS를 항상 생각하고 (그리고 KendoUI가 어떻게 구현되는지 알고 있어야합니다.) – OnaBai

0

매우 비슷한 문제에 대한 해결책을 찾을 수있었습니다. 선택한 행을 수정 한 후 다음 행을 선택하려고했지만 데이터 항목을 선택 취소했습니다.

트릭은 선택한 요소의 data-uid을 저장하는 것이 었습니다. 업데이트 후에는 단순히 uid로 요소를 선택합니다.

You can try it here.