Question

至少那是我最好的一击。我有以下Kendo Grid：

@(Html.Kendo().Grid(Model)
              .Name("MarketsGrid")
              .Columns(columns =>
              {
                  columns.Bound(mc => mc.MarketId);
                  columns.Bound(mc => mc.MarketName);
                  columns.Bound(mc => mc.MarketColor).ClientTemplate("<div id=\"colorcell#= data.MarketId #\">#= colorizeGridcell(data) #</div>");
                  columns.Command(cmd => cmd.Custom("EditMarket").Click("editMarket"));
              })
              .DataSource(dataSource => dataSource.Ajax().ServerOperation(false))
            )

我的模型来自我的控制器：

@model IEnumerable<Bl.ViewModels.MarketGridViewModel>

请注意，我只在列单元格内部有div，以便在函数触发时能够在JS内部唯一地识别它们。但是，因为看起来在渲染div时不会调用该函数 - 所以包含＆＃39; td＆＃39;已经呈现但在此之前如下：

function colorizeGridcell(data) {
    var selector = "#colorcell" + data['MarketId'];
    var divContext = $(selector);
    var tdContext = divContext.parent("td");
    tdContext.css({
        "background-color": data['MarketColor'],
        "padding": "5px 5px 5px 5px",
        "background-clip": "content-box"
    });
}

我认为现在的目的非常明确。我希望根据数据库通过控制器动态返回的数据，对Color列的各个单元格进行着色。这种方法不起作用，因为在我看来，在呈现网格的实际表之前调用javascript函数，因此既不存在divContext也不存在tdContext，或者更好的是那些选择器返回以下对象：

{
    "context": {
        "__IE_DEVTOOLBAR_CONSOLE_EVAL_ERROR": false,
        "_html5shiv": 1,
        "jQuery19101523141442672757": 4
    },
   "selected": "#colorcell1"
}

现在，如果我在开发人员工具的控制台中手动执行上述javascript，这一切都很好并且预期。我尝试过很多方法而没有任何成功。知道如何实现这种行为吗？

提前致谢！

Answer 1

在渲染最终表格之前应用ClientTemplate。您需要将dataBound事件与以下js一起使用：

function onDataBound(e) {
        var columns = e.sender.columns;

        var rows = e.sender.tbody.children();
        for (var ri = 0; ri < rows.length; ++ri) {
            var row = $(rows[ri]);
            var cell = row.children().eq(2);
            cell.css({
                "background-color": e.sender.dataItem(row)['MarketColor']
            });
        }
    }

这应符合您的需求。

Kendo Grid ClientTemplate在呈现数据之前运行

1 个答案: