Author Topic: checkbox not working properly  (Read 5709 times)

Jignesh

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 46
    • View Profile
checkbox not working properly
« on: November 26, 2019, 04:48:32 pm »
Hi Paramvir,


The checkbox is not working properly:
1) If data value has true then checkbox display correctly but when I un-check the checkbox then the value set as "false" string-like yellow color box.

2) If data has false then display "false" string as a blue color box.



Below my checkbox code: I have Parent-child grid (first child as skip checkbox)
                      {
                            title: datasetnames[k], menuInClose: true, sortable: false,
                            align: "center", colModel: [ {
                                title: "", width: "2%", sortable: false,                                                           
                                align: "center",
                                exportRender: false,
                                nodrag: true,
                                nodrop: true,
                                type: 'checkbox',
                                dataIndx: "skip_" + datasetnames[k],
                                dataType: 'bool',
                                cb: { all: true, header: false }                             
                            },
                            {
                                title: "Data", sortable: false,
                                width: "15%",
                                dataType: "string",
                                dataIndx: datasetnames[k],
                                cls: 'hideLeftborder',
                                nodrag: true,
                                nodrop: true,
                                filter: { crules: [{ condition: 'contain' }] }
                            }]
                        }







3) Before first-second points, I have to use below code for render checkbox code Is working completely but adding a new column by context menu then render event not working and when saving button click then I have not got value in browser console tab as grid.getChanges({ format: "byVal" })

{
                            title: datasetnames[k], menuInClose: true, sortable: false,
                            align: "center", colModel: [ {
                                title: "", width: "2%", sortable: false,                             
                                render: function (ui) {
                                    var rowData = ui.rowData,
                                        dataIndx = ui.dataIndx;
                                    ldataIndx = datasetnames[k];

                                    rowData.pq_cellcls = rowData.pq_cellcls || {};
                                    if (rowData[dataIndx] == true) {
                                        rowData.pq_cellcls[dataIndx] = 'grey';
                                        rowData.pq_cellcls[dataIndx.split("skip_")[1]] = 'grey';
                                        return "<input type='checkbox' " + (ui.cellData ? "checked='checked'" : "") + " />";
                                    }
                                    else {
                                        rowData.pq_cellcls[dataIndx] = '';
                                        rowData.pq_cellcls[dataIndx.split("skip_")[1]] = '';
                                        return "<input type='checkbox' " + (ui.cellData ? "checked='checked'" : "") + " />";
                                    }
                                },
                                align: "center",
                                exportRender: false,
                                nodrag: true,
                                nodrop: true,
                                type: 'checkbox',
                                dataIndx: "skip_" + datasetnames[k],
                                dataType: 'bool',
                                cb: { all: true, header: false }                             
                            },
                            {
                                title: "Data", sortable: false,
                                width: "15%",
                                dataType: "string",
                                dataIndx: datasetnames[k],
                                cls: 'hideLeftborder',
                                nodrag: true,
                                nodrop: true,
                                filter: { crules: [{ condition: 'contain' }] }
                            }]
                        }




Thank you,
Jignesh

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: checkbox not working properly
« Reply #1 on: November 26, 2019, 05:48:20 pm »
Please follow these examples to create checkbox columns:

https://paramquery.com/pro/demos/checkbox_id

https://paramquery.com/pro/demos/checkbox

Please share a jsfiddle/ plnkr if still facing issues.

Jignesh

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 46
    • View Profile
Re: checkbox not working properly
« Reply #2 on: November 26, 2019, 07:25:57 pm »
Thank you Paramvir,

But checkbox issue still happing,  I have no idea about how to make a demo in jsfiddle so I have created a sample project and send your support emai title as  Wetransfer link for attachment email id as "[email protected]".

I have tried both samples Js and CSS of "Param demo" and "Param Pro demo" but not one is working for me.

Please help me with that.

Thank you,
Jignesh
« Last Edit: November 26, 2019, 07:58:52 pm by Jignesh »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: checkbox not working properly
« Reply #3 on: November 27, 2019, 08:28:27 pm »
Please don't create checkbox markup in column render callbacks and follow these jsfiddles as reference to create checkbox columns the right way:

https://jsfiddle.net/kejn4p0g/

https://jsfiddle.net/eLt4jfov/
« Last Edit: November 29, 2019, 09:16:17 pm by paramvir »

Jignesh

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 46
    • View Profile
Re: checkbox not working properly
« Reply #4 on: November 29, 2019, 12:01:48 pm »
Hi Paramvir,

Thank your quick response.

I have tried code which you mentioned in your last reply but the same issue I facing which I mentioned above also attached a screenshot.

I have also added pqgrid.js screenshot for not working on uncheck checkbox.

Below are issue and requirements:

1) checkbox value has false then display as "false" string but If checkbox value has true then display as checkbox (Green color box) I have tried your code put into col model and remove checkbox render event as mentioned in your last reply.

2) In project requirement, if checkbox marked as true then checkbox column and next Data column background color changed as "grey " color.  Same reverse if unchecked then both columns background color changed grey to white. How to achieve this requirement.



And below code which I tried and also commented render event:

{  title: lTitle , menuInClose: true, sortable: false, align: "center",
colModel: [ {
    title: "", width: "2%", dataType: "bool", sortable: false, 
        type: 'checkBoxSelection', dataType: 'bool',
        cb: {
            all: false, //checkbox selection in the header affect current page only.
            header: true //show checkbox in header.
        },
    //render: function (ui) {
    //    var rowData = ui.rowData,
    //        dataIndx = ui.dataIndx;
    //    ldataIndx = datasetnames[k];
    //    rowData.pq_cellcls = rowData.pq_cellcls || {};
    //    if (rowData[dataIndx] == true) {
    //        if (rowData.pq_cellcls[dataIndx] == undefined) {
    //            rowData.pq_cellcls[dataIndx] = 'grey';
    //            rowData.pq_cellcls[dataIndx.split("skip_")[1]] = ' grey';
    //        } else {
    //            rowData.pq_cellcls[dataIndx] = 'grey ' + rowData.pq_cellcls[dataIndx].replace("grey","");
    //            rowData.pq_cellcls[dataIndx.split("skip_")[1]] = ' grey ' + rowData.pq_cellcls[dataIndx.split("skip_")[1]].replace("grey", "");;
    //        }
    //        return "<input type='checkbox' " + (ui.cellData ? "checked='checked'" : "") + " />";
    //    }
    //    else {
    //        if (rowData.pq_cellcls[dataIndx] == undefined) {
    //            rowData.pq_cellcls[dataIndx] = '';
    //            rowData.pq_cellcls[dataIndx.split("skip_")[1]] = '';
    //        } else {
    //            rowData.pq_cellcls[dataIndx] = rowData.pq_cellcls[dataIndx].replace("grey","");
    //            rowData.pq_cellcls[dataIndx.split("skip_")[1]] = rowData.pq_cellcls[dataIndx.split("skip_")[1]].replace("grey", "");
    //        }
    //        return "<input type='checkbox' " + (ui.cellData ? "checked='checked'" : "") + " />";
    //    }
    //},
    align: "center",dataIndx: "skip_" + datasetnames[k],exportRender: false,editor: false,nodrag: true,nodrop: true,cls: 'hideRightborder'
},
{
    title: "Data", sortable: false,width: "15%",dataType: "string",dataIndx: datasetnames[k],cls: 'hideLeftborder ui-state-default',nodrag: true,nodrop: true,filter: { crules: [{ condition: 'contain' }] }
}



Please give me some solution.


Thank you,
Jignesh

« Last Edit: November 29, 2019, 12:59:43 pm by Jignesh »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: checkbox not working properly
« Reply #5 on: November 29, 2019, 09:55:14 pm »
Quote
1) checkbox value has false then display as "false" string but If checkbox value has true then display as checkbox (Green color box) I have tried your code put into col model and remove checkbox render event as mentioned in your last reply.

Please check the cell values in data source supplied to grid. Since column dataType is "bool", cell values should be true/ false not "true"/"false".
Also set type: 'checkbox' instead of type: 'checkBoxSelection' for the column.

Quote
2) In project requirement, if checkbox marked as true then checkbox column and next Data column background color changed as "grey " color.  Same reverse if unchecked then both columns background color changed grey to white. How to achieve this requirement.

