Problem about checkbox checked.

[noctrona]

Hi,

I use render function to return a checkbox for a column. But I confused how to let the checkbox checked. I saw a demo about this. But I try it with my codes, have some problems.
Please have a look with my codes:

Code: [Select]

{ title: "PMM Done", width: 64,align: "center",dataIndx: "pmmdone",editable:false,
                         
                          render: function (ui){
                                var rowData = ui.rowData, dataIndx = ui.dataIndx;
                                var val = rowData[dataIndx];
                                str = "";
                                if (val) {
                                    str = "checked='checked'";
                                }
                                 return "<input type='checkbox' " + str + "/>";
                          }


Then

Code: [Select]

obj.rowSelect = function (evt, ui) {           
            var rowIndx = ui.rowIndx;
            var data = obj.dataModel.data;
            var rowData = ui.rowData;
            rowData["pmmdone"] = true;
            //data[rowIndx]["pmmdone"] = true;
           
            $("#grid_json").pqGrid("refreshCell", { rowIndx: rowIndx, dataIndx: "pmmdone"});
        }
       
        obj.rowUnSelect = function (evt, ui) {
            var rowIndx = ui.rowIndx;
            var rowData = ui.rowData;
            rowData["pmmdone"] = false;
            //data[rowIndx]["pmmdone"] = false;           
            $("#grid_json").pqGrid("refreshCell", { rowIndx: rowIndx, dataIndx: "pmmdone"});
        }

When I test it, for example, I have four records in grid. I select the first one as checked, when I move the sidebar of bottom the next two rows' checkbox will be checked too.
And there is a error about rowUnSelect function:
" Cannot set property 'pmmdone' of undefined ".


So is there anything I missed or any mistake?


Thank you!

[paramvir]

Apparently your code looks fine unless you have written some other functions which deal with selections or render.

Could you please post your entire grid code for review.

[noctrona]

Apparently your code looks fine unless you have written some other functions which deal with selections or render.

Could you please post your entire grid code for review.

Hi,

Other codes much more to post....
And I saw the demo and try use "type: 'checkBoxSelection'" way. But when I add this column, I have the following error message on page.

Code: [Select]

{title: "", dataIndx: "pmmdone",width: 50, type: 'checkBoxSelection'}

The error is :
Cannot call method 'html' of null   pqgrid.min.js:9

The js I used as:

Code: [Select]

<!--jQuery dependencies-->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

    <!--ParamQuery Grid files-->
    <link rel="stylesheet" href="{!URLFOR($Resource.paramQueryPro, 'pqgrid.min.css')}" />
    <script src="{!URLFOR($Resource.paramQueryPro, 'pqgrid.min.js')}"></script>


[noctrona]

Apparently your code looks fine unless you have written some other functions which deal with selections or render.

Could you please post your entire grid code for review.

Hi,

As I check, I think the rowselect and unselect can't address my requirement. I generate a column with checkbox, when user checked one of them the corresponding row will be lock. But if I ues rowSelect, when I click this row at anywhere, the checkbox will be checked.

So for the column:

Code: [Select]

{ title: "PMM Done", width: 64,align: "center",dataIndx: "pmmdone",editable:false,
   render: function (ui){
        var rowData = ui.rowData, dataIndx = ui.dataIndx;
        var val = rowData[dataIndx];
        str = "";
        if (val) {
            str = "checked='checked'";
        }
        return "<input id='mycheck' type='checkbox' " + str + " onclick='pmmDone()' />"; 
  }
}


Then in pmmDone() function:
I have a function can get which row I just edit. Then I can add a class for this row. But by following codes, I can only know which row I edit, I can't know the checkbox status(checked/uncheck) for this row.

Code: [Select]

function pmmDone(){
        var rowIndx = getRowIndx();
        var DM = $( "#grid_json" ).pqGrid( "option", "dataModel" );
        var gridData = DM.data;
        $("#grid_json").pqGrid("addClass", {rowIndx: rowIndx, cls: 'row-unEdit'} );
}




I try to pass "ui" in this function like this way:

Code: [Select]

return "<input id='mycheck' type='checkbox' " + str + " onclick='pmmDone("+ui+")' />"; 

But it can't work.

So do you have any suggestion?

[paramvir]

I'm not clear about your use case about the need to use checkboxes to add classes, select rows and edit the rows together.

you can use cellclick event instead of inline binding onclick to checkbox to get rowIndx, rowData. For example http://paramquery.com/demos/selection_custom

you can find out the checked / unchecked state of checkbox by any of the below methods whichever suit you

1) $(evt.target).is(":checked") == true / false

or

2) rowData["pmmdone"] == true /false

[noctrona]

I'm not clear about your use case about the need to use checkboxes to add classes, select rows and edit the rows together.

you can use cellclick event instead of inline binding onclick to checkbox to get rowIndx, rowData. For example http://paramquery.com/demos/selection_custom

you can find out the checked / unchecked state of checkbox by any of the below methods whichever suit you

1) $(evt.target).is(":checked") == true / false

or

2) rowData["pmmdone"] == true /false

Hi,

Thanks for your suggestion.

And actually, my wanted is there is a column name "pmmdone", it's a checkbox on my gird, and it as a mark so when user checked it, I will set this row as unedit. When user uncheck it I will set this row editable. So this checkbox not a function to select a row, it just like a field for a record, and it's value will be "true" or "false".

I saw your suggest link demo. And there is an attribute

Code: [Select]

selectionModel: { type: 'cell', mode: 'block' }

So if we set this for grid, when I click a row, only the cell which I just click will highlight, instead of the whole row. Then the following will run when I checked the checkbox.

Code: [Select]

newObj.rowSelect = function (evt, ui) {           
        var rowIndx = ui.rowIndx;
        newObj.dataModel.data[rowIndx][7] = true;
        $grid1.pqGrid("refreshCell", { rowIndx: rowIndx, dataIndx: 7 });
    }
    newObj.rowUnSelect = function (evt, ui) {
        var rowIndx = ui.rowIndx,
            data = ui.dataModel.data,
            evt = ui.evt;
        data[rowIndx][7] = false;           
        $grid1.pqGrid("refreshCell", { rowIndx: rowIndx, dataIndx: 7 });
    }

But I still want to keep the whole row select model. And when user click my pmmdone checkbox, I just get the rowindx and the checkbox result, then I can do other things.



Thank you!

[paramvir]

I understand that you want to use checkbox to mark the rows editable/ non - editable according to status of the checkbox.

In this case you don't need rowSelect / rowUnSelect events and you can use selectionModel : { type: 'row' } if you want.

All you need is cellClick event to check and store the state of checkbox in pmmdone.

obj.cellClick = function (evt, ui){
  var $target = $(evt.target);
  if($target.is("input[type='checkbox']"){
    if($target.is(":checked"){
       ui.rowData['pmmdone'] = true;
    } 
    else{
       ui.rowData['pmmdone'] = false;
    }
  }
}

and editable callback

obj.editable = function (ui ){
  return ui.rowData['pmmdone'];
}

Please Note: The above code sample is provided to give you the idea and is not tested in actual use case so you may have to make minor adjustments to it.