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

StackOverflow https://stackoverflow.com/questions/15755669

Question

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 ?

Was it helpful?

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top