Kendo grid with Multi Filter on number column throws error

0
votes

I have a kendo grid described below. Looks fine, and all the other columns work well except I can't use the client filter on the "Round" column. The multi-select filter looks ok but when I select some values and press the "filter" button it throws a javascript error - just for this column! It even sorts properly.

Uncaught TypeError: (GameType.RoundNo || "").toLowerCase is not a function

It seems to be caused by the structure of the GameType object in the schema. I can't set the datatype to type:"number" because I need to set the default value for the editing function of this grid (which I've omitted from the sample below). I've no idea how to set the default value AND the data type at the same time, and I'm not even sure that will solve my problem.

<div id="tblGames"></div>

<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>

<script>
  $(document).ready(function () {
    $("#tblGames").kendoGrid({
      sortable: true,
      groupable: true,
      filterable: true,
      columns: [
        { field: "Season", title: "Season", type: "number", filterable: { multi: true }, width: 100 },
        { field: "GameType.RoundNo", title: "Round", type: "number", filterable: { multi: true }, width: 90 },
        { field: "GameDate", title: "Date", type: "date", format: "{0:dd/MMM hh:mmtt}", width: 130 },
        { field: "Grade.GradeName", title: "Grade", filterable: { multi: true } },
        { field: "HomeTeam.TeamName", title: "Home", filterable: { multi: true } },
        { field: "AwayTeam.TeamName", title: "Away", filterable: { multi: true } },
        { title: "Score", template: "#= ScoreFor + ' - ' + ScoreAgainst #", width: 70, filterable: false },
        { field: "IsPlayed", title: "Played?", filterable: { multi: true }, width: 95 }
      ],
      dataSource: { 
        schema: {
          model: {
            id: "GameID",
            fields: {
              GameID: { editable: false, defaultValue: 0 },
              GameType: { defaultValue: { GameTypeID: 1, RoundNo: 0 }, validation: { required: true } },
              GameDate: { type: "date", required: true },
              Season: { type: "number" },
              Grade: { defaultValue: { GradeID: 1 }, validation: { required: true } },
              Ground: { defaultValue: { GroundID: 1 }, validation: { required: true } },
              HomeTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
              AwayTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
              ScoreFor: { type: "number", validation: { min: 0, required: true } },
              ScoreAgainst: { type: "number", validation: { min: 0, required: true } },
              IsPlayed: { type: "boolean", defaultValue: true }
            }
          }
        },
        data: [{"GameID":1,"Grade":{"GradeID":1,"GradeName":"A Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":1,"Round":"Round 1"},"Season":2015,"GameDate":"\/Date(1432702800000)\/","Ground":{"GroundID":1,"GroundName":"Main Oval, Mainland"},"HomeTeam":{"TeamID":1,"TeamName":"A Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":10,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null},
               {"GameID":2,"Grade":{"GradeID":2,"GradeName":"B Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":2,"Round":"Round 2"},"Season":2015,"GameDate":"\/Date(1432659159000)\/","Ground":{"GroundID":2,"GroundName":"Happy Park, Happyland"},"HomeTeam":{"TeamID":3,"TeamName":"B Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":55,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null}]}
    });
  });
</script>

I've also unsuccessfully tried:

GameType: [{ RoundNo: { type: "number", defaultvalue: 0, validation: { required: true } } }, { GameTypeID: { defaultValue: 1, validation: { required: true } } }],
1
c#asp.netkendo-uikendo-grid

1 Answers

1
votes

Filtering is working fine if you set your RoundNo values to string in your Dataset.

  $(document).ready(function () {
    $("#tblGames").kendoGrid({
      sortable: true,
      groupable: true,
      filterable: true,
      columns: [
        { field: "Season", title: "Season", type: "number", filterable: { multi: true }, width: 100 },
        { field: "GameType.RoundNo", title: "Round", type: "number", filterable: { multi: true }, width: 90 },
        { field: "GameDate", title: "Date", type: "date", format: "{0:dd/MMM hh:mmtt}", width: 130 },
        { field: "Grade.GradeName", title: "Grade", filterable: { multi: true } },
        { field: "HomeTeam.TeamName", title: "Home", filterable: { multi: true } },
        { field: "AwayTeam.TeamName", title: "Away", filterable: { multi: true } },
        { title: "Score", template: "#= ScoreFor + ' - ' + ScoreAgainst #", width: 70, filterable: false },
        { field: "IsPlayed", title: "Played?", filterable: { multi: true }, width: 95 }
      ],
      dataSource: { 
        schema: {
          model: {
            id: "GameID",
            fields: {
              GameID: { editable: false, defaultValue: 0 },
              GameType: { defaultValue: { GameTypeID: 1, RoundNo: 0 }, validation: { required: true } },
              //GameType: [{ RoundNo: { type: "number", defaultvalue: 0, validation: { required: true } } }, { GameTypeID: { defaultValue: 1, validation: { required: true } } }],
              GameDate: { type: "date", required: true },
              Season: { type: "number" },
              Grade: { defaultValue: { GradeID: 1 }, validation: { required: true } },
              Ground: { defaultValue: { GroundID: 1 }, validation: { required: true } },
              HomeTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
              AwayTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
              ScoreFor: { type: "number", validation: { min: 0, required: true } },
              ScoreAgainst: { type: "number", validation: { min: 0, required: true } },
              IsPlayed: { type: "boolean", defaultValue: true }
            }
          }
        },
        data: [{"GameID":1,"Grade":{"GradeID":1,"GradeName":"A Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":"1","Round":"Round 1"},"Season":2015,"GameDate":"\/Date(1432702800000)\/","Ground":{"GroundID":1,"GroundName":"Main Oval, Mainland"},"HomeTeam":{"TeamID":1,"TeamName":"A Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":10,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null},
               {"GameID":2,"Grade":{"GradeID":2,"GradeName":"B Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":"2","Round":"Round 2"},"Season":2015,"GameDate":"\/Date(1432659159000)\/","Ground":{"GroundID":2,"GroundName":"Happy Park, Happyland"},"HomeTeam":{"TeamID":3,"TeamName":"B Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":55,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null}]}
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <base href="http://demos.telerik.com/kendo-ui/grid/index">
  <style>
    html {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title></title>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />

  <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>

<body>

  <div id="example">
    <div id="tblGames"></div>
  </div>


</body>

</html>