Saturday, September 21, 2019

Sample ICN Plugin





**- **RecoveryBin.js****
require([ "dojo/_base/declare", "dojo/_base/lang", "ecm/model/Request",
        "ecm/model/ResultSet", "recoveryBeanDojo/BestDialog",
        "ecm/widget/ComboBox", "dojo/domReady!" ], function(declare, lang,
        Request, ResultSet, BestDialog, ComboBox) {
    /**
     * Use this function to add any global JavaScript methods your plug-in requires.
     */
    lang.setObject("moveToRB", function(repository, items, callback, teamspace,
            resultSet, parameterMap) {
        /*
         * Add custom code for your action here. For example, your action might launch a dialog or call a plug-in service.
         */
        // Iterating items array --- {d0c1},{doc2}
        var itemsList="";
        console.log("Number of selected documents -- "+ items.length);
        for(var j=0;j<items.length;j++)
        {
            itemsList=itemsList+items[j].id+",";
            console.log("Item is --"+itemsList);
        }
        console.log("New Items String is ---- "+itemsList);
        var bestDialog = null;
        var serviceParams = {
            icnRepository : repository.id,
            serverType : repository.type,
        //  s : items[0].id,
            s : itemsList,
        };

        Request.invokePluginService("RecoveryBean", "MoveToRBService", {

            requestParams : serviceParams,

            requestCompleteCallback : lang.hitch(this, function(response) {
                var rb;
                for (var i = 0; i < response.rb.length; i++) {
                    rb = response.rb[i];
                }// success*/
                console.log("Before New Dialog ");
                bestDialog = new BestDialog();
                //bestDialog.setContentItem(items[0]);
                bestDialog._show(rb, repository, items);
                bestDialog.show();
                console.log("After bin Dialog");

            })

        });
    });
});

**

 - BestDialog.js

**

define([ "dojo/_base/declare", "ecm/widget/dialog/BaseDialog",
        "dijit/form/CurrencyTextBox", "dojo/currency", "ecm/model/ContentItem",
        "dojo/store/Memory", "ecm/model/Request", "ecm/model/ResultSet",
        "dijit/layout/ContentPane", "dojo/dom-attr",
        "ecm/widget/layout/_RepositorySelectorMixin",
        "ecm/widget/listView/ContentList", "ecm/model/Desktop",
        "dojo/_base/lang", "ecm/widget/ComboBox",
        "dojo/text!./templates/BestDialog.html" ], function(declare,
        BaseDialog, CurrencyTextBox, currency, ContentItem, MemoryStore,
        Request, ResultSet, ContentPane, domAttr, _RepositorySelectorMixin,
        ContentList, Desktop, lang, ComboBox, template) {

    /**
     * @name sampleICNPluginDojo.BestDialog
     * @class Provides a dialog that demonstrates the right thing to do. 
     * @augments ecm.widget.BaseDialog
     */
    return declare("newPluginDojo.BestDialog", [ BaseDialog ], {
        /** @lends sampleICNPluginDojo.BestDialog.prototype */

        contentString : template,
        widgetsInTemplate : true,
        contentItem : null,
        _repository : null,
        _items : null,
        itemsList:null,
        _binlist : null,        
        postCreate : function() {
            console.log("Inside BestDialog.js:: postCreate ");
            this.inherited(arguments);
            this.setTitle("Recovery - Beans");

            this.okButton = this.addButton("Ok", "_okClick", false, true);
        },
        _okClick : function() {
            console.log("Inside BestDialog.js:: _okClick ");
            var n = this._binlist.value;

            var serviceParams = {

                icnRepository : this._repository.id,
                serverType : this._repository.type,
                s : this.itemsList,
                rbName : n
            };
            Request.invokePluginService("RecoveryBean", "RecoveryService", {

                requestParams : serviceParams,
                requestCompleteCallback : lang.hitch(this, function(response) {

                    var bestDialog = new BaseDialog();
                    bestDialog.set("title", "Deleted Items Bean");
                    bestDialog.set("content","Document Are Successfully Moved To Recycle Bin");
                    bestDialog.show();
                    console.log("After Recovery Service Dialog");

                })

            });
            this.hide();
            this.destroyRecursive(); // Destroys all child widgets as well
        },

        onCancel : function() {
            this.destroyRecursive();
        },
        // Method responsible to show dialog box:- Documented by Ashok
        _show : function(rb, repository, items) {
            console.log("inside show ");
            this._repository = repository;
            this._items = items;
            this._rb = rb;
            var item = [];

            for ( var key in rb) {
                item.push({
                    "id" : rb[key],
                    "name" : key
                });
                console.log(key + ":" + rb[key]);
            }

            // Create test store.
            comboStore = new MemoryStore({
                data : item
            });
            this._binlist = this.binlist;
            this._binlist.store = comboStore;

            console.log("Completed");

        }

    });
});

