Search code examples
javascriptdojox.grid.datagriddojox.griddojo

making grid rows do some event on clicking like opening any document say pdf in DOJO(JavaScript Based toolkit)


I want to perform click event on rows , Json data is coming from a servlet, which is contaainig data, roll number is the unique field through which I want to open a pdf document which is itself named as roll number. please help me to do it

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <script>

    function onReportTypesSelect()
    {
        if(getDijitValue('data_types') != 'Select')
            {

            if(getDijitValue('data_types') == 'class_level')
            {
                require([
                            "dojo/store/JsonRest",
                            "dojo/store/Memory",
                            "dojo/store/Cache",
                            "dojox/grid/DataGrid",
                            "dojo/data/ObjectStore",
                            "dojo/query",
                            "dojo/domReady!"

                        ], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query){
                            var userStore, dataStore, grid;
                            userStore = new Cache(JsonRest({target: "<%=request.getContextPath()%>" + "/data/classServlet"}), new Memory()); 
                            grid = new DataGrid({
                                id:"class_level_grid",
                                store: dataStore = new ObjectStore({objectStore: userStore}),
                                structure: [
                                            {name: 'Roll Number', field: 'roll', width: 'auto', defaultValue: ""},
                                             {name: 'Name', field: 'name', width: '100px', defaultValue: ""},
                                            {name: 'Class', field: 'class', width: '75px', defaultValue: ""}
                                ],
                            style:"font-family: calibri, Garamond, Comic Sans; font-size: 10;",
                            selectionMode:'single',  
                            autoHeight: 10,
                            rowsPerPage:40,
                            rowSelector:'20px',
                            selectable: true
                            }

                            , "class_level_grid_div"); // make sure you have a target HTML element with this id
                            grid.startup();

                        });

            }
    }
    }
    </script>
    </head>`enter code here`
    <body>
    <div id="data_types" data-dojo-type="dijit/form/Select" style="width: 200px;" onchange="onReportTypesSelect()">
                         <span data-dojo-value="Select"><b>Select</b></span>
                        <span data-dojo-value="class_level"><b>class Level</b></span>
    </div>
    <div id="class_level_grid_div" style="width: 95%; height: 90%;"> </div>
    </div>
    </body>
    </html>

Solution

  • The easiest way to do what you want is to set an onClickhandler for the Rows.

    I needed to highlight the sindle Features of our Service when they were selected and stored in a grid. This is my Workarround, maybe it helps you!

     OnClickZoom = on(yourGridName,"RowDblClick", function(evt){
                //get the clicked rowindex
                var idx = evt.rowIndex, item = this.getItem(idx);
                //  get a value out of the item
                var value = this.store.getValue(item, "yourFieldName");
                //highlight geometry
                highlightGeometry(value, true);
              });
    

    In your case you must get your rollnumber or the field which can be used to open the PDF you needed. Something like

    "..//myMenu/myPDF/"+theFileName+".pdf";
    

    Regards