title: Creating Custom Time Widget in GridMVC
body: <p>I am trying create Time widget to filter records by time in Grid MVC. i am able to see the control but it does not filter any records. here is the script. I have added script, view code for mvc grid and the index page as well. </p>
  
  <p><strong>Script</strong></p>
  
  <pre><code>function TimeWidget() {
  
  this.getAssociatedTypes = function () {
      return ["TimeFilterWidget"];
  };
  this.onShow = function () {
  };
  
  this.showClearFilterButton = function () {
      return true;
  };
  
  this.onRender = function (container, lang, typeName, values, cb, data) {
      //store parameters:
      this.cb = cb;
      this.container = container;
      this.lang = lang;
  
      //this filterwidget demo supports only 1 filter value for column column
      this.value = values.length &gt; 0 ? values[0] : { filterType: 1, filterValue: "" };
  
      this.renderWidget(); //onRender filter widget
      //this.loadCustomers(); //load customer's list from the server
      this.registerEvents(); //handle events
  };
  
  this.renderWidget = function () {
      var html = '\&lt;p&gt;Select Time to filter:&lt;/p&gt;\
                  &lt;p&gt;&lt;input class="time" type="time" id="tminput"/&gt;&lt;/p&gt;\
                  ';
      this.container.append(html);
  };
  
  this.registerEvents = function () {                
      var x = document.getElementById("tminput");
      x.addEventListener("blur", myBlurFunction, true);        
  };
  
  function myBlurFunction() {
      var $context = this;
      var values = [{ filterValue: $(this).val(), filterType: 1 /* Equals */ }];        
      $context.cb(values);
  }
  
  }
  </code></pre>
  
  <p><strong>Grid View</strong></p>
  
  <pre><code>@using GridMvc.Html
  @using GridMvc.Sorting
  @model IEnumerable&lt;GridMvc.Site.Logging&gt;
  
  @Html.Grid(Model).Named("ordersGrid").Columns(columns =&gt;
  {
      /* Adding "OrderID" column: */
  
      columns.Add(o =&gt; o.ID)
             .Titled("Number")
             .SetWidth(100);
      columns.Add(o =&gt; o.DateTime, "Date")
              .Titled("Date")
              .SortInitialDirection(GridSortDirection.Descending)
              .Format("{0:dd/MM/yyyy}")
              .SetWidth(110);
      columns.Add(o =&gt; o.DateTime, "Time")
              .Titled("Time")
              .SortInitialDirection(GridSortDirection.Descending)
              .Format("{0:hh:mm tt}")                
              .SetWidth(110)
              .SetFilterWidgetType("TimeFilterWidget");
      columns.Add(o =&gt; o.Type)
             .Titled("Type")
             .SetWidth(150)
             .ThenSortByDescending(o =&gt; o.ID)
             .SetFilterWidgetType("TypeFilterWidget");
      columns.Add(o =&gt; o.Description)
             .Titled("Description")
             .SetWidth(250);
      columns.Add(o =&gt; o.Reference)
              .Titled("Reference")
              .SetWidth(150)
              .Css("hidden-xs"); //hide on phones
      columns.Add(o =&gt; o.Response)
              .Titled("Response")
              .SetWidth(150)
              .Css("hidden-xs"); //hide on phones        
  
  
  }).WithPaging(15).Sortable().Filterable().WithMultipleFilters()
  </code></pre>
  
  <p><strong>Index View</strong></p>
  
  <pre><code>&lt;script&gt;
  $(function () {
      pageGrids.ordersGrid.addFilterWidget(new TypeWidget());
      pageGrids.ordersGrid.addFilterWidget(new TimeWidget());
  });
  &lt;/script&gt;
  </code></pre>