更新后如何通过颜色变化突出显示剑道网格单元答案

【问题标题】：How can i highlight the Kendo grid cell by color change after update更新后如何通过颜色变化突出显示剑道网格单元
【发布时间】：2014-10-10 10:31:29
【问题描述】：

我正在使用带有 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);
    })
 )
)

)

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

【问题讨论】：

标签： kendo-ui signalr kendo-grid kendo-asp.net-mvc

【解决方案1】：

我做过类似的事情。我不知道这对你有没有帮助。在您的默认视图模型中添加一个额外的属性，将“更新”作为布尔值说。现在每次更新一行时，将“已更新”设为真。

并在剑道网格中添加一个新的 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");
        }
    }
}

更新：我不知道你的逻辑。就您使用 cmets 而言，您想做一些类似在线股票交易网站的事情。无论如何，据我所知，如果您想连续突出显示单个单元格，请添加另一个额外的字段，例如“列”和“更新”；它可能是一个字符串。在这里，您标记要从后端放置背景颜色的单元格。假设我们将它的值设为“2”。

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")
}

如果您需要突出显示同一行上的多个单元格，请在 Column 中发送类似“1,2,3,5”的内容；其中 1、2、3 和 5 表示同一行的列号。在 ColumnToColor 进行一些字符串解析之后，将其放入 for 循环或其他东西和颜色；

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

【讨论】：

我认为这会改变行的背景颜色，但我只想通过闪烁更新行的更改颜色来通知，例如股票市场数据的变化。
谢谢马希布。非常期待您的回复。
抱歉耽误了队友。希望这对现在有所帮助。
嗨，Mahib，我试过这个，但它不适合我。可能是因为 SignalR，OnDatabound 事件（AJAX）没有触发或者可能是我没有正确理解它。无论如何，我只是通过 jquery 实现了它。我已经在这里发布了我的答案。

【解决方案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);

【讨论】：