**MoveToRBService.java**

package com.ibm.demo;

import java.io.Writer;
import java.util.ArrayList;
import java.util.Iterator;

import javax.security.auth.Subject;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.filenet.api.collection.CmRecoveryItemSet;
import com.filenet.api.collection.EventSet;
import com.filenet.api.collection.IndependentObjectSet;
import com.filenet.api.constants.RefreshMode;
import com.filenet.api.core.Document;
import com.filenet.api.core.Factory;
import com.filenet.api.core.ObjectStore;
import com.filenet.api.core.VersionSeries;
import com.filenet.api.events.Event;
import com.filenet.api.query.SearchSQL;
import com.filenet.api.query.SearchScope;
import com.filenet.api.util.CmRecoveryBin;
import com.filenet.api.util.CmRecoveryItem;
import com.filenet.api.util.Id;
import com.filenet.api.util.UserContext;
import com.ibm.ecm.extension.PluginResponseUtil;
import com.ibm.ecm.extension.PluginService;
import com.ibm.ecm.extension.PluginServiceCallbacks;
import com.ibm.ecm.json.JSONMessage;
import com.ibm.ecm.json.JSONResponse;
import com.ibm.ecm.json.JSONResultSetResponse;
import com.ibm.json.java.JSONArray;
import com.ibm.json.java.JSONObject;

/**
 * Provides an abstract class that is extended to create a class implementing
 * each service provided by the plug-in. Services are actions, similar to
 * servlets or Struts actions, that perform operations on the IBM Content
 * Navigator server. A service can access content server application programming
 * interfaces (APIs) and Java EE APIs.
 * <p>
 * Services are invoked from the JavaScript functions that are defined for the
 * plug-in by using the <code>ecm.model.Request.invokePluginService</code>
 * function.
 * </p>
 * Follow best practices for servlets when implementing an IBM Content Navigator
 * plug-in service. In particular, always assume multi-threaded use and do not
 * keep unshared information in instance variables.
 */
public class MoveToRBService extends PluginService {
    public static final String REPOSITORY_ID = "icnRepository";
    public static final String REPOSITORY_TYPE = "serverType";

    /**
     * Returns the unique identifier for this service.
     * <p>
     * <strong>Important:</strong> This identifier is used in URLs so it must
     * contain only alphanumeric characters.
     * </p>
     * 
     * @return A <code>String</code> that is used to identify the service.
     */
    public String getId() {
        return "MoveToRBService";
    }

    /**
     * Returns the name of the IBM Content Navigator service that this service
     * overrides. If this service does not override an IBM Content Navigator
     * service, this method returns <code>null</code>.
     * 
     * @returns The name of the service.
     */
    public String getOverriddenService() {
        return null;
    }

