One other note to anyone else trying this...  If you have cascadeCheck on and you want to uncheck a leaf, you have to make sure the parent is also unchecked.  If not, when the data is loaded, it will recheck the leaf for you.  When the parent is unchecked and a leaf is unchecked but there could be other leaves checked, the system will know to set the parent to intermediate.  That is the only way I've figured out to actually get a parent set to intermediate correctly.

Burce

OK, I think I have something that might work. 

1.  Call the getRoots method to get the data in the tree.  This will reflect any changes the user made after the initial load.
2.  Modify the array to reflect what we needed.  For example: roots[0].children[0].checked = true
3.  call the loadData method with the modified data.  This will update the tree, will set any needed states to intermediate, and most importantly NOT reload the tree from the server.

Actually manually calling the check method on the node will check the node but it also caused a reload of the tree from the server, wiping out the change.

Live and learn I guess....

Thanks!

Bruce

Thanks for the reply Jesper.

Let me see what I can put together for an example.  I might take the demo you pointed to and then add what I'm trying to do:

The tree gets loaded from the server and the user can then check or uncheck whatever they want.  All that works just fine.  The problem come when they have, say 100 nodes, each with a set of leaves and they want to only check one of the leaves in all the nodes.  That can take 200 clicks!  (100 to expand, 100 to click).   What I want to do is have a button that the user can select which of those they want checked (or unchecked) and have the javascript code do that for them.  Hope that makes sense....

If I do it the way I think you are suggesting, on a button press I would have to grab the contents of the tree, update it with the changes from the button, and then reload the entire tree again with this new data.  That might be the only way I can do it since none of what I've been trying to do has worked so far.  Worth a shot...

Bruce

I have a tree that I load from the server.  I have other buttons that are used to select specific leaf nodes in the tree based upon some selection.  I'm having a few issues:

• When I set "checked" on a node, the onCheck function is called.  It doesn't hurt anything but can be called a LOT if there are a large number of items to check.  I just disable that until I'm finished.  So far so good.
• When a leaf is checked, the parent doesn't go to in intermediate state.  I can also check that node but it does put a check there.  Expanding the parent does expand but it still doesn't set it to intermediate.  I haven't found a way to set that manually.
• The biggest issue is that when the code finishes, the tree is reloaded again from the host wiping out all the changes.  It seems to do this multiple times.  I don't have any explicit code that does that.  Not sure what is happening.  I've setup onBeforeLoad event to return false until we are done but that only stops the first one.  Again, not sure where they are coming from.

Before I go to the next step about filtering the data as it comes from the server based upon what things need to set, is there a better approach here?  Is there a way to stop the reload of the tree automatically?  

Hopefully someone can point me in the right direction.  Thanks in advance!

Bruce

I have a combogrid that I'm trying to load with some simple data that I already have.  I don't want to do another round trip to the server just to load the same content.  

Here is an example of data:

Code:

var testdata = [
   {"Name":"ActiveEndDate","MDNameOfDate":"ActiveEndDate","Duration":"0Y 0M 1D","Direction":"From","LocationName":"Vault"},
   {"Name":"RetentionEndDate","MDNameOfDate":"RetentionEndDate","Duration":"0Y 0M 2D","Direction":"To","LocationName":"Destroyed"}
];

I've tried several methods including just changing the "data" value and refreshing it but I can't seem to get any of this loaded into the combo grid.

Something else that I've noticed is that if, as a test, I create the combogrid and set the data : entry to the text above, it will load.  If I set it to data: testdata,  nothing is loaded.

I either get nothing (my favorite error message), typedef exception saying rows is undefined, or  Uncaught TypeError: $.fn.validatebox.methods[_5a9] is not a function.

While I can certainly setup a url on the server to regenerate this data, that seems a bit of a waste.

Can someone show me how to load this combogrid correctly?  I'm clearly missing something.

Thanks!

Bruce

OK, I think I now have a work-around.  I used your trick on the page but I had to remove all explicit panel components.  Instead, I had to use a layout with a north panel to hold the menu buttons and the center panel to hold everything else.  It does display slower but at least the rows are not cut off. 

Note that I tried to explicitly set the height of the panel and that had no effect.  The data grid still cutoff the number of rows that matched the height of the panel.  Am I missing something here or does this look like a bug?  I have a hard time believing that though because the "panel" is used in the layout... 

Anyway, thanks for your help! 

Bruce

Well, I can't get this to work either.  The data is displayed in the datagrid but the pager does not limit the output to just a page.  This shows all 200 rows instead.  The problem I have been having is when the pager limits the number of rows as specified by the page size.

