Ok,

I figure out the problem, somehow the $(.ddv).datagrid('resize') is not working because there are some div in the page with this class and which are not datagrid object, as they are not expanded (I am guessing this is the issue, after checking the breakpoints in IE).
As a workaround, I keep an array of expanded rows, so that in the datagrid resize, I explicitly retrieve the id of the expanded datagrid and call resize on them, so it looks like this:
 for(var i=0;i<expandedRows.length;i++){
                   var subgrid = '#ddv-'+expandedRows;
                   $(subgrid).datagrid('resize');
   }

And now it works and I do not see the error msg.
It would be nice if we could have a method 'getExpandedRows'  in a future version of the datagrid.

Thanks

Melanie

Hi,

Actually, I have a problem with your solution, it works fine with Chrome, but somehow it is not working with IE 8..
Also it gives me an error in both browsers (not sure it is important or not):
SCRIPT5007: Unable to get property 'options' of undefined or null reference
jquery.easyui.min.js, line 6839 character 1
Do you know what is this error, and also why the resize works on Chrome but not on IE? Unfortunately the ends users are using IE..

Thanks,

Melanie

Works nicely, thanks !!

Just to add some specificities, my tooltip is quite long and shows a liste of additional values, so I want to format them nicely and show them in a panel, just like what you show on your demo of the AJAX tooltip, except that instead of loading the tooltip content from an url, I want to programmatically set it up. I must have messed up, because whenever I set <div> <ul><li>content1</li><li>....</ul></div> to my tooltip, it does not show anything in the tooltip..

What I am currently doing is the following:
In the cell formatter :
column = {field:property,title:property,width:100,sortable:true,formatter:function(value,row,index){
...
 return '<div data-p1='+index+' data-p2='+gridName+' data-p3='+tooltipProperty+' class=\"easyui-tooltip\" >' + value + '</div>';
}

then  upon datagrid loading:
$('#dg).datagrid('getPanel').find('.easyui-tooltip').each(function() {

          var index = $(this)[0].getAttribute('data-p1');
           var gridName= $(this)[0].getAttribute('data-p2');
            var property= $(this)[0].getAttribute('data-p3');
            var tooltipExtendedContent= getContent(index,gridName,columnName);
         
                           
                               $(this).tooltip({
                                content: $('<div></div>'),
                                onShow: function(){
                                $(this).tooltip('arrow').css('left', 20);
                                $(this).tooltip('tip').css('left', $(this).offset().left);
                                },
                                onUpdate: function(cc){
                                cc.panel({
                                width: 500,
                                height: 'auto',
                                border: false,
                                content:tooltipExtendedContent
                                });},
                               // showDelay: 500,
                                position: 'right'
     
                           });
                         
                            });

But that does not work.. not sure why, is this the correct way to do this ?

Thanks

Hi Thanks for the tip, I wil try that.
How do I do to specify a more complex content, say I want the content to be a form, I have to set it at the cell level, so was thinking in the formatter,, because this is where I have the proper information. I can not really do this in the loadSucess as I will loose the cell context informations..

Hi,
I saw a nice tip on how to add tooltip on cells on the forum:
var cells = $(datagridId).datagrid('getPanel').find('div.datagrid-body td[field] div.datagrid-cell');
cells.tooltip({   
     content: function() {
   
                console.log(this);
                var tp = $(this).html();
                return tp;
     } 
 });
But  I need to show a tooltip on some of my datagrid cell and the content of the tooltip depends on the cell column, the cell value and some other attributes of the row. And I don't think I can easily find those attributes from the html component.

So I tried to add the tooltip during the formatting of the cell:
column = {field:property,title:property,width:100,sortable:true,formatter:function(value,row,index){
 
        var tooltipStrValue = getTooltip(value,row,index,this.field);
       return '<span title='+tooltipStrValue+' class=\"easyui-tooltip\">' + value + '</span>';
      
      }};

But when I do this the tooltip appears sometimes but not everytimes, the behavior is very strange.
Also, How can I set the showDelay, and set a more complex content (Ideally I would like to show some form in a panel ).
I try to set the tooltip using ${this).tooltip in the formatter, but that does not work.. Not sure how I can access the content of a particular cell and attach a tooltip programmatically, and in the same time retrieve the information necesary to build the tooltip..

Thanks in advance.

Melanie

Thanks, this seems to be working. I can not figure out.
So basically, when you build the grid with the detail view you added the following to make this work:

detailFormatter:function(index,row){ 
        return '<div class="ddv" id="ddv-' + index + '" style="padding:5px 0"></div>'; 
    }, 
    onResize:function(){
$('.ddv').datagrid('resize');
},

Actually I figure this out, I need to call the disableEditing each time data is reloaded. So I called it in the on onLoadSuccess call back


 $('#dg').edatagrid({     
    columns:columns,
    url: 'myrl',
   onLoadSuccess : function(data){
   //check my data confition : for now always disable edition...
         $('#dg').edatagrid('disableEditing');
   }
});

Hi,

In some cases I do not want to allow my datagrid to be editable, so I was calling the disableEditing method, but this does not work.
I am just doing this :
$('#dg').edatagrid('disableEditing');


What am I doing wrong?
How do I disable the edition on the entire grid ?

Thanks,

Melanie

Hi,


I am using the detailview for the datagrid, and I observed that if I call expandRow programmatically, the detail view does not take all the width available (seems like only 75 %). However, if I expand the row manually by clicking on the expand button, then the details view uses the full width.

You can check this behaviour here : http://jsfiddle.net/melane/SjMQy/
When you run it, the first row is expanded programatically and does not use all the space. Try to collapse and expand the row manually and the size is good.

I also observed that the resizing of the main datagrid does not impact the subgrid (detail view). How can we trigger the resize of this subgrid so that it always use the full width available, using parent grid dimensions.

Thanks,

Melanie

Great got it, thanks!

Hi,

How exactly can I disable the resizable of easyui ? It looks like this is a default feature of the datagrid as I did not set any resizable options. And when I add  resizable="false" option in the declaration of the datagrid, it does change anything, I can still change the size of the headers...

Thanks

Well,

Thank you, but the question is more about learning on how I could solve this conflict. I am fairly new to jquery and I would like to know if there is a way to prevent this conflict. Is there is a way to override the resize method ?

Thanks

Melanie

Hi,

I have a project where I use EasyUI Datagrid (great stuff by the way), and I need to use Dialog from JqueryUI framework (because I need a dialog with form..).
When I import the JQueryUI library, I see a strange behavior on the EasyUI Datagrid Header Resize. If I try to manually resize the header, only the header cell is resized (the data cells for this column are not resized).

Note that the double click on the header cells separation works and will auto resize the column on the preferred size. The problem occurs when you try to resize by clilck and slid (manually defining the size of the column).

If I do not import JQueryUI library, then I confirm the resize columns feature of the datagrid is working fine. So I am guessing there must be a kind of conflict between both libraries, but I am not sure on how I could solve this issue. I created a small jsfiddle project to illustrate the issue : http://jsfiddle.net/melane/vmDP8/

Do you know how I could fix this?

Thanks,

Melanie