specify columns to only allow number vals when edited (kendo grid)

Question

Update: I think I poorly worded this question; the issue is not the data coming from the rest call, the issue is: I would like to simply restrict some columns in my data grid from accepting 'alpha' characters, i.e. only except number input when a user is attempting to edit the field inline.. for instance, alpha characters could simply not writing, would work. Surely there is a easy method with kendo to do such a simple thing.

I have setup an editable kendo grid with the logic below coming from the rest call below; it populates fine but now I am trying to simply restrict some of my columns to only accept their data types, i.e. starting out I'm trying to set latitude and longitude to only accept number values; after trying the below, adding fields under id - instead of any actual validation on the latitude field, it adds a second latitude column to the grid?

        let dataSource = new kendo.data.DataSource({
        transport: {
            read: {
            url: "/popGrid?id=" + which,
            dataType: "json"
            }
        },
        schema: { 
            data: "data",
            model: {
                id: id,
                fields: { // attempt doesnt effect current latitude col, adds another
                    latitude: { editable: true, type: "number",validation: { required: true, min: 1 } },
                    }
                }
            },
        });

Best way to go about this? I really don't want to hardcode each column out twice in order for a validation to take effect, I found one example doing so.. currently it's populating fine with my rest call and id model scheme dynamically, I just want to specify a few columns to only allow NUMBER input

KontYentE KontYentE · Accepted Answer · 2020-11-13T05:03:33

I was looking into kendo grid and this in fact might be a bug on their side. However there are work arounds for this to work.

You could either regex the numbers on the rest side, or you could simply parse the results on the schema side and only allow to pass numbers.

  schema: {
    parse: function(response) {
      var products = [];
      for (var i = 0; i < response.length; i++) {
        var product = {
          response[i].replace(/[^0-9]/g, ''); //replace all non-numeric characters with regular expression:
        };
        products.push(product);
      }
      return products;
    }
  }

As I don't see what kind of information and in what ambiance this is involved, stays difficult to help you further

Also possible to doit after de DOM with simple JS With this second solution the user can't even type any kind of text other than numbers.

      $("#allow-numeric").bind("keypress", function (e) {
          var keyCode = e.which ? e.which : e.keyCode
               
          if (!(keyCode >= 48 && keyCode <= 57)) {
            $(".error").css("display", "inline");
            return false;
          }else{
            $(".error").css("display", "none");
          }
      });

Make sure you replace the id with the same id in the schema. Also you can had a flag to the schema for all the fields where you wanna implement this, living the other fields out of this rule

check snippet bellow

   $(document).ready(function() {
      $("#allow-numeric").bind("keypress", function (e) {
          var keyCode = e.which ? e.which : e.keyCode
               
          if (!(keyCode >= 48 && keyCode <= 57)) {
            $(".error").css("display", "inline");
            return false;
          }else{
            $(".error").css("display", "none");
          }
      });
    });

<!DOCTYPE html>
<html>
<head>
  <title>JQuery - Allow only numeric values in Textbox - nicesnippets.com</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
   
<div class="container">
  <h1>JQuery - Allow only numeric values in Textbox</h1>
         
      <label>Enter Value:</label>
      <input type="text" name="myValue" class="allow-numeric" id='allow-numeric' >
      <span class="error" style="color: red; display: none">* Input digits (0 - 9)</span>
    
</div>

</body>
</html>

specify columns to only allow number vals when edited (kendo grid)

1 Answers