Multiple Grid Filters Throwing String Error

7 posts, 0 answers
  1. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 11 May Link to this post

    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

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 13 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 13 May in reply to Maria Ilieva Link to this post

    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.

     

  5. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 17 May Link to this post

    bump ^^
  6. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 17 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 17 May in reply to Maria Ilieva Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

     

    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();

  8. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 18 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready