Control Javascript

Description

You can specify Javascript for each control in the Grid's Grid part or Detail View part.

This makes it very easy to use 3rd party libraries, such as jQuery, to decorate controls. When you define the Javascript for a control, you can use the special {grid.controlId} placeholder. This placeholder gets replaced at run-time with the actual Id of the control. Example code to use the jQuery datepicker (ignore any markers you see):

jQuery('#{grid.controlIdEscaped}').datepicker({ 
	onSelect: function(dateText, inst) { 
		//get the ID of the control 
		var id= inst.id; 
		//the ID is encoded for jQuery ( periods are converted to \\.) 
		// remove the encoding. 
		id = $u.s.tran(id,'\\','');
		id = id.split('.'); 
		//get the name of the control. 
		//it is the word after the last period 
		id = id[id.length-1]; 
		{grid.object}.setValue('G',id,{grid.rowNumber},dateText);
	}
});

Here is another, much simpler way of doing it. This causes the control's 'change' event to fire when the selection is made, thus causing the record to go dirty.

jQuery('#{Grid.ControlIdEscaped}').datepicker({ onSelect: function(dateText, inst) { $e.execute(this,'change'); } } );

Notice that when the user makes a selection from the date picker, it puts the value in the control, but does not cause the row to go dirty. That's because jQuery did not automatically call the Grid's .setValue() method to set the field value (which would have caused the row to go dirty). Therefore, it is necessary to hook the jQuery date picker's onSelect event where we can call the Grid object's .setValue() method.

 Grid and UX Component - jQuery Date Picker

The Grid and Dialog Component both have a 'Control Javascript' property. This property can be used to define any Javascript that you want to emit when the control is rendered. This property can be used to for many different reasons. This video shows how the property can be used to hook up the jQuery date picker.