StackOverflow  URL: http://stackoverflow.com/questions/16313651/easyui-xml-data-load-into-datagrid/20354958

Please try the filter code below:

You are hero stworthy !!
Worked like a charm.

PS: Only small typo was

Instead of            

Code:

var target = this;

should be             

Code:

var target = $(this);

[Sort the whole data]

hi folks,
I've been using easyUI and works pretty good. I had a problem recently whereby the number of rows exceeded >50 and went outside one page. (my pagination limit is 50 rows per page).
When I tried sorting (I'm using client sort and NOT remote sort), it sorted the data only present in the current page and NOT all the data.
I'm using EasyUI v1.3.3

Any fix for it?  (i.e. Sort the whole data rather than sort from just the page)

Cheers

Hi Guys,
I'm not that good in Javascript. Can you please help me in putting the required changes for client pagination into the below code?
My code is as below.

Code:

	<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		var JSONurl = '/tmp/vta.json';   // Input data 
		var myTitle = 'Monitor Screen';
		
			$('#dg').datagrid({  
				url:JSONurl,
				pageSize: 30,
				pagination: true,
				rownumbers: true,		 
				singleSelect: true,    // So Users can select one alert at a time
				remoteSort: false,
				title: myTitle,
				rowStyler:function(index,row){     // ROW Colouring  
					if (row.severity == '0'){      // GOOD level
						return 'background-color:#58FA82;';  
					}
					else if (row.severity == '4'){      // WARNING level
						return 'background-color:#FBB870;';  
					}
					else if (row.severity == '5'){      // CRITICAL level
						return 'background-color:#FF7684;';  
					}
					},  
				columns:[[  
						{field:'ID',title:'ID',width:45, sortable:true},  
						{field:'start_time',title:'Start_time',width:100, sortable:true},
						{field:'team',title:'team',width:180, sortable:true},  
						{field:'last_update',title:'Last_update',width:100, sortable:true},  
						{field:'details',title:'Details',width:260, sortable:true},  
						{field:'severity',title:'severity',width:40, sortable:true}  
				]]  
			});


			// Function to reload grid every x seconds
			// This will ensure no rotating icons are shown. Gives a seamless effect
				$(function() {
					$('#dg').datagrid({loadMsg:''});  
					  function grid_refresh() {
						$('#dg').datagrid('reload'); 

						setTimeout(grid_refresh, 120000); 
					  }

					  grid_refresh();
					});


	</script>

The html call is done as

Code:

<table id="dg" toolbar="#toolbar" style="height:720px;" fit="true" sortName="start_time" sortOrder="desc"></table>

Any help would be appreciated.
Cheers

Please refer to this client side pagination example http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Client%20Side%20Pagination.

Hi Stworthy,
I hope this is from easyui 1.3.4 version only?
Will this work with jquery 1.8.x ? (or is it only with Jquery 2.x? )

the client side paging and large data examples seem to handle 1000 rows just fine.  are you sure it's not the server side code the data comes from?  or is each row really large making the actual data 10 times what the examples do?

The server side, i did manual and automated checks by calling the script/curl around 10 times in a minute (though it calls only once in 2 mins in real scenario) and loads up quite fast. The web-service data comes with 800 datasets every time quickly.

Hi Stworthy,
Thanks for that. I'm not quite understanding the code.

Is that example loading "10" events a time (per page) and loads next 10 only when clicks next page or loading all the 800 at the same time?

Hi
I've enabled Datagrid and was working perfectly for last 2 months.
Recently, we had issues when the number of alerts increased to >1000 at a single time.

The datagrid is enabled to
1.  Collect all data at a single time.. i.e. 1000 alerts + its data will be coming in one json call/web-service.
2. Client level pagination is enabled in datagrid
3. Datagrid refreshed every 60 seconds

But when user login , Firefox shows unresponsive script message. I tried running the web-service at that time and it returned pretty much quickly though a huge message. So its seems to be related to Datagrid somehow.

Is there a way, I can improve the datagrid to allow page by page data call from a single json data? (ie split up at client?)

Thanks a lot

Hi, Continuing from my previous thread http://www.jeasyui.com/forum/index.php?topic=2028.0
I was able to change font of the alerts with help of "Stworthy" advice. (from font-size 12px to 10px)

But the "Row" height is not adjusted with the reduced font. (I believe autoRowHeight is defaulted to true, but still the height remains the same for font-size 12px)
Is there a way to adjust the "Row" height to change as per font-reduction?  (or specify row height manually)

Hi Stworthy,
You are a STAR !! thanks a lot mate

Is there anyway, I can auto-adjust the cell height according to the font-size? ( I believe autoRowHeight is defaulted to true, but still the height remains the same for font-size 12px)

Friends,
thanks for the support you provided so-far.
I'm not able to change font size globally for the datagrid. (May be a silly issue from my side)

Below is how I defined the datagrid. I'm using jquery-easyui-1.3.3 package.
Currently I'm trying to change font-size within rowStyler and its not working !!  "background-color" is working though correctly !

Code:

			$('#dg').datagrid({  
				url:myurl,
				pageSize: 20,
				pagination: true,
				rownumbers: true,		 
				singleSelect: true,    // So Users can select one alert at a time
				remoteSort: false,
				title: mytitle,
				rowStyler:function(index,row){     // ROW Colouring  
					if (row.severity == '0'){     
						return 'background-color:#58FA82;font-size:10px;';  
					}
					else if (row.severity == '1'){      
						return 'background-color:#C5F0FE;font-size:10px;';  
					}
					else if (row.severity == '4'){      
						return 'background-color:#FBB870;font-size:10px;';  
					}
					else if (row.severity == '5'){      
						return 'background-color:#FF7684;font-size:10px;';  
					}
					},  
				columns:[[  
						{field:'alertid',title:'AlertID',width:50, sortable:true},  
						{field:'start_date',title:'start_time',width:100, sortable:true},
						{field:'alert_type',title:'Type',width:50, sortable:true},  
						{field:'exception_type',title:'Exception',width:50, sortable:true},  
						{field:'customer',title:'customer',width:80, sortable:true},  
						{field:'timereceived',title:'timereceived',width:100, sortable:true},  
						{field:'note',title:'Remedy',width:80, sortable:true},  
						{field:'site_ID',title:'Site ID',width:40, sortable:true}  
				]]  
			});

I even tried while initiating the datagrid, but still its NOT working  

Code:

	<table id="dg" toolbar="#toolbar" style="height:620px; font-size:10px;" ></table>

Where should i make amendments so as to change the font-size for the whole of datagrid?

Hi mate, thanks for the reply.
^M characters seem to be ok.

I was worried about the

Code:



at the start of the file.

hi admin,
I downloaded  easyui v1.3.3 in Windows PC, uploaded using "binary" mode to my unix machine.
I extracted using "unzip" command.

But when i "vi" the files, I can see some unwanted characters at the start of these files.

Code:

/**^M
 * jQuery EasyUI 1.3.3^M
 * ^M
 * Copyright (c) 2009-2013 www.jeasyui.com. All rights reserved.^M
 *^M
 * Licensed under the GPL or commercial licenses^M
 * To use it on other terms please contact us: info@jeasyui.com^M
 * http://www.gnu.org/licenses/gpl.txt^M
 * http://www.jeasyui.com/license_commercial.php^M
 *^M
 */^M

Is this an issue or am I doing anything incorrect?

Hi folks,

With help of EasyUI I was able to do great job and is stable.
Currently I'm doing initializing external URL as follows  

Code:

function editAlert(){
	var row = $('#dg').datagrid('getSelected');
	
	if (row){
		window.open(myurl);
	}

}

The final format of "myurl" should be

Code:

https://externalURL/somelocation/ReceiveData.aspx?query={"Parameters":[{"Key":"start_date","Value":"2013-01-01"},{"Key":"end_date","Value":"2013-02-01"}],"Report"}

Where the key, value etc are all present in the selected row.

How can I enrich the URL before I send (without a form)? Can I do an append to the URL?
(or can I use jquery's native "push" option?)