SignalR 이벤트가 발생하지 않는 Telerik Mvc 그리드

Question

SignalR로 묶인 Telerik MVC 그리드가 있습니다. 지정된 열의 값에 따라 조건부로 레코드의 색을 지정하려고합니다 (EventHexCode). 이렇게하려면 DataBound에서 이벤트를 발생시켜야합니다. 나는 AJAX 데이터 소스와 함께 이벤트를 시작하는 데 아무런 문제없이 이것을 여러 번 사용했다. 하지만 내 인생에서 DataRound 이벤트를 SignalR 데이터 소스로 발생시킬 수는 없습니다.

내가 과거에 이것을 달성하기 위해이 방법을 사용했습니다 : 여기

@(Html.Kendo().Grid<DirectOrderTracker.Models.ViewModels.TempOrderViewModel>() 
     .Name("grid") 
     .ToolBar(toolBar => 
     { 
      toolBar.Create(); 
      // toolBar.Save(); 
     }) 
     .Filterable(ftb => 
     { 
      ftb.Extra(false); 
      ftb.Operators(op => 
      { 
       op.ForString(str => 
       { 
        str.Clear().Contains("Contains"); 
       }); 
      }); 
     }) 
     .Editable(editable => editable.Mode(GridEditMode.InCell)) 
     .Pageable() 
     .Events(e => { e.DataBound("onDataBound"); }) 
     .Navigatable() 
     .Sortable() 
     .Scrollable() 
     .HtmlAttributes(new { style = "height:650px;" }) 
     .Columns(columns => 
     { 
      columns.Bound(p => p.TempOrderID).Hidden(); 
      columns.Bound(p => p.EventHexCode).ClientTemplate("<span style='display: inline-block; width: 100%; height: 100%; background-color: #= EventHexCode #'>&nbsp;</span>").EditorTemplateName("ColorPicker").Width(120); 
      columns.ForeignKey(p => p.CustCode, (System.Collections.IEnumerable)ViewData["defaultCustCode"], "CustCode", "CustDesc").Title("Customer").EditorTemplateName("CustDescAutoComplete").Width(180); 
      columns.Bound(p => p.PONum).Title("Our PO#").Width(90); 
      columns.Bound(p => p.CustRef).Title("Cust Ref#").Width(90); 
      columns.Bound(p => p.ApptTime).Title("Appt").Width(70).Filterable(x => x.UI(GridFilterUIRole.TimePicker)); 
      columns.Bound(p => p.Qty).Width(65).Filterable(false); 
      columns.ForeignKey(p => p.ProdNum, (System.Collections.IEnumerable)ViewData["defaultProdNum"], "ProdNum", "ProdDesc").Width(130).Title("Size/Spec").EditorTemplateName("ProdNumAutoComplete"); 
      columns.Bound(p => p.SalePrice).Format("{0:c}").Width(75).Title("Price").Filterable(false); 
      columns.Bound(p => p.SONum).Title("Our SO#").Width(120); 
      columns.Bound(p => p.DueDate).Format("{0:MM/dd/yyyy}").Width(120).Title("Due Date"); 
      columns.Bound(p => p.LoadDate).Format("{0:MM/dd/yyyy}").Width(120).Title("Load Date"); 
      columns.ForeignKey(p => p.VendCode, (System.Collections.IEnumerable)ViewData["defaultVendCode"], "VendCode", "VendDesc").Title("Vendor").EditorTemplateName("VendDescAutoComplete").Width(130); 
      columns.Bound(p => p.Cost).Format("{0:c}").Width(75).Title("Cost").Filterable(false); 
      columns.Bound(p => p.Manifest).Title("Mani").Width(55); 
      columns.Bound(p => p.VendPO).Title("Ven PO#").Width(120); 
      columns.Bound(p => p.VendRef).Title("Ven Ref#").Width(120); 
      columns.ForeignKey(p => p.CarrCode, (System.Collections.IEnumerable)ViewData["defaultCarrCode"], "CarrCode", "CarrDesc").EditorTemplateName("CarrDescAutoComplete").Title("Truck").Width(120); 
      columns.Bound(p => p.FrghtRate).Format("{0:c}").Width(75).Title("Frght").Filterable(false); 
      columns.Bound(p => p.Comment).Title("Comment").Width(120); 
      columns.Command(command => 
      { 
       // command.Edit(); 
       command.Destroy(); 
      }).Width(110); 
     }) 
     .DataSource(dataSource => dataSource 
             .SignalR() 
             .AutoSync(true) 
             .Events(events => events.Push(@<text> 
              function(e) { 
              // var notification = $("#notification").data("kendoNotification"); 
              // notification.success(e.type); 
              } 
             </text>)) 
              .PageSize(24) 
              .Transport(tr => tr 
               .Promise("hubStart") 
               .Hub("hub") 
               .Client(c => c 
                 .Read("read") 
                 .Create("create") 
                 .Update("update") 
                 .Destroy("destroy")) 
               .Server(s => s 
                 .Read("read") 
                 .Create("create") 
                 .Update("update") 
                 .Destroy("destroy")) 
              ) 
              .Schema(schema => schema 
              .Model(model => 
              { 
               model.Id(p => p.TempOrderID); 
               model.Field(p => p.CustCode).Editable(true); 
               model.Field(p => p.DueDate).Editable(true); 
               model.Field(p => p.LoadDate).Editable(true); 
               model.Field(p => p.ProdNum).Editable(true); 
               model.Field(p => p.Qty).Editable(true); 
               model.Field(p => p.CarrCode); 
               model.Field(p => p.VendCode).Editable(true); 
               model.Field(p => p.SalePrice).Editable(true); 
              } 
              )))) 

는 자바 스크립트입니다 : 여기 https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values#iterate-the-table-rows

내이다

<script> 
    function onDataBound(arg) { 
    alert("Grid data bound"); 
    } 
</script> 

가 요약하면, I 조건부로 행의 색을 찾고 싶습니다. 이렇게하려면 DataBound 이벤트를 발생시키고 테이블을 통과하여 CSS를 업데이트해야합니다. 너희들은 어떻게 생각하니?

Answer 1

오케이, 매우 어리석은 실수. 이 프로젝트에는 모두 동일한 자바 스크립트 파일을 공유하는 다중 그리드가 있습니다. 나는 이미 'onDataBound'함수를 선언했다는 것을 알지 못했다.

그리드 이벤트의 이름을 'onDataBoundTempOrders'로 변경하고 해당 자바 스크립트를 작성했습니다.

.Events(events => events.DataBound("onDataBoundTempOrders")) 

자바 스크립트 : 사용자가 진수 색상을 선택

function onDataBoundTempOrders(e) { 
    var grid = this; 
    grid.tbody.find('>tr').each(function() { 
     var dataItem = grid.dataItem(this); 
     $(this).css("background-color", dataItem.EventHexCode); 
    }); 

    $("#grid tr.k-alt").removeClass("k-alt"); 
} 

그래서 지금 때,이 테이블에 저장되어 여기

궁극적으로 솔루션입니다. 16 진 코드는 jquery를 통해 테이블 ​​행에 적용됩니다. 챔피언처럼 작동합니다.