Using javascript variable in ASP.NET View with WebGrid Column

Question

I am trying to display a javascript variable in my WebGrid column. Use of javascript is must as I am finding the corresponding client side date-time. I created my webgrid in cshtml view head

WebGrid grid = new WebGrid(Model,...)

Then inside begin form I try populate it (with date manupulation) as follows:-

grid.Table(
    tableStyle: "table table-bordered",
    columns: grid.Columns(
        grid.Column("FirstCol", "First Column"),            
        grid.Column("SometTime", "Local Time",
            format: @<text>
            @{
                var sDate="";
                <script>                        
                    var isoDate = '@item.SometTime.ToString("o")';
                    var date = new Date(isoDate);
                    if(isNaN(date.getTime()))
                        date = new Date(isoDate.slice(0, isoDate.lastIndexOf(".")).replace(/-/g, '/'));
                    sDate = date.toLocaleString('en-US', { hour12: true })                                                
                </script>                   
                @sDate    <<<<  I like this sDate to be part of column data
            }
            </text>),
        grid.Column("LastCol", "Last Column")
        ....
        ...

The sDate is what I like to show in that particular column for all rows. I confirmed using chrome debugger that the value in sDate is correct and I got it what I like to display. But I am struggling to display the value. It is empty for above. I also tried the below:-

        grid.Table(
    tableStyle: "table table-bordered",
    columns: grid.Columns(
        grid.Column("FirstCol", "First Column"),            
        grid.Column("SometTime", "Local Time",
            format: @<text>
            @{
                var cDate="";
                <script>                        
                    var sDate="";
                    var isoDate = '@item.SometTime.ToString("o")';
                    var date = new Date(isoDate);
                    if(isNaN(date.getTime()))
                        date = new Date(isoDate.slice(0, isoDate.lastIndexOf(".")).replace(/-/g, '/'));
                    sDate = date.toLocaleString('en-US', { hour12: true })                                                
                    @cDate = sDate;
                </script>                   
                @cDate    <<<<  I like this sDate to be part of column data
            }
            </text>),
        grid.Column("LastCol", "Last Column")

That also didn't worked. What I am doing wrong? What is correct and simple way to achieve the same?

Answer 1

Ah..Finally I did it own, The approach is simple by letting fill the webgrid with the server side data and then under script on page on onready event when all data is set and page is ready, i called the jquery to iterate the table and do the javascript manupulation. So my webgrid is

grid.Table(
tableStyle: "table table-bordered",
columns: grid.Columns(
    grid.Column("FirstCol", "First Column"),            
    grid.Column("SometTime", "Local Time"),
    grid.Column("LastCol", "Last Column")
    ....
    ...

Then the script at end of page is like

<script>
        jQuery(document).ready(function () {
    $("td").each(function (index, el) {
        if (this.cellIndex == 1) {
            var sDate = $(el).html();
            var date = new Date(sDate)
            if(isNaN(date.getTime()))
                date = new Date(isoDate.slice(0, sDate.lastIndexOf(".")).replace(/-/g, '/'));
            $(el).html(date.toLocaleString('en-US', { hour12: true }));
        }
    });
});