drop down menu - Githubissues

tokick4 commented 11 years ago

I have the grid working for standard table but I need to have one of the columns in the master grid to have a drop down list of items that can be changed and saved. Where is this in your api or do you have any information that might help me on setting this up. Thanks

I add new comment at the bottom.

optikalefx commented 11 years ago

I think it's broke on my site, the GIST is here https://gist.github.com/optikalefx/3988161

If you need to call your function as part of a class, simply pass an array instead of the function name. where the first param is the class reference, and the 2nd is the method name.

tokick4 commented 11 years ago

Could you look at my two files and the ajax.php // require our class require_once("grid.php");

// load our grid with a table
$grid = new Grid("inspection", array(
    "save"=>true,
    "delete"=>true,
    "select" => 'selectFunction',

    "where"=>"inspection_date = CURDATE()",
    "joins"=>array(
        "LEFT JOIN employe_list ON employe_list.contact_id = inspection.idemployee
        LEFT JOIN permit_classification ON permit_classification.id_permit_classification = inspection.permit_ClassID 
        LEFT JOIN typeofinspection ON typeofinspection.Type_Inspection_ID = inspection.TypeInspectionID"
    ),
    //when doing joins the fields need to be labled and changed to the required filed from the join to show in grid
    "fields"=>array(
        "idemployee" => "CONCAT(employe_list.first_name,' ',employe_list.last_name)",
        "TypeInspectionID"=>"DescriptionOfInspection",
        "permit_ClassID"=>"description_of_class"
    ),

));

// drop down function
// if you have anonymous function support, then you can just put this function in place of
// 'selectFunction'
function selectFunction($grid) {
    $selects = array();

    // category select
    $grid->table = "employe_list";//second table to choose from?
    $selects["contact_id"] = $grid->makeSelect("contact_id", "first_name","last_name");//filds from table

    // active select
    $selects["active"] = array("1"=>"true","0"=>"false");

    // render data          
    $grid->render($selects);
}

then my grid page:

        <link rel="stylesheet" type="text/css" href="OpenJS-Grid-OpenJSGrid2.1.4/grid.css" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

        <script type="text/javascript" src="OpenJS-Grid-OpenJSGrid2.1.4/jquery.js"></script>
        <script type="text/javascript" src="OpenJS-Grid-OpenJSGrid2.1.4/root.js"></script>
        <script type="text/javascript" src="OpenJS-Grid-OpenJSGrid2.1.5/grid.js"></script>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script>

            $(function() {
            var $grid = $(".inspection").grid({

                title : "Inspections",
                page : 1,
                showPager : true,
                editing : true,
                deleting : false,
                nRowsShowing : 20,
                width: 800,
                rowNumbers: true,
                checkboxes: false,
                slider: false,

            }).on("loadComplete",function(e,grid) {
                //console.log("loadComplete", grid);
            }).on("cellClick",function(e, $cell,rowData) {
                //console.log("cell",$cell,rowData);
            }).on("rowCheck",function(e, $checkbox, rowData) {
                //console.log("rowCheck",$checkbox, rowData);
            }).on("rowClick",function(e, $rows,rowData) {
                //console.log("rowClick",$rows,rowData);
            }).on("save",function(e, row, res) {
                //console.log("save",row,res);
            }).on("loadComplete",function() {

            //set the refresh of the grid to 1 min 
            }); setInterval(function() {
                     $grid.grid("load");
                },60000);
            });
            </script>
        <script>

        </script>
        <title>Dashboard</title>
        </head>
        <body>
            <p></p>
                <div id="wrapper">
                    <div id="leftcol">
                      <?php include 'leftsidemenu.php';?>
                    </div>
                    <div id="content">
                        <p>Todays Inspection Live Automatic refreshes every 60 sec.</p>
                        <h1>HI</h1>
                         <table id="Inspect" class="inspection" action="OpenJS-Grid-OpenJSGrid2.1.4/ajax.php">
                          <tr>
                            <th col="idinspection" >Inspection No.</th>
                            <th col="inspection_date"  >Date</th>
                            <th col="am_pm" >AM / PM</th>
                            <th col="pass_failed" >Pass / Failed</th>
                            <th col="Permit_No" >Permit No.</th>
                            <th col="permit_ClassID" >Permit Type</th>
                            <th col="TypeInspectionID" >Type of Inspection</th>
                            <th col="idemployee" type="select">Inspector</th>
                           </tr>
                         </table>                       
                    </div>
                </div>
            <p>&nbsp;</p>

        </body>
    </html>
    <?php
        include 'template/footer.php';

it will display the select button but will not display the data from the table and will not allow me to save the info when it is chosen.

Thanks

tokick4 commented 11 years ago

Sean, I found that I need to change this: $selects["active"] = array("1"=>"true","0"=>"false"); I change "active" to "idemployee" from the table but the array values 0, 1 need to come from the table of the Left Join employe_list. I cannot get it to pull that data from the table and grid it in the select.

tokick4 commented 11 years ago

Ok dummy me the active select was for static select and the content select is for dynamic selecting. Now I have this right in my mind how do I CONCAT to filed in this: $selects["idemployee"] = $grid->makeSelect("contact_id","last_name","first_name");//fields from table It will only show the last name and not both.

optikalefx commented 11 years ago

You're close. makeSelect takes only 2 things. 1 is the KEY that will be the VALUE of the

if a row has contact_id = 5 and a last_name = Clark makeSelect("contact_id","last_name"); will turn into

<select>
    <option value="5">Clark</option>
</select>

And the part where it says $selects['idemployee'] that key goes with the

<th col="idemployee">

of the select.

So if you wanted to have 2 select boxes, you would have 2 makeSelects

$selects['idemployee'] = $this->makeSelect("contact_id","last_name"); $selects['idsomethingelse'] = $this->makeSelect("someId","someOtherField");

if you wanted to show lastname and first name, you have to do a wee bit more work

function selectFunction($grid) {
    $selects = array();

    // category select
    $grid->table = "yourTable";
    $grid->fields = array("fullName"=>"CONCAT(firstName,' ',lastName)");
    $selects["idemployee"] = $grid->makeSelect("contact_id","yourTable.fullName");

    // render data          
    $grid->render($selects);
}

tokick4 commented 11 years ago

Thanks for the CONCAT info. That is what I was wanting to do. Another question is can a value be assigned to check boxes to change the assigned value in a table.

optikalefx commented 11 years ago

Checkboxes are only 0 or 1. On or off. BUT, you can catch the POST coming in and later it however you need to when it saves it can save a value

optikalefx / OpenJS-Grid

drop down menu #20