2013-07-26 3 views
2

안녕하세요 각 행에 삭제 버튼이있는 검도 그리드가 있습니다. 삭제 버튼을 클릭하면 "삭제?"와 같은 확인 메시지가 나타납니다. 여기까지는 괜찮습니다. 이제 예 또는 지금을 클릭하면 이벤트를 포착하고 싶습니다.검도 그리드 행 삭제 confimation

메시지를 표시하려면 예를 클릭하십시오. 그리고 아니오를 클릭하면 다른 메시지를 표시하려고합니다.

검도에서 이러한 이벤트를 잡는 방법?

답변

1

나는 이것들을 잡는 것이 가능하다고 생각하지 않는다. destroy 이벤트는 내장되어 있으며 "있는 그대로"작동한다.

그러나 클릭 이벤트 (http://docs.kendoui.com/api/web/grid#configuration-columns.command.click)를 사용하면 작성해야하는 확인 대화 상자를 표시하는 사용자 정의 명령을 만들 수 있습니다 (예 : confirm() 내장 된 자바 스크립트를 사용할 수는 있지만보기에는 좋지 않을 수 있음). 지금은) 버튼과 이벤트를 완전히 제어 할 수 있습니다.

+0

안녕하세요 ... var check = confirm ("Are you sure?"); if (check) {}이 작동합니다. – jestges

0

나는 UweB에 동의하며 그러한 이벤트를 잡는 방법은 없습니다. 이상적으로 KendoWindow를 사용하여 직접 대화를 삭제하면 더 많은 자유를 얻고 페이지 UI로 나타납니다.

시도 다음 http://jsfiddle.net/vojtiik/KZ6pj/8/

명령을 추가

command: [{ 
      name: "delete", 
      text: "delete", 
      click: _handleDelete, 
      imageClass: "ui-icon ui-icon-close" 
     }], 

캡처 선택한 항목을하고 창에 컨트롤을 전달합니다

function _handleDelete(event) { 
     dataitem = grid.dataItem($(event.currentTarget).closest("tr")); 
     kWindow.open(); 
    }; 

물건을 수행하고 삭제합니다

$('.yesbtn').click(function() { 
     console.log('My message'); 
     grid.dataSource.remove(dataitem); 
     kWindow.close(); 
    }); 
2

UweB가 정확합니다. 파괴 이벤트에 연결할 수 없습니다. Kendo UI 코드 라이브러리에는 사용자 자신의 삭제 확인을위한 예제가 있습니다.

http://www.kendoui.com/code-library/web/grid/customize-the-delete-confirmation-dialog.aspx

연결된 코드 예제에서는 검도 창을 사용하고, 당신에게 모두와 예 아니오의 클릭 이벤트를 처리 할 수있는 방법을 제공합니다. 맞춤 삭제 메시지가 필요한 경우 여기에 코드 스 니펫이 있습니다.

$("#grid").kendoGrid({ 
    columns: [ 
     { 
      command: [{ name: "edit" }, { 
       name: "Delete", imageClass: "k-icon k-i-close", click: function (e) { 
        e.preventDefault(); 
        var dataItem = this.dataItem($(e.target).closest("tr")); 
        if (confirm('Do you really want to delete my favorite record?')) { 
         var dataSource = $("#grid").data("kendoGrid").dataSource; 
         dataSource.remove(dataItem); 
         dataSource.sync(); 
        } 
       } 
      }], title: " ", width: "200px" 
     } 
    ] 
}); 
0

위 예제를 모두 시도했지만 해결할 수 없었습니다. 간단합니다

//Add this line of code to the grid 
    columns.Command(command => command.Custom("Remove").Click("removeItem")); 
    //Java script function to remove 
     function removeItem(e) { 
     //Get the instance of the grid 
     var grid = $("#grid").data("kendoGrid"); 
     //Get the selected grid 
     var tr = $(e.target).closest("tr"); 
     //Get the item from the grid 
     var data = this.dataItem(tr); 
     //Remove the item from the datasource 
     grid.dataSource.remove(data); 
     //Sync it with the grid 
     dataSource.sync(); 
    }