I need to add some styling to an Angular datagrid. Specifically, word wrapping to column headers. Any idea how to do that?

Thanks

So, how exactly to change an html of the specific cell at the run time?

Has anyone gotten this working?

I am getting 90+ percents working, but not for 100%. What's challenging is that even a code order is important. For example, specifying a column filer first and then paging will kill filtering. Can someone help, please?

Thanks

Were you able to figure it out? I too am getting the same error. Do you have pagination enabled?

Thanks

I am getting:

Uncaught TypeError: Cannot read property 'methods' of undefined

I have implemented some tricks that have been recommended here to improve the overall treegrid performance.

Code:

var origTreegrid_autoSizeColumn = $.fn.datagrid.methods['autoSizeColumn'];
            $.extend($.fn.treegrid.methods, {
                autoSizeColumn: function (jq, field) {
                    $.each(jq, function () {
                        var opts = $(this).treegrid('options');
                        if (!opts.skipAutoSizeColumns) {
                            var tg_jq = $(this);
                            if (field) origTreegrid_autoSizeColumn(tg_jq, field);
                            else origTreegrid_autoSizeColumn(tg_jq);
                        }
                    });
                }
            });

And

Code:

 skipAutoSizeColumns: true,
                onBeforeExpand: function () {
                    $(this).treegrid('options').skipAutoSizeColumns = true;
                },
                onBeforeCollapse: function () {
                    $(this).treegrid('options').skipAutoSizeColumns = true;
                },
                onExpand: function () {
                    $(this).treegrid('options').skipAutoSizeColumns = true;
                },
                onCollapse: function () {
                    $(this).treegrid('options').skipAutoSizeColumns = true;
                },

While the above code has improved performance alot I am still experiencing bad performance. Specifically with sorting. My grid has ~ 20 columns and about 160 rows. Lowering a numbers of rows does not make any difference, but minimizing a number of columns to three removes any delay. So, my question is what else needs to be done to have datagrid actually performing well?

Grid performance is a major issue for us.

Tnanks

Which one?

Code:

 function createColumnMenu(){
      cmenu = $('<div/>').appendTo('body');
      cmenu.menu({
         onClick: function(item){
            if (item.iconCls == 'icon-check_16'){
               $('#tt').datagrid('hideColumn', item.name);
               cmenu.menu('setIcon', { target: item.target, iconCls: 'icon-ver_ocultar_16'   });
            } else {
               $('#tt').datagrid('showColumn', item.name);
               cmenu.menu('setIcon', {   target: item.target, iconCls: 'icon-check_16'   });
            }
         }
      });

And which line of your code will popup w window as it's shown in the message above mine?

So, you are attaching custom sorter or something?

My data is in a form of an object:
data = {total: someArray.length, rows:someArray}

I am filtering data.rows and do get less rows. But I dont know how to refresh the gird. Doing something like this removes everything from the grid, that's all:
$(elem).treegrid('loadData', data);
Not mentioning it hits the server as well.

Please, help.

Thanks

Can you please show your code that triggers a popup window when you click on the header?

Thanks

I need to customize a header in the treegrid columns. Mostly for adding cusotm filter interfaces. So, I need to align text to either side and add icons underneath the text. What's a direction to take? Any samples?

Thanks

Nope, reloading is not helping.

I am trying to adapt the following example:
http://jsfiddle.net/dvAcu/

My goal is to load data when a node is expanded. How would I return data back to loader's success function if I am getting data into a callback?
I wrote something like this for testing:

Code:

loader:function(param,success,error){
                    if (!param.id)
                        promise = assetsMVCService.execute("assetprojectstatus", { assetId: 1, dataFormat: 'attribute' });
                    else
                        promise = assetsMVCService.execute("assetprojectstatus", { assetId: param.id, dataFormat: 'attribute' });
                    //promise.then(scope.assetChildren);
                    success(promise.then(scope.assetChildren)); // tried that, not working
                },

Initially data is loaded because param.id does not exist. When I click on a node I am getting into scope.assetChildren function but returning data from it is not working.
I dont see it and the node that's been expanded stays closed.

Please share some ideas.

Thanks

I think it's much more than that. It will go to the server if you have loader specified:
loader:function(param,success,error){
.....
}
Or url property.

If you populate data by other means it wont happen. Can't say it is extremely intuitive.