[function loadData(target, data){}]

Hi,

 I am using the delay loading technique for a tab, by setting selected:false to the tab options.
 When u click on the tab and select it, everything else gets rendered fine, except the datagrid disappears.
 If you check the HTML source you can see the datagrid exists with dimensions(height and width) as 0.

 I am using jquery-easyui-1.4.1 version.
 I read in some post, that it is a bug that when the datagrid is added to hidden panel,
 it does not get re-sized with the panel, when it gets visible. To solve the issue, it asked me to use the "fit:true" option for the datagrid.
 When I set this property, I can see the datagrid, but it is not big enough to show all the data in it. just shows 1 row with scroll bar added.
 Right now, in order to deal with this problem, I am adding the following lines of code to the function loadData(target, data){} in the jquery.easyui.all.js file,
which basically calculates the height needed to show all the datagrid rows and sets it to the datagrid panel and tbody.

Code:

		var panelHeightNumber = $(target).datagrid('getPanel').height(); 
		var rowsCount = $(target).datagrid('getRows').length;
		var newHeight = 25;

		if(rowsCount>0){
			newHeight = (rowsCount+1)*25; 
		}
		var maxHeight = newHeight+50; 
				
		var newPanelHeight = newHeight;
		var datagridViewHeight = newPanelHeight;
		if (opts.pagination){
			newPanelHeight = newPanelHeight+25; 
			maxHeight = maxHeight+25; 
		}
		if (opts.showFooter){
			newPanelHeight = newPanelHeight+25; 
			datagridViewHeight = datagridViewHeight+25; 
			maxHeight = maxHeight+25; 
		}
		
		if(panelHeightNumber && (panelHeightNumber<newPanelHeight)){
			if (opts.showFooter){
				$(target).datagrid('getPanel').children(".datagrid-view").children(".datagrid-view2").children(".datagrid-footer").css('height', 25);
			}
					
			$(target).datagrid('getPanel').height(newPanelHeight+25);
			$(target).datagrid('getPanel').children(".datagrid-view").height(newPanelHeight+25);
			$(target).datagrid('getPanel').children(".datagrid-view").children(".datagrid-view2").children(".datagrid-body").height((newHeight));
		}
		

Also this is the code added to the appendRow()

Code:

var rowsCount = $(target).datagrid('getRows').length;
		var actualTbodyHeight = $(target).datagrid('getPanel').children(".datagrid-view").children(".datagrid-view2").children(".datagrid-body").height();
		var expectedTbodyHeight = (rowsCount*25);
		
		if(ourGrid){
			expectedTbodyHeight = expectedTbodyHeight+25;
		}
		
		if(actualTbodyHeight<expectedTbodyHeight){
			var panelHeight = $(target).datagrid('getPanel').height();
			$(target).datagrid('getPanel').height(panelHeight+25);
			$(target).datagrid('getPanel').children(".datagrid-view").height(panelHeight+25);
			$(target).datagrid('getPanel').children(".datagrid-view").children(".datagrid-view2").children(".datagrid-body").height((actualTbodyHeight+25));
		}

I also need to handle it in the deleteRow() function.

Instead of all this code, is there a better way to fix this problem? or do you have any fix for this bug?

Appreciate a quick response.

-Leela

[unselected]

Hi,

 I am not trying to get the row to be selected.
 I am trying to get the row that will be unselected, when you select a row.

 Basically I have a Datagrid, with singleSelect option.
 Let us assume there are 3 rows. I selected row 2 (index - 1).
 Now when I select row 3(index - 2), row 2 gets unselected because of singleSelect:true option.
 I need to get the index of the row 2 that gets unselected, when I select row3.

 I expected onUnSelect to work, but looks like the onUnSelectAll is being triggered instead, because of singleSelect option
 So I need to get the index of all the records(basically only one record) that will be selected, before actually selecting the record clicked by User.

Hope I conveyed my requirement clearly.

 Please let me know if you have any suggestions

[var unselectIndex = opts.finder.getTr(target, '', 'selected').attr("datagrid-row-index"); if(unselectIndex!=undefined && unselectIndex!=index){ opts.onBeforeUnselectAll.call(target, unselectIndex); }]

Hi,

 I want to add a new event to the datagrid like following, when singleSelect is true
  onBeforeUnselectAll: function(unselectIndex){},

 where I need to get the index of the record that just got unselected.

 The OnUnSelect/onUncheck/onBeforeUnselect/onBeforeUncheck do not get fired in this case

 I have added this code to the selectRow() in the jquery.easyui.all.js file

               if (opts.singleSelect){
         var unselectIndex = opts.finder.getTr(target, '', 'selected').attr("datagrid-row-index");
         if(unselectIndex!=undefined && unselectIndex!=index){
            opts.onBeforeUnselectAll.call(target, unselectIndex);
         }
         unselectAll(target);
         selectedRows.splice(0, selectedRows.length);
      }
         
But want to know if there is a better way of doing it without modifying the library itself.
Like just extend the datagrid API and add new events.

Appreciate any help

