Kendo Grid Calculated Variable

Question

I'd like to add a calculated field to the Kendo grid I am using. Here is a snip of my code:

        @{Html.Kendo().Grid<StatuteMaintenance.Data.Statute>()
              .Name("mainGrid")
              .Columns(c =>
              {
                  c.Bound(e => e.Statute_Number);
                  c.Bound(e => e.Statute_Description);
                  c.Bound(e => e.Effective_Start_Date).Format("{0:MM/dd/yyyy}");
                  c.Bound(e => e.Expiration_Date).Format("{0:MM/dd/yyyy}");
                  c.Bound(e => e.VIO_Type);
                  c.Bound(e => e.Fine_Amount);
                  c.Template(e => { }).ClientTemplate("#=calculate(Exipration_Date)#");//should be handled in model. 
                  if (Roles.IsUserInRole("NSP\\IT-Development All")) { c.Command(command => { command.Edit(); }); }
              })
              .Editable(editable => editable.Mode(GridEditMode.InLine))
              .Sortable()
              .Filterable()
              .Pageable(p => p
              .Refresh(true)
              .PageSizes(true)
            )

                .DataSource(d => d
                .Ajax()
                .Model(m =>
                {
                    m.Id(e => e.TreeID);
                    m.Field(e => e.Statute_Number).Editable(false);
                    m.Field(e => e.VIO_Type).Editable(true);
                    m.Field(e => e.Statute_Description).Editable(false);
                    m.Field(e => e.Effective_Start_Date).Editable(false);
                    m.Field(e => e.Expiration_Date).Editable(false);
                    //m.Field(e => e.CurrentlyEffective).Editable(false);   
                }



                )
                .Read(r => r.Action("VioTypeGridDataSource", "VIOType"))
                .Update(r => r.Action("VioTypeGridUpdate", "VIOType"))
                .Sort(s => s.Add(e => e.Statute_Number).Ascending())
            )
                .Render();

        }

<script>
function calculate(s) {

    console.log(s);
    result = "";
    if (s.Expiration_Date < DateTime.Now) {
        result = "No"
    }
    else {
        result = "Yes"
    }
    return result;
}

I get a run time error that "s" is undefined.

Am I going about this correctly? I've looked through other examples and none have a "DateTime" in their calculations.

Answer 1

Expiration date was not spelled properly in template col. I Have commented it out . Make sure it is spelled as it is in the model Statute

All the examples that use client-template work with Bound column i have done same in code snippet below. you can also uncomment your line and correct the spelling of expiration and see if your idea of not attaching with bound col works other wise use the existing snippet code is valid and working.

Also i adjusted the kendo grid declaration little bit.

  @(Html.Kendo().Grid<StatuteMaintenance.Data.Statute>()
                  .Name("mainGrid")
                  .Columns(c =>
                  {
                      c.Bound(e => e.Statute_Number);
                      c.Bound(e => e.Statute_Description);
                      c.Bound(e => e.Effective_Start_Date).Format("{0:MM/dd/yyyy}");
                      c.Bound(e => e.Expiration_Date).Format("{0:MM/dd/yyyy}");
                      c.Bound(e => e.VIO_Type);
                      c.Bound(e => e.Fine_Amount);
//c.Template(e => { }).ClientTemplate("#=calculate(Expiration_Date)#");//should //be handled in model. 
                      c.Bound( e=>e.Expiration_Date).ClientTemplate("#=calculate(Expiration_Date)#"); 
                      if (Roles.IsUserInRole("NSP\\IT-Development All")) { c.Command(command => { command.Edit(); }); }
                  })
                  .Editable(editable => editable.Mode(GridEditMode.InLine))
                  .Sortable()
                  .Filterable()
                  .Pageable(p => p
                  .Refresh(true)
                  .PageSizes(true)
                )
    
                    .DataSource(d => d
                    .Ajax()
                    .Model(m =>
                    {
                        m.Id(e => e.TreeID);
                        m.Field(e => e.Statute_Number).Editable(false);
                        m.Field(e => e.VIO_Type).Editable(true);
                        m.Field(e => e.Statute_Description).Editable(false);
                        m.Field(e => e.Effective_Start_Date).Editable(false);
                        m.Field(e => e.Expiration_Date).Editable(false);
                        //m.Field(e => e.CurrentlyEffective).Editable(false);   
                    }
    
    
    
                    )
                    .Read(r => r.Action("VioTypeGridDataSource", "VIOType"))
                    .Update(r => r.Action("VioTypeGridUpdate", "VIOType"))
                    .Sort(s => s.Add(e => e.Statute_Number).Ascending())
                )
                    .Render();
    
            )
    
    
    
    <script>
    function calculate(s) {
    
        console.log(s);

       // result = "";
      //  if (s.Expiration_Date < DateTime.Now) {
         //   result = "No"
        //}
       // else {
         //   result = "Yes"
        //}
       // return result;
    }

Look into this sample done using HTML5

How to pass value to javascript function on grid using ClientTemplate using HTML5 ?