Как я могу выделить ячейку сетки Кендо изменением цвета после обновления

Я использую Kendo Ui Grid с MVC и SignalR. Я могу успешно выполнять операции CRUD в сетке с помощью SignalR. Я хотел бы уведомить клиентов, выделив (изменив цвет ячейки) обновленную ячейку. Как я могу добиться этого с помощью следующего кода:

@(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-grid signalr kendo-ui kendo-asp.net-mvc
person giparekh    schedule 10.10.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я делал подобные вещи. Я не знаю, поможет ли это тебе. В вашей модели представления по умолчанию добавьте дополнительное свойство, скажем, «Обновлено» как логическое значение. Теперь каждый раз, когда вы обновляете строку, ставьте «Обновлено» как истину.

И в сетке кендо добавьте новое событие 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");
        }
    }
}

Обновление: я не понимаю вашей логики. Что касается комментариев, вы хотите сделать что-то вроде онлайн-сайтов по обмену акциями. В любом случае, насколько я мог, если вы хотите выделить отдельную ячейку в строке, добавьте еще одно дополнительное поле, например «Столбец» вместе с «Обновлено»; это может быть строка. Здесь вы отмечаете, в какую ячейку вы хотите поместить фоновый цвет из бэкэнда. Скажем, у нас есть значение "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")
}

В случае, если вам нужно выделить несколько ячеек в одной строке, в столбце отправьте что-то вроде «1,2,3,5»; где 1, 2, 3 и 5 представляют номера столбцов в той же строке. И после того, как ColumnToColor проанализирует строку, поместите ее в цикл for или что-то в этом роде и закрасьте;

Надеюсь это поможет. Спасибо.

person Mahib    schedule 11.10.2014
comment
Я думаю, что это изменит цвет фона строки, но я хочу просто уведомить, высветив измененный цвет обновленной строки, как изменение данных фондового рынка. - person giparekh; 13.10.2014
comment
Спасибо, Махиб. Отчаянно жду вашего ответа. - person giparekh; 17.10.2014
comment
Извини за задержку дружище. Надеюсь, это поможет сейчас. - person Mahib; 21.10.2014
comment
Привет, Махиб, я пробовал это, но у меня это не работает. Может быть, из-за SignalR событие OnDatabound (AJAX) не срабатывает, или, может быть, я неправильно его понимаю. Во всяком случае, я добился этого просто с помощью jquery. Я разместил свой ответ здесь. - person giparekh; 28.10.2014

arrow_upward
2
arrow_downward

Я добился этого, как показано ниже, и он работает нормально:

на моей странице .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);
person giparekh    schedule 28.10.2014