Kendo MVC批量编辑更改行颜色或焦点

时间:2015-05-10 17:02:16

标签: kendo-ui kendo-grid kendo-asp.net-mvc

我是MVC的Kendo UI的新宝贝,我正在尝试在为网格进行批量编辑时自定义行颜色,我查看了互联网,但无法找到任何信息。编辑一个单元格进行批量编辑网格默认情况下,Kendo在单元格的左上角添加一个小红点,在编辑任何单元格之后我想要实现的是该记录更改的整行改变它的颜色。我想将行更改为绿色,例如,在单击“保存”之前,为用户提供更多可见性。如果有人可以帮助我,我真的会申请。

代码

@(Html.Kendo().Grid<MvcKendo.Models.Availablity>().Name("grid")

.Columns( columns => {
    columns.Bound(c => c.Id);
    columns.Bound(c => c.TimeFrom);
    columns.Bound(c => c.TimeTo);
})
.DataSource(datasource => datasource.Ajax().PageSize(5)
.Read("GetDataAvailablity","Home"))
.ClientDetailTemplateId("template")   
 )

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
        .Name("tabStrip_#=Id#")
        .SelectedIndex(0)
        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
        .Items(items =>
        {
            items.Add().Text("TimeSheet Details").Content(@<text>@TimeSheetDetails()</text>);             
        })
    .ToClientTemplate()
)

 @helper TimeSheetDetails()
 {
 @(Html.Kendo().Grid<MvcKendo.Models.TimeSheet>()
.Name("grid_#=Id#")
         .Events(e => {
             e.DataBound("onDataBound");
             e.Change("ChangeEvent");
         })
    .Columns(columns =>
    {
        columns.Bound(t => t.Id);
        columns.Bound(t => t.WardName);
    })
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .ToolBar(tb=>tb.Save())
    .DataSource(dataSource => dataSource
        .Ajax().Batch(true)
        .PageSize(5)
            .Model(model=>model.Id(x=>x.Id))
        .Read(read => read.Action("GetDataTimeSheet", "Home", new { Id = "#=Id#" }))
        .Update(update => update.Action("Editing_Update", "Home"))
        .Events(events => events.Error("error_handler"))

    )
.Pageable().Sortable().ToClientTemplate()
)
![enter image description here][2]}

1 个答案:

答案 0 :(得分:0)

您可以使用Kendo网格中的save事件来实现此目的

C#

.Events(events => events.Save("onSave")

的Javascript

function(e) {
    $(e.container).closest("tr").css("background-color","lightgreen");
 }

Here's the fiddle for the sample in JS