Monday, August 12, 2013

Removing the default rowselector column from DOJO Enhanced Grid

Removing the default rowselector column from DOJO Enhanced Grid:

Make sure the value for rowSelector is set as 0px or remove rowSelector property from the grid definition.

var grid = new dojox.grid.EnhancedGrid({
        id : gridObjectName,
        structure : layout,
        rowSelector : '0px',
        sortFields: [{attribute: defaultsort, ascending: true}],
        noDataMessage:"<span class=\"dojoxGridNoData\">No Matching Rows Found!!</span>",
        plugins : {
            indirectSelection:selection,
            pagination : {
                pageSizes : [ "25", "50", "100" ],
                description : true,
                sizeSwitch : true,
                pageStepper : true,
                gotoButton : true,
                /* page step to be displayed */
                maxPageStep : 4,
                /* position of the pagination bar */
                position : "bottom"
            }
        }
    }






Programmatically Uncheck/Check DOJO Checkboxs

Programmatically Uncheck/Check DOJO Checkboxs

The below lines of code will help us to check /uncheck set of dojo checkboxes from javascript.

dojo.forEach (dojo.query("input[type=checkbox]"), function(item){
var widget = dijit.getEnclosingWidget(item);
alert(widget)
widget.set('checked', false);
})

We can change the dojo.query parameter accordingly to fetch the checkboxes.


Thursday, August 8, 2013

Creating Validation TextArea in DOJO

Creating Validation TextArea in DOJO:

Sometimes we may need to do the validation of the data entered in TextArea but unfortunately the default TextArea provided by DOJO will not support the validation .

We can create a custom component extending both dijit.form.ValidationTextBox and dijit.form.SimpleTextarea, this will provide the functionality of both the ValidationTextBox and
SimpleTextarea.

dojo.declare(
            "ValidationTextarea",
            [dijit.form.ValidationTextBox,dijit.form.SimpleTextarea],
            {
                  postCreate: function() {
                    this.inherited(arguments);
                },
                validate: function() {
                    if (arguments.length==0) {
                    return this.validate(false);
                    }
                    return this.inherited(arguments);
                    },           
                onFocus: function() {
                    if (!this.isValid()) {
                        this.displayMessage(this.getErrorMessage());
                    }
                },
               onBlur: function() {
                    this.validate(false);
                }
             }
        );

We have to add the dojo require for ValidationTextarea  -  dojo.provide("ValidationTextarea");

Using the ValidationTextarea in jsp page:

<textarea id="clntlocn" name="clntlocn" data-dojo-type="ValidationTextarea" required="true" missingMessage="Enter the Client Location Name" rows="2" cols="20"" maxLength="50" style="resize:none"></textarea>

Now we can include all the validations applicable for dijit.form.ValidationTextBox to
ValidationTextarea.


Validating the Email address in DOJO

Validating the Email address in DOJO


<input  data-dojo-type="dijit.form.ValidationTextBox"regExpGen="dojox.validate.regexp.emailAddress" required="true" name="email"  id="email" missingMessage="Enter the Email id"> </input>

We have to add  regExpGen="dojox.validate.regexp.emailAddress" in the
dijit.form.ValidationTextBox

Also, we have to add the following dojo require

dojo.require("dojox.validate.regexp");





Handling the select event of dojo tab container

Handling the select event of dojo tab container:

<div data-dojo-type="dijit/layout/TabContainer" style="height:  400px;" id="client">
   <div id="usersTab" data-dojo-type="dijit/layout/ContentPane" title="Users" >
  
</div>
  <div id="akrTdrTab" data-dojo-type="dijit/layout/ContentPane" title="AKR/TDR" >
   </div>
</div>

Add the below code in the JSP page to handle the selection event of the tab.

<script>
      dojo.addOnLoad(function() {
             tabContainer = dijit.byId('client');
             dojo.connect(tabContainer, "selectChild",handleSelectedTabs);
     });


    function handleSelectedTabs(selectedTab){
           switch(selectedTab.id){
                  case "usersTab":searchUsersData();
                  break;
                  case "akrTdrTab":searchAkrtdrData();
                  break;
       }
}
</script>


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

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