Subgrid loding issue and Vertical scroll bar

[vijaybabuParticipant]

Hi Peter

I need 3 solution

1. When number of records is huge then sub grid functionality is getting break. (* > 201972).
(any function like “page complete” is there instead of using grid complete )

2. On grid if i scroll the mouse wheel its moving left and right side . vertical scrolling not functioning on grid

3.if i call the jqxgrid function using button the ajax request happens two times

Here with i have attached code and screen shot link for yor reference.

Link : http://maniyanshaiclub.com/forum/vijay/upload/photo/subgrid_loading_issue.jpg

jQuery('#reset').click(function(){
	$('#email').attr('value','');
	$('#firstName').attr('value','');
	$('#secondName').attr('value','');
	$('#company').attr('value','');
	getlists('','');
	//jQuery("#list2").trigger("reloadGrid");
});

function getlists(searchString,searchValue){	
	
	var list_id=document.getElementById('list').value;
    var theme = getTheme();
	var id_user = document.getElementById('group_list').value; 
	if(document.getElementById('group_list').value==0){
		list_id=0;
	}
 
	$("#gridFinder").css({
		'width':sWidth,
		'display':'block'
	});
		var theme='ui-redmond';
 
       	var  source =
        	{
            	datatype: "json",
				async:true,
            	datafields: [{name:'id'},{name:'firstname'},{name:'secondname'},{name:'gender'},{name:'company'},{name:'email1'},{name:'comment'},{name:'phone'},{name:'mobile'},{name:'address_street'},{name:'address_city'},{name:'address_state'},{name:'address_country'},{name:'address_zip'},{name:'title'},{name:'department'},{name:'industry'},{name:'date'},{name:'last_updated_date'},{name:'email_owner_name'},{name:'email_owner_emailid'}, {name:'source'}, {name:'listname'}, {name: 'list_type'}],
	        	url:'index.php?module=Users&action=managesubs',
               	data: {               		
        			id_user:id_user,
        			list_id_selected:list_id,
        			extrafield:1,
        			search_oper:'cn',
        			searchField:searchString,
        			searchString:searchValue
        		},
               	id:'id',               	
				beforeprocessing: function(data)
				{		
					source.totalrecords = data.TotalRows;	
				},
				sort: function()
				{
					// update the grid and send a request to the server.
					$("#list2").jqxGrid('updatebounddata');
				},
				root: 'Rows',
		 
		};
    	 var dataAdapter = new jQuery.jqx.dataAdapter(source);
				var initrowdetails = function (index, parentElement, gridElement) {      
				var row = index;;
				var id = $("#list2").jqxGrid('getrowdata', row)['id'];
			    var grid = $($(parentElement).children()[0]);
            
				var subsource =
				{
					url: 'index.php?module=Users&action=getSentScheduledCampaignList',
					dataType: 'json',
					data: {emailID: 'aaa1@gmail.com'},
					datatype: "json",
					cache: false,
					datafields: [
						 { name: 'miscfields' }
					],
					root: 'Rows' 
 				};
				var adapter = new $.jqx.dataAdapter(subsource); 
				// init Sub grid 
				grid.jqxGrid(
				{
					virtualmode: true,
					autoheight: true,
					width:  800,
					 rowsheight : 100,
					//sortable: true,
					//pageable: true,
					//pagesize: 5,
					source: adapter,
					theme: 'ui-redmond',
					rendergridrows: function (obj) {
						return obj.data;
					},
					columns: [ 
						  { text: 'Sent and Scheduled Details', datafield: 'miscfields', width: 800,height:200 }
					  ]
				});					
			};
			  
			 
   
     
			// set rows details.
            $("#list2").bind('bindingcomplete', function (event) {
                if (event.target.id == "list2") {
                    $("#list2").jqxGrid('beginupdate');
                    var datainformation = $("#list2").jqxGrid('getdatainformation');
                     for (i = 0; i < datainformation.rowscount; i++) {
					
					var url = "index.php?module=Users&action=getSentScheduledCampaignList"; 	
                        $("#list2").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 200, true);
                    }
                    $("#list2").jqxGrid('resumeupdate');
                }
            });
		 
			
	jQuery("#list2").jqxGrid({
		width:'100%',
		source: dataAdapter,
		pageable:true,	
		virtualmode: true,
		selectionmode: 'singlecell',
		theme:'ui-redmond',
//		showfilterrow: true,
		sortable:true,
		autoheight: true,
		mtype:'POST',
//		rowdetails: true,
// 	    rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'></div>", rowdetailsheight: 200 },
		columnsresize:true,
        pagesizeoptions: ['10', '20', '30'],
		columnsreorder: true,
		 rowdetails: true,
		initrowdetails: initrowdetails,
		ready: function(){	
			$("#list2").bind('cellselect', function (event) {
				selectedrow = event.args.rowindex;
				actionItemsProp();												    
			});						
		},
		rendergridrows: function()
				{
					 return dataAdapter.records;
				}, 
		columns:[
			{ text: 'Action', datafield: 'id', columntype: 'image', width:30 ,cellsalign: 'right', cellsrenderer:
                                         function (cellValue, options, rowObject) {
														return '<span style="margin:4px;float:left"> <img id="action_'+cellValue+'" src="/ef1/js/jqgrid/images/action.png" style="cursor:pointer" /></span>';
                                                },                                      
                },
			{text:'First name',datafield:'firstname', resizable: true, minwidth:90},
			{text:'Second name',datafield:'secondname', resizable: true, minwidth:80},
			{text:'Gender',datafield:'gender', resizable: true, minwidth:80},
			{text:'Company',datafield:'company', resizable: true, minwidth:80},
			{text:'Email ID',datafield:'email1', resizable: true, minwidth:180},
			{text:'Comment',datafield:'comment', resizable: true, minwidth:80},
			{text:'Phone',datafield:'phone', resizable: true, minwidth:80},
			{text:'Mobile',datafield:'mobile', resizable: true, minwidth:80},
			{text:'Street Address',datafield:'address_street', resizable: true, minwidth:80},
			{text:'City',datafield:'address_city',resizable: true, minwidth:80},
			{text:'State',datafield:'address_state',resizable: true, minwidth:80},
			{text:'Country',datafield:'address_country', resizable: true, minwidth:80},
			{text:'Postal code',datafield:'address_zip',resizable: true, minwidth:80},
			{text:'Title',datafield:'title',resizable: true, minwidth:80},
			{text:'Department', datafield:'department',resizable: true, minwidth:80},
			{text:'Industry',datafield:'industry',resizable: true, minwidth:80},
			{text:'Created',datafield:'date', minwidth:80, resizable: true},
			{text:'Updated',datafield:'last_updated_date', minwidth:80,resizable: true},
			{text:'Owner name',datafield:'email_owner_name', resizable: true, minwidth:80},
			{text:'Owner Email',datafield:'email_owner_emailid',filterable: false, resizable: true, minwidth:80},
			{text:'Source', minwidth:80, datafield:'source'},
			{text:'Subscribed List', minwidth:80, datafield:'listname'},
			{text:'List Type', datafield:'list_type', minwidth:80}]			
	});
 
 
} 

