Treegrid display a checkbox in a column - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkbox display using checkbox widget, treegrid

This topic contains 8 replies, has 2 voices, and was last updated by Alastair Walker 3 years, 7 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Treegrid display a checkbox in a column Posts

June 1, 2021 at 8:01 am Treegrid display a checkbox in a column #120267

Participant

Hi – I wonder if some help can be provided on the following matter.

I have set up a treegrid demo, with a righthand column in which I am trying to set up a checkbox to display boolean data.

The demo script is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
    <meta charset="utf-8">
<head>
    <title id="Description">TreeGrid displaying JSON data with checkbox display </title>
    <link rel="stylesheet" href="../libraries/jqwidgetslibrary/jqwidgets/styles/jqx.base.css" type="text/css" />
    
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxlistbox.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () 
        {
            var rows = [
			{"id_unique":"CplQxykdBQ2Fk3rz2LUZcDNuAbrgeD","id_parent_unique":"2e19a194bc6cad9683bdb896b2beca","list_toc_index":"80","description1":"activateCreateEditor_GF","published":1},
            {"id_unique":"uWOCiw6rVNoLNhZNkdCLPnFIZVKS63","id_parent_unique":"2e19a194bc6cad9683bdb896b2beca","list_toc_index":"81","description1":"activateJSScript","published":0},
            {"id_unique":"C49l4YYlmg1uPp4JfHmAC3i9bJ3WBJ","id_parent_unique":"2e19a194bc6cad9683bdb896b2beca","list_toc_index":"82","description1":"addColumnsHeadersCssToStylesheet","published":0},
            {"id_unique":"0bYgBkfnmfMHqASYTWoArq2XZHQQA5","id_parent_unique":"C49l4YYlmg1uPp4JfHmAC3i9bJ3WBJ","list_toc_index":"82.1","description1":"addToStyleheet","published":0},
            {"id_unique":"NVxq0tEw6DJakp1w2C3xw6BkR96diO","id_parent_unique":"C49l4YYlmg1uPp4JfHmAC3i9bJ3WBJ","list_toc_index":"82.2","description1":"getColumnsHeadersCssArray","published":0},
            {"id_unique":"gWPhTIiLl79zO3finr73qIZDobXHBV","id_parent_unique":"2e19a194bc6cad9683bdb896b2beca","list_toc_index":"83","description1":"addGroupsHeadersCssToStylesheet","published":0},
            {"id_unique":"naHQt1nc0kaCuRncP3i8CljpwWEbue","id_parent_unique":"gWPhTIiLl79zO3finr73qIZDobXHBV","list_toc_index":"83.1","description1":"addToStyleheet","published":0},
            {"id_unique":"9HCuvTgwhksCBpXISpIYWQ12MVboGK","id_parent_unique":"gWPhTIiLl79zO3finr73qIZDobXHBV","list_toc_index":"83.2","description1":"getGroupsHeadersCssArray","published":0},
            {"id_unique":"memGKCf7vgVboARLX3iShxr7wjZW9J","id_parent_unique":"2e19a194bc6cad9683bdb896b2beca","list_toc_index":"84","description1":"addToStyleheet","published":1},
            {"id_unique":"oIzX64yE6vg27wd5Qc088eqvplGbY1","id_parent_unique":"xsamrrpKmql3pyQoaaHChRZykWWeMH","list_toc_index":"85.1","description1":"getSourceParam","published":0}];
            
            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                {name:"id_unique",type:"text"},
                {name:"id_parent_unique",type:"text"},
                {name:"list_toc_index",type:"text"},
                {name:"description1",type:"text"},
                {name:"published",type:"bool"}],
                
                hierarchy:
                {
                    keyDataField: { name: 'id_unique' },
                    parentDataField: { name: 'id_parent_unique' }
                },
                id: 'id_unique',
                localData: rows
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            var columns = [
            {text:"Index",datafield:"list_toc_index",width:"120",editable:false},
            {text:"Function Name",datafield:"description1",width:"300",editable:false},
            {text:"Published",datafield:"published",width:"100",editable:true,columnType:"template",
	            createEditor: function (row, cellvalue, editor, cellText, width, height) 
	            {
	            	editor.jqxCheckBox({ checked: cellvalue });
	            },
	            initEditor: function (row, cellvalue, editor, celltext, width, height) 
	            {
	        	editor.jqxCheckBox('val');
	            }
            }];
           
            $("#treeGrid").jqxTreeGrid(
            {
		source: dataAdapter,
              	width: 700,
		columns: columns,
		editable: true
            });
        });
    </script>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
</body>
</html>

As far as I can understand the treegrid properties, in the ‘published’ column I have used columnType:”template”.

I have then set up a createEditor function, followed by an initEditor function.

However, these two functions seem to have no impact on the display – i.e. a checkbox display in the ‘published’ column.

Clearly, there is a step I am missing somewhere.

Any help in getting the checkbox to display will be really appreciated.
PS: I have search all the treegrid examples (and checkbox), but could not see how to correct the present problem.

Any help on this matter will be really appreciated.

By the way, I am familiar with the checkboxes property on the id column, but I am keen to set up the checkbox on a column independent of the id column.

Many thanks,

Alastair

June 1, 2021 at 1:44 pm Treegrid display a checkbox in a column #120273

Yavor Dashev

Participant

Hi Alastair,

I have prepared a code example using the code that you provided with some changes according the functionality you want to achieve.
The reason for this behavior is because ‘createEditor’ and ‘initEditor’ are initialized when you start editing the column.
That is why in my code example I’m using ‘cellsRenderer’ like so:

 var columns = [
            {text:"Index",datafield:"list_toc_index",width:120},
            {text:"Function Name",datafield:"description1",width:300},
            {text:"Published",datafield:"published",width: 100, columnType:"template",
                cellsRenderer: function (row, column, value, rowData) {
                        var container = '<div style="width: 100%; height: 100%;">';
                        let checkBox ='<div class='jqxcheckbox'>Click me</div>';

                        container+= checkBox ;
             
                        return container;
                    },
               
	            createEditor: function (row, cellvalue, editor, cellText, width, height) 
	            {
        
	            },
	            initEditor: function (row, cellvalue, editor, celltext, width, height) 
	            {
                 
               
	            },
                getEditorValue: function (row, cellvalue, editor) {

                }
            }];
           
            $("#treeGrid").jqxTreeGrid(
                    {
                sortable: true,
                editable: true,
                source: dataAdapter,
                rendered: function (){
                    $(".jqxcheckbox").jqxCheckBox({ width: 120, height: 25 });
                },            
                columns: columns,
                width: 700,
                
              
            });

From there you can handle for example input with ‘initEditor’ callbacks.

Let me know if that suggestion suits you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

June 2, 2021 at 6:56 am Treegrid display a checkbox in a column #120281

Alastair Walker

Participant

Hello – Yavor,

I think we are nearly there, but some issues remain.

Firstly, the statement:

let checkBox ='<div class=’jqxcheckbox’>Click me</div>’;

needed to be corrected to:

let checkBox =”<div class=’jqxcheckbox’>Click me</div>”;

Secondly, I need the value to be displayed as a checked box. i.e.

I suspect that a statement like:

checkBox.jqxCheckBox({ checked:value }); should follow the let statement.

But when I try this I get the following error:

Uncaught TypeError: checkBox.jqxCheckBox is not a function

Clearly, I am still missing something.

Any help on this will be appreciated!

Alastair

June 2, 2021 at 5:57 pm Treegrid display a checkbox in a column #120290

Yavor Dashev

Participant

Hi Alastair,

My statement was correct because I have used ‘inch’ apostrophe symbol(`) which is formatted differently in the forum into single quotation mark.

However there is and easier solution for this case:
let checkBox = "<div class='jqxcheckbox' checked=" +value +">Click me</div>";;

Also the error that you encountered is because the element doesn’t exist in the DOM on the time of initialisation of the method for the checkbox.

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

June 4, 2021 at 7:54 am Treegrid display a checkbox in a column #120318

Alastair Walker

Participant

Once again, thank you very much!

I have implemented:


let checkBox ="<div class='jqxcheckbox' style='test-align: center ;' checked=" + value + "></div>";

In spite of the style=’test-align: center ;’, the checkbox is still left aligned.

Is there some CSS insight that I am missing – in order to get the checkbox centered in the column?

Best regards,

Alastair

June 4, 2021 at 8:13 am Treegrid display a checkbox in a column #120319

Yavor Dashev

Participant

Hi Alastair,

Using the set up that you use I have yet prepared another code snippet for you which achieves the functionality that you need for your use case.
First create CSS class for the checkbox:

        .checkbox-class{
            margin-left: auto!important;
            margin-right: auto!important;
            width: fit-content!important;
        }

And in the cellsRenderer callback add the checkbox class:
let checkBox = "<div class='jqxcheckbox checkbox-class' checked=" +value +"></div>";

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

June 5, 2021 at 2:33 pm Treegrid display a checkbox in a column #120329

Alastair Walker

Participant

Hello – Yavor,

We are not quite there yet. The checkbox is still left aligned.

I have revised the demo script as follows:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html lang="en">
        <meta charset="utf-8">
    <head>
        <title id="Description">TreeGrid displaying JSON data with checkbox display </title>
        <link rel="stylesheet" href="../libraries/jqwidgetslibrary/jqwidgets/styles/jqx.base.css" type="text/css" />

        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxdatatable.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxdatatable.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxtreegrid.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../libraries/jqwidgetslibrary/jqwidgets/jqxlistbox.js"></script>
        
        <style>
    	.checkbox-class
    	{
            margin-left: auto!important;
            margin-right: auto!important;
            width: fit-content!important;
        }
	</style>
		
        <script type="text/javascript">
            $(document).ready(function () 
            {
                var rows = [
    			{"id_unique":"CplQxykdBQ2Fk3rz2LUZcDNuAbrgeD","id_parent_unique":"2e19a194bc6cad9683bdb896b2beca","list_toc_index":"80","description1":"activateCreateEditor_GF","published":1},
                {"id_unique":"uWOCiw6rVNoLNhZNkdCLPnFIZVKS63","id_parent_unique":"2e19a194bc6cad9683bdb896b2beca","list_toc_index":"81","description1":"activateJSScript","published":0},
                {"id_unique":"C49l4YYlmg1uPp4JfHmAC3i9bJ3WBJ","id_parent_unique":"2e19a194bc6cad9683bdb896b2beca","list_toc_index":"82","description1":"addColumnsHeadersCssToStylesheet","published":0},
                {"id_unique":"0bYgBkfnmfMHqASYTWoArq2XZHQQA5","id_parent_unique":"C49l4YYlmg1uPp4JfHmAC3i9bJ3WBJ","list_toc_index":"82.1","description1":"addToStyleheet","published":0},
                {"id_unique":"NVxq0tEw6DJakp1w2C3xw6BkR96diO","id_parent_unique":"C49l4YYlmg1uPp4JfHmAC3i9bJ3WBJ","list_toc_index":"82.2","description1":"getColumnsHeadersCssArray","published":0},
                {"id_unique":"gWPhTIiLl79zO3finr73qIZDobXHBV","id_parent_unique":"2e19a194bc6cad9683bdb896b2beca","list_toc_index":"83","description1":"addGroupsHeadersCssToStylesheet","published":0},
                {"id_unique":"naHQt1nc0kaCuRncP3i8CljpwWEbue","id_parent_unique":"gWPhTIiLl79zO3finr73qIZDobXHBV","list_toc_index":"83.1","description1":"addToStyleheet","published":0},
                {"id_unique":"9HCuvTgwhksCBpXISpIYWQ12MVboGK","id_parent_unique":"gWPhTIiLl79zO3finr73qIZDobXHBV","list_toc_index":"83.2","description1":"getGroupsHeadersCssArray","published":0},
                {"id_unique":"memGKCf7vgVboARLX3iShxr7wjZW9J","id_parent_unique":"2e19a194bc6cad9683bdb896b2beca","list_toc_index":"84","description1":"addToStyleheet","published":1},
                {"id_unique":"oIzX64yE6vg27wd5Qc088eqvplGbY1","id_parent_unique":"xsamrrpKmql3pyQoaaHChRZykWWeMH","list_toc_index":"85.1","description1":"getSourceParam","published":0}];
                
                // prepare the data
                var source =
                {
                    dataType: "json",
                    dataFields: [
                    {name:"id_unique",type:"text"},
                    {name:"id_parent_unique",type:"text"},
                    {name:"list_toc_index",type:"text"},
                    {name:"description1",type:"text"},
                    {name:"published",type:"integer"}],
                    
                    hierarchy:
                    {
                        keyDataField: { name: 'id_unique' },
                        parentDataField: { name: 'id_parent_unique' }
                    },
                    id: 'id_unique',
                    localData: rows
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
     			var columns = 
     			[
              		{text:"Index",datafield:"list_toc_index",width:120},
              		{text:"Function Name",datafield:"description1",width:300},
	                {text:"Published",
	                datafield:"published",
	                width: 300, 
	                columnType:"template",
	                cellsRenderer: function (row, column, value, rowData) 
	                {
	                	var container = '<div style="width: 100%; height: 100%;">';
	                	let checkBox = "<div class='jqxcheckbox checkbox-class' checked=" +value +"></div>";
	                    container += checkBox;   
	                    return container;
	                },
	    	        createEditor: function (row, cellvalue, editor, cellText, width, height) 
	    	        {
	    	        },
	    	        initEditor: function (row, cellvalue, editor, celltext, width, height) 
	    	        {
	    	        },
	                getEditorValue: function (row, cellvalue, editor) 
	                {
	                }
                }];
               
                $("#treeGrid").jqxTreeGrid(
                {
                	sortable: true,
            		editable: true,
                    source: dataAdapter,
                    rendered: function ()
                    {
                         $(".jqxcheckbox").jqxCheckBox({ width: 300, height: 25 });
                    },
                    columns: columns,
                    width: 700,
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="treeGrid">
        </div>
    </body>
    </html>

The css script has been added into the header.

The let statement was updated as per your response above.

Looking forward to your comments!

Many thanks,

Alastair

June 7, 2021 at 11:47 am Treegrid display a checkbox in a column #120335

Yavor Dashev

Participant

Hi Alastair,

I did manage to recreate the issue and from that I can guess that you tested the jqxTreeGrid in Firefox.
Anyway I have created another code snippet for you in order to work in FF:

    	.checkbox-class
    	{
            margin-left: auto!important;
            margin-right: auto!important;
            width: fit-content!important;
            display: flex!important;
            justify-content: center;
        }

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

June 8, 2021 at 9:55 am Treegrid display a checkbox in a column #120343

Alastair Walker

Participant

Great! Now sorted out OK. Yes – I am using Firefox. It did not occur to me try out an alternative browser!

Many thanks for the all the help provided! It is much appreciated!

Alastair

Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.