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:

@(Html.Kendo().Grid<network>(Model)
    .Name("grid")
    .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))
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
                .Batch(true)
        .ServerOperation(false)
        .PageSize(10)
        .Read(read => read.Action("Editing_Read", "forensics"))
    ))

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

<script>

    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;
          }
      }
</script>

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s