[rskbuvanSpectator]

Hi Peter,

I forgot to mention in previous post that, I set the class name using cellclassname only.

Since then, I can able to get the count only when the error cell is visible upfront. If it is present inside the scrollable region I’m not getting the count.

Can you please suggest me, how to keep track of error cells even though it is not in the visible area i.e. below the scroll level.

Looking for a solution.

Cheers,
Senthil

[rskbuvanSpectator]

Hi,

Thanks for your reply.

I already utilized those callback functions in my grid.

For groupable header’s, there is one additional column gets appended with icon and for it groups one additional empty column is also gets appended to match the indent.

Here, I want to utilize that empty column by appending an icon with custom tooltip or title text.

Please suggest me how to identify that empty column and customize it.

Looking for your response.

Cheers,
Senthil

[rskbuvanSpectator]

Hi Peter,

The version I’m using is 3.1.0.

I’ll update the library version and try the same.

Thanks for the information.

Cheers,
Senthil

[rskbuvanSpectator]

Hi Peter,

If that is the case, how ‘.jqx-fill-state-focus‘ class name is added when jqxdropdownlist has got focus?

Looking for a reply.

Thanks,
Senthil

[rskbuvanSpectator]

Hi Peter,

Actually I’m converting that DIV into jqxdropdownlist using the following method,

$(".jqxSelect").jqxDropDownList({source: countryList, height: '22px', theme: theme,enableBrowserBoundsDetection:true});

Does jqxwidget supports focus event for jqxdropdownlist by default or not, alike jqxinput?

Looking for a reply.

Thanks,
Senthil

[rskbuvanSpectator]

I’m reopening the post again.

Can anyone suggest me a solution for the above issue/requirement?

Looking for a prompt response.

Thanks,
Senthil

[rskbuvanSpectator]

Hi,

Some logic error in my code so please ignore this post.

Cheers,
Senthil

[rskbuvanSpectator]

Hi,

This issue is happening only when, From date is chosen without choosing the To date and clearing the calendar using Clear button at the calendar footer.

Can anyone please suggest me a solution.

Thanks in advance.

Cheers,
\_rssb

[rskbuvanSpectator]

Can anyone tell me, how to catch the click event of “Clear” button in calendar footer?

I don’t see any API for catching the click event of “Clear” button.

Cheers,
_rssb

[rskbuvanSpectator]

Hi,

Added to the above post, I’m getting this issue on the following scenario,

1. Opened the date range calendar filter and I chose one date (i.e. From Date).
2. Now I clicked the Clear button without choosing a “To Date“.
3. Opened the date range calendar again and selecting the same date. Now I’m getting an error “TypeError: o is null“.

Version: jQWidgets v2.8.0

Can someone suggest me a solution?

Thanks in advance.

Cheers,
_rssb

[rskbuvanSpectator]

Hi Peter,

It worked fine as expected with that class name.

Thank you, 🙂

Cheers,
\_rssb

[rskbuvanSpectator]

Hi,

Can somebody suggest me a solution for the above ticket?

Cheers,
\_rssb

[rskbuvanSpectator]

Hello Dimitar,

Please understand that, I’m not trying to achieve any filter row cells.

The column which I introduced is to achieve check-all / un-check all functionality.

In the previous version of jqWidget(V 2.8.0), the same custom check-box column applied to the grid grouping was working perfect. Even the check-all, un-check all and individual cell clicks was working perfect.

But after upgrading jqWidget to the latest version, the same functionality is not performing as expected. This is why, I worked a small example from the latest demo package downloaded and shared you guys to look at the issue.

In this shared code, instead clicking the header check-box, try clicking the individual cell check-box, that itself is not working properly with the latest version.

Also, please run the shared code with the previous jqWidget version (V 2.8.0) and suggest me a solution.

If you feel comfortable, can you share your phone number to discuss further.

Looking for a reply.

Thanks & Cheers,
\_rssb

[rskbuvanSpectator]

Hi Dimitar,

The example code which I was posted is not about filter, actually we introduced a custom check-box column and applied a grouping feature to the grid.

When I try to click the individual cells or check-all of that custom column, it is not behaving properly i.e. check-all / check-individual. In the previous version of jqWidget (2.8.0), it was working fine. So please run our example code into the demo folder i.e. demos\jqxgrid, latest demo package downloaded.

FYI, our stakeholders are interested to buy a commercial license but before going forward I’m customizing the grid based on business requirements. One of the requirement was this, introduce various column check-box in grid grouping to set permissions like View, Edit etc. So this check-all & check-individual should work as expected.

