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 x 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.