In my treegrid I can see my data, but all row numbers are zeros. Why is that?

Thanks

Yes, that helped, thanks.

Here is my layout:

Code:

<div easyui-layout fit="true" style="height:88%;">
    <div data-options="region:'west',title:'Asset Tree',split:true" style="width:25%;">
        <div style="width:100%;height:100%">
            <table assets-treegrid ng-model="assets" fit="true" pagination="true"
                   rownumbers="true" singleselect="true" idField="id" treeField="name"></table>
        </div>
    </div>
    <div region="center">
        <div easyui-layout fit="true">
            <div data-options="region:'north',split:true" style="height:40%;">
                <div style="width:1250px;height:300px;">
                    <table id="tt" asset-projects ng-model="assetProjects"
                           fit="true" rownumbers="true" singleselect="true"></table>
                </div>
            </div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</div>

What I want is when I collapse west region the table "tt" will take the whole width. but that's not happening. Any idea why?

Thanks

Any word on that?

It also depends how many rows are in the grid. Showing lesser rows helps but most of the time it is not an option.

Let's say I want to show hierarchical data and flat data in the same grid. Is there a way of switching between these? How that can be done, at least conceptually?

Thanks

I am noticing a performance degradation when a number of columns gets over 10. specifically, opening and closing nodes takes about 3-4 seconds. If I use just a few columns then it takes no time.
Any idea for improving it?

Thanks

I am implementing filterMatcher as you are showing but it's not even get called.

Code:

link: function (scope, elem, attrs, ngModel) {
            $(elem).datagrid({
                   columns: [[
                       { field: 'name', title: 'Name' },
                       { field: 'itemtype', title: 'Item Type' },
                        ............
                   ]],
                   filterMatcher: function(data){
                       return scope.filterAssetProjects(data); // [b]never gets here.[/b]
                   }                   
            });
            ngModel.$render = function (value) {
                $(elem).datagrid('loadData', ngModel.$viewValue);
            }
        }

Ok, adding the following style to the top div made it work:
<div easyui-layout fit="true" style="width:74%;height:80%;">

Your example works perfectly, but trying it in my environment and it not is not showing anything. The only difference is that I have controller's code in the separate file.
Any idea?

Thanks

That does not show anything.

I am trying to create the following layout:

--------------------
|          |           |
|          |           |
|          |           |
|          |           |
|          |---------|
|          |           |
|          |           |
--------------------

I want to resize it vertically and horizontally.

Here is my code:

Code:

<div easyui-layout class="easyui-layout" style="width:70%;height:80%;" fit="true">
        <div data-options="region:'west',title:'west',split:true" style="width:25%;">
        </div>
        <div easyui-layout class="easyui-layout" region="center" fit="true">
            <div data-options="region:'center',split:false"></div>
            <div data-options="region:'north',split:true" style="height:20%;"></div>
        </div>
    </div>   

And controller:

Code:

explorer.directive('easyuiLayout', function () {
    return {
        restrict: 'AE',
        link: function (scope, elem, attrs) {
            $(elem).layout();
        }
    }
});

It works at most part.
My problem is when resizing it vertically first will show the right edge of the layout. Screenshot is attached.

Thanks

Well, yes, I can set column widths to some concrete values. But that's not a good way of designing things. Concrete values can cause problems on different screen resolutions.
I am attaching another screenshot where it works automatically.

fitColumns allocates enought space to snow data, but it does not take all grid's width See attached.

I am trying to implement code the example.
Just to reiterate. I put this into a separate file:

Code:

(function ($) {
    function pagerFilter(data) {
        if ($.isArray(data)) {    // is array
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var state = dg.data('datagrid');
        var opts = dg.datagrid('options');
        if (!state.allRows) {
            state.allRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = $.extend(true, [], state.allRows.slice(start, end));
        return data;
    }

    var loadDataMethod = $.fn.datagrid.methods.loadData;
    $.extend($.fn.datagrid.methods, {
        clientPaging: function (jq) {
            return jq.each(function () {
                var dg = $(this);
                var state = dg.data('datagrid');
                var opts = state.options;
                opts.loadFilter = pagerFilter;
                var onBeforeLoad = opts.onBeforeLoad;
                opts.onBeforeLoad = function (param) {
                    state.allRows = null;
                    return onBeforeLoad.call(this, param);
                }
                dg.datagrid('getPager').pagination({
                    onSelectPage: function (pageNum, pageSize) {
                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        $(this).pagination('refresh', {
                            pageNumber: pageNum,
                            pageSize: pageSize
                        });
                        dg.datagrid('loadData', state.allRows);
                    }
                });
                $(this).datagrid('loadData', state.data);
                if (opts.url) {
                    $(this).datagrid('reload');
                }
            });
        },
        loadData: function (jq, data) {
            jq.each(function () {
                $(this).data('datagrid').allRows = null;
            });
            return loadDataMethod.call($.fn.datagrid.methods, jq, data);
        },
        getAllRows: function (jq) {
            return jq.data('datagrid').allRows;
        }
    })
})(jQuery);

And here is my grid:

Code:

<div style="width:100%;height:100%">
    <table id="tg" easyui-treegrid ng-model="alarms" toolbar="#toolbar" pagination="true" fit="true"
            rownumbers="true" fitColumns="true" singleSelect="true" idField="id" treeField="name">
    </table>
</div>

Controller:

Code:

alarms.directive('easyuiTreegrid', function () {
    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
            $(elem).datagrid({
                   columns: [[
                       { field: 'name', title: 'Name' },
                       { field: 'itemtype', title: 'Item Type' },
                        ....
                   ]]
            });
            ngModel.$render = function (value) {
                $(elem).treegrid('loadData', ngModel.$viewValue);
            };
            $(elem).datagrid({ data: ngModel.$viewValue }).datagrid('clientPaging');
        }
    }
});

Paging is not working for me. Please help.

Thanks