Category Archives: Javascript

Bangla 1:18 pm on August 11, 2015
Tags: avoid, Avoid Special Characters, characters, , special, Special Characters   

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 ) {
              e.preventDefault(); 
          }
    } 
}

Happy Kooding… hope this helps!!



Advertisement
			

	
	

			


	



			
				


	

		

						
							
			
							Bangla
						
				3:46 pm on July 30, 2015			
			
							
							
					
Tags: Dictionary,    
				
			
					


		
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…!

			

	
	

			


	



			
				


	

		

						
							
			
							Bangla
						
				6:39 pm on July 28, 2015			
			
							
							
					
Tags: ,    
				
			
					


		
Tips/Tricks: Javascript or JQuery

	


		

		
1) How to get difference between 2 days in days using Javascript



var noOfDays = (finishDate - startDate) / (1000 * 60 * 60 * 24);




2) Remove Last Comma from a string


var str = commaInLastStr.replace(/,\s*$/, "")



Happy Kooding… Hope this helps!

			

	
	

			


	



			
				


	

		

						
							
			
							Bangla
						
				1:54 pm on July 1, 2015			
			
							
							
					
Tags: date picker, dropdownlist, hide, , , , kendo filter operators, , kendo model, kendo month picker, month picker, show   
				
			
					


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

$("#dobDate").kendoDatePicker({
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 });



eq, gt, gte, lt, te, neq


7) READONLY:


 @(Html.Kendo().DatePicker().Value(DateTime.Now)
 .Name("myDate").Min(DateTime.Now)
 .HtmlAttributes(new { style = "width: 100%", @readonly="readonly" }))



or



$("#myDate").kendoDatePicker(); 

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

myDate.readonly(true);




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

HIDE:


 $("#ddlCountries").closest(".k-widget").hide();



SHOW:


 $("#ddlCountries").closest(".k-widget").show();



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



@(Html.Kendo().Grid<UserModel>()
    .Name("MyGrid")
    .ColumnMenu()
    .Filterable(f => f.Operators(o => o.ForString(s => s
        .Clear()
        .Contains("Contains")
        .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



@(Html.Kendo().Grid<UserModel>()
    .Name("MyGrid")
    .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");
            grid.clearSelection();




Happy Koooding…..  Hope this helps!….