jQuery UI Widgets Forums TreeGrid Treegrid display a checkbox in a column

This topic contains 8 replies, has 2 voices, and was last updated by  Alastair Walker 1 week, 5 days ago.

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

  • Alastair Walker
    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


    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

    • This reply was modified 2 weeks, 4 days ago by  Yavor Dashev.

    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


    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

    • This reply was modified 2 weeks, 3 days ago by  Yavor Dashev.
    • This reply was modified 2 weeks, 3 days ago by  Yavor Dashev.
    • This reply was modified 2 weeks, 3 days ago by  Yavor Dashev.

    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


    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


    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


    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


    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

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

You must be logged in to reply to this topic.