Conditional styles can be added by implementing column.render callback for each column.

Code: [Select]
render: function(ui){
return ui.cellData===ui.column.cb.check? {style:"color:red;background:lightgrey;"}:{style:"color:green;"}
}

Please check this example jsfiddle: https://jsfiddle.net/78kb6jge/
« Last Edit: November 29, 2019, 09:57:04 pm by paramvir »

Jignesh

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 46
    • View Profile
Re: checkbox not working properly
« Reply #6 on: December 02, 2019, 05:15:46 pm »
Hi Paramvir,

Thank you for your response. You have posted code which has worked without render event in checkbox.

But When I have added new column (checkbox column +  string column) to use context menu then checkbox has not display in columns.

I have attached screenshot for that Please help me on that.

And also add JSfiddel:

https://jsfiddle.net/cherishPatel/k5s80Lhr/3/




Below are my new column code as :


 self.Columns().alter(function () {
                                                self.option('colModel').splice(ui.colIndx, 0, {
                                                    title: title,
                                                   
                                                    colModel: [{
                                                        title: "",  dataIndx: "skip_" + title,
                                                        cb: {
                                                            all: false, //header checkbox to affect checkboxes on all pages.
                                                            header: true, //for header checkbox.
                                                            check: "YES", //check the checkbox when cell value is "YES".
                                                            uncheck: "NO" //uncheck when "NO".
                                                        },
                                                        render: function (ui) {                                                           
                                                            return ui.cellData === ui.column.cb.check ? { style: "background:lightgrey;" } : { style: "" }
                                                        },
                                                        dataType: "bool",
                                                        editor: true, //cell renderer i.e., checkbox serves as editor, so no separate editor.
                                                        //editable: function (ui) {
                                                        //    //to make checkboxes editable selectively.
                                                        //    return !ui.rowData.disabled;
                                                        //},
                                                        useLabel: false,

                                                        align: "center", exportRender: false, type: 'checkbox', cls: 'hideRightborder'

                                                    },
                                                    {
                                                        title: "Data",
                                                        sortable: false,
                                                        dataIndx: title,
                                                        width: "15%",
                                                        dataType: "string",
                                                        cls: 'hideLeftborder',
                                                        nodrag: true,
                                                        nodrop: true,
                                                        filter: { crules: [{ condition: 'contain' }] },
                                                        //render: function (ui) {
                                                        //    var column = this.getColumn({ dataIndx: 'skip_' + ui.column.dataIndx }),
                                                        //        state = ui.rowData["skip_" + ui.dataIndx];
                                                        //    if (column != undefined) {
                                                        //        check = column.cb.check,
                                                        //            uncheck = column.cb.uncheck;
                                                        //        if (state === check) {
                                                        //            return { style: "background:lightgrey;" }
                                                        //        }
                                                        //        else if (state === uncheck) {
                                                        //            return { style: "" }
                                                        //        }
                                                        //    }
                                                        //}
                                                    }
                                                    ]
                                                })
                                            })




paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: checkbox not working properly
« Reply #7 on: December 02, 2019, 09:17:53 pm »
Currently that's a limitation of checkbox columns, they shouldn't be hidden, added or removed dynamically as mentioned in the API docs.

https://paramquery.com/pro/api#option-column-type