Multiple Grid Filters Throwing String Error

[Allan]

Hi there,

I set up my grid to use multiple grid filters which are combo boxes.  These filters allow you to refine your displayed data however there is a slight problem when using them.  Initially they work fine but when you use them in conjunction with one another you get an error

System.FormatException: String was not recognized as a valid DateTime.

I made 4 filters, 3 of them are string values and 1 of them is a datetime (see below).

@(Html.Kendo().ComboBox()
       .Name("periods")
       .Suggest(true)
       .Filter("contains")
       .DataTextField("Text")
       .DataValueField("Value")
       .Events(e => e.Change("filterChange"))
       .BindTo(new List<SelectListItem>() {
             new SelectListItem() {
                   Text = "All",
                   Value = "30000"
             },
             new SelectListItem() {
                   Text = "3 Months",
                   Value = "90"
             },
             new SelectListItem() {
                   Text = "21 Days",
                   Value = "21"
             }}))

@(Html.Kendo().ComboBox()
     .Name("locations")
     .Placeholder("-- Filter Region --")
     .Suggest(true)
     .Filter("contains")
     .DataTextField("Text")
     .DataValueField("Value")
     .AutoBind(false)
     .Events(e => e.Change("filterChange"))
     .BindTo(new List<SelectListItem>() {
         new SelectListItem() {
           Text = "Aberdeen",
           Value = "1"
         },
         new SelectListItem() {
           Text = "Norway",
           Value = "2"
         },
         new SelectListItem() {
           Text = "Southern Sector",
           Value = "3"
         },
         new SelectListItem() {
           Text = "North Sea",
           Value = "4"
         },
         new SelectListItem() {
           Text = "Brazil",
           Value = "7"
         },
         new SelectListItem() {
           Text = "Other",
           Value = "8"
         },
         new SelectListItem() {
           Text = "All",
           Value = ""
         }}))

@(Html.Kendo().ComboBox()
    .Name("owners")
    .Placeholder("-- Filter Owner --")
    .Suggest(true)
    .Filter("contains")
    .DataTextField("company_name")
    .DataValueField("company_name")
    .AutoBind(false)
    .Events(e => e.Change("filterChange"))
    .DataSource(ds =>
        {
          ds.Read("toolbar_Owners", "Home");
        }))

@(Html.Kendo().ComboBox()
    .Name("vessel_types")
    .Placeholder("-- Select Type --")
    .Suggest(true)
    .Filter("contains")
    .DataTextField("spot_name")
    .DataValueField("spot_name")
    .AutoBind(false)
    .Events(e => e.Change("filterChange"))
    .DataSource(ds =>
        {
          ds.Read("toolbar_Types", "Home");
        }))

If you filter on PERIODS and REGION there is no error at all.  If you filter on PERIODS and any other filter the above error regarding datetime is thrown.  Here is the javascript that handles the filters:

function filterChange() {
     var filters = [];
     var grid = $('#Grid').data('kendoGrid');
     var ddl_owners = $("#owners").getKendoComboBox().value();
     var ddl_region = $("#locations").getKendoComboBox().value();
     var ddl_types = $("#vessel_types").getKendoComboBox().value();
     var ddl_periods = $("#periods").getKendoComboBox().value();
     var value = this.value();

         //Convert value of dropdown to int
         intDays = parseInt(value),
         today = new Date(),
         addDays = ddl_periods.value;

     today.setDate(today.getDate() + intDays);
     today.setHours(0, 0, 0, 0);


     if (ddl_owners) {
         filters.push(
             {
                 field: "owner_company",
                 operator: "eq",
                 value: ddl_owners
             }
         );
     }

     if (ddl_region) {
         filters.push(
             {
                 field: "current_location_spotlist_id" && "spotlist_id",
                 operator: "eq",
                 value: ddl_region
             }
         );
     }
     if (ddl_types) {
         filters.push(
             {
                 field: "vessel_type",
                 operator: "eq",
                 value: ddl_types,
             }
         );
         console.log("Type" + ddl_types);
     }
     if (ddl_periods) {
         filters.push(
             {
                 field: "fixture_stop",
                 operator: "lte",
                 value: today
             }
         );
         console.log("Period: " + today);
     }
     grid.dataSource.filter({
         logic: "and",
         filters: filters
     });

}

I am looking for some help on where I may have gone wrong.

 