I made a couple of changes to not have any errors generated when it runs...

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        var testData = [];
        for(var i=1; i<=200; i++){
            testData.push({
                Name:'Name'+i,
                Value:'Value'+i
            })
        }
        $(function(){
     $('#Summary_datagrid').datagrid({
         // url: FilePropertiesUrl,
         //method: 'get',
         data: testData,
         //title: // Not sure what to put here, if anything?

         fit: true,
         //width: 700,
         //height: 250,
         height: 'auto',
         fitColumns: false,
         singleSelect: true,
         striped: true,
         pagination: true,
         pagePosition: 'top',
         pageList: [10,20,30,40,50,100],
         pageSize: 10, 
         layout: ['list','sep','first','prev','next','last','refresh','manual','links','info'],
         loadMsg: 'Accessing Bank',
         rownumbers: true,
         
         
         frozenColumns: [[]],  // Important to clear if other views used it.
         columns: [
             [{
                 field: 'Name',
                 title: 'Property',
                 sortable: false
             },
             {
                 field: 'Value',
                 title: 'Value',
                 sortable: false
             }
             ]
             ],
             
             onRowContextMenu: function(e,index,row) {
                 e.preventDefault();
             },

             sortName: 'Name',
             sortOrder: 'asc',

             onLoadSuccess: function() {  // Says it has a data parameter but...
                 console.log("Data successfully loaded.");
                 //stopBusySpinner();
             },
             onLoadError: function() {
            console.log("Data failed to load in the grid.");
                // stopBusySpinner();
             }
     });
        })
    </script>
</head>
<body class="f-column">
<div id="header">
    <br>
    <span style="font-weight: bold;">DETAIL STATEMENT:</span>
    <span id='FileName'></span>
    <br>
    <br>
</div>
<div class="f-full">
    <div id="tabPanel" class="easyui-tabs" data-options="plain:true,border:false,fit:true">

    <div id="Summary_tab" title="Summary" >

    <div class="easyui-panel" >
    <div id="Summary_toolbar"></div>
    </div>



    <div id="Summary_layout" class="easyui-layout" data-options="fit:true">
       
        <div data-options="region:'center',fit:false,border:false,plain:true,split:false">
        <div id="Summary_datagrid" ></div>
        </div>
       
        <div data-options="region:'west',title:'Asset Instance Types',split:false,collapsed:false,collapsible:true" style="width:200px;">
        <table style="width:200px">
            <!-- some simple text goes here.  Removed for clarity.  -->
        </table>
        </div>
       
    </div> <!--  Summary_layout -->

    </div> <!--  Summary tab  -->
</div>

</div>
</body>
</html>

Evaluating easyui so still new to this...

I have a page that uses a layout where the center panel contains a data grid.  As long as I don't include anything above that layout, all the rows in the data grid are displayed.  However, I have other pages where I need to have the layout and data grid in a tab panel.  Above the layout is a panel that holds several menu buttons.  When I do this, the last few rows of the data grid are not viewable.  The scroll bar, if it appears, does not scroll far enough to display all the rows.  The data grid does know the correct number of entries, it just doesn't show those last rows. 

I also run into this with a tree and a treegrid as well.  If I have any panels or anything for that matter, above them, the last few nodes/rows are cut off.  I'm clearly missing something here...

Here is how I have the html setup.

Code:

<body>
<br>
<span style="font-weight: bold;">DETAIL STATEMENT:</span>
<span id='FileName'></span>
<br>
<br>
<div id="tabPanel" class="easyui-tabs" data-options="plain:true,border:false,fit:true">

<div id="Summary_tab" title="Summary" >

<div class="easyui-panel" >
<div id="Summary_toolbar"></div>
</div>



<div id="Summary_layout" class="easyui-layout" data-options="fit:true">

<div data-options="region:'center',fit:false,border:false,plain:true,split:false">
<div id="Summary_datagrid" ></div>
</div>

<div data-options="region:'west',title:'Asset Instance Types',split:false,collapsed:false,collapsible:true" style="width:200px;">
<table style="width:200px">
    <!-- some simple text goes here.  Removed for clarity.  -->
</table>
</div>

</div> <!--  Summary_layout -->

</div> <!--  Summary tab  -->

The summary datagrid is setup in javascript here:

Code:

// Setup the datagrid for the Summary tab.
$('#Summary_datagrid').datagrid({
url: FilePropertiesUrl,
method: 'get',
//title: // Not sure what to put here, if anything?

fit: true,
//width: 700,
//height: 250,
height: 'auto',
fitColumns: false,
singleSelect: true,
striped: true,
pagination: true,
pagePosition: 'top',
pageList: [10,20,30,40,50,100],
pageSize: 10, 
layout: ['list','sep','first','prev','next','last','refresh','manual','links','info'],
loadMsg: 'Accessing Bank',
rownumbers: true,


frozenColumns: [[]],  // Important to clear if other views used it.
columns: [
[{
field: 'Name',
title: 'Property',
sortable: false
},
{
field: 'Value',
title: 'Value',
sortable: false
}
]
],

onRowContextMenu: function(e,index,row) {
e.preventDefault();
},

sortName: 'Name',
sortOrder: 'asc',

onLoadSuccess: function() {  // Says it has a data parameter but...
log.debug("Data successfully loaded.");
stopBusySpinner();
},
onLoadError: function() {
log.error("Data failed to load in the grid.");
stopBusySpinner();
}
});

I've tried many different permutations of properties but the only way I can get all the rows to be displayed is to remove the tabs and the panel that hold the menu buttons. 

Can someone point me in the right direction?

Thanks in advance!

Bruce