Grid everpresentrow validation tooltip

[dan123Participant]

Hi i have this jqxgrid with everpresentrow showing. I want to add jqxtooltip as validation for one of the columns in the grid when i add.

Example:
Column firstname: Enter Firstname

When i enter a value and hit enter, tab or click add button it should trigger the jqxtooltip with the following message ‘Entered value should be more than 5 characters’. If its possible to trigger that tooltip on hover that would be good. But I want to use jqxtooltip because to show as a actual validation.

For some reason i couldn’t find a way to achieve this using the API notes for everpresentrow, so i would appreciate if there was a workaround for this.

Here is my jsfiddle:
http://jsfiddle.net/1ygLdbjc/1/

[HristoParticipant]

Hello dan123,

You could use different messages depends on the case.
If you want to show tooltip then you should get the position where to show.
For example, you could get the coordinates of the cursor at the moment you press the input of the Ever-Present Row.
Or to bind to the click event on these inputs and just get the coordinates from there.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[dan123Participant]

Hi Hristo,

I would appreciate if you could provide example for this coordinates appproach your talking about?

[HristoParticipant]

Hello dan123,

I would like to mention that I suggest is customization – there is no built-in feature for this.
Please, take a look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/everpresentrowcustomwidgets.htm?light
You could use the createEverPresentRowWidget callback to bind to the input field there (or particular widget).
In the code snippet you could find simple binding to the click event:

createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
	var inputTag = $("<input style='box-sizing: border-box; border: none;'/>").appendTo(htmlElement);
	inputTag.jqxInput({ popupZIndex: 99999999, placeHolder: "Enter Name: ", source: getSourceAdapter("name"), displayMember: 'name', width: '100%', height: 30 });

	inputTag.click(function (event) {
		console.log("Click event of the First Name column.");
	});

	$(document).on('keydown.name', function (event) {
		if (event.keyCode == 13) {
			if (event.target === inputTag[0]) {
				addCallback();
			}
		}
	});

	return inputTag;
}

Also, please, take a look at these details on how to get coordinates:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts