Oh … the Nightmare of Javascript!

I’ve posted before that many years ago I thought that Javascript would vanish, as it would be fossilize in browers to a certain version, and we could update it easy. But, as we’ve all seen, it has been the savior of the port of application to the Web. For a Web Developer, it’s actually a nightmare, where often you have limited debug tools to see where things are going wrong.

Colouring a grid cell

So here’s a little tip, if you’re interested. I have been using Kendo Javascript, and wanted to colour a grid cell. So I added a ClientTemplate onto the row I want to colour:

    .Columns(columns =>
        columns.Bound(p => p.No).Width(20);
        columns.Bound(p => p.Type).Width(40)
            .ClientTemplate("#= onDataBound(Type)#");
        columns.Bound(p => p.Flags).Width(40);
        columns.Bound(p => p.SourceIP).Width(40);
        columns.Bound(p => p.SourcePort).Width(40);
        columns.Bound(p => p.DestIP).Width(40);
        columns.Bound(p => p.DestPort).Width(40);
        columns.Bound(p => p.Seq).Width(40);
        columns.Bound(p => p.Ack).Width(40);
        columns.Command(command => command.Custom("Details").Click("showDetails")).Width(20); 
    .Events(events => events.Change("showDetails")) 

    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Editing_Read", "forensics"))

which calls up a function which colours the grid cell, dependent on the contents of the cell:


    function onDataBound(cell) {
        if (cell== "TCP") {
            return "<div style='background: pink'><b>" + cell+ "</b> </div>";
        else if (cell== "ARP") {
            return "<div style='background: lightgreen'><b>" + cell+ "</b> </div>";
        else if (cell== "UDP") {
            return "<div style='background: LightBlue'><b>" + cell+ "</b> </div>";
        else if (cell== "ICMP") {
            return "<div style='background: LightGray'><b>" + cell+ "</b> </div>";
          else {
            return cell;

If you want to see it in action it is here.

Sample screen shot… and that’s it … but you wouldn’t believe the hassle in just getting this to work!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s