What's New?
It's possible now to define column width percentage wise:
colDef : [
{
...
width : '20%',
...
},
...
],
Also you can attach and unattach toolbars ResetPanel and SearchPanel:
tableDef
{
...
useResetPanel : true|false
useSearchPanel : true|false
...
}
useSort property allows you to cancel the sort icons and sort functions.
usePagePanel - to cancel the page panel (with number of rows and page turn control).
tableDef =
{
...
useSort : true|false,
usePagePanel : true|false,
...
};
Data editing
It's possible now to edit data in table. You can define global edit parameters as
tableDef=
{
...
useEdit : true | false,
editIndicator : 'HTML',
editTitle : 'String',
editClass : 'CSS',
...
}
useEdit is boolean value that define whether will data edit in table;
editIndicator is HTML code (<img src="...">) or String (by default it is "*"). This indicator appears near changed row and indicates that it was changed;
editTitle is title for row with edit controls. Default value is "edit";
editClass is CSS class for row with edit controls
Then you implement controls for each column that you wish to use for edit value.
Controls are not required parameters, so you can choose only few columns for edit if you need.
Possible controls are text field, check box, radio box, select list and button.
Note. For button you have to define handler also.
colDef:[
{
...
input : 'text' | 'checkbox' | 'radio' | 'select' | 'button',
value : 'String' | [Array],
nullValue : 'String',
tooltip : 'String',
...
],
input is type of edit control that will use for this column, all possible values you see in code sample;
value is String value or Array with settings for control. It depends on input parameter value.
If input='text' this parameter is empty string ''.
If input='checkbox' this parameter is Array ['value for checked checkbox', 'value for unchecked checkbox'], for example ['Yes', 'None'].
If input='radio' this parameter is Array ['value for radio1', 'value for radio1', ..., 'value for radioN'], for example ['none', 'client', 'user'].
If input='select' this parameter is Array ['value for item1', 'value for item2', ..., 'value for itemN'], for example ['Boston', 'Athens', 'Kyiv', 'New York'].
If input='button' this parameter is Array ['button text', 'button handler'], for example ['Change ID', 'callPopup()'].
nullValue uses only with input='select' and defines empty row text for select list;
tooltip is optional text with description that will appears when user moves mouse over column title.
Example - Data editing
You can see an example here - Data editing Example [popup]
In this example you can see how to implement and use data editing within CodeThatTable, how to create popup controls and runtime and how change control's setting in depend on current data selection.
Note: All these features are available with version only.
Read more about CodeThatTable >>
|