How to avoid special characters on key press – javascript

Avoid keying of special characters.. hope this doesn’t need any explanation…

<input type="text" onkeypress="avoidSplChars(event)" />

function avoidSplChars(e) {
 e = e || window.event;
 var bad = /[^\sa-z\d]/i,
 key = String.fromCharCode( e.keyCode || e.which );

    if ( e.which !== 0 && e.charCode !== 0 && bad.test(key) ) {
          e.returnValue = false;
          if ( e.preventDefault ) {

Happy Kooding… hope this helps!!


Example on Read & Write to Dictionary in JAVASCRIPT

Below sample code demonstrate on how to read/write dictionary in JS world.

Creating & Adding data to Dictionary

var workOrderDictionary = []; // declare dictionary

var companyId1 = 1;
var orders1 = [{ ProductId: 10, ProductName: Pen } , {ProductId: 20, ProductName: Eraser} ]
workOrderDictionary.push({ key: companyId1, value: orders1 });

var companyId2 = 2;
var orders2 = [{ ProductId: 101, ProductName: Lunch-Box } , {ProductId: 20, ProductName: Bottle } ]
workOrderDictionary.push({ key: companyId2, value: orders2 });

Reading the data from Dictionary

for (var key in workOrderDictionary) {
	if (workOrderDictionary.hasOwnProperty(key)) {
	    var orders =	workOrderDictionary[key];

Happy Kooding… Hope this helps…!

Tips/Tricks about KENDO

1) KENDO GRID: At anygiven time, if you want to access the edited or added data (before reload of grid/save)

var editableModel = $('#myGrid').data().kendoGrid.editable.options.model;

2) KENDO GRID: If you would like to update one of the property value manually for recent edited record in grid then

var editableModel = $('#myGrid').data().kendoGrid.editable.options.model;
editableModel.set("dobDate", '05/31/1983');

3) MONTH PICKER: Implementing month picker with Kendo. This would work with Grid Edit Pop also.

<input id="dobDate" type="date" class="input" name="dobDate" data-bind="value: dobDate" />
$(document).ready(function () {

start: "year",
depth: "year",
format: "MMMM yyyy",
parseFormats: ["MMMM yyyy"]


Month Picker cannot be achieved with Model binder as there is a known bug. The only available is the above

4) KENDO GRID: Format/Parse the date column (bound column)

columns.Bound(m =&amp;gt; m.DobDate).Width(50).Title("Dob Date").ClientTemplate("#= DobDate &amp;lt; 1/1/1900 ? '' : &nbsp; kendo.format('{0:MMMM yyyy}', DobDate) #")

5) KENDO DATE PICKER: Disable the control by editing it

<input id=”dobDate” type=”date” class=”input” name=”dobDate” onkeydown=”return false;”  data-bind=”value: dobDate” />

6) KENDO FILTER OPERATORS: Below are the few filter operators

  filter.push({ field: "IsNew", operator: "eq", value: 1 });



 .HtmlAttributes(new { style = "width: 100%", @readonly="readonly" }))



var myDate= $("#myDate").data("kendoDatePicker"); 


8) NUMERIC TEXTBOX: Don’t allow decimal value and don’t allow negative value (define min value)

a) format allows you to ignore/avoid entering decimal value

b) min allows you to set the min value to zero

$("#Hours").kendoNumericTextBox({ decimals: 0, format: "#", min: 0 });

9) HIDE/SHOW KENDO DROPDOWNLIST: Below is the syntax to hide/show kendo dropdownlist




10) Kendo Grid Filter Configuration : For a Kendo Grid, if you would like to customize the filter menu below is how you can do

    .Filterable(f => f.Operators(o => o.ForString(s => s
        .DoesNotContain("Does not contain")
        .EndsWith("Ends with")
// other configuration goes

If you would like to customize to a specific column then you would do same above filter configuration to a column rather than entire grid

    .Columns(columns =>
              columns.Bound(m => m.UserName)
              .Filterable(f => f.Operators(o =>
              o.ForString(s => s.Clear().Contains("Contains")
              .DoesNotContain("Does not contain")
              .EndsWith("Ends with")


11) Kendo Grid Clear Selected Row :

            var grid = $("#myGrid").data("kendoGrid");

Happy Koooding…..  Hope this helps!….