    /**
     * Performs the action of this service.
     * 
     * @param callbacks
     *            An instance of the <code>PluginServiceCallbacks</code> class
     *            that contains several functions that can be used by the
     *            service. These functions provide access to the plug-in
     *            configuration and content server APIs.
     * @param request
     *            The <code>HttpServletRequest</code> object that provides the
     *            request. The service can access the invocation parameters from
     *            the request.
     * @param response
     *            The <code>HttpServletResponse</code> object that is generated
     *            by the service. The service can get the output stream and
     *            write the response. The response must be in JSON format.
     * @throws Exception
     *             For exceptions that occur when the service is running. If the
     *             logging level is high enough to log errors, information about
     *             the exception is logged by IBM Content Navigator.
     */
    public void execute(PluginServiceCallbacks callbacks, HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        String repositoryId = request.getParameter(REPOSITORY_ID);
        String repositoryType = request.getParameter(REPOSITORY_TYPE);
        JSONResponse jsonResponse = new JSONResponse();
        ObjectStore objectStore = null;
        JSONObject jsonObject = new JSONObject();
        JSONObject finalJsonObj = new JSONObject();
        JSONArray jsonArray = new JSONArray();
        CmRecoveryBin bin = null;
        try {
            if (repositoryType.equals("p8")) {
                Subject subject = callbacks.getP8Subject(repositoryId);
                UserContext.get().pushSubject(subject);
                System.out.println("in first if");
            }
            Object synchObject = callbacks.getSynchObject(repositoryId, repositoryType);
            if (synchObject != null) {
                synchronized (synchObject) {
                    if (repositoryType.equals("p8")) {
                        System.out.println(" synchObject Value :Ashok"+ synchObject.toString());
                        System.out.println("in synchronised block");
                        objectStore = callbacks.getP8ObjectStore(repositoryId);

                        System.out.println("ObjectStore!!!!!!!!!123" + objectStore.get_DisplayName());
                    }
                }
                SearchSQL sqlObject = new SearchSQL("select * from CmRecoveryBin");
                SearchScope searchScope = new SearchScope(objectStore);
                Integer myPageSize = new Integer(1000);
                Boolean continuable = Boolean.valueOf(true);
                IndependentObjectSet binSet = searchScope.fetchObjects(sqlObject, myPageSize, null, continuable);

                // Iterate the set of recovery bins.
                Iterator iterOuter = binSet.iterator();

                while (iterOuter.hasNext()) {
                    bin = (CmRecoveryBin) iterOuter.next();
                    System.out.println("\nRecovery bin: " + bin.get_DisplayName() + "   ID: " + bin.get_Id());
                    jsonObject.put(bin.get_DisplayName(), bin.get_Id().toString());
                    jsonArray.add(jsonObject);
                }

                finalJsonObj.put("rb", jsonArray);
                System.out.println("in cache control!!!!!!!!!!!!!!");
                response.addHeader("Cache-Control", "no-cache");
                response.setContentType("text/plain"); // must be text/plain for
                                                        // firebug
                response.setCharacterEncoding("UTF-8");
                Writer writer = response.getWriter();
                writer.write(finalJsonObj.toString());
                System.out.println("Printing results = " + finalJsonObj.toString());

            }

        } catch (Exception exc) {
            JSONMessage message = new JSONMessage(0,
                    "The document could not be retrieved.  Details have been written to the server error log.", null,
                    null, null, null);
            jsonResponse.addErrorMessage(message);
            exc.printStackTrace();
        }

    }
}


**BestDialog.html**
<div>
<select data-dojo-type="ecm/widget/ComboBox" data-dojo-attach-point="binlist"></select></div>









Online SAMPLE

Making Comment mandatory if user clicks on Reject Response.
https://www.ibm.com/developerworks/community/forums/html/topic?id=b00ab6e2-1e93-49a0-a73b-fb3749c38a1e




Work with related cases after you "split" a case
https://www.ibm.com/developerworks/community/blogs/e8206aad-10e2-4c49-b00c-fee572815374/entry/work_with_related_cases_after_you_split_a_case8?lang=en



Create Custom Split Case Button
https://www.ibm.com/developerworks/community/forums/html/topic?id=62f13f9a-3574-4879-aef7-09c25ed46cc1



Wednesday, September 18, 2019

Dojo grid events and stores



Example

gridBlog.on("RowClick", function(evt){
var idx = evt.rowIndex,
rowData = gridBlog.getItem(idx);
console.log(rowData.col1);
}, true);


Complete events list


Available stores in Dojo









ItemFileWriteStore vs Memory?

The dojo/store API is intended to be the next step forward, replacing dojo/data. Therefore, dojo/store is recommended from a best/modern practices point of view.

However, assuming you're talking about dojox/grid, that component only knows how to consume dojo/data stores. That leaves you with two options:

Use dojo/data/ItemFileWriteStore
Use dojo/store/Memory wrapped in dojo/data/ObjectStore (which wraps a dojo/store with dojo/data APIs so that consumers of old stores can work with it)
Another thing worth considering is that dojo/store/Memory doesn't support directly pulling data in from a URL, while dojo/data/ItemFileWriteStore does.
If you're intending to load your data from another URL, you can still use dojo/store/Memory, but you'd have to XHR the data yourself first.





For more information about DOJO GUI
https://ux.mailchimp.com/patterns/forms#radio

