2017-05-16 7 views
0

다음 설정으로 된 DevExpress 그리드 뷰가 있습니다.GridView 셀에서 JavaScript 함수 호출

settings.Name = "DetailGridView"; 

// this calls DetailGridView.StartEditRow() on client side 
settings.ClientSideEvents.RowClick = "Fn.startEditingRow"; 
settings.SettingsEditing.Mode = DevExpress.Web.GridViewEditingMode.Inline; 

은 내가 편의상이 많은 다른 설정을 제거하지만, 내가 관련된 다른 설정을 보여줄 필요가 있다고 생각 물어왔다.

이제 각 셀 클릭시 JavaScript 함수를 호출하고 싶습니다. 필드 이름 (2 인자)의 값을 콘솔에 JS 기능을 Fn.DetailOnlyOnCellClick() 인쇄를 내가 this SO answer에 따라,이 설정을 추가 한 수행 및 this DevExpress thread

settings.HtmlDataCellPrepared += (sender, e) => 
{ 
    string onClickFunctionJS = "Fn.DetailOnlyOnCellClick({0},'{1}');"; 
    e.Cell.Attributes.Add("onclick", String.Format(onClickFunctionJS, e.VisibleIndex, e.DataColumn.FieldName)); 
}; 

합니다. 그러나 행을 처음 클릭 할 때 클릭 한 셀의 필드 이름 만 인쇄합니다. 그런 다음 선택한 행의 다른 셀을 클릭해도 더 이상 함수 Fn.DetailOnlyOnCellClick()이 트리거되지 않습니다. 나는 내가 ClientSideEvents.RowClick을 끄면 잘 동작하는 것을 보았습니다. 그러나 다른 이유로 그것을 끌 수는 없습니다. ClientSideEvents.RowClick을 유지하면서 사용자가 클릭하는 셀을 어떻게 얻을 수 있습니까?

답변

0

DevExpress 지원 센터 덕분에 문제가 해결되었습니다. 먼저 settings.HtmlDataCellPrepared을 사용할 수 없습니다. 내가 언급 한 것처럼 행을 클릭하면 격자보기가 편집 모드로 들어가고 편집 모드에서는 settings.HtmlDataCellPrepared이 내 상황에 필요한 방식으로 작동하지 않아야하기 때문입니다.

settings.CellEditorInitialize = (s, e) => 
{ 
    var elementEditor = e.Editor; 
    string onClickFunctionJS = "DetailOnlyOnCellClick({0},'{1}');"; 
    DevExpress.Web.Rendering.GridViewTableInlineEditorCell cell = 
     elementEditor.Parent as DevExpress.Web.Rendering.GridViewTableInlineEditorCell; 

    cell.Attributes.Add("onclick", 
     String.Format(onClickFunctionJS, e.VisibleIndex, e.Column.FieldName)); 
}; 

이 코드는 모든 다른 제어를 위해 잘 작동 : 그래서 나는이 코드를 사용하기 시작했다. 필드가 체크 박스 인 경우에만 셀을 사용할 수 없습니다. 이 문제를 해결하기 위해 체크 박스 컨트롤에이 코드를 사용했습니다.

string func = String.Format(
    "ASPxClientUtils.AttachEventToElement(s.GetMainElement(), 'click', function() {{ {0} }})", 
     String.Format(onClickFunctionJS, e.VisibleIndex, e.Column.FieldName)); 

(elementEditor as ASPxCheckBox).ClientSideEvents.Init = String.Format("function(s,e){{ {0}; }}", func); 

이 코드는 완벽하게 작동합니다. 사용하는 두 가지 방법에

링크 :


PS : 모두 여기 보여 주었다 이러한 접근은 DevExpress의 전문가로부터, 그리고 나는이있어 DevExpress 지원 센터의 답변 면허로 문제를 해결할 수있게되면 티켓을 공개하게됩니다.