[Peter StoevKeymaster]

Hi vijaybabu,

Mouse Wheel works the following way:

1. If your mouse cursor is over the Grid and you have a visible vertical scrollbar, the mouse wheel scrolls the Grid Up and Down. If you do not have a vertical scrollbar, the mouse wheel scrolls the Grid Left and Right.

2. For 100K+ records, you should consider using Server Paging instead of downloading and loading all records directly.

3. We do not see any update code for your Grid and Sub Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[vijaybabuParticipant]

Hi Peter

Thanks for your reply.

sub grid functionality working fine now.

other two issues still there

1 . How to visible vertical scroll bar when paging included
2. ajax request going two times when i submit/ reset the button and some alert message is coming when i click submit/reset button

The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.

please give me solution for these solution

Thanks in advance .

Regards
Vijay babu.K

[vijaybabuParticipant]

Hi Peter

Please reply above & below request .

i need to perform some action after page change. As of now pagechanged function only is there.

my grid data is huge.its getting hang when i set row details on grid complete . so i cant set row details when my grid complete.
I want to set row details when page complete after click the next button .

bindingcomplete & pagechanged events unsuitable for huge data

Is Any function is there for page complete like grid complete.

please give me the solution as soon as possible

		$("#list2").bind("pagechanged", function (event) { 
				 var args = event.args;
				 var pagenum = (args.pagenum)*10;
				 var pagesize = pagenum+10; 
				var state= $("#jqxgrid").jqxGrid('loadstate');
				
				 //alert(pagenum+"-"+pagesize+"-"+state);
 			               if (event.target.id == "list2") {
						   	 	//  $("#list2").jqxGrid('beginupdate');
							     for (i =pagenum   ; i < pagesize ; i++) {
 									  $("#list2").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 200, true);
								  }
								//$("#list2").jqxGrid('resumeupdate');
 							}  
 			});      
			// set rows details.
            $("#list2").bind('bindingcomplete', function (event) {
 			   if (event.target.id == "list2") {
                //  $("#list2").jqxGrid('beginupdate');
				
				
                      for (i =0  ; i < 10 ; i++) {
 									  $("#list2").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 200, true);
								  }
                   //$("#list2").jqxGrid('resumeupdate');
                } 
            });

[Peter StoevKeymaster]

Hi vijaybabu,

– If you need to display thousands of records, it is better to load them on demand using the Virtual Paging approach as demonstrated in the examples.
– For row details, it is better to use the “rowdetailstemplate” approach as demonstrated in our examples. Otherwise, you will have to call the “setrowdetails” method on each refresh of the Grid which is not OK for an app with a big data source.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts