Question

我正在使用带有MVC和SignalR的Kendo Ui Grid。我可以使用SignalR在网格上成功执行CRUD操作。我想通过突出显示（通过更改单元格颜色）更新的单元格来通知客户。如何使用以下代码实现此目的：

@(Html.Kendo().Grid<Webapplication1.Models.ShipViewModel>()
.Name("ShipGrid")
.Columns(c =>{
    c.Bound(m => m.Id).Hidden();
    c.Bound(m => m.LocationViewModel)
        .Title("Location1");
    c.Bound(m => m.Location2ViewModel)
        .Title("Location2");
    c.Bound(m => m.boxSent);
    c.Command(p =>
    {
        p.Edit().Text(" ").UpdateText(" ").CancelText(" ");
        p.Destroy().Text(" ").HtmlAttributes(new { @title = "Cancel" });
    });
})
.ToolBar(toolbar =>
{
    toolbar.Create().Text("").HtmlAttributes(new { @title = "Add" });
})
.Editable(editable => editable
    .DisplayDeleteConfirmation("DELETE.")
    .Mode(Kendo.Mvc.UI.GridEditMode.PopUp)
    .TemplateName("abcEditor")
    )
.Events(events =>
{
    events.Edit("edit");
}) 
.DataSource(dataSource => dataSource 
    .SignalR()        
    .Transport(tr => tr
        .Promise("hubStart")
        .Hub("mainHub")
        .Client(c => c.Read("abc_Read").Create("abc_Insert").Update("abc_Update").Destroy("abc_Delete"))
        .Server(s => s.Read("abc_Read").Create("abc_Insert").Update("abc_Update").Destroy("abc_Delete")))
  .Schema(schema => schema  
    .Model(m => {
        m.Id(p => p.Id);
        m.Field(p => p.Location1ViewModel).DefaultValue(ViewData["DefaultLocation1"] as Webapplication1.Models.Location1ViewModel);
        m.Field(p => p.Location2ViewModel).DefaultValue(ViewData["DefaultLocation2"] as Webapplication1.Models.DeliveryLocationViewModel);
    })
 )
)

）

我想突出显示正在更新的单元格。像股市数据闪烁的东西。我怎样才能做到这一点？

Answer 1

我做过类似的事情。我不知道这有助于你。在默认视图模型中添加一个额外的属性，比如＆＃34;更新＆＃34;作为布尔值。现在，每次更新一行时，请输入＆＃34;更新＆＃34;作为一个真实的。

在kendo网格中添加一个新的dataBound事件。

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

现在JS上使用如下内容;

function onDataBound(arg) {

    var itemsInActivityGrid = $("#ShippingGrid").data().kendoGrid.dataSource.data().length;

    for (i = 0; i < itemsInActivityGrid; i++) {
        if ($("#ShippingGrid").data().kendoGrid.dataSource.data()[i].Updated == true) {
            $("#ShippingGrid .k-grid-content tr[data-uid='" + $("#ShippingGrid").data().kendoGrid.dataSource.data()[i].uid + "']").css("background-color", "orange");
        }
    }
}

更新：我不知道你的逻辑。至于你发表评论，你想做一些像在线股票交易网站。无论如何，尽我所能，如果你想连续突出显示单个单元格，请添加另一个额外的字段说＆＃34;列＆＃34;随着＆＃34;更新＆＃34 ;;它可能是一个字符串。在这里，您可以标记要从后端放置背景颜色的单元格。假设我们已经将它的价值视为＆＃34; 2＆＃34;。

for (i = 0; i < itemsInActivityGrid; i++) 
{
    var TableUID = $("#ShippingGrid").data().kendoGrid.dataSource.data()[i].uid;

    var TableToColour = $("#ShippingGrid .k-grid-content tr[data-uid='" + TableUID + "']").parent().parent()[0];

    var ColumnToColor = $("#ShippingGrid").data().kendoGrid.dataSource.data()[i].Column;

    $(TableToColour.rows[0].cells[" + ColumnToColor + "]).select().attr("style","background-color:blue")
}

如果您需要突出显示同一行中的多个单元格，请在列中发送类似＆＃34; 1,2,3,5＆＃34 ;;其中1,2,3和5表示同一行上的列号。在ColumnToColor执行一些字符串解析之后，将其放入for循环或其他颜色;

希望这会有所帮助。谢谢。

Answer 2

我已经实现了以下功能，并且工作正常：

在我的.cshtml页面

myHub.client.highlightRow = function (id) {
        var data = $("#MyGrid").data("kendoGrid").dataSource.data();
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            if (dataItem.id == id) {
                //alert(dataItem.uid);
                $("#MyGrid").data("kendoGrid").tbody.find("tr[data-uid=" + dataItem.uid + "]").effect("highlight", { color: "#f35800" }, 3000);
            }
        }
    };

在我的SignalR Hub类的更新/插入方法中：

Clients.Others.highlightRow(mygridViewModel.Id);

如何在更新后通过颜色更改突出显示Kendo网格单元格

2 个答案: