[Alastair WalkerParticipant]

Hello – Peter,

When I try:

var sortColumn = jQuery(selector).jqxTreeGrid(‘getInstance’).sortcolumn;

sortColumn is returned as ‘undefined’.

Note: The treegrid widget was set up in its properties to be sortable, and secondly, a column was clicked to ensure a valid sort direction.

Alastair

[Alastair WalkerParticipant]

Hello – Peter,

Further to my earlier note, if I use the following test:

try
{
sortColumn = jQuery(selector).jqxTreeGrid(‘sortcolumn’);
}
catch(err)
{
console.log(‘JS ‘ + ‘ ‘+ err);
}

I get the error message ‘jqxCore: Invalid parameter ‘[sortcolumn]’ does not exist.’

Any guidance here will be appreciated!

Alastair

[Alastair WalkerParticipant]

Just to record my closure actions regarding this topic, I decided that the most effective resolution to my problem was to simply access the contents of the css style file associated with the theme in question.
I then reduced the style file contents to an associate array with rows comprising the css style name and the associated object comprising background color, etc.

I can then use a selected css style name .e.g. jqx-grid-column-header to access the associate array with its styling object comprising background color, etc.

Alastair

[Alastair WalkerParticipant]

With all due respect, I think my question is misunderstood. I am not trying to set the color of the header or cell, I want to read its current value.

Many thanks,

Alastair

[Alastair WalkerParticipant]

Thank you! Alastair

[Alastair WalkerParticipant]

Thank you very much!

Alastair

[Alastair WalkerParticipant]

Hello – Peter,

This method now works well! Thank you!

A further question though.

jqxGrid has a similar method for obtaining information on sorting data as ‘getsortinformation’.

Is there a similar set of methods applicable to jqxTreeGrid?

Any guidance on this will also be appreciated!

Alastair

[Alastair WalkerParticipant]

Hello – Peter – thank you for the response.

When I invoke the function as described, I get returned to me the operator value e.g. ‘and’ and the applicable data field value e.g. ‘id’.

How do I access the filter value as entered in the filter window e.g. ‘3’, if the intended filter expression is ‘id = 3’?

Many thanks,

Alastair

[Alastair WalkerParticipant]

I founding testing

event.args.type === null

proved to be a sound approach to establishing whether the event trigger originated from the user or from code.

Thank you for the guidance!
Many thanks!
Alastair

[Alastair WalkerParticipant]

I could not get the event based methods to work.

I have looked at the ‘focus’ method, which seems to have the right idea (i.e. being able to highlight a row), but it does not have an element handle to it, so how does one shift the focus from one row to another?

I also looked at the ‘enableItem’ method, as the demo seemed also sets the focus on a new row. But in trying it out, the affected row was not highlighted. So I must be missing something there.

Alastair

[Alastair WalkerParticipant]

I think this is the right approach.

A small correction though. It should read as follows:

event.preventDefault();
event.stopPropagation();

Otherwise a jQuery failure is raised.

Many thanks,

Alastair

[Alastair WalkerParticipant]

Hello – Peter, I have a similar problem. I have two trees linked by a grid row. When, say, the left tree is used to select a grid row, and the right tree is then selected to show the linked child row, the
jQuery(selector).jqxTree(‘selectItem’,item.element) action then triggers an event, which then interfers with the selection of selection of the left tree row.
I understand that event.stopPropagation is to be used to inhibit the action of the right tree row selection, but it is unclear to me how to implement this.
Ideally, I would like to inhibit/disable the event triggered by the right tree row selection.
Any guidance on a way forward would be really appreciated!
Alastair Walker

[Alastair WalkerParticipant]

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

[Alastair WalkerParticipant]

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

[Alastair WalkerParticipant]

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

[Author]

Posts