Thanks

[Maria Ilieva]

Hi,

I revise the provided code however this information does not appear to be sufficient to isolate the root cause of the issue. In this case it will be best if you can share the controller and the application page with the full grid configuration so that we can revise them locally and advise you further.

Regards,
Maria Ilieva
Telerik

[Allan]

Hi,

Here is the code for the application page (showing the grid)

@(Html.Kendo().Grid<MyProject.ViewModels.SpotGridViewModel>()
          .Name("Grid")
          .Deferred()
          .Columns(columns =>
          {

              columns.Bound(c => c.owner_company)
                  .Title("Owner")
                  .Width(200)
              .ClientTemplate(
              "<a data-identity='#=owner_company#' data-target='\\#owner_details' data-toggle='modal' href='" + Url.Action("OwnerModal", "Home") + "/" + "#= owner_company_idx #" + "' >#=owner_company#</a>");
              columns.Bound(c => c.vessel_name)
                  .Title("Vessel")
                  .Width(200)
                  .ClientTemplate(
                  "<a class='spot-link' data-identity='#=vessel_idx#' data-toggle='modal' data-target='\\#details' href='" + Url.Action("VesselModal", "Home") + "/#=vessel_idx#'" + ">#=vessel_name#</a>");
              columns.Bound(c => c.spotlist_bhp)
               .Title("BHP")
               .Width(40);
              columns.Bound(c => c.spotlist_deck)
                .Title("Deck")
                .Width(40);
              columns.Bound(c => c.vessel_type)
                  .Title("Type");
              columns.Bound(c => c.fixture_charterer)
                  .Title("Charterer")
                  .ClientTemplate(
                  "# if (fixture_charterer == null) { # # } else {#" + "<a class='spot-link' -identity='#=fixture_charterer#' data-toggle='modal' data-target='\\#charterer_details' href='" + Url.Action("ChartererModal", "Home") + "/#=charterer_company_idx#'" + ">#=fixture_charterer#</a>" + "#} #");
                  //"<a class='spot-link' -identity='#=fixture_charterer#' data-toggle='modal' data-target='\\#charterer_details' href='" + Url.Action("ChartererModal", "Home") + "/#=fixture_charterer#'" + ">#=fixture_charterer#</a>");
              columns.Bound(c => c.fixture_start)
                  .ClientTemplate("#=fixture_start ? kendo.toString(kendo.parseDate(fixture_start), 'dd/MM/yyyy') : '' #")
                  .Title("On Hire");
              columns.Bound(c => c.fixture_stop)
                  .ClientTemplate("#=fixture_stop ? kendo.toString(kendo.parseDate(fixture_stop), 'dd/MM/yyyy') : '' #")
                  .Title("Off Hire");
              columns.Bound(c => c.current_location)
                  .Title("Location").ClientTemplate("#=current_location#");
              columns.Bound(c => c.next_charterer_info)
                  .Title("Next Charterer")
                  .ClientTemplate("# if (next_charterer_info == null) { # # } else {#" + "<a class='btn blue' data-toggle='popover' title='Note' data-content='#=next_charterer_info#' href='\\#'>#=next_charterer_info#</a>" + "#} #");
              columns.Bound(c => c.fixture_work)
                  .Title("Work");
              columns.Bound(c => c.fixture_note)
                  .Title("Note")
                  .ClientTemplate("<a class='btn blue' data-toggle='popover' title='Note' data-content='#=fixture_note#' href='\\#'>#=fixture_note#</a>")
                  .Width(150);
              columns.Bound(c => c.fixture_rate)
                 .Title("Rate");
              columns.Bound(c => c.fixture_pc)
                  .Title("P/C");
              columns.Bound(c => c.current_location_spotlist_id)
                  .Hidden();
              columns.Bound(c => c.spotlist_id)
                  .Hidden();
              columns.Template(@<text></text>)
                 .ClientTemplate("<ul class='grid-options'>" +
                     "<li><a class='k-button k-button-icontext k-grid-edit' href='\\#'></a></li>" +
                     "<li><a class='icon-fixture' href='" + Url.Action("Create", "Fixtures") + "/#= vessel_idx #'" + " title='Create a fixture'></a></li>" +
                     "<li>" + @Html.ActionLink("Prompt", "buttonPrompt", "Home", new { id= "/#=vessel_idx# "}, null) + "</li>" +
                     "</ul>").Width(200);
          })
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .Pageable()
          .Events(e => e.DataBound("prompt")
             .Cancel(@"function(e){ setTimeout(function() {$('#Grid').data('kendoGrid').dataSource.sync()})}")
             .Edit("prompt"))
         .Sortable(sortable => sortable.AllowUnsort(true)
             .SortMode(GridSortMode.MultipleColumn))
             .Groupable()
         .DataSource(dataSource => dataSource
             .Ajax()
             .Events(events =>
                 {
                     events.RequestEnd("onUpdateEnd");
                 })
             .Sort(sort =>
             {
                 sort.Add(
                 company => company.owner_company).Ascending();
             })
             .PageSize(40)
             .Model(model =>
             {
                 model.Id(p => p.vessel_idx);
                 model.Field(p => p.fixture_start).Editable(true);
                 model.Field(p => p.owner_company).Editable(false);
                 model.Field(p => p.vessel_name).Editable(false);
                 model.Field(p => p.vessel_type).Editable(false);
                 model.Field(p => p.spotlist_bhp).Editable(false);
                 model.Field(p => p.spotlist_deck).Editable(false);
                 model.Field(p => p.fixture_charterer).Editable(false);
                 model.Field(p => p.current_location).Editable(true).DefaultValue(
                     ViewData["defaultLocation"] as Spoton_Areas_Test.ViewModels.VesselsViewModel
                     ); ;
                 model.Field(p => p.fixture_location).Editable(false);
                 model.Field(p => p.fixture_start).Editable(false);
                 model.Field(p => p.next_charterer_info).Editable(false);
                 model.Field(p => p.fixture_work).Editable(false);
                 model.Field(p => p.vessel_idx).Editable(false);
                 model.Field(p => p.fixture_note).Editable(true);
                 model.Field(p => p.fixture_pc).Editable(false);
                 model.Field(p => p.fixture_rate).Editable(false);
             })
       .Read(read => read.Action("filters_read", "Home").Data("getParameter"))
       .Update(update => update.Action("vessels_Update", "Home", new { id = "#=vessel_idx#" }))
       ))

 