New Grid in dojo has name GridX
for more information visit

https://xcellerant.wordpress.com/2014/12/10/gridx-in-xpages-16-advanced-searching-with-the-filterbar-module/

https://oria.github.io/gridx/demos/test_grid.html

https://github.com/oria/gridx/wiki/How-to-add-bars-to-gridx%3F-%5Bv1.1%5D



Tuesday, September 17, 2019

Dojo Dialog





<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"/>

<script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>

</head>
<body class="claro">



<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="Name and Address">
    <table class="dijitDialogPaneContentArea">
        <tr>
            <td><label for="name">Name:</label></td>
            <td><input data-dojo-type="dijit/form/TextBox" name="name" id="name"></td>
        </tr>
        <tr>
            <td><label for="address">Address:</label></td>
            <td><input data-dojo-type="dijit/form/TextBox" name="address" id="address"></td>
        </tr>
    </table>

    <div class="dijitDialogPaneActionBar">
        <button data-dojo-type="dijit/form/Button" type="submit" id="ok">OK</button>
        <button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myDialog.hide();}"
                id="cancel">Cancel</button>
    </div>
</div>

<button data-dojo-type="dijit/form/Button" type="button" onClick="myDialog.show();">
    Show me!
</button>

<script>
require(["dijit/Dialog", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
</body>
</html>

Dojo Enahnced Grid with pagination, search, edit data, two way binding edit data with json object


Search Invoice
Search ItemName





















CODE



<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />

<script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>

</head>
<body class="claro">
<table>
<tr>
<td>Search Invoice</td><td><input data-dojo-type="dijit/form/TextBox" id="filterText1" type="text"></td>
</tr>
<tr>
<td>Search ItemName </td><td> <input data-dojo-type="dijit/form/TextBox" id="filterText2" type="text"></td>
</tr>
<tr>
<td colspan=2>
<button data-dojo-type="dijit/form/Button" onclick="filterGrid()">Search</button>
<button data-dojo-type="dijit/form/Button" onclick="resetFilter()">Clear</button>
</td>
</tr>
</table>


    <div style="width: 90%; margin: 10px; height: 450px; min-height: 450px; border: 1px solid #333333;overflow: auto">
        <div id="div1" style="height: 445px;width:100%">
        </div>
    </div>


<br>
<button onclick="alert(JSON.stringify(data))">show current json data</button>





<script>
    // load requirements for declarative widgets in page content
    require(["dijit/form/TextBox","dijit/form/Button", "dojo/parser", "dojo/domReady!"]);
</script>











<script>
window.getData=function()
{

window.data = [
{ id: 1, col1: "986976", col2: "234", col3: "PC", col4: 234, col5: "Unit", col6: 456, col7: "EGP £" },
{ id: 2, col1: "986976", col2: "354", col3: "Processor", col4: 123, col5: "Unit", col6: 567, col7: "EGP £" },
{ id: 3, col1: "986976", col2: "564", col3: "RAM", col4: 567, col5: "Unit", col6: 234, col7: "EGP £" },
{ id: 4, col1: "986976", col2: "567", col3: "IC", col4: 43, col5: "Unit", col6: 789, col7: "EGP £" },
{ id: 5, col1: "986976", col2: "345", col3: "Mother Board", col4: 766, col5: "Unit", col6: 123, col7: "EGP £" },
{ id: 6, col1: "986976", col2: "24234", col3: "Server", col4: 2334, col5: "Unit", col6: 8797, col7: "EGP £" },
{ id: 7, col1: "3234", col2: "098", col3: "Case", col4: 876, col5: "Unit", col6: 456456, col7: "EGP £" },
{ id: 8, col1: "2342345", col2: "9867", col3: "Mouse", col4: 987, col5: "Unit", col6: 234345, col7: "EGP £" },
{ id: 9, col1: "234535", col2: "876", col3: "Pad", col4: 34, col5: "Unit", col6: 23423, col7: "EGP £" },
{ id: 10, col1: "3242", col2: "8686", col3: "Keyboard", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 11, col1: "234234", col2: "8686", col3: "MAC PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 12, col1: "23423", col2: "8686", col3: "IBM Z Server", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 13, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 14, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 15, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 16, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 17, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 18, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 19, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 20, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 21, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 22, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 23, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 24, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 25, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 26, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" }

];

return data;
}

var grid;
window.startGrid= function(Obj){
     require([
"dojox/grid/cells",
"dojox/grid/cells/dijit",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/date/locale",
            "dojox/grid/EnhancedGrid",
            "dojox/grid/enhanced/plugins/Pagination",
"dojo/domReady!"
], function(cells, cellsDijit, Memory, ObjectStore, locale,EnhancedGrid,Pagination){


gridLayout = [{
defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;'  },
cells: [
{ name: 'Id', field: 'id', editable: false  },
{ name: 'Invoice ', field: 'col1', styles: '', width: 10 },
{ name: 'Code ', field: 'col2', styles: '', width: 10 },
{ name: 'ItemName ', field: 'col3', styles: '', width: 10 },
{ name: 'Count', field: 'col4', styles: '', width: 10 },
{ name: 'Unit', field: 'col5', styles: '', width: 10 },
{ name: 'Price', field: 'col6', styles: '', width: 10 },
{ name: 'Currency', styles: 'text-align: center;', field: 'col7', width: 10, type: cells.ComboBox, options: ["EGP £","US $","‎EURO €"]}
]
}];

                data = getData();
var objectStore = new Memory({data:data});

// global var "test_store"
test_store = new ObjectStore({objectStore: objectStore});

grid = new EnhancedGrid({
store: test_store,
structure: gridLayout,
escapeHTMLInData: false,
"class": "grid"


                , plugins: {
                    pagination: {
                        pageSizes: ["10", "25", "50", "100"],
                        description: true,
                        sizeSwitch: true,
                        pageStepper: true,
                        gotoButton: true,
                        maxPageStep: 5,
                        position: "bottom"
                    }
                }




}, document.createElement('div'));

    Obj.appendChild(grid.domNode);

grid.startup();
    grid._lastScrollTop=grid.scrollTop;
    grid._refresh();

    grid.on("RowClick", function(evt){
var idx = evt.rowIndex,
rowData = grid.getItem(idx);
console.log(rowData.col1);
}, true);


});
}

startGrid(document.getElementById("div1"));


function filterGrid() {
    grid.filter({col1: document.getElementById('filterText1').value+'*',col3:document.getElementById('filterText2').value+'*'});
}
function resetFilter() {
    grid.filter({col1: '*',col3: '*'});
    document.getElementById('filterText1').value='';
document.getElementById('filterText2').value='';
}
</script>
</body>
</html>

Dojo CSS


Demo









You can set dojo form CSS using "data-dojo-type"
for example:

data-dojo-type="dijit/form/TextBox"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-type="dijit/form/Button"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-type="dijit/form/NumberTextBox"
data-dojo-type="dijit/form/CurrencyTextBox"
data-dojo-type="dijit/form/TimeTextBox"



and here are the effect!



<html>
<head>
    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" />

    <script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>

</head>

<body class="claro">

    <div>
        <label for="number">Age:</label>
        <input id="number" type="text" value="54" required="true" data-dojo-type="dijit/form/NumberTextBox">
    </div>

    <div>
        <label for="currency">Annual Salary:</label>
        <input id="currency" value="54775.53" required="true" data-dojo-type="dijit/form/CurrencyTextBox" data-dojo-props="
                        constraints: {fractional: true},
                        currency: 'USD',
                        invalidMessage: 'Invalid amount. Cents are mandatory.'">

    </div>

    <div>
        <label for="time">Start Time:</label>
        <input id="time" required="true" data-dojo-type="dijit/form/TimeTextBox" data-dojo-props="
                    constraints: {
                        timePattern: 'HH:mm:ss',
                        clickableIncrement: 'T00:15:00',
                        visibleIncrement: 'T00:15:00',
                        visibleRange: 'T01:00:00'
                    },
                    invalidMessage: 'Invalid time.'">
    </div>

    <div>
        <label for="textBox"> textBox:</label>
        <input type="text" id="textBox" name="textBox" data-dojo-type="dijit/form/TextBox" />
    </div>

    <div>
        <label for="dateTextBox">Date Example:</label>
        <input type="text" id="dateTextBox" name="dateTextBox" data-dojo-type="dijit/form/DateTextBox" />
    </div>

    <div>
        <label for="Example">Number Example:</label>
        <input type="text" id="Example" required="true" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:'[\\w]+', invalidMessage:'Invalid Non-Space Text.'" />
    </div>

    <div>
        <button data-dojo-type="dijit/form/Button" onclick="alert()">Search</button>
    </div>

    <script>
        // load requirements for declarative widgets in page content

        require(["dijit/form/NumberTextBox", "dijit/form/CurrencyTextBox", "dijit/form/TimeTextBox", "dijit/form/TextBox", "dijit/form/DateTextBox", "dijit/form/Button", "dojo/parser", "dojo/domReady!"]);
    </script>

</body>
</html>

Sunday, September 15, 2019

DOJO Grid two ways binding between json object and Grid




















Dojo Grid Code

<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css" />

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css" />


<script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>
</head>
<body class="claro">
<input type=button name=btn1 id=btn1 value='View Data'  onclick="startGrid(this.nextSibling)" ><div id=div1 style="background-color:#eeeeee;height:500px;overflow:scroll"> </div>
<br>
<button onclick="alert(JSON.stringify(data))">current json data</button>





<script>
window.getData=function()
{

window.data = [
{ id: 1, col1: "986976", col2: "234", col3: "PC", col4: 234, col5: "Unit", col6: 456, col7: "EGP £" },
{ id: 2, col1: "986976", col2: "354", col3: "Processor", col4: 123, col5: "Unit", col6: 567, col7: "EGP £" },
{ id: 3, col1: "986976", col2: "564", col3: "RAM", col4: 567, col5: "Unit", col6: 234, col7: "EGP £" },
{ id: 4, col1: "986976", col2: "567", col3: "IC", col4: 43, col5: "Unit", col6: 789, col7: "EGP £" },
{ id: 5, col1: "986976", col2: "345", col3: "Mother Board", col4: 766, col5: "Unit", col6: 123, col7: "EGP £" },
{ id: 6, col1: "986976", col2: "24234", col3: "Server", col4: 2334, col5: "Unit", col6: 8797, col7: "EGP £" },
{ id: 7, col1: "3234", col2: "098", col3: "Case", col4: 876, col5: "Unit", col6: 456456, col7: "EGP £" },
{ id: 8, col1: "2342345", col2: "9867", col3: "Mouse", col4: 987, col5: "Unit", col6: 234345, col7: "EGP £" },
{ id: 9, col1: "234535", col2: "876", col3: "Pad", col4: 34, col5: "Unit", col6: 23423, col7: "EGP £" },
{ id: 10, col1: "3242", col2: "8686", col3: "Keyboard", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 11, col1: "234234", col2: "8686", col3: "MAC PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 12, col1: "23423", col2: "8686", col3: "IBM Z Server", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 13, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 14, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 15, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 16, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 17, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 18, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 19, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 20, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 21, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 22, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 23, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 24, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 25, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 26, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" }

];

return data;
}

window.startGrid= function(Obj){
     require([
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojox/grid/cells/dijit",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/date/locale",
"dojo/domReady!"
], function(DataGrid, cells, cellsDijit, Memory, ObjectStore, locale){
var grid;

gridLayout = [{
defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;'  },
cells: [
{ name: 'Id', field: 'id', editable: false  },
{ name: 'Invoce ', field: 'col1', styles: '', width: 10 },
{ name: 'Code ', field: 'col2', styles: '', width: 10 },
{ name: 'ItemName ', field: 'col3', styles: '', width: 10 },
{ name: 'Count', field: 'col4', styles: '', width: 10 },
{ name: 'Unit', field: 'col5', styles: '', width: 10 },
{ name: 'Price', field: 'col6', styles: '', width: 10 },
{ name: 'Currency', styles: 'text-align: center;', field: 'col7', width: 10, type: cells.ComboBox, options: ["EGP £","US $","‎EURO €"]}
]
}];

                data = getData();
var objectStore = new Memory({data:data});

// global var "test_store"
test_store = new ObjectStore({objectStore: objectStore});

grid = new DataGrid({
store: test_store,
structure: gridLayout,
escapeHTMLInData: false,
"class": "grid"
}, document.createElement('div'));

    Obj.appendChild(grid.domNode);

grid.startup();
                grid._lastScrollTop=grid.scrollTop;
                grid._refresh();

});
}
</script>
</body>
</html>
















DOJO CSS

https://download.dojotoolkit.org/release-1.9.1/dojo-release-1.9.1/dijit/themes/themeTester.html?theme=soria