jQuery UI Widgets Forums Grid Grid everpresentrow validation tooltip

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 4 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • dan123
    Participant

    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/


    Hristo
    Participant

    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


    dan123
    Participant

    Hi Hristo,

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


    Hristo
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.