The controller code for the filters.

//
       // FILTER : Companies
       public ActionResult toolbar_Owners()
       {
           var owners = db.tbl_companies
               .Where(c => c.is_owner == 1)
               .Select(c => new CompaniesViewModel
               {
                   company_idx = c.company_idx,
                   company_name = c.company_name
               })
               .OrderBy(e => e.company_name);
           return Json(owners, JsonRequestBehavior.AllowGet);
       }

//
      // FILTER : Vessel Types
      public ActionResult toolbar_Types()
      {
          var types = db.tbl_vessel_type_spotlist
              .Select(c => new VesselTypesViewModel
              {

                  spot_type_idx = c.spot_type_idx,
                  spot_name = c.spot_name
              })
              .OrderBy(e => e.spot_name);
          return Json(types, JsonRequestBehavior.AllowGet);
      }

Please let me know if you need anything else.

 

[Allan]

bump ^^

[Maria Ilieva]

Hello Allan,

I revised the provided code and was not bale to isolate any thing obvious that may lead to the presented issue. The model and the grid configuration look absolutely correct and the issue you are facing is rather strange. I would suggests you to debug your applictaion locally and pinpoint where exactly (in which row) the error appears. Thus we will see which code exactly is causing the error.

Regards,
Maria Ilieva
Telerik

[Allan]

[quote]Maria Ilieva said:Hello Allan,

I revised the provided code and was not bale to isolate any thing obvious that may lead to the presented issue. The model and the grid configuration look absolutely correct and the issue you are facing is rather strange. I would suggests you to debug your applictaion locally and pinpoint where exactly (in which row) the error appears. Thus we will see which code exactly is causing the error.

Regards,
Maria Ilieva
Telerik

[/quote]

 

After a little more work I discovered what the problem was.  The variable I was using:

var value = this.value();

Was too ambiguous when used in conjunction with other filters.  To get around this I declared the variable explicitly which solves the problem.

var value = $("#periods").getKendoComboBox().value();

[Maria Ilieva]

Hello,

I'm glad that you were able to pinpoint the exact reason for the issue you are facing and developed a proper workaround. Do not hesitate to contact us back on case furtehr assistance is needed.

Regards,
Maria Ilieva
Telerik