Search code examples
dojojax-rsmaster-detaildojox.grid.datagriddijit.form

Master-Detail relationship using DataGrid and Form widget in Dojo 1.8

I have a Grid that using dojox.data.JsonRestStore as store. I want to edit data by using widget Form (dijit.form.Form). Implement dojo/on instead of dojo.connect for binding the grid and form.

here the JsonRestStore("/rest/console/getobjectlist") result (provided by Restful Web Service - JAX-RS)

[{"host":"192.168.3.7","port":"5474"},
{"host":"192.168.4.41","port":"8100"},
{"host":"192.168.5.5","port":"9999"}]

here the programmatically Grid and JsonRestStore

<script>
require(
        [ 'dojo/dom', 'dojo/json', 'dojox/json/schema',
                'dojox/data/JsonRestStore', 'dojox/grid/DataGrid',
                'dojox/grid/_CheckBoxSelector', 'dojo/on', 'dojo/request/xhr', 'dijit/Dialog',
                'dijit/ProgressBar', 'dijit/MenuBar',
                'dijit/PopupMenuBarItem', 'dijit/MenuItem', 'dijit/Menu',
                'dijit/Calendar', 'dijit/form/Form',
                'dijit/form/ValidationTextBox', 'dijit/form/TextBox',
                'dijit/form/FilteringSelect', 'dijit/form/Button',
                'dijit/form/ComboBox', 'dijit/form/ComboButton',
                'dijit/form/RadioButton', 'dijit/form/DropDownButton',
                'dijit/form/MultiSelect', 'dijit/form/NumberTextBox',
                'dijit/form/ToggleButton', 'dijit/form/SimpleTextarea',
                'dijit/layout/BorderContainer',
                'dijit/layout/TabContainer', 'dijit/layout/ContentPane',
                'dojo/domReady!' ],
        function(dom, JSON, schema, JsonRestStore, DataGrid,
                _CheckBoxSelector, on, xhr) {
            var store = new JsonRestStore(
                    {
                        target : "/rest/console/getobjectlist"

                    });

            var gridCell = [
                    {
                        name : "Host",
                        field : "host"

                    },
                    {
                        name : "Port",
                        field : "port",
                        width : "30%"
                    },
                    {
                        name : "Action",
                        field : "action",
                        formatter : function(item) {
                            var link = '<a href="edit.jsp" title="Edit"><div class="dijitIconEdit"></div></a> <a href="adapter.html" title="delete.jsp"><div class="dijitIconDelete"></div></a>';

                            return link;
                        }

                    }

            ];

            gridLayout = [ {
                // First, our view using the _CheckBoxSelector custom type
                type : "dojox.grid._CheckBoxSelector"
            }, gridCell ];

            var grid = new DataGrid({
                store : store,
                structure : gridLayout,
                selectionMode: "single",
                autoHeight : true
            }, "ObjectGrid");
            grid.startup();

            on(grid, "RowClick", function showDetail (e){
                            var grx = dijit.byId("AdapterGrid");
                            var host = grid.store.getValue(grid
                                    .getItem(e.rowIndex), "host");
                            var serviceurl =  "/rest/console/getobject?host="+host;

                            console.log(serviceurl);
                            xhr(serviceurl,{
                                handleAs: "json"}
                            ).then( function (data){
                                    dijit.byId("detailsForm").attr("value", serviceurl);
                            });
            } );



        });
 </script>

HTML

<body class="claro">
        <div id="ObjectGrid"></div>

        <form data-dojo-type="dijit/form/Form" id="detailsForm" method="post"
            data-dojo-props="region:'center'">

            <table>
                <tbody>
                    <tr>
                        <td>Host:</td>

                        <td><input type="text" required="true" name="host" id="host"
                            placeholder="host address"
                            regExp="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"
                            data-dojo-type="dijit/form/ValidationTextBox" /></td>
                    </tr>
                    <tr>
                        <td>Port:</td>
                        <td><input type="text" required="true" name="port" id="port"
                            regExp="\d+" placeholder="port"
                            data-dojo-type="dijit/form/ValidationTextBox"
                            invalidMessage="Numeric only" /></td>
                    </tr>
                </tbody>
            </table>

            <!-- submit buttons -->
            <input type="submit" value="Save" label="Save" id="submitButton"
                data-dojo-type="dijit/form/Button" />
        </form>

 </body>

my plan is the widget Form data will populated by clicking a row on Grid then change the value later using POST method but still get stuck to get the value. Any suggestion ?

Solution

  • I've started a jsfiddle here, but I'm not sure what you want to happen when a row is clicked.

    The example simply sets the form field values to the values in the clicked grid row. This particular code looks like:

        on(grid, "RowClick", function showDetail(e) {
        var item = grid.getItem(e.rowIndex);
        console.log("item", item);

        var serviceurl = "/rest/console/getobject?host=" + item.host;

        console.log("host", host, "serviceurl", serviceurl);

        var form = registry.byId("detailsForm");
        var hostInput = registry.byId("host");
        var portInput = registry.byId("port");
        console.log(registry);
        console.log(form);

        // set the form fields to match the clicked item
        hostInput.set("value", item.host);
        portInput.set("value", item.port);

    I'm unclear as to what else you want to happen. I can see you are performing some XHR, but what is this for? And what part of the form do you want to set to serviceurl?

    Screenshot

    enter image description here