Hi,

 Is there a way I can define the index of the tab, when adding it, so that I can control the position/sequence of the newly added tab

 Example: Lets I have 2 tabs added already tab X and tab Y.

 I need to add a new tab Z in between the 2 existing tabs X and Y

 Right now it always goes after tab Y

 Please advise.


Thanks,
Leela.

Hi,

 I am having the same problem reported by Ed. The time it takes to open the tab is dependent on the number of tabs already open.
 It varies from 2 secs to 24 secs for the same form.

 Ed,

 Please let me know how did you solve your problem? I am already using shared calendar. Doesn't seem to help much.
 Really appreciate any answer.

Thanks,

Hi,

 Is it possible to trigger only a particular validation rule defined on a validatebox?
 I would defined a custom Validate Rule on some elements of the form.
 I need to trigger different validation rules for different button clicks.
 Right now when you say form.form('validate'), it validates all the validation rules defined on all the form elements.
 I need something like form.form('validate' sourceButton)
 and make this sourceButton available in my Custom Validation Rule function, based on the source button clicked I would decide if i should run that validation or not.
 Is there a way to achieve this?

Thanks,
Leela.

Hi,

 In my form when I focus on any easyui element like validatebox, numberbox, textarea, they are all highlighted with blue border, except the combo-boxes.
 I am using easy-ui 1.3.5 version. Please let me know if this is a bug. If so how can I fix it?

Thanks,
Leela.

My form/editable datagrid elements are dynamically generated, where I assign the element/editor type based on different conditions. If there is a way to define the new type, it would simplify things, if not there would be lot of different scenarios for me to handle. Just wondering if it is easy enough to to extend the number box and create a new type. Otherwise I have to do it the hardway.

If I override numberbox, then all the number boxes would behave like amountboxes. I do not want that. I want to retain numberbox type and add a new type for amount box

[// Inherited from $.fn.numberbox.defaults $.fn.amountbox.defaults = $.extend({}, $.fn.numberbox.defaults, { formatter: amountFormat });]

Hi,

 I need to create a new input type 'amountbox' to be used in both form and editable data grid as editor.
 It should be inherited from numberbox, but with different formatter. I tried doing the below, but it throws the error saying -
"Uncaught TypeError: Cannot set property 'defaults' of undefined " @ amountbox definition.

 Please let me know what I am missing here.

  // Inherited from $.fn.numberbox.defaults
        $.fn.amountbox.defaults = $.extend({}, $.fn.numberbox.defaults, {
           formatter: amountFormat
        });

function amountFormat(num) {
           var dig = "2";
            var dec = ".";
            var sep = ",";
            var count = "3";
            
           if(count == 9 ) {
               return number_format_india(num);
           }
           
           
         x=new Array();
         s=(num<0?"-":"");
         num=Math.abs(num).toFixed(dig).split(".");
         r=num[0].split("").reverse();
         for(var i=1;i<=r.length;i++){
             x.unshift(r[i-1]);
             if(i%count==0&&i!=r.length)
                x.unshift(sep);}
         return s+x.join("")+(num[1]?dec+num[1]:"");
        }//End:number_format

      

[Main]

I have a tree as in the image attached.

I am trying to retrieve the children of the Main Node, using this

Code:

$('#menuTree').tree('getChildren', parent.target);

It actually returns an array of 5 objects instead of 2.
I expected it to return only Master Entities and Admin nodes
But it is returning Master Entities, Admin, User, Screen and City

User, Screen and City are not children of Main, but the Master Entities. Not sure why it is returning all of them.

Appreciate any help.

If you use datetimebox, you can see time, on the bottom portion of the calendar, to be selected.

http://www.jeasyui.com/demo/main/index.php?plugin=DateTimeBox&theme=default&dir=ltr&pitem=

You need to use 'loadData' of combobox, for the options to be set to it.

Declare combobox as

Code:

<input class="easyui-combobox" id="FormatoCarta" name="FormatoCarta" data-options="valueField:'id',textField:'name'">

Code:

<script>
var loadData = [];
</script>
@foreach (var item in @Model.FormatiCarta)
                            {
                                String selected = String.Empty;
                                if (@Model.Defaults != null)
                                {
                                    if (item.Id.Equals(@Model.Defaults.IDFormatoCarta))
                                    {
                                        selectedId = item.Id;
                                    }
                                }
<script>
loadData.push({"id":item.Id,"name":item.name});
</script>
                            }


<script>
$('#FormatoCarta').combobox({data:loadData});
$('#FormatoCarta').combobox('setValue', selectedId );
</script>

Hi,

 I have 2 trees, The user should be able to drag and drop the elements from the left tree to the right tree.
 But disallow drag and drop between the left tree. Is there a way I can find , if both source and target belong to the same tree in any of the events (onDragOver, onBeforeDrop)

  When user tries to drag something from my left tree with in left tree, I should be able to recognize it and prevent it.

  Please advise.

Hi,

 Thanks for the link. it answers my 2nd question.
 Any solution for the first point. How to drag and drop a node to an empty tree?