But recent updates to jqWidget version becomes a show stopper for me to proceed further. Hence please run the example and let me know the suggestion.

Looking for solution.

Thanks & Cheers,
\_rssb

[rskbuvanSpectator]

Hi Dimitar,

As requested, please find the below code snippet for your reference,

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
<![CDATA[
/*-----------------------------------------------------------------
Locallization to support multi-lingual
Set column names for Manage User Summary Grid
Note: Column name variables are prefixxed according to the grid names.
For Example: Manange User i.e. "mu_"
-------------------------------------------------------------------*/
var mu_username = "User Name", mu_company = "Company", mu_email = "Email", mu_accounts = "Accounts", mu_services = "Services", mu_updatedon = "Updated On", mu_updatedby = "Updated By";
$(document).ready(function (){
	/*-----------------------------------------------------------------------------------------------
	Global Declarations for regions & form components starts here
	-----------------------------------------------------------------------------------------------*/
	theme = getDemoTheme('');
	
	$('#userTab').jqxSplitter({ width: outerPercentage,height:outerPercentage, theme: theme, panels: [{ size: 225, collapsible: false, min:225 }, { size: "70%"}] });
	$('#userTab').jqxSplitter('collapse');
	/*-----------------------------------------------------------------------------------------------
	Global Declarations for regions ends here
	-----------------------------------------------------------------------------------------------*/
	
	var url = "jqwidgets/sampledata/usersummary.xml";
	
	/*-----------------------------------------------------------------------------------------------
	Prepare the data
	-----------------------------------------------------------------------------------------------*/
	
	var source =
	{
		datatype: "xml",
		mtype: 'GET',
		datafields: [
			{ name: 'CheckRow', type: 'bool'},
			{ name: 'USERNAME', type: 'String'},
			{ name: 'COMPANYNAME', type: 'String' },
			{ name: 'EMAILADDRESS', type: 'String' },
			{ name: 'Accounts', type: 'String' },
			{ name: 'Services', type: 'String' },
			{ name: 'UPDATEDATE', type: 'date' },
			{ name: 'LASTMODIFIER', type: 'String' },			
			{ name: 'HASACCESS', type: 'String' },
			{ name: 'TYPEOFUSER', type: 'String' },
			{ name: 'TABACCESS', type: 'String' }/*,
			{ name: 'URL', type: 'String' }*/,
			{ name: 'consumerID', type: 'String' },
			{ name: 'action', type: 'String' }
		],
		root: "Users",
		record: "User",
		id: 'UserID',
		url: url,
		updaterow: function (rowid, rowdata, commit) {
			// synchronize with the server - send update command   
			commit(true);
		}
	};
	
	var dataAdapter = new $.jqx.dataAdapter(source);
	var columnCheckBox = null, selectedRowsCount = 0;
	var updatingCheckState = false;
	
	
	/*-----------------------------------------------------------------------------------------------
	Initialize jqxGrid. Disable the built-in selection.
	-----------------------------------------------------------------------------------------------*/
	$("#user_summary_grid").jqxGrid(
	{
		width: outerPercentage,
		height:"100%",
		source: dataAdapter,
		theme: theme,
		pageable: true,
		pagesize: 20,
		//autoheight: true,
		showfilterrow: true,
		filterable: true,
		sortable: true,
		altrows: true,
		pagesizeoptions: ['10', '20', '50'],
		showfiltermenuitems:false,
		enabletooltips: true,
		columnsmenu: false,
		editable: true,
		//selectionmode: 'multiplerowsextended',
		selectionmode: 'none',
		columnsresize: true,
		columns: [
		  {
			  text: '', menu: false, sortable: false,
			  datafield: 'CheckRow', columntype: 'checkbox', width: '5%',filterable: false,
			  renderer: function () {
				  return '<div style="margin-left: -10px; margin-top: -7px;position:absolute;left:50%;top:50%;"></div>';
			  },
			  rendered: function (element) {
				  $(element).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
				  columnCheckBox = $(element);
					$(element).on('change', function (event) {
						var checked = event.args.checked;
						var pageinfo = $("#user_summary_grid").jqxGrid('getpaginginformation');
						var pagenum = pageinfo.pagenum;
						var pagesize = pageinfo.pagesize;
						var accessFlag;
						if (checked == null || updatingCheckState) return;
						$("#user_summary_grid").jqxGrid('beginupdate');
						// select all rows when the column's checkbox is checked.
						if (checked) {
						  $("#user_summary_grid").jqxGrid('selectallrows');
							accessFlag = 'true';
						}
						// unselect all rows when the column's checkbox is checked.
						else if (checked == false) {
							accessFlag = 'false';
						  $("#user_summary_grid").jqxGrid('clearselection');
							columnCheckBox.jqxCheckBox({ checked: false });
						}
						// update cells values.
						var startrow = pagenum * pagesize;
						for (var i = 0; i < pagesize; i++) {
						  // The bound index represents the row's unique index. 
						  // Ex: If you have rows A, B and C with bound indexes 0, 1 and 2, afer sorting, the Grid will display C, B, A i.e the C's bound index will be 2, but its visible index will be 0.
						  // The code below gets the bound index of the displayed row and updates the value of the row's available column.
							var boundindex = $("#user_summary_grid").jqxGrid('getrowboundindex', i);
							
							var rowVal = $("#user_summary_grid").jqxGrid('getrowdata', boundindex);
							var checkAccess = rowVal.HASACCESS;
							if(checkAccess != 'No') //if user has access
							{
								$("#user_summary_grid").jqxGrid('setcellvalue', boundindex, 'CheckRow', event.args.checked);
							}
							else if(checkAccess == 'No' && checked ==true)
							{
								accessFlag="null";
								$("#user_summary_grid").jqxGrid('unselectrow', boundindex);
							}
							else if(checkAccess == 'No' && checked ==false)
							{
								accessFlag="false";
								$("#user_summary_grid").jqxGrid('unselectrow', boundindex);
							}
						}
						if(accessFlag=="null")
						{
							columnCheckBox.jqxCheckBox({ checked: null });
						}
						else if(accessFlag=="false")
						{
							columnCheckBox.jqxCheckBox({ checked: false });
						}
					  $("#user_summary_grid").jqxGrid('endupdate');
				  });
				  return true;
			}
		  },
		  { text: mu_username, editable: false, datafield: 'USERNAME',filtertype: 'textbox', width: "12%",minwidth: 200},
		  { text: mu_company, editable: false, datafield: 'COMPANYNAME',filtertype: 'checkedlist', width: "10%"},
		  { text: mu_email, editable: false, datafield: 'EMAILADDRESS',filtertype: 'list', width: "12%"},
		  { text: mu_accounts, editable: false, datafield: 'Accounts', filterable: false, width: "10%"},
		  { text: mu_services, editable: false, datafield: 'Services', filterable: false, width: "10%"},
		  { text: mu_updatedon, editable: false, datafield: 'UPDATEDATE',filtertype: 'date', cellsformat: 'MM.dd.yyyy HH:MM', width: "12%"},
		  { text: mu_updatedby, editable: false, datafield: 'LASTMODIFIER',filtertype: 'textbox', width: "12%"},
		  { text: 'Action', editable: false, datafield: 'RowAction',filterable: false}
	   ],
		ready: function () {
		}
	});
	
	
	/*-----------------------------------------------------------------------------------------------
	Hide a particular column during Grid Binding Complete event; For binding link to a particular cell
	-----------------------------------------------------------------------------------------------*/
	$("#user_summary_grid").bind("bindingcomplete", function(event) {
		$(this).jqxGrid('hidecolumn','HASACCESS');
		$(this).jqxGrid('hidecolumn','TYPEOFUSER');
		$(this).jqxGrid('hidecolumn','consumerID');
		$(this).jqxGrid('hidecolumn','action');
	});
	
	var updatePageState = function (pagenum) {
		var datainfo = $("#user_summary_grid").jqxGrid('getdatainformation');
		var pagenum = datainfo.paginginformation.pagenum;
		var pagesize = datainfo.paginginformation.pagesize;
		var startrow = pagenum * pagesize;
		// select the rows on the page.
		$("#user_summary_grid").jqxGrid('beginupdate');
		var checkedItemsCount = 0;
		for (var i = 0; i < pagesize; i++) {
			var boundindex = $("#user_summary_grid").jqxGrid('getrowboundindex', i);
			var value = $("#user_summary_grid").jqxGrid('getcellvalue', boundindex, 'CheckRow');
			if (value) checkedItemsCount++;
			if (value) {
				$("#user_summary_grid").jqxGrid('selectrow', boundindex);
			}
			else {
				$("#user_summary_grid").jqxGrid('unselectrow', boundindex);
			}
		}
		$("#user_summary_grid").jqxGrid('endupdate');
		if (checkedItemsCount == pagesize) {
			columnCheckBox.jqxCheckBox({ checked: true });
		}
		else if (checkedItemsCount == 0) {
			columnCheckBox.jqxCheckBox({ checked: false });
		}
		else {
			columnCheckBox.jqxCheckBox({ checked: null });
		}
	}
	
	/*-----------------------------------------------------------------------------------------------
	Update the selection after sort.
	-----------------------------------------------------------------------------------------------*/
	$("#user_summary_grid").on('sort', function (event) {
		updatePageState();
	});
	
	/*-----------------------------------------------------------------------------------------------
	Update the selection after page change.
	-----------------------------------------------------------------------------------------------*/
	$("#user_summary_grid").on('pagechanged', function (event) {
		 updatePageState();
	});
	
	/*-----------------------------------------------------------------------------------------------
	Select or Un-Select rows when a checkbox is checked or unchecked.
	-----------------------------------------------------------------------------------------------*/
	$("#user_summary_grid").on('cellvaluechanged', function (event) {
		if(event.args.datafield=='CheckRow'){
			if (event.args.value) {
				$("#user_summary_grid").jqxGrid('selectrow', parseInt(event.args.rowindex));
			}
			else {
				$("#user_summary_grid").jqxGrid('unselectrow', parseInt(event.args.rowindex));
			}
		
			var datainfo = $("#user_summary_grid").jqxGrid('getdatainformation');
			var pagesize = datainfo.paginginformation.pagesize;
			var checkedItemsCount = 0;
			for (var i = 0; i < pagesize; i++) {
				var boundindex = $("#user_summary_grid").jqxGrid('getrowboundindex', i);
				var value = $("#user_summary_grid").jqxGrid('getcellvalue', boundindex, 'CheckRow');
				if (value) checkedItemsCount++;
				/*if(checkedItemsCount > 1)
				{
					alert('more than one checkbox selected');
				}*/
			}	
			
			// update the state of the column's checkbox. When all checkboxes on the displayed page are checked, we need to check column's checkbox. We uncheck it,
			// when there are no checked checkboxes on the page and set it to intederminate state when there is at least one checkbox checked on the page.  
			if (columnCheckBox) {
				var datainfo = $("#user_summary_grid").jqxGrid('getdatainformation');
				var pagesize = datainfo.paginginformation.pagesize;
				var pagenum = datainfo.paginginformation.pagenum;
				var selectedRows = $("#user_summary_grid").jqxGrid('getselectedrowindexes');
				var state = false;
				var count = 0;
				$.each(selectedRows, function () {
				 if (pagenum * pagesize <= this && this < pagenum * pagesize + pagesize) {
					 count++;
				 }
				});
				if (count != 0) state = null;
				if (count == pagesize) state = true;
				if (count == 0) state = false;
				updatingCheckState = true;
				$(columnCheckBox).jqxCheckBox({ checked: state });
				updatingCheckState = false;
			}
		}
	});
	 
	
	/*Testing for custom row selection - different bg*/
	$("#selectrowbutton").click(function () {
		var index = parseInt($("#rowindexinput").val());
		if (!isNaN(index)) {
			$("#user_summary_grid").jqxGrid('selectrow', index);
			var rowindex = $("#user_summary_grid").jqxGrid('getselectedrowindex');
			var data = $("#user_summary_grid").jqxGrid('getrowdata', rowindex);
			//alert(rowindex);
			$('#row'+index+'user_summary_grid').find('.jqx-grid-cell').addClass('rowNoAcces');
		}
	});
});
		
]]>
</script>
<style type="text/css">
div.jqx-grid-content .jqx-grid-cell.rowNoAcces.jqx-fill-state-pressed{background-color:#fadcd9;}
</style>
</head>
<body>
<div class="jqx-hideborder" style="border:0;height:100%;position:relative;">
	<div id="userTab" class="jqx-hideborder">
		<div class="tabContentLeft jqx-hidescrollbars contentContainer">
			<div class="jscustomHeaderPane customPanelHeader">
				<div class="floatLeft">
					<div class="btnLeft">
						<input type="button" value="Add New" class='jqxButton btnPositive btnBlueBg' id="addNewUser" />
						<input type="button" value="Block / Remove" class='jqxDisabledButton' id="blockUser" />
						<input type="text" class="inputText" id="rowindexinput" />
						<input type="button" value="Select Row" class='jqxButton' id="selectrowbutton" /> <!-- -->
					</div>
				</div>
			</div>
			<div class="middleContent borderTB">
				<div id="user_summary_grid" class="noBorder">
				</div>
			</div>
			<div class="jscustomFooterPane customPanelFooter">
				<input type="button" value="Export" class='jqxButton' />
			</div>
		</div>
		<div class="tabContentRight" id="tabContentRight">
			<div class="empty-content-placeholder">
				<span>No Data to Display</span>
			</div>
		</div>
	</div>
</div>
</body>
</html>

I look for your reply.

Thanks & Cheers,
\_rssb

[Author]

Posts