Showing posts with label DOJO. Show all posts
Showing posts with label DOJO. Show all posts

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>