Sunday, August 4, 2013

Populating DOJO dropdown list based on JSON Data

Populating DOJO dropdown list based on JSON Data:

<select data-dojo-type=dijit.form.Select data-dojo-props='name:"dcDistcode"' missingMessage="Enter the Distict code" style="width: 180px" id="dcDistcode"></select>

var data ={"identifier":"value","items":[],"label":"distcode"};
            var len = newContent.length;   
            data.items.push(dojo.mixin({"distcode": "--SELECT--"},{"value": ""}));           
               
            for(var i=0; i < len ; ++i){       
                data.items.push(dojo.mixin({"distcode": newContent[i].dcDistcode+' - '+newContent[i].dcDistname},{"value": newContent[i].dcDistcode}));           
            }
             var distStore = dojo.data.ItemFileReadStore({data: data});
             dijit.byId("dcDistcode").setStore(distStore);


identifier specifies the value for the drop down list,  label specifies the display label for the drop down list.

newContent is the JSON data received from the server.


Saturday, August 3, 2013

Converting the JSON text to Javascript Object

Converting the JSON text to Javascript Object:


We can use two approaches eval function or JSON parser 

Eval function:


var jsonText="{success:false,error: 'Invalid Data'}"  
var dataObject = eval('(' + jsonText+ ')');  
The properties can be accessed from dataObject. 
var errorMessage=dataObject.error; 
The eval function is very fast. However, it can compile and execute any 
JavaScript
program so this may create security issue, if the JSON text source is trustable
the eval function can be used 

JSON Parser:

var dataObject= JSON.parse(jsonText); 
Converting the Object to JSON String:  
var jsonText= JSON.stringify(dataObject);


Validating the DOJO form programatically from Java Script

Validating the DOJO form programatically from Java Script

Sometimes we may need to validate the dojo form programatically from java script.

<form id="createForm" data-dojo-type="dijit.form.Form" data-dojo-attach-point="form"> .......</form>

The below line of code will help us to validate the form from java script

var formResult=dijit.byId('createForm').validate();

The validation result will be true if the validation of all the filed is success else the value will be false.


Getting the selected rows from DOJO Enhanced Grid

Getting the selected rows from DOJO Enhanced Grid :

The below line of code will help us to get the selected rows of the  Enhanced grid

dijit.byId(gridId).selection.getSelected();

Getting the model value of the selected rows.

var selectedRows=dijit.byId(gridId).selection.getSelected();

for(int i=0;i<selectedRows.length;i++)
{
   selectedRows[i].empName;
}



Stopping the Busy Button in DOJO

Stopping the Busy Button in DOJO

Getting the selected rows from DOJO Enhanced Grid :

DOJO busy button will help us to display the Busy Label to user while performing some actions, sometimes we need to stop the busy label and to display the normal button back.

<button data-dojo-type="dojox.form.BusyButton" id="loginButton" style ="margin-top: 10px; margin-right: -8px;" data-dojo-props="busyLabel:'Authenticating...'" onclick="loginForm()">SignIn</button>

If we are clicking on SignIn the button label will be changed to "Authenticating..." and the user will not be able to click the button again but in case of authentication failure the button should be displayed as normal

The below line of code will help as to cancel the busy button.

dijit.byId('loginButton').cancel();