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>