Kendo Grid ClientTemplate runs before the data is rendered

Viewed 368

At least that's my best shot. I have the following 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))
            )

where my model comes from my controller as:

@model IEnumerable<Bl.ViewModels.MarketGridViewModel>

Please note that I only have the div inside the column cell to be able to identify them uniquely inside the JS when the function triggers. But as it seems the function will not be called when the div is rendered - so that the containing 'td' has already been rendered but before that as follows:

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

I think the purpose is pretty clear for you now. I wish to colorize the individual cells of the Color column based on the data returned from the database through the controller dynamically. Well this approach doesn't work, as it seems to me that the javascript function is invoked before the actual table for the grid is rendered thus neither divContext nor tdContext exist, or better those selectors are returning the following objects:

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

Now, if I execute the above javascript manually inside developer tool's console this all works nice and expected. I've tried numerous approaches without any success. Any idea how I could achieve this behaviour?

Thanks in advance!

1 Answers
Related