| MDW User Guide |
|
Getting Started
How to use this guide
The Megadata Web Table Quick Start Guide is designed to introduce you to our advanced Web Client-Side Technology: Megadata Web.Our goals:
- To give you a working knowledge of Megadata Web Table in minutes.
- To supply you with details that allow you to easily adapt the Megadata Web Table for your own needs.
You are not required to know in detail the advanced concepts behind the Web application nor the object-oriented programming. You do not need to know server-side languages nor technologies. Megadata Web separation of client-side software from server-side software allows client-side professionals to no longer use server software to generate web pages.
You can start using the Megadata Web Table today. All you need is:
- brief knowledge of HTML, JavaScript, and CSS,
- a browser with built-in debugging tools, and
- a text editor.
Thank you for your interest in Megadata Web.
Why Megadata Web?
Megadata Web Table literally delivers "quantum leap" improvements in how Web Users can rapidly and efficiently make use of Web based databases. Megadata Web dramatically streamlines and optimizes the entire process of development, deployment, and maintenance of Web Applications. With Megadata Web Table, applications can achieve valuable Business Intelligence functionality. This provides the user with access to critical business data similar to powerful desktop applications such as Microsoft Excel, where they can visualize and analyze the data as much as needed (retrieving, analyzing, editing, and reporting on data and information from any Web, Intranet, Extranet, or local accessible database).Megadata Web Table is a powerful JavaScript module set that makes web application development (especially AJAX-enabled) a lot easier and more productive by providing a professional solution for navigation and processing of tabular data from the web.
Excel-like keyboard support, column and row scrolling, data editing and aggregation, data totals, sorting, searching, filtering, grouping, reporting, adding, deleting, exporting: all create an Excel-like experience.
Using Megadata Web requires the following three steps:
I. DOCTYPE
To allow browsers to operate in keeping with the W3C specification and work properly with Megadata Web Table, the following HTML 5DOCTYPE element should be specified:
<!DOCTYPE html>
II. Character Set
To satisfy the XHTML validators, the character set information should be placed in a meta element in the head portion of the document:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
III. JavaScript Modules
To use the Megadata Web Table, include the following links, where the order is important, in the head section of the page with the <script> and <link> tags:<!-- Megadata Web Modules (to be included in specified order below) --> <!-- Required Modules --> <!-- Utilities (contains all functions commonly used in other modules) --> <script src='https://www.megadataweb.com/mdw/include/mdw.util.js'></script> <!-- Megadata Web Table (contains table core objects and functions) --> <script src='https://www.megadataweb.com/mdw/include/mdw.table.js'></script> <!-- JSON library --> <script src='https://www.megadataweb.com/mdw/include/JSON.js'></script> <!-- CSS (table formatting content) --> <link rel="stylesheet" type="text/css" href="css/mdw.styles.css" /> <!-- Font Awesome (enables button images) --> <script src="https://kit.fontawesome.com/1fb4707f0c.js" crossorigin="anonymous"></script> <!-- Commonly Used Optional Modules --> <!-- Highcharts Graphical Libraries (enables graphics: pie charts and aggregations) --> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script>
Table Object Model
The main class in Megadata Web is Table class: mdw.table.Table. This class relies on the data source to provide data for the table record set and the unlimited amount of Forms (master and/or detail) for synchronously displaying and processing data from the record set.The properties of the single argument tabObject for the mdw.table.Table(tabObject) constructor are:
- string tableName - identifies table object after table creation (mandatory). Every table on web page should have unique tableName. After constructor execution Table Object with identifier (variable name) tableName will be created and placed to JavaScript global scope.
- object tableDataIds - mandatory object that specifies id (name) and location (position) for every column (field) value in the internal record set
- tableData.
Example:"tableDataIds": { "_id_": 0, "_act_": 1, "product": 2, "rating": 3, "price": 4, "hdrive": 5 }Usually first two columns of records are not part of source data. They generated by Megadata Web after data received from server. User can't directly modify value of these two columns (fields). This two fields are mandatory fields:- "_id_" - 0
- "_act_" - 1
- tableData - array or object - data source array or object that defines the data for the internal record set (mandatory).
-
For Array representation we use the sequence of records.
Every record is represented by standard JavaScript Array in the following format:
[rId(F0), AC(F1), F2,F3,...,Fn-1].
Here:
- rId (field 0) - integer - unique record Id (we use sequential integers 0, 1, 2...)
- AC (field 1) - string - Action Code. Action code has the following valid values:
'' (Empty string)- record contains original data from server.'Added'- record was created (added) by user on the client side.'Changed'- record was modified (edited, changed) by user on the client side.'Deleted'- record was marked for deletion by user on the client side.- Fi (i = 2, 3..., n-1) - values for fields F2, F3,..., Fn-1
This array"tableData": [ [ 0, "", "Lenovo", 2.5, 304.99, 256], [ 1, "", "Toshiba", 2.5, 304.99, 512], [ 2, "", "Lenovo", 4.5, 299.99, 1024], [ 3, "", "Lenovo", 2.5, 304.99, 128], [ 4, "", "Lenovo", 2.5, 299.99, 32], [ 5, "", "Toshiba", 4.5, 304.99,64], [ 6, "", "Toshiba", 3.5, 304.99, 16] ]
represents data for table:
After editing, following array"tableData": [ [ 0, "", "Lenovo", 2.5, 304.99, 256], [ 1, "", "Toshiba", 2.5, 304.99, 512], [ 2, "Changed", "Lenovo", 3.5, 299.99, 1024], [ 3, "", "Lenovo", 2.5, 304.99, 124], [ 4, "", "Lenovo", 2.5, 299.99, 32], [ 5, "Changed", "Toshiba", 3.5, 304.99, 64], [ 6, "", "Toshiba", 3.5, 304.99, 16] ]
presents data for edited table:
-
For Array representation we use the sequence of records.
- For Object representation we use the sequence of packed columns. Every packed column represented by object.
To get Object representation we use the simple packing algorithm. Packaged data requires less RAM and guarantees
higher speed of delivery and fast data unpacking.
Every column object contains following properties:- l - integer - column length - quantity of records in record set.
- s - integer, which specifies presence of leading column "Action" ("_act_"):
1- column "Action" presented in column array2- column "Action" is missing in column array
- r - array of arrays, which represents data columns. Every element of this array represents
one data column and contains one element a ([a]) or two elements b and c ([b, c]):
Data column represented by array with one element a (array of column values) if it presented by shorter JSON string then two elements column representation.
Two elements column representation has:Second element (c)- array of unique values in appropriate columnFirst element (b)- string - comma separated positions (numbers in base 36 - radix-36 representation) of appropriate column element in array of unique values (in Second element - c).
This object"tableData":{ "r":[ [",1,,,,1,1",["Lenovo","Toshiba"]], [",,1,,,1,2",[2.5,4.5,3.5]], [",,1,,1,,",[304.99,299.99]], [[256,512,1024,124,32,64,16]] ], "l":7, "s":2 }represents data for table:
Please pay attention that column "Action" is missing.
After editing, object"tableData":{ "r": [ [",,1,,,1,", ["","Changed"] ], [",1,,,,1,1", ["Lenovo","Toshiba"] ], [",,1,,,1,1", [2.5,3.5]] , [",,1,,1,,", [304.99,299.99] ], [[256,512,1024,124,32,64,16]] ], "l": 7, "s": 1 }represents data for edited table:
Please pay attention that column "Action" is missing.
For example, lets convert to column the array [",1,,,,1,1", ["Lenovo", "Toshiba"]].
If we replace "" (empty strings) by 0 in comma separated first element of array ",1,,,,1,1" we will receive the string: "0,1,0,0,0,1,1".
After replacing 0 to "Lenovo" and 1 to "Toshiba" we will get string "Lenovo,Toshiba,Lenovo,Lenovo,Lenovo,Toshiba,Toshiba".
Splitting this string by "," (comma) we will get column array:
["Lenovo","Toshiba","Lenovo","Lenovo","Lenovo","Toshiba","Toshiba"].
Remark: Last array [[256,512,1024,124,32,64,16]] contains column representation which does not required conversion.
For this column two element JSON representation [",1,2,3,4,5,6",[256,512,1024,124,32,64,16]] is shorter than one element JSON representation [[256,512,1024,124,32,64,16]].
|
Computers
|
Example Code:
var comObj = {
"tableName": "T_c",
"reportTitle": "Computers",
"tableSelectedRow": -1,
"tableForms": [
{
"formContainer": "mdw_um_computers_container",
"fNum": 0,
"fTabNum": 0,
"formType": "master",
"showTotals": "Y",
"bar": {
"bBarPosition": "right",
"bBarBgColor": "#eaeaea",
"bBarWidth": 0,
"bKnobBgColor": "#cecece",
"bKnobOverBgColor": "#aaaaaa",
"bKnobBorderRadius": 0,
"bShowBar": "Y",
"bKnobMinHeight": 0
},
"formColumns": [
{
"cId": "_num_",
"cTitle": "#",
"cW": 36,
"cFixedW": "Y",
"cAlign": "right",
"cSortType": "",
"cTitleColor": "#486c8f",
"cColor": "#333",
"cOptional": "Y",
"cRightBorder": "Y",
"cVisible": "Y"
},
{
"cId": "_act_",
"cTitle": "Action",
"cW": 80,
"cFixedW": "Y",
"cSortType": "S",
"cOptional": "Y",
"cRightBorder": "Y",
"cDraggable": "Y",
"cVisible": "Y"
},
{
"cId": "product",
"cTitle": "Product",
"cCustomFn": "mdw.table.makeAutocompleteInputCell",
"cSortType": "S",
"cMaxLen": 80,
"cShowTooltip": "always",
"cAlign": "left",
"cHeaderAlign": "left",
"cTotalType": "AVG/Total:",
"cW": 100,
"cOptional": "Y",
"cPlaceholder": "Product",
"cColor": "blue",
"cTitleColor": "red",
"cVisible": "Y"
},
{
"cId": "rating",
"cTitle": "Rating",
"cCustomFn": "mdw.table.makeJSNumberInputCell",
"cAttribute": "positive",
"cSortType": "N",
"cFractionDigits": 1,
"cMaxLen": 18,
"cShowTooltip": "none",
"cAlign": "right",
"cHeaderAlign": "right",
"cTotalType": "AVG",
"cType": "N",
"cW": 100,
"cOptional": "Y",
"cPlaceholder": "Rating",
"cVisible": "Y"
},
{
"cId": "price",
"cTitle": "Price",
"cCustomFn": "mdw.table.makeJSNumberInputCell",
"cAttribute": "positive",
"cSortType": "N",
"cFractionDigits": 2,
"cMaxLen": 18,
"cShowTooltip": "none",
"cAlign": "right",
"cHeaderAlign": "right",
"cTotalType": "SUM",
"cType": "N",
"cW": 100,
"cOptional": "Y",
"cPlaceholder": "Price ($)",
"cVisible": "Y"
},
{
"cId": "save",
"cTitle": "Save",
"cCustomFn": "mdw.table.makeJSNumberInputCell",
"cAttribute": "positive",
"cSortType": "N",
"cFractionDigits": 2,
"cMaxLen": 18,
"cShowTooltip": "none",
"cAlign": "right",
"cHeaderAlign": "right",
"cTotalType": "SUM",
"cType": "N",
"cW": 100,
"cOptional": "Y",
"cPlaceholder": "Save ($)",
"cVisible": "Y"
},
{
"cId": "ram(gb)",
"cTitle": "RAM (Gb)",
"cCustomFn": "mdw.table.makeJSNumberInputCell",
"cAttribute": "positive",
"cSortType": "N",
"cMaxLen": 18,
"cShowTooltip": "none",
"cAlign": "right",
"cHeaderAlign": "right",
"cTotalType": "AVG",
"cType": "N",
"cW": 100,
"cOptional": "Y",
"cPlaceholder": "RAM (Gb)",
"cVisible": "Y"
},
{
"cId": "hdrive",
"cTitle": "H Drive",
"cCustomFn": "mdw.table.makeJSNumberInputCell",
"cAttribute": "positive",
"cSortType": "N",
"cMaxLen": 18,
"cShowTooltip": "none",
"cAlign": "right",
"cHeaderAlign": "right",
"cTotalType": "AVG",
"cType": "N",
"cW": 100,
"cOptional": "Y",
"cPlaceholder": "H Drive",
"cVisible": "Y"
},
{
"cId": "speed",
"cTitle": "Speed",
"cCustomFn": "mdw.table.makeJSNumberInputCell",
"cAttribute": "positive",
"cSortType": "N",
"cFractionDigits": 1,
"cMaxLen": 18,
"cShowTooltip": "none",
"cAlign": "right",
"cHeaderAlign": "right",
"cTotalType": "AVG",
"cType": "N",
"cW": 100,
"cOptional": "Y",
"cPlaceholder": "Speed",
"cVisible": "Y"
},
{
"cId": "display",
"cTitle": "Display",
"cCustomFn": "mdw.table.makeJSNumberInputCell",
"cAttribute": "positive",
"cSortType": "N",
"cFractionDigits": 1,
"cMaxLen": 18,
"cShowTooltip": "none",
"cAlign": "right",
"cHeaderAlign": "right",
"cTotalType": "AVG",
"cType": "N",
"cW": 100,
"cOptional": "Y",
"cPlaceholder": "Display",
"cVisible": "Y"
}
],
"formEvents": {
"rowDragDroppable": {
"addRec": "Drop dragging record append new record to the table",
"chartAggregate": "Drop dragging record to generate aggregated" +
" reports for any columns.",
"cloneRec": "Drop dragging record to add new record to the end",
"deleteAllRec": "Drop dragging record to to mark all not hidden" +
" record as deleted",
"deleteRec": "Drop dragging record to delete it",
"downOneRec": "Drop dragging record to move it one position down",
"exclude": "Drop dragging record to exclude data by column by" +
" selected column and selected value!",
"excludeAll": "Drop dragging record to exclude data by selected" +
" value in any column!",
"exportToCSV": "Drop dragging record to export data in CSV format",
"exportToHTML": "Drop dragging record to export data in JSON format",
"filter": "Drop dragging record to filter data by selected column" +
" and selected value!",
"filterAll": "Drop dragging record to filter data by selected" +
" value in any column!",
"findAll": "Drop dragging record to find next record with" +
" selected value.",
"findAllUp": "Drop dragging record to find previous record" +
" with selected value.",
"findNext": "Drop dragging record to find next record with" +
" selected value in selected column.",
"findUp": "Drop dragging record to find previous record with" +
" selected value in selected column.",
"groupedReport": "Drop dragging record to generate report grouped" +
" by selected column.",
"hideRec": "Drop dragging record to hide selected record.",
"hideRest": "Drop dragging record to hide all records below record" +
" selected record.",
"hideUp": "Drop dragging record to hide all records above selected" +
" record.",
"insertRec": "Drop dragging record to insert new record below it",
"map": "Drop dragging record to open Web Page for selected record",
"chartNumeric": "Drop dragging record to generate a Pie report for" +
" numeric columns",
"replaceAll": "Drop dragging record to replace in all records with" +
" selected value in column selected column.",
"replaceNext": "Drop dragging record to replace next with value" +
" selected value in column selected column.",
"saveRec": "Drop dragging record to save data to the server for" +
" batch processing",
"sendEmail": "Drop dragging record to send e-mail using selected" +
" record",
"sendEmailAll": "Drop dragging record to send e-mail using All" +
" selected records",
"sortA": "Drop dragging record to sort records ascending by " +
"selected column.",
"sortD": "Drop dragging record to sort records descending by " +
"selected column.",
"standardReport": "Drop dragging record to generate standard report",
"startOver": "Drop dragging record to start over - restore origina" +
"l records we received from server (this deletes any scanges" +
" made before)",
"trashRec": "Drop dragging record to trash it",
"undo": "Drop dragging record to undo - unoes last operation " +
"performed: add, delete, hide, filter, exclude, sort...",
"upOneRec": "Drop dragging record to move it one position up",
"webSite": "Drop dragging record to open Web Page for selected" +
" record"
}
},
"formOptions": {
"selectCol": "Y",
"selectRow": "Y",
"selectCell": "Y",
"selectedCol": 2,
"highlightCol": "",
"highlightRow": "Y",
"enableMouseWheel": "Y",
"enableKeyControl": "Y",
"enableMoveRows": "Y",
"selectedRow": 0,
"highlightCell": "Y",
"enableColumnMove": "Y",
"enableContextMenu": "Y",
"enableRadarKeyControl": "Y",
"enableGridKeyControl": "Y",
"enableDropOnTools": "Y"
},
"formContextMenu": {
"ctmTitle": "Menu",
"items": [
{
"type": "item",
"text": "Sort Ascending",
"icon": "fa fa-sort-alpha-asc"
},
{
"type": "item",
"text": "Sort Descending",
"icon": "fa fa-sort-alpha-desc"
},
{
"type": "item",
"text": "Move Record Up",
"icon": "fa fa-long-arrow-up"
},
{
"type": "item",
"text": "Move Record Down",
"icon": "fa fa-long-arrow-down"
},
{
"type": "divider"
},
{
"type": "item",
"text": "Hide Record",
"icon": "fa fa-check-circle"
},
{
"type": "item",
"text": "Hide Records Above",
"icon": "fa fa-arrow-circle-down"
},
{
"type": "item",
"text": "Hide Records Below",
"icon": "fa fa-arrow-circle-up"
},
{
"type": "item",
"text": "Find Next",
"icon": "fa fa-search-plus"
},
{
"type": "item",
"text": "Find Previous",
"icon": "fa fa-search-minus"
},
{
"type": "item",
"text": "Filter, Which Contain",
"icon": "fa fa-filter"
},
{
"type": "item",
"text": "Exclude",
"icon": "fa fa-times"
},
{
"type": "divider"
},
{
"type": "item",
"text": "Pie Tool",
"icon": "fa fa-pie-chart"
},
{
"type": "item",
"text": "Aggregate Tool",
"icon": "fa fa-magic"
},
{
"type": "item",
"text": "Standard Report",
"icon": "fa fa-file-text-o"
},
{
"type": "item",
"text": "Grouped Report",
"icon": "fa fa-file-text"
},
{
"type": "item",
"text": "Export CSV",
"icon": "fa fa-file-excel-o"
},
{
"type": "item",
"text": "Undo",
"icon": "fa fa-undo"
},
{
"type": "item",
"text": "Start Over",
"icon": "fa fa-refresh"
}
]
},
"formStyle": {
"sBorderColor": "#cccccc",
"sBorderWidth": 1,
"sCellHeight": 0,
"sCellMinWidth": 30,
"sOddCellStyle": "background-color:#f5f5f5;",
"sEvenCellStyle": "background-color:#fff;",
"sOddRowSelectedStyle": "background-color:#FFE4C4;",
"sEvenRowSelectedStyle": "background-color:#FFE4C4;",
"sOddColSelectedStyle": "background-color:#FFDFBF;",
"sEvenColSelectedStyle": "background-color:#FFDFBF;",
"sOddCellSelectedStyle": "background-color:#FFD4B8;",
"sEvenCellSelectedStyle": "background-color:#FFD4B8;",
"sOddCellHighlightedStyle": "background-color:#D8E4EE;",
"sEvenCellHighlightedStyle": "background-color:#D8E4EE;"
},
"header": {
"hShowColumnEditor": "Y",
"hHeaderStyle": "background-color:#e3eaf3;color:#486c8f;" +
"text-transform: uppercase;",
"hHeaderHeight": 0,
"hShowHeader": "Y",
"hDetailWidth": "50%"
},
"toolBar": {
"tShowToolbar": "Y",
"tShowToolControl": "Y",
"tToolbarPosition": "bottom",
"tToolbarTools": [
{
"nId": "recno",
"nName": "Record number input",
"nTitle": "Record Number",
"nVisible": "Y",
"nOptional": "Y",
"nStyle": "width:60px;"
},
{
"nId": "_text_1",
"nName": "Text \"of\"",
"nTitle": "of",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "remax",
"nName": "Record quantity",
"nTitle": "Record quantity",
"nVisible": "Y",
"nOptional": "Y",
"nStyle": "width:60px;"
},
{
"nId": "sortA",
"nImg": "https://www.megadataweb.com/mdw/images/nsa.gif",
"nName": "Sort ascending",
"nTitle": "Sort ascending button. Select any field of the" +
" column which we would like to sort. Press this button.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 200
},
{
"nId": "sortD",
"nImg": "https://www.megadataweb.com/mdw/images/nsd.gif",
"nName": "Sort descending",
"nTitle": "Sort descending button. Select any field of the" +
" column which we would like to sort. Press this button.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 200
},
{
"nId": "_text_2",
"nName": "Text Go",
"nTitle": "Go:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "top",
"nImg": "https://www.megadataweb.com/mdw/images/hvTop.gif",
"nName": "Top",
"nTitle": "Top button. Press this button to select first record.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "pgUp",
"nImg": "https://www.megadataweb.com/mdw/images/hvPageUp.gif",
"nName": "Page Up",
"nTitle": "Page Up button. Press this button to go page up.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "up",
"nImg": "https://www.megadataweb.com/mdw/images/hvUp.gif",
"nName": "Up",
"nTitle": "Up button. Press this button to select previous record.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 140
},
{
"nId": "down",
"nImg": "https://www.megadataweb.com/mdw/images/hvDown.gif",
"nName": "Down",
"nTitle": "Down button. Press this button to select next record.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 140
},
{
"nId": "pgDown",
"nImg": "https://www.megadataweb.com/mdw/images/hvPageDown.gif",
"nName": "Page Down",
"nTitle": "Page Down button. Press this button to go page down.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "bottom",
"nImg": "https://www.megadataweb.com/mdw/images/hvBottom.gif",
"nName": "Bottom",
"nTitle": "Bottom button. Press this button to select last record.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "_text_3",
"nName": "Text Find",
"nTitle": "Find:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "find",
"nName": "Find value input",
"nTitle": "Find value",
"nVisible": "Y",
"nOptional": "Y",
"nPlaceholder": "Find value",
"nMinA": 200
},
{
"nId": "case",
"nName": "Match case checkbox",
"nTitle": "Match Case",
"nVisible": "Y",
"nOptional": "Y",
"nMinA": 200
},
{
"nId": "globalFindNext",
"nImg": "https://www.megadataweb.com/mdw/images/nfna.png",
"nName": "Find everywhere",
"nTitle": "Find GlobalNext button. Select a field whose content" +
" you want to search.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 200
},
{
"nId": "globalFindPrevious",
"nImg": "https://www.megadataweb.com/mdw/images/nfua.png",
"nName": "Find everywhere",
"nTitle": "Find GlobalUp button. Select a field whose content" +
" you want to search.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 200
},
{
"nId": "findNext",
"nImg": "https://www.megadataweb.com/mdw/images/nfn.gif",
"nName": "Find next",
"nTitle": "Find (Next) button. Select a field whose content" +
" you want to search.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 200
},
{
"nId": "findUp",
"nImg": "https://www.megadataweb.com/mdw/images/nfu.gif",
"nName": "Find previous",
"nTitle": "Find (Up) button. Select a field whose content" +
" you want to search.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 200
},
{
"nId": "_text_4",
"nName": "Text Replace",
"nTitle": "Replace:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "replaceTo",
"nImg": "https://www.megadataweb.com/mdw/images/nfl.gif",
"nName": "Replace value input",
"nTitle": "Replace value",
"nVisible": "Y",
"nOptional": "Y",
"nPlaceholder": "Replace value",
"nMinA": 300
},
{
"nId": "replaceNext",
"nImg": "https://www.megadataweb.com/mdw/images/nrn.gif",
"nName": "Replace Next",
"nTitle": "Replace button. Press this button to replace" +
" content in selected field.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "replaceAll",
"nImg": "https://www.megadataweb.com/mdw/images/nra.gif",
"nName": "Replace All",
"nTitle": "Replace all button. Press this button to replace" +
" content in selected column.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "randomVal",
"nImg": "https://www.megadataweb.com/mdw/images/random.png",
"nName": "Random",
"nTitle": "Random button. Generates all random values in" +
" selected column.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "_text_5",
"nName": "Text Filter",
"nTitle": " Filter:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "globalFilter",
"nImg": "https://www.megadataweb.com/mdw/images/nfla.png",
"nName": "Global Filter",
"nVisible": "Y",
"nTitle": "Global Filter button. Type some value which you" +
" would like to use to filter records. Press this button.",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "globalExclude",
"nImg": "https://www.megadataweb.com/mdw/images/neca.png",
"nName": "Global Exclude",
"nTitle": "Global Exclude button. Type some value which you" +
" would like to use to exclude (hide) records. Press this button.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "filter",
"nImg": "https://www.megadataweb.com/mdw/images/nfl.gif",
"nName": "Filter",
"nVisible": "Y",
"nTitle": "Filter button. Select some column field which you" +
" would like to use to filter records. Press this button.",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "exclude",
"nImg": "https://www.megadataweb.com/mdw/images/nec.png",
"nName": "Exclude",
"nTitle": "Exclude button. Select some column field which you" +
" would like to use to exclude (hide) records. Press this button.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "unique",
"nImg": "https://www.megadataweb.com/mdw/images/nuq.gif",
"nName": "Remove Duplicates",
"nTitle": "Remove Duplicates button. Select some column field" +
" which you would like to use to remove duplicate values." +
" Press this button.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 200
},
{
"nId": "_text_6",
"nName": "Text Move",
"nTitle": "Move:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "upOneRec",
"nImg": "https://www.megadataweb.com/mdw/images/up.gif",
"nName": "One position up",
"nTitle": "Move record up button. Press this button to move" +
" selected record one position up.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 200
},
{
"nId": "downOneRec",
"nImg": "https://www.megadataweb.com/mdw/images/down.gif",
"nName": "One position down",
"nTitle": "Move record down button. Press this button to move" +
" selected record one position down.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 200
},
{
"nId": "_text_7",
"nName": "Text Hide",
"nTitle": "Hide:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "hideRec",
"nImg": "https://www.megadataweb.com/mdw/images/nhi.gif",
"nName": "Hide record",
"nTitle": "Hide button - hides the selected record. Select any" +
" field of the record which we would like to hide." +
" Press this button.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "hideUp",
"nImg": "https://www.megadataweb.com/mdw/images/nhu.gif",
"nName": "Hide records above",
"nTitle": "Hide Up button - hides all records above the" +
" selected record.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "hideRest",
"nImg": "https://www.megadataweb.com/mdw/images/nhr.gif",
"nName": "Hide records below",
"nTitle": "Hide Rest button - hides all records below the" +
" selected record.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "hideAllRec",
"nImg": "https://www.megadataweb.com/mdw/images/hideAll.png",
"nName": "Hide all records",
"nTitle": "Hide All button - hides all records of the table.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "_text_8",
"nName": "Text Reports",
"nTitle": "Reports:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "standardReport",
"nImg": "https://www.megadataweb.com/mdw/images/nrs.gif",
"nName": "Standard report",
"nTitle": "Standard report button - generates a report" +
" listing all records.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 140
},
{
"nId": "groupedReport",
"nImg": "https://www.megadataweb.com/mdw/images/nrg.gif",
"nName": "Grouped report",
"nTitle": "Grouped report button - generates a report" +
" listing all records grouped by selected column.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 140
},
{
"nId": "chartNumeric",
"nImg": "https://www.megadataweb.com/mdw/images/chart_20.gif",
"nName": "Chart Tool",
"nTitle": "Chart Tool - generates a chart reports for" +
" selected columns.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 140
},
{
"nId": "chartAggregate",
"nImg": "https://www.megadataweb.com/mdw/images/magic.gif",
"nName": "Aggregate Tool",
"nTitle": "Aggregate Tool - generates aggregated reports" +
" for any columns.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 140
},
{
"nId": "_text_9",
"nName": "Text Add",
"nTitle": "Add:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "addRec",
"nImg": "https://www.megadataweb.com/mdw/images/nad.gif",
"nName": "Add new record",
"nTitle": "Add new record button. Press this button to" +
" append new record to the table.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "insertRec",
"nImg": "https://www.megadataweb.com/mdw/images/nin.gif",
"nName": "Insert new record",
"nTitle": "Insert record button. Press this button to add" +
" new record to the table below the selected.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "cloneRec",
"nImg": "https://www.megadataweb.com/mdw/images/ncp.gif",
"nName": "Clone selected record",
"nTitle": "Clone record button. Press this button append" +
" clone of selected record to the table.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "_text_10",
"nName": "Text Delete",
"nTitle": "Delete:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "deleteRec",
"nImg": "https://www.megadataweb.com/mdw/images/dl.gif",
"nName": "Delete selected record",
"nTitle": "Delete button. Press this button to mark" +
" selected record as deleted.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "deleteAllRec",
"nImg": "https://www.megadataweb.com/mdw/images/dy.gif",
"nName": "Delete all selected customers",
"nTitle": "Delete All button. Press this button to mark all" +
" not hidden record as deleted.",
"nVisible": "Y",
"nOptional": "Y",
"nData": "selected",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "_text_13",
"nName": "Text Export",
"nTitle": "Export:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "exportToHTML",
"nImg": "https://www.megadataweb.com/mdw/images/html_export.gif",
"nName": "Export to HTML",
"nTitle": "Export to HTML button - exports table to HTML file.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 140
},
{
"nId": "exportToFormattedHTML",
"nImg": "https://www.megadataweb.com/mdw/images/saveHTML.png",
"nName": "Export to Formatted HTML",
"nTitle": "Export to Formatted HTML button - saves source to" +
" formatted HTML file.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 140
},
{
"nId": "exportToCSV",
"nImg": "https://www.megadataweb.com/mdw/images/nex.gif",
"nName": "Export to CSV (Excel)",
"nTitle": "Export to CSV button - creates Coma Separated Value" +
" (CSV) data, which after saving can be used for importing data" +
" to another application.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 140
},
{
"nId": "_text_14",
"nName": "Text Save",
"nTitle": "Save:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "saveRec",
"nImg": "https://www.megadataweb.com/mdw/images/nud.gif",
"nName": "Sent to server new, edited and deleted records",
"nTitle": "Save button. Press this button to save visible" +
" modified data to the server for batch processing.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "saveAllRec",
"nImg": "https://www.megadataweb.com/mdw/images/saveAll.png",
"nName": "Sent to server all records",
"nTitle": "Save All button. Press this button to save all" +
" data to the server for batch processing.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": "",
"nMinA": 300
},
{
"nId": "_text_15",
"nName": "Text Undo",
"nTitle": "Undo:",
"nVisible": "Y",
"nOptional": "Y",
"nAlign": "center",
"nMinA": 400
},
{
"nId": "undo",
"nImg": "https://www.megadataweb.com/mdw/images/nun.gif",
"nName": "Undo",
"nTitle": "Undo button - undoes the last operation performed:" +
" add, delete, hide, filter, exclude, sort ascending," +
" sort descending...",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "startOver",
"nImg": "https://www.megadataweb.com/mdw/images/nst.gif",
"nName": "Start Over",
"nTitle": "Start over button - gives us the original records we" +
" received from server (this deletes any changes made before).",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "detailView",
"nImg": "https://www.megadataweb.com/mdw/images/list.png",
"nName": "Detail View",
"nTitle": "Detail View button. Press this button to Replace to" +
" detail table.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "masterView",
"nImg": "https://www.megadataweb.com/mdw/images/table.png",
"nName": "Master View",
"nTitle": "Master View button. Press this button to switch to" +
" master table.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "searchFilter",
"nImg": "https://www.megadataweb.com/mdw/images/search-filter.png",
"nName": "Advanced filter",
"nTitle": "Advanced filter button. Select some column field " +
"which you would like to use to filter records; select the " +
"filter operator and enter data for filter. Press this button.",
"nVisible": "Y",
"nOptional": "Y",
"nFAicon": ""
},
{
"nId": "sendEmail",
"nImg": "https://www.megadataweb.com/mdw/images/email1.gif",
"nName": "Send email",
"nTitle": "Send E-mail button. Press this button to send e-mail" +
" using selected record.",
"nVisible": "",
"nOptional": "Y",
"nData": "email",
"nFAicon": ""
},
{
"nId": "webSite",
"nImg": "https://www.megadataweb.com/mdw/images/chrome.svg",
"nName": "Open customer website",
"nTitle": "Web Site button. Press this button to open Web Page" +
" for selected record.",
"nVisible": "",
"nOptional": "Y",
"nData": "website",
"nOpenWin": "Y",
"nFAicon": "",
"nMinW": 1024
},
{
"nId": "map",
"nImg": "https://www.megadataweb.com/mdw/images/map.gif",
"nName": "Show map for customer address",
"nTitle": "Google Map button. Press this button to open Google" +
" Map for selected record.",
"nVisible": "",
"nOptional": "Y",
"nData": "sStreet,sCity,sState,sZip,sCountry",
"nFAicon": "",
"nOpenWin": "Y",
"nMinW": 1024
},
{
"nId": "showDetail",
"nImg": "https://www.megadataweb.com/mdw/images/showdetail.png",
"nName": "Show Detail",
"nTitle": "Show Detail button. Press this button to hide" +
" detail table.",
"nVisible": "",
"nOptional": "Y",
"nFAicon": "",
"nMinW": 767
},
{
"nId": "hideDetail",
"nImg": "https://www.megadataweb.com/mdw/images/hidedetail.png",
"nName": "Hide Detail",
"nTitle": "Hide Detail button. Press this button to show" +
" detail table.",
"nVisible": "",
"nOptional": "Y",
"nFAicon": "",
"nMinW": 767
}
],
"tToolbarBgColor": "#eaeaea",
"tControlSize": 0,
"toolBarEnabled": true
},
"radar": {
"rShowRadar": "Y",
"rShowControl": "Y",
"rColumnWidth": 60,
"rRadarColor": "#85bcfc",
"rRadarBGColor": "#000000",
"rLeftColumnNum": 0,
"rHeight": 36,
"rLeftMargin": 0,
"rRigthMargin": 0
}
}
],
"tableData":[
[0,"","ASUS",2.5,1007.46,172.94,8,512,1.8,17.3],
[1,"","Apple",0.5,1915.68,169.95,8,1024,2.8,8.9],
[2,"","HP",3.5,1371.61,155.44,2,512,3,8.9],
[3,"","Acer",2,1581.96,152.99,16,32,2,15],
[4,"","HP",3,1608.29,121.88,8,128,1,8.9],
[5,"","Lenovo",1.5,1677.63,168.11,1,128,3,17],
[6,"","Acer",5,1616.86,137.49,2,749,1.6,15.6],
[7,"","Toshiba",0,1471.55,199.95,16,749,1,15],
[8,"","HP",1.5,1056.01,105.35,8,128,1.5,11.6],
[9,"","Dell",2.5,1657.84,112.66,4,128,2.5,10.7],
[10,"","HP",3.5,1994.42,137.51,32,749,2.2,13.3],
[11,"","Dell",2.5,1135.93,168.13,1,749,2,8.9],
[12,"","Acer",4.5,1465.03,167.77,2,512,2,14],
[13,"","Dell",1.5,1660.9,159.19,4,749,3,8.9],
[14,"","ASUS",2.5,1414.55,170.1,2,749,2.8,13.3],
[15,"","Toshiba",3,1052.53,131.84,2,1024,2.2,17.3],
[16,"","Toshiba",2,1719.19,164.01,32,1024,2.3,15.6],
[17,"","ASUS",0,1439.34,160.55,8,64,1.5,15],
[18,"","Lenovo",2,1650.36,126.5,32,32,2,15],
[19,"","HP",2,1081.96,155.85,8,128,1.5,15.6],
[20,"","ASUS",1.5,1553.41,102.37,1,749,1.5,10.1],
[21,"","Toshiba",1.5,1936.79,108.1,16,256,2.8,10.1],
[22,"","ASUS",1,1981.5,155.31,32,749,1.5,17.3],
[23,"","HP",1.5,1308.36,114.75,2,749,2.8,14],
[24,"","HP",3,1783.21,152.11,16,749,2,10.7],
[25,"","Apple",3,1897.39,199.47,32,128,2.5,11.6],
[26,"","Acer",2.5,1606.59,112.24,8,32,2.5,8.9],
[27,"","Toshiba",4,1495.81,181.67,4,64,2.2,13.3],
[28,"","Toshiba",1,1651.06,156.15,4,64,2,15.6],
[29,"","HP",2.5,1920.41,138.98,4,128,2.5,14],
[30,"","Acer",1.5,1931.81,116.3,8,749,2.8,15.6],
[31,"","Acer",1,1775.18,142.96,8,749,1.6,10.7],
[32,"","HP",0,1012.16,170.28,2,256,2.5,14],
[33,"","ASUS",1.5,1036.59,124.67,8,749,1.5,10.1],
[34,"","Toshiba",0.5,1733.18,125.28,4,256,1.8,13.3],
[35,"","Toshiba",0.5,1574.18,165.35,4,128,2.5,13.3],
[36,"","Acer",0,1689.78,173.33,8,1024,1.5,10.1],
[37,"","Apple",2,1802.22,135.58,2,1024,1.5,8.9],
[38,"","Lenovo",4.5,1690.28,175.81,1,749,1.5,10.1],
[39,"","Lenovo",1,1290.78,148.85,1,512,1,10.7],
[40,"","Apple",0,1737.7,166.38,8,512,3.2,14],
[41,"","Toshiba",3.5,1830.37,148.29,4,64,2.3,10.1],
[42,"","Toshiba",0.5,1393.58,131.4,32,1024,1.8,17],
[43,"","HP",4.5,1531.52,179.66,16,749,3.2,15],
[44,"","Lenovo",0,1564.12,161.96,4,128,1.5,15],
[45,"","Toshiba",4,1372.53,144.26,32,256,3.2,10.1],
[46,"","HP",2.5,1865.37,157.7,2,512,2.5,17.3],
[47,"","HP",2.5,1549.84,189.19,32,1024,1,10.7],
[48,"","Apple",1,1767.04,164.17,16,1024,1.5,10.7],
[49,"","Dell",1.5,1594.96,109.85,16,64,2.8,17.3]
],
"tableDataIds": {
"_id_": 0,
"_act_": 1,
"product": 2,
"rating": 3,
"price": 4,
"save": 5,
"ram(gb)": 6,
"hdrive": 7,
"speed": 8,
"display": 9
},
"defaultRow": [1,"","","","","","","","","",""]
};
mdw.table.Table(comObj); /* Creating Table "Computers" Instance */
In this example, the data is located within a JavaScript array assigned to the parameter tableData of object comObj.
Lines 1119 - 1168 demonstrate how the data can be passed to the HTML page when this data is delivered as part of the HTML page.
Default Row (defaultRow)
Besides a data recordset, every table object contains a special default record array (property defaultRow) that stores default values for all fields in a recordset. The values from the default record are used in cases when user adds a new row to the table. Our Megadata Web Table allows an unlimited number of new records to be added to the record set. Setting frequently used values to the default record simplifies the process of data editing and saves time for the user.Examples:
"defaultRow": [1,"","","","","","","","","",""]and
"defaultRow": [0, "", "Y", "10/12/2017", "Mr.", "", "", "", "Mail", "USA"]
If default field values are not specified, Megadata Web Table uses strings 'Please specify defaultRow array!' as a default value.
Form Object (element of tableForms)
Every Form object contains following properties:- formContainer - mandatory DOM object or string that specifies the ID for the DOM Object - the container where the Form should be placed
- fTabNum - integer that specifies the Form tabIndex order (order for selecting the Forms cells when the user presses the "tab" key) - optional, default: position of form in Table array tableForms. Tab index of every input on the Form is calculated by formula: fTabNum * 3000 + form row number * 50 + form column number. This formula allows order inputs of forms by fTabNum to avoid "jumping" from one form input to input of another form.
- showTotals - string ("Y"/"") that specifies the visibility of row width totals in the Form (optional, default: "").
Two examples with row "Totals":
- showMaxWidth - integer that specifies the maximum width of viewport (the user's visible area of a web page) when this Form is visible.
If viewport width becomes more than the
showMaxWidth, the Form will be hidden. Optional, default: 100,000. - showMinWidth - integer that specifies the minimum width of viewport (the user's visible area of a web page) when this Form is visible.
If viewport width becomes less than the
showMinWidth, the Form will be hidden. Optional, default: 0. - formColumns - array that specifies Form columns
- defaultFormColumns - - array that specifies default Form columns
- radar - - object that specifies Form Column Radar
- columnGroups - - object that specifies Form Column Groups
- header - object that specifies the location and properties of the table header, which contains the column titles
- bar - object that specifies location and properties of the Form Scrolling Bar
- toolBar - object that specifies Toolbar, its location and all controls in the Toolbar
- formStyle - object that specifies the most important style parameters for the Form
- formOptions - object that specifies Form behavior details (selecting and highlighting rows and columns, enabling mouse and keyboard controls, etc.)
- formEvents - object that specifies event handlers for all Form events if any exist
- formContextMenu - object that specifies content and controls for the Form context menu
- formType - string ("master"/"detail") that specifies appropriate type of the Form view (optional, default: "master").
Examples of Master view:
Examples of Detail view:
Form Columns (formColumns)
Form columns are represented by the Form property formColumns - array of Column objects. Every Column object has the following properties:- cId - mandatory string that specifies unique column ID - data field -
one of the properties of the Table object tableDataIds.
Megadata Web Table uses cId to associate the Form column
with the appropriate position of the data field in the internal record of tableData.
One exception: cId "_num_" is not associated with some data field and used to show sequence record number of visible record set. - cTitle - mandatory string that specifies the column title used in the table header.
one exception: if cTitle is string '__checkbox__' the Title will show header
,
for function mdw.table.makeBatchInputCell. - cType - string that specifies the column type (optional, default: "S"). Possible values include the following:
"S"- alphabetical (string)"N"- numeric"D"- date or date and time"Du"- duration (in microseconds: "s")"IP"- IP Address (Example: "199.83.1.3")"T"- Time (Example: "21:56")
- cSortType - string that specifies the sort type for a column used for sorting -
current column or column specified by cSortFieldId (optional, default: value of property cType). Possible values include the following:
"S"- alphabetical (string) sort"N"- numerical sort"D"- sort by date or date and time"Du"- duration (in microseconds: "s")"IP"- IP Address (Example: "198.162.0.1")"T"- Time (Example: "21:47")
- cViewType - string that specifies the how should be visualized data for Duration column. Possible values:
"N"- numerical view:
"Du"- duration view:
Note: Why Megadata Web column Object has three similar properties (cType, cSortType and cViewType) for Column objects?
Property cType specified the type of column and used for example to select this column as dimension or measure for aggregation.
Property cSortType specified how this column should be sorted. For example, field with type Date (cType = "D") if needed can be sorted as "String" with property cSortType = "S". So, any type of column if needed can be interpreted for sorting different way.
Property cViewType specified how duration column should look in Form View. For example, column "Duration" with cViewType='Du' will be presented by.
The same column with cViewType='N' will be presented by .
- cSortFieldId - string that contains the cId of the column, which values should be used for sorting instead of current column values (optional, default: "" - column itself).
- cMaxLen - integer that specifies the maximum length of the text for input cells (optional). Default values depend on the type of input:
16- for numeric cells50- for color strings100- for autocomplete cells255- for strings2000- for text area inputs
- cLocale - string that specifies the locale for the column if needed (optional, default: "en").
- cShowTooltip - string ("always"/"none") that specifies whether to show the tooltip or not when the cursor is moving across the cell (optional, default: "none").
- cAlign - string ("left"/"center"/"right") that specifies the alignment of the data inside the column cell (optional, default: "left").
- cHeaderAlign - string ("left"/"center"/"right") that specifies alignment of the text of the column header (optional, default: "left").
- cCustomFn - function or string, which contains name of function,
which generated table Form cell HTML content. (optional, default:
"mdw.table.makeDefaultCell").
This function is executed in scope of its Form Object and accepts the following parameters (order important):ss- field value, which should be presented in the table cell (mandatory)sa- value of column property cAttribute that specifies additional information for column (mandatory)i- table row number (mandatory)j- table column number (mandatory)fcj- object for column j - formColumns[j] (mandatory).row- array that represent row i (mandatory)fForm- form object, that represents current table Form (mandatory)report- - string 'report'/'', (optional, default '') - flag, that has value 'report' when function cCustomFn was called from report generator and undefined if it called from table Form generator
For details please refer to section Custom Cell Functions - cChangeFn - function or string, which contains name of function,
which should be executed when user will change the value of input cell. (optional, default: null). This function is executed in scope of its
Form Object and accepts the following parameters (order important):
row- array which contains the data of selected table rowfRow- integer - number of selected row in the current formfCol- integer - number of selected column in the current formd- array of all table data rowstI- integer - number of selected row in array of table data rows (tableData)val- string - value of selected cell inputtext- string - text of selected cell input if input is selector
- cDisabledFn - function or string, which contains name of function
(with single parameter
row- currently selected data row and Form Object as function scope), which can disable the input cell when some fields in the row have some specific values. (optional, default: null).
- cStyle - string - CSS style, applicable for components of cell generated by function
- cAttribute - string, object, number, or array that specifies additional information for columns
(optional, default: "" - empty string). The value of this property depends on the function
cCustomFn.
For example, possible values for functionmdw.table.makeAutocompleteInputCellare:string- name of the array property of the table object which contains an external source of dataCSVstring- string - comma separated values - contains an external source of data
cAttributecontains additional information for processing data using the functioncCustomFn.
- cTotalType - string that specifies the type of descriptive statistics in row "Totals" for a column (optional, default: "" - empty string). Row "Totals" is visible
if property showTotals of
Form Object
is set to "Y". Possible values:
"AVG"- for total "average""SUM"- for total "sum""MIN"- for total "minimum""MAX"- for total "maximum""MED"- for total "median"any other stringjust shown in the row "Totals" without modifications
- cPrefixSuffix - string that specifies the prefix and suffix for every value in column. Prefix and suffix separated by character "|". Example: prefix "$" - "$|", suffix " km2" - "| km2". Optional. Default: "|".
- cFractionDigits - - string or number: from 0 to 20 - the number of fraction digits to be used in column cells (optional, default: 0).
Applicable for columns with specific custom functions, for example
mdw.table.makeJSNumberInputCell. - cTotalFractionDigits - integer that specify quantity of fraction digits in numbers to be used in row "Totals" cells (optional, default: 0). Applicable for numeric columns.
- cFixedW - string ("Y"/"") that specify column has fixed width - not changing width when user resize table container (optional, default: "")
- cW - mandatory integer that specify the column width in pixels if property cFixedW for this column is set to "Y". If property cFixedW for this column is set to "" value cW determine the column with proportionally to all other columns which properties cFixedW have value "".
- cMinW - integer that specify the visibility of column in Form container for specified minimal width in pixels (optional, default: 0 - control is always visible). If the Form container has width in pixels more or equal than cMinW column become visible, otherwise it become hidden. This property allows to show more columns on wider screen and hide some columns on narrow screens.
- cMaxW - integer that specify the visibility of column in container for specified maximum viewport width in pixels (optional, default: 1,000,000 - control is always visible). If the Form container has width in pixels less or equal than cMaxW column become visible, otherwise it become hidden. This property allows to show more columns on wider screen and hide some columns on narrow screens.
- cOptional - string ("Y"/"") that specify if column visibility can be altered, using Column Editor (optional, default: "Y").
- cPlaceholder - string that specifies placeholder for input fields (optional, default: "" - empty string)
- cVisible - string ("Y"/"") that specify visibility of column when table Form is shown first time (optional, default: "Y").
- cDateFormat - string that specify date column format
(optional, default: "MM/dd/yyyy"). Date format is string with following abbreviations:
"cc": century, 2 digits with leading zeros (range 01 through 99)"c": century without leading zeros (range 1 through 99)"yyyy": full numeric representation of a year, 4 digits"yy": two-digit representation of a year (range 00 through 99)"Q": year quarter (range 1 through 4)"MMMM": full month name ('January', 'February',...)"MMM": three characters month abbreviation ('Jan', 'Feb',...)"MM": numeric representation of the month, 2 digits with leading zeros (range 01 through 12)"M": numeric representation of month without leading zeros (range 1 through 12)"dd": day of the month, 2 digits with leading zeros (range 01 through 31)"d": day of the month without leading zeros (range 1 through 31)"DD": full day of the week name ("Sunday", "Monday"...)"D": three characters day of the week name abbreviation ("Sun", "Mon"...)"HH": hour - 24-hour format, 2 digits with leading zeros (range 00 through 23)"H": hour - 24-hour format without leading zeros (range 0 through 23)"hh": hour - 12-hour format, 2 digits with leading zeros (range 01 through 12, am pm)"h": hour - 12-hour format without leading zeros (range 1 through 12, am pm)"mm": minutes, 2 digits with leading zeros (range 00 through 59)"m": minutes without leading zeros (range 0 through 59)"ss": seconds, 2 digits with leading zeros (range 00 through 59)"s": seconds without leading zeros (range 0 through 59)
- cColor - string that specify color of text in column cells (optional, default "#333333"). For this property can be used color keywords and RGB hex values supported by Browser.
- cTitleColor - string that specify color of text in column header (optional, default value specified in property hHeaderStyle of object Form Header. For this property can be used color keywords and RGB hex values supported by Browser.
- cRightBorder - string ("Y"/"") that specify visibility of column right border (optional, default: "").
- cDraggable - string ("Y"/"") that specify ability to drag row using cell in this column to move this row to another position (optional, default: "") - applicable only to non-editable Columns. It is possible to drop dragged row to tool control, if this control is listed in object rowDragDroppable described in section Form Events. In Example above cells of column "ACTION" are draggable.
- cLeftText - string that specifies additional text located to the left from column cell value (optional, default: "").
This property usually used with
cCustomFnfunctions mdw.table.makeCheckBoxInputCell and mdw.table.makeBatchInputCell. Please refer for details to section Custom Cell Functions - cRightText - string that specifies additional text located to the right from column cell value (optional, default: "").
This property usually used with
cCustomFnfunctions mdw.table.makeCheckBoxInputCell and mdw.table.makeBatchInputCell. Please refer for details to section Custom Cell Functions - cCurrSymbol - string that specify currency symbol (optional, default: '$')
This property usually used with
cCustomFnfunctions mdw.table.makeMoneyCell. Please refer for details to section Custom Cell Functions
Note: Properties cCustomFn, cChangeFn, and cDisabledFn listed above should be specified as string with name of function to be exported to HTML because it is not valid to include function as object property in JSON results.
Form Default Columns (defaultFormColumns)
Form Default columns are represented by the Object Form property defaultFormColumns - array of Column objects similar to array formColumns. User can set replace current columns of the form with default columns using Column Editor by clicking button
- "Restore Default".
This property is optional, default value is property formColumns.
Empty Table
If array of data tableData is empty, the table forms (master and detail) will have following view:
.Form columns array formColumns also can be empty. I this case table will have view similar to this:
.If column array formColumns and data array tableData both are empty the table forms (master and detail) will have view like this:
.Column Radar (radar)
Column Radar (Column Sliding Bar) allows view any columns of Table forms even when form screen space is restricted. Here are examples of radar views for master and detail formType:,
,,
.Radar has few ways to navigate through the columns of the Table Form:
- clicking to Radar Control Button
-
shows next subset of n columns located to the right from the radar knob 
.
Here n is quantity of visible form columns. - clicking on radar box which corresponds the target column shows this column in the center of viewing area.
- dragging the radar knob to the position of desired columns.
- home - selects first n columns of the table.
- page up or up arrow - selects columns in the table located n (quantity of visible form columns) positions before the currently selected columns.
- left arrow (back arrow) - selects columns in the table located 1 position before the currently selected columns.
- right arrow - selects columns in the table located 1 position after the currently selected columns.
- page down or down arrow - selects columns in the table located n (quantity of visible form columns) positions after the currently selected columns.
- end - selects last n columns of the table.
- rShowRadar - string ("Y" or "") that specifies the visibility of radar, (optional, default 'Y').
Note: Property rShowRadar applicable only to forms type "master". For forms type "detail" Column Radar is always visible and property rShowRadar always ignored. - rShowControl - ("Y" or "") that specifies the visibility of radar control button
, (optional, default 'Y').
- rColumnWidth - integer that specify average column width, which is used for calculating the quantity of visible columns in table container, (optional, default 100)
- rRadarColor - string that specify color of radar column boxes (optional, default: '#85bcfc' - blue). For this property can be used color keywords and RGB hex values supported by Browser.
- rRadarBGColor - string that specify color of radar body color (optional, default: '#000000' - black). For this property can be used color keywords and RGB hex values supported by Browser.
- rLeftColumnNum - integer that specify number of left (first) visible column when table form is initially shown. (optional, default: 0)
- rHeight - integer that specify radar height in px. (optional, default: 36)
- rLeftMargin - integer that specify size of left radar margin in mobile devices it is useful to prevent swipe between pages when dragging radar knob, (optional, default: if viewport (the user's visible area of a web page) width less than 1024 px than rLeftMargin = 20, otherwise rLeftMargin = 0)
- rRightMargin - integer that specify size of right radar margin. nn mobile devices it is useful to prevent swipe between pages when dragging radar knob when application use Right-to-Left (RTL) design. (optional, default: 0)
radar:{
rShowRadar: 'Y', // 'Y'/'' (optional, default 'Y')
rShowControl: 'Y', // Show radar control 'Y'/'' (optional, default 'Y')
rColumnWidth: 100, // Columns width in pixels (optional, default 100)
rRadarColor: "#85bcfc", // Radar color (optional, default #85bcfc - blue)
rRadarBGColor: "#000000", // Radar color (optional, default #000000 - black)
rLeftColumnNum: 0 // Left column number - number of left visible column
},
Column Groups (columnGroups)
Most tables and grids include a single header row that shows the name of the field that the column refers to. In many cases, the table data has a hierarchical nature, and it may be desirable to add several levels of column headers to expose the hierarchy. The Table below has hierarchical column structures where some columns contain groups of columns. The columns have multi-level, merged headers that reflect the structure of the data.Here are example of Column Groups view:
.Grouping columns is done by providing the columns in a tree hierarchy to the grid. There is no limit to the number of levels can be provided. Column Groups are represented by the Form property columnGroups - object that contains the following properties:
- gShowCG - string ("Y" or "") that specifies the visibility of column groups, (optional, default '').
- gCG - array that contains level sequence of hierarchical column structure (mandatory).
Every level array contains list of column group objects. Every column group object has three properties:- gTitle - string that specify title of column group, (optional, default ''- empty string)
- gAlign - string ("left"/"center"/"right") that specify column group title alignment (optional, default: "center").
- gColSpan - integer that specify quantity on table (grid) columns merged by column group (mandatory).
columnGroups: {
gShowCG: "Y",
gCG:[
[
{gTitle: 'Customer', gAlign: 'center', gColSpan: 21},
{gTitle: 'Addresses', gAlign: 'center', gColSpan: 8},
{gTitle: 'Billing', gColSpan: 8}
],
[
{gTitle: 'Number', gAlign: 'right', gColSpan: 3},
{gTitle: 'Customer', gAlign: 'center', gColSpan: 12},
{gTitle: 'Contacts', gAlign: 'left', gColSpan: 6},
{gTitle: 'Billing Address', gAlign: 'center', gColSpan: 4},
{gTitle: 'Shipping Address', gColSpan: 4},
{gTitle: 'Other', gColSpan: 5},
{gTitle: 'Balance', gColSpan: 3}
]
]
},
On the image above shown visible fragment of two level column groups which corresponds to following column group objects:
columnGroups: {
gShowCG: "Y",
gCG:[
[
...,
{gTitle: 'Addresses', gAlign: 'center', gColSpan: 8},
...
],
[
...,
{gTitle: 'Billing Address', gAlign: 'center', gColSpan: 4},
{gTitle: 'Shipping Address', gColSpan: 4},
...
]
]
},
Custom Cell Functions (cCustomFn)
Note: You can use functions listed below to adapt them for your needs or for creating your own Custom Cell Functions.Megadata Web generates table Form cells HTML content using functions, specified by column property cCustomFn. If this property is not specified, default function mdw.table.makeDefaultCell is used. Custom Cell Function is executed in scope of its Form Object and accepts the following parameters (order important):
ss- field value, which should be presented in the table cell (mandatory)sa- value of column property cAttribute that specifies additional information for column (mandatory)i- table row number (mandatory)j- table column number (mandatory)fcj- object for column j - formColumns[j] (mandatory).row- array that represent row i (mandatory)fForm- form object, that represents current table Form (mandatory)report- - string 'report'/'' (empty string), (optional, default '') - flag, that has value 'report' when function cCustomFn was called from report generator and undefined value or '' (empty string) value if it called from table Form generator
Megadata Web has following built in standard functions to be used as Custom Cell Functions (these functions declared in file
mdw.table.js):
- mdw.table.makeCheckBoxCell - function that generates table cell with checkbox.
Examples:
.
This function has three optional additional parameters:cLeftText- text which should be shown to the left of checkbox symbol (optional, default '')cRightText- text which should be shown to the right of checkbox symbol (optional, default '')cColor- string that specify color or id of table field, that contains colors of text and checkboxes in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
ss) in the current row should have truthy value ("Y", 1, true, not empty string...) for checked checkbox and faulthy value ("", 0, false) for unchecked checkbox. - mdw.table.makeBooleanUpDownCell - function that generates table cell with up or down arrow.
Examples: up -
,
down - 
.
This function has three optional additional parameters:cLeftText- text which should be shown to the left of up/down symbol (optional, default '')cRightText- text which should be shown to the right of up/down symbol (optional, default '')cColor- string that specify colors (for up and for down) separated by symbol "|" , or id of table field, that contains similar colors in column cells (optional, default: '#3dff3c|#f21f20'). For components of this property can be used color keywords and RGB hex values supported by Browser.
ss) in the current row should have truthy value ("Y", 1, true, not empty string...) for checked checkbox and faulthy value ("", 0, false) for unchecked checkbox. - mdw.table.makeIntegerCell - function that generates table cell with integer.
Example:
.
This function accepts one additional parameter:cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
- mdw.table.makeIntegerAndPercentCell - function that generates table cell with integer and percent value.
Example:
.
This function required two additional parameters:cAttribute- id of table field, that contains number, representing 100% value (mandatory).cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
ss) in the current row specifies numeric value of integer to be shown. - mdw.table.makeFloatCell - function that generates table cell
for numbers with 1 or more fraction digits.
Example:
.
This function required two additional parameters:cFractionDigits- string or number: from 0 to 20 - the number of fraction digits to use. (optional, default 0).cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
ss) in the current row specifies numeric value of float to be shown. - mdw.table.makeRatingCell - function that generates table cell with rating.
Example:
.
This function required one additional parameter:cAttribute- id of table field, that contains quantity of voters (mandatory).
ss) in the current row specifies numeric rating - number between 0 and 5 with step 0.5. - mdw.table.makeMoneyCell - function that generates table money cell.
Examples:
,
.
This function required two additional parameters:cCurrSymbol- string - currency symbol (optional, default: "$").cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
- mdw.table.makeLocaleNumberCell - function that enable language sensitive number formatting.
Examples:
,
,
,
,
.
This function required three additional parameters:cAttribute- string that specify number format or id of table field, that contains number format (optional, default: 'en-US|decimal|USD|0').
Number format contains separated by character "|" four following sub-parameters:locale- locale argument (optional, default: 'en-US'). Examples: 'de-DE','ja-JP'.style- string: 'decimal'/'currency'/'percent' - the formatting style to use. (optional, default: 'decimal').currency- string - the currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB (optional, default: "USD").fractionDigits- string or number: from 0 to 20 - the number of fraction digits to use. (optional; the default for plain number and percent formatting is 0; the default for currency formatting is 2).
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPrefixSuffix- string that specifies the prefix and suffix for every value in column. : Prefix and suffix separated by character "|". Example: '$|', '| km2'. Optional. Default: '|'.
- mdw.table.makeDefaultCell - function that generates table default cell.
Example:
.
This function required one additional parameter:cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
- mdw.table.makeSpacerCell - function that generates empty table cell.
Usually empty cell is used in form with formType "detail".
Example:
.
This function required no additional parameters: - mdw.table.makeTotalCell - function that generates table cells with "total" values.
Example:
.
This function is only for system internal usage, but can be modified if needed.
This function required one additional parameter: cPrefixSuffix- string that specifies the prefix and suffix for every value in column. : Prefix and suffix separated by character "|". Example: '$|', '| km2'. Optional. Default: '|'.- mdw.table.makeColorNumBar - function that generates table cell with resizable color numeric bar.
Examples:
,
,
.
This function required two additional parameters:cAttribute- string that specify bar format or id of table field, that contains bar format
(optional, default: '#5292d8|9|border: 1px solid #999999; border-radius: 4px;|left').
Bar format contains separated by character "|"additional four following sub-parameters:color- string that holds bar background color (optional, default: '#5292d8'). For this property can be used color keywords and RGB hex values supported by Browser.height- integer - bar height in pixels (optional, default: 9).style- string that specifies the CSS style of the bar (optional, default: "border: 1px solid #999999; border-radius: 4px;").tag location- string "right"/"left" - location of numeric tag which represents bar value. (optional, default "left").
cFractionDigits- string or number: from 0 to 20 - the number of fraction digits to be used in bar tag (optional, default: '').
- mdw.table.makeDurationCell - function that generates table duration cell.
Examples:
,
.
This function required two additional parameters:cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cViewType- string that specifies the how should be visualized data for Duration column. Possible values:"N"- numerical view:"Du"- duration view:
ss) in the current row specifies duration in microseconds. - mdw.table.makeColorBox - function that generates table cell with color box.
Example:
.
This function required no additional parameters.
Heress(value of field in the current row) specifies the color of the box. For this property can be used color keywords and RGB hex values supported by Browser.
Example:
.This function required one additional parameter:
cColor- field id, that holds color of box in column cells (optional, default: '#5292d8'). For this property can be used color keywords and RGB hex values supported by Browser.
ss) in the current row specifies text to be shown.
Examples:
,
.This function required three additional parameters:
cLeftText- string - text which should be shown to the left of checkbox input (optional, default: '').cRightText- string - text which should be shown to the right of checkbox input (optional, default: '').cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
ss) in the current row should have truthy value ("Y", 1, true, not empty string...)
for checked checkbox and faulthy value ("", 0, false) for unchecked checkbox.
Examples:
,
,
,
.To show in column header main checkbox with batch button for opening and closing batch checkbox control
, property cTitle in
Column Object
should have value '__checkbox__'.Clicking on main checkbox checks or unchecks all checkboxes in table column. Clicking checkbox in any row of the table alter only clicked checkbox.
If all checkboxes in the column are checked, main checkbox is shown checked. If all checkboxes in the column are unchecked, main checkbox is shown unchecked. If column contains checked and unchecked checkboxes, main checkbox is shown shaded.
All checkboxes in the column divided to groups based on values of some table column which
cId specified in
property cAttribute of
Column Object.Clicking on batch button
opens batch checkbox control with title "Checkbox Groups" (see example above).Every row of this control contains group checkbox, group title and in parentheses quantity of rows belonging to the group. Similarly, to main checkbox, clicking on group checkbox checks or uncheck all checkboxes of appropriate group.
If all checkboxes of the group are checked, group checkbox is shown checked. If all checkboxes of the group are unchecked, group checkbox is shown unchecked. If group contains checked and unchecked checkboxes, group checkbox is shown shaded.
This function required four additional parameters:
cAttribute- field id of column, which unique values specify the batch group titles (mandatory)cLeftText- text which should be shown to the left of checkbox input (optional, default: '').cRightText- text which should be shown to the right of checkbox input (optional, default: '').cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
ss) in the current row should have truthy value ("Y", 1, true, not empty string...)
for checked checkbox and faulthy value ("", 0, false) for unchecked checkbox.
Examples:
,
,
.This function has one additional parameter:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
ss) in the current row should have one of three values ("YES", "NO", and "" - empty string) for
three different values shown in examples above.
Examples:
,
,
,
.This function has one additional parameter:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
ss) in the current row should be comma separated string with any subset of substrings "Bachelor", "Master", "Ph.D." in any order.Examples: "Ph.D.,Bachelor,Master", "Bachelor,Master", "Ph.D.,Bachelor", "Master,Ph.D.", "Bachelor", "Master", "Ph.D.", "" (empty string),... .
Examples:
,
.This function has no additional parameter: Value of field (
ss) in the current row should have one of two values ("Y", and "" - empty string) for
two different values shown in examples above.
Example:
.This function allows only numbers to be entered in a input element and required six additional parameters:
cMaxLen- specifies the maximum number of characters allowed in the input element. (optional, default: 20)cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPlaceholder- specifies a short hint that describes the expected value of a text field (optional, default: "")cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)cFractionDigits- string or number: from 0 to 20 - the number of fraction digits to use. (optional, default: 0).cAttribute- string ("positive"/"") that specify ability to input negative numbers: add "-"(minus) before the number ifcAttributehas value ""(empty string). (optional, default: "").
Example:
.This function allows only numbers to be entered in a input element and has three additional subparameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)cAttribute- string, which contains divided by character "|" four detailed parameters for language sensitive number formatting:locales- a string with a BCP 47 language tag. (optional, default: 'en-US').style- a string. Possible values are "decimal" for plain number formatting, "currency" for currency formatting, and "percent" for percent formatting. (optional, default: 'decimal').currency- a string. The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. (optional, default: 'USD').fractionDigits- an integer. The number of fraction digits to use. Possible values are from 0 to 20. The default for plain number and percent formatting is 0; the default for currency formatting is 2. (optional, default: 0 or 2).step- number - value of the step for increment and decrement. (optional, default: 1).
'ja-JP|currency|JPY|0' - Japanese currency Yen with 0 fraction digits and step = 1,
'' - default equivalent of '|||' and 'en-US|decimal|USD|0' ;
Example:
.This function required three additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cFractionDigits- string or number: from 0 to 20 - the number of fraction digits to use or id of table field, that contains the number of fraction digits to use. (optional, default: 0).cRangeAttr- string that specify range additional sub-parameters or id of table field, that contains additional range sub-parameters (optional, default: '0|100|1').
Example: '15|105|1'.
Number format contains separated by character "|"additional three following sub-parameters:min- number - value of the min attribute of the slider control. Examples: 5, 0.01. (optional, default: 0).max- number - value of the max attribute of the slider control. (optional, default: 100).step- number - value of the step attribute of the slider control. (optional, default: 1).
Example:
.This function required four additional parameters:
cMaxLen- specifies the maximum number of characters allowed in the input element. (optional, default: 255)cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPlaceholder- specifies a short hint that describes the expected value of a text field (optional, default: "")cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
.This function is alias of function mdw.table.makeStringInputCell.
Example:
.This function is alias of function mdw.table.makeStringInputCell.
Example:
.This function is alias of function mdw.table.makeStringInputCell.
Example:
.This function is alias of function mdw.table.makeStringInputCell.
Example:
.This function is alias of function mdw.table.makeStringInputCell.
Example:
.This function required four additional parameters:
cMaxLen- specifies the maximum number of characters allowed in the input element. (optional, default: 50)cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPlaceholder- specifies a short hint that describes the expected value of a text field (optional, default: "")cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
cChangeFn of
Column Object to function mdw.table.refreshColor.
Example:
.This function required four additional parameters:
cMaxLen- specifies the maximum number of characters allowed in the input element. (optional, default: 2000)cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPlaceholder- specifies a short hint that describes the expected value of a text field (optional, default: "")cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element (optional, default: null).
Example:
.Data for autocomplete suggestions extracted from current data column and from optional external source of data by removing duplicates.
This function required four additional parameters:
cMaxLen- specifies the maximum number of characters allowed in the input element. (optional, default: 100)cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPlaceholder- specifies a short hint that describes the expected value of a text field (optional, default: "")cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element (optional, default: null).cAttribute- string that specifies name of the table object which contains an external list of suggested values (optional, default: "" - empty string).
List of suggested strings can have one of following formats:
arrayof strings / suggested values
Example:var mdw_tables = { tableName: 'mdw', ... firstArr: ["George", "Angela", "William", "Roger"], ... {cId: 'first', cTitle: 'First Name', ... cAttribute:'firstArr', cCustomFn: "mdw.table.makeAutocompleteInputCell" } ... }CSVstring- string - comma separated suggested values
Example:var mdw_tables = { tableName: 'mdw', ... firstStr: "George,Angela,William,Roger", ... {cId: 'first', cTitle: 'First Name', ... cAttribute:'firstStr', cCustomFn: "mdw.table.makeAutocompleteInputCell" } ... }
Example:
->
.This function required following additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPlaceholder- specifies a short hint that describes the expected value of a text field (optional, default: "")cDisabledFn-cDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element (optional, default: null).cHidedFn-cHidedFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to hide input element (optional, default: null).cAttribute- data or string that specifies name of the table object which contains data - the list of key-value pairs for selector (mandatory).
Selector data - list of key-value pairs is presented by propertycAttribute. There are six way how it can be done:- Property
cAttributeisarrayevery element of which presenting option by two elements array. First element of every element/option (two elements array) is key, second element is value.
Example:var mdw_tables = { tableName: 'mdw', ... {cId: 'billWith', cTitle: 'Bill with', ... cAttribute: [ [0,""], [1,"Bill with parent"], [2,"Bill this customer"] ], cCustomFn: "mdw.table.makeSelectorInputCell" } ... } - Property
cAttributeisarrayof strings. In this case both option key and value have the same content: string value.
Example:var mdw_tables = { tableName: 'mdw', ... {cId: 'billWith', cTitle: 'Bill with', ... cAttribute: [ "", "Bill with parent", "Bill this customer" ], cCustomFn: "mdw.table.makeSelectorInputCell" } ... } - Property
cAttributeisCSVstring- comma separated sub-strings/options. In this case both option key and value have the same content sub-string value.
Example:var mdw_tables = { tableName: 'mdw', ... {cId: 'billWith', cTitle: 'Bill with', ... cAttribute: ",Bill with parent,Bill this customer", cCustomFn: "mdw.table.makeSelectorInputCell" } ... } - Property
cAttributeis string that specifies name of the table object which containsarrayevery element of which presenting option by two elements array. First element of every element/option (two elements array) is key, second element is value
Example:var mdw_tables = { tableName: 'mdw', ... billWithArr2: [ [0,""], [1,"Bill with parent"], [2,"Bill this customer"] ], ... {cId: 'billWith', cTitle: 'Bill with', ... cAttribute: 'billWithArr2', cCustomFn: "mdw.table.makeSelectorInputCell" } ... } - Property
cAttributeis string that specifies name of the table object which containsarrayof strings. In this case both option key and value have the same content: string value.
Example:var mdw_tables = { tableName: 'mdw', ... billWithArr1: [ "", "Bill with parent", "Bill this customer" ], ... {cId: 'billWith', cTitle: 'Bill with', ... cAttribute: 'billWithArr1', cCustomFn: "mdw.table.makeSelectorInputCell" } ... } - Property
cAttributeis string that specifies name of the table object which containsCSVstring- comma separated sub-strings/options. In this case both option key and value have the same content sub-string value.
Example:var mdw_tables = { tableName: 'mdw', ... billWithStr: ",Bill with parent,Bill this customer", ... {cId: 'billWith', cTitle: 'Bill with', ... cAttribute: 'billWithStr', cCustomFn: "mdw.table.makeSelectorInputCell" } ... }
- Property
Example:
,
.This function allows only e-mail to be entered in a input element and required four additional parameters:
cMaxLen- specifies the maximum number of characters allowed in the input element. (optional, default: 40)cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPlaceholder- specifies a short hint that describes the expected value of a text field (optional, default: "")cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
Example:
,
.This function allows only separated by comma e-mails to be entered in a input element and required four additional parameters:
cMaxLen- specifies the maximum number of characters allowed in the input element. (optional, default: 100)cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPlaceholder- specifies a short hint that describes the expected value of a text field (optional, default: "")cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
Example:
,
.This function allows any phone number to be entered in a input element. 10 digit numbers converted to format
(NNN) NNN-NNNN,
7 digit numbers converted to format NNN-NNNN,
It has four additional parameters:
cMaxLen- specifies the maximum number of characters allowed in the input element. (optional, default: 20)cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPlaceholder- specifies a short hint that describes the expected value of a text field (optional, default: "")cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
.This function allows any phone number to be entered and/or edited in a input element only in the correct format "(XXX) XXX-XXXXX". It has two additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
.This function allows any phone number to be entered and/or edited in a input element only in the correct format "XXX-XXX-XXXXX". It has two additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
.This function allows any phone number to be entered and/or edited in a input element only in the correct format "XXX/XXX-XXXXX". It has two additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
.This function allows any phone number to be entered and/or edited in a input element only in the correct format "XXX XXX XXXXX". It has two additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
.This function allows any phone number to be entered and/or edited in a input element only in the correct format "XXX.XXX.XXXXX". It has two additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
.This function allows any expiration date to be entered and/or edited in a input element only in the correct format "MM/YYYY". It has two additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
.This function allows any time to be entered and/or edited in a input element only in the correct format "hh:mm". It has two additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
,
.This function allows only date to be entered in a input element and required five additional parameters:
cDateFormat- string that specify date format (optional, default: "MM/dd/yyyy"). Date format is string with following abbreviations:"cc": century, 2 digits with leading zeros (range 01 through 99)"c": century without leading zeros (range 1 through 99)"yyyy": full numeric representation of a year, 4 digits"yy": two-digit representation of a year (range 00 through 99)"Q": year quarter (range 1 through 4)"MMMM": full month name ('January', 'February',...)"MMM": three characters month abbreviation ('Jan', 'Feb',...)"MM": numeric representation of the month, 2 digits with leading zeros (range 01 through 12)"M": numeric representation of month without leading zeros (range 1 through 12)"dd": day of the month, 2 digits with leading zeros (range 01 through 31)"d": day of the month without leading zeros (range 1 through 31)"DD": full day of the week name ("Sunday", "Monday"...)"D": three characters day of the week name abbreviation ("Sun", "Mon"...)"HH": hour - 24-hour format, 2 digits with leading zeros (range 00 through 23)"H": hour - 24-hour format without leading zeros (range 0 through 23)"hh": hour - 12-hour format, 2 digits with leading zeros (range 01 through 12, am pm)"h": hour - 12-hour format without leading zeros (range 1 through 12, am pm)"mm": minutes, 2 digits with leading zeros (range 00 through 59)"m": minutes without leading zeros (range 0 through 59)"ss": seconds, 2 digits with leading zeros (range 00 through 59)"s": seconds without leading zeros (range 0 through 59)
cMaxLen- specifies the maximum number of characters allowed in the input element. (optional, default: 10)cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPlaceholder- specifies a short hint that describes the expected value of a text field (optional, default: "")cDisabledFn- functioncDisabledFn(row)has one parameter - arrayrow, that specifies the current table row. Function should return truthy value to disable input element. (optional, default: null)
Example:
,
.This function allows only color to be entered in a input element and has no additional parameters.
Example:
.This function required two additional parameters:
cLinkPath- string - common part of paths to all links in the column that specifies the prefix of destination address (href) of the destination anchor with a URI (optional, default: ""). Usually it contains URL scheme, host and path.cLinkURL- string - URL query itself or field id of column, which contains the URL query, that specifies the suffix of address (href) of the destination anchor with a URI (mandatory)cStyle- string - CSS style, applicable to link text (optional, default: "")
ss (value of field in the current row) specifies the text for the link.
Example:
.This function required four additional parameters:
cLinkPath- string - common part of paths to all links in the column that specifies the prefix of destination address (href) of the destination anchor with a URI (optional, default: ""). Usually it contains URL scheme, host and path.cLinkURL- string - URL query itself or field id of column, which contains the URL query, that specifies the suffix of address (href) of the destination anchor with a URI (optional, default: "").cPath- string - common part of image paths to all images in the column that specifies the prefix of image address (href) (optional, default: "").cSuffix- string - unique part of image path or field id of column, which contains unique part of image path - the suffix of image address (href) (optional, default: "").
Example:
.This function required three additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cAttribute- mandatory string with comma separated cIDs of following columns (order is important) that contain:street- mandatory stringcity- string (optional, default: '')state- string (optional, default: '')zip- string (optional, default: '')county- string (optional, default: '')
cTitle- mandatory string - specifies the link text to be shown in cell.
ss (value of field in the current row) is not used.
This function required one additional parameter:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
.Example:
.This function required one additional parameter:
cPath- mandatory string which represent common part of path to the folder with images.
Example: cPath: "http://megadataweb.com/https://www.megadataweb.com/mdw/images/"
ss (value of field in the current row) specifies unique suffix of image address (href) (mandatory).
Example:
.This function required three additional parameters:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.cPath- string which represent common part of path to the folder with vCard files (optional, default: '').
Example: cPath: "http://megadataweb.com/vcards/"cAttribute- specifies the link text to be shown in cell. (optional, default: "vCard")
Example: cAttribute: "vCard"
ss (value of field in the current row) specifies unique suffix of vCard address (href) (mandatory).
Example:
.This function required one additional parameter:
cColor- string that specify color or id of table field, that contains colors of text in column cells (optional, default: ''). For this property can be used color keywords and RGB hex values supported by Browser.
ss (value of field in the current row) specifies unique text, which shold be placed inside of Text Box.
Note: You can use these functions to adapt them for your needs or for creating your own Custom Cell Functions.
Form Header (header)
Form Header is represented by the Form property - object header.Example:
This object has the following properties:
- hShowHeader - string ("Y"/"") that specifies the visibility of the header (optional, default: ""). Header is also invisible if the object header is not specified in the Form Object
- hHeaderHeight - integer that specifies the header height in px (optional, default: 0).
If value of property
hHeaderHeightis 0 header will have height 36px for viewport (the user's visible area of a web page) width < 1024 and 30px for viewport width >= 1024. - hShowColumnEditor - string ("Y"/"") that specifies the visibility of the Column Editor button
(
)
above the Form Scrolling Bar (optional, default: "").
Column Editor button
()
is also invisible if the
Form Scrolling Bar
is not specified in the Form Object. - hHeaderStyle - string that specifies the CSS style of the header (optional, default: "overflow:hidden;white-space:nowrap;background-color:#e3eaf3;color:#486c8f;text-transform:uppercase;").
- hDetailWidth - integer that specifies the width of the detail header in px, or string like "35%" or "130px" (optional, default: "50%").
Form Scrolling Bar (bar)
Form Scrolling Bar is represented by Form Object property - object bar. This object has the following properties:- bShowBar - string ("Y"/"") that specify visibility of scrolling bar (optional, default: "Y"). Bar is also invisible if the object bar is not specified in the Form Object
- bBarPosition - string ("left"/"right") that specifies the location of the bar - to the left or to the right of the Form body (optional, default: "right").
Examples:
Left Bar:
Right Bar:
- bBarBgColor - string that specifies the color of the bar background (optional, default: "#eaeaea"). This property can use color keywords and RGB hex values supported by the Browser.
- bBarWidth - integer that specifies bar width in px (optional, default: 0).
If value of property
bBarWidthis 0 bar width will be 36px for viewport (the user's visible area of a web page) width < 1024 and 17px for viewport width >= 1024. - bKnobBgColor - string that specifies the color of the bar knob background (optional, default: "#cecece"). This property can use color keywords and RGB hex values supported by the Browser.
- bKnobOverBgColor - string that specifies the color of the bar knob background when the cursor is hovering over it(optional, default: "#aaaaaa"). This property can use color keywords and RGB hex values supported by the Browser.
- bKnobMinHeight - integer that specifies the bar knob minimum height in px (optional, default: 0).
If value of property
bKnobMinHeightis 0 knob height will have minimum height 36px for viewport (the user's visible area of a web page) width < 1024 and 20px for viewport width >= 1024. - bKnobBorderRadius - integer that specifies the bar knob border radius in px (optional, default: bBarWidth >>> 2 - .25 of bBarWidth value)
Form Toolbar (toolBar)
Form Toolbar is represented by Form Object property - object toolBar. This object has following properties:- tShowToolbar - string ("Y"/"") that specify visibility of toolbar (optional, default: "Y"). Toolbar is also invisible if object toolBar is not specified in Form Object
- tShowToolControl - string ("Y"/"") that specify visibility of
Tool Control Editor button
(
)
below or above the Form Scrolling Bar (optional, default: "").
Tool Control Editor button
()
is also invisible if object toolBar is not specified in Form Object. - tControlSize - integer that specify the size in px of controls in Toolbar:
height and width for Toolbar buttons. Optional, default: 0 - if viewport
(the user's visible area of a web page) width less than 1024 px -
tControlSize= 36, otherwisetControlSize= 26. - tToolbarBgColor - string that specify color of Toolbar background (optional, default: "#eaeaea"). For this property can be used color keywords and RGB hex values supported by Browser.
- tToolbarPosition - string ("top"/"bottom") that specify location of bar - on the top or on the bottom of the table body (optional, default: "bottom").
Examples:
Top Toolbar:
Bottom Toolbar:
- Tool Controls are represented by Toolbar property tToolbarTools - array of Control objects. Every Control object can have following properties:
nId- string that specify control id (mandatory).nName- string that specify control name (mandatory).nTitle- string that specify control Title (mandatory).nVisible- string ("Y"/"") that specify control visibility (optional, default: "Y").nOptional- string ("Y"/"") that specify if control is optional (if user can change visibility of this control using Tool Control Editor (optional, default: "Y").nMinW- integer that specify the visibility of control in Toolbar for specified minimal viewport (the user's visible area of a web page) width in pixels (optional, default: 0 - control is always visible). If the viewport has width more or equal thannMinWcontrol become visible, otherwise it become hidden. This property allows to show more controls on wider screen and hide some controls on narrow screens.nMinH- integer that specify the visibility of control in Toolbar for specified minimal viewport (the user's visible area of a web page) height in pixels (optional, default: 0 - control is always visible). If the viewport has height more or equal thannMinHcontrol become visible, otherwise it become hidden.nMinA- integer that specify the visibility of control in Toolbar for specified minimal viewport Area in thousands of square pixels (optional, default: 0 - control is always visible). If the sviewport has (height*width)/1,000 more or equal thannMinAcontrol become visible, otherwise it become hidden.nMaxW- integer that specify the visibility of control in Toolbar for specified maximal viewport width in pixels (optional, default: 1,000,000 - control is always visible). If the viewport has width less or equal thannMaxWcontrol become visible, otherwise it become hidden. This property allows to show more controls on wider screen and hide some controls on narrow screens.nMaxH- integer that specify the visibility of control in Toolbar for specified maximal viewport height in pixels (optional, default: 1,000,000 - control is always visible). If the viewport has height less or equal thannMaxHcontrol become visible, otherwise it become hidden.nMaxA- integer that specify the visibility of control in Toolbar for specified maximal viewport Area in thousands of square pixels (optional, default: 1,000,000 - control is always visible). If the viewport has (height*width)/1,000 less or equal thannMaxAcontrol become visible, otherwise it become hidden.nNotMobile- string ("Y"/"") that specify Toolbar control invisible on mobile devices. It is visible only on computers. (optional, default: "").nStyle- string that specify control CSS style (optional, default: "").nPlaceholder- string - text input placeholder attribute that specifies a sample value or a short description of the expected format (optional, defaults: "Find" and "Replace").nOpenWin- string ("Y"/"") that specify if for showing control results should be open new window (optional, default: "").nData- string that contains additional information for control function (optional, default: ""). Example: "website" - id of column which contain web URL.nFAicon- string that contains Font Awesome icon name used instead of regular image (optional, default: ""). Example: "magic".nOnClickFn- function, which should be executed when control is activated/clicked (optional). If this property is not specified the standard function with name located innIdwill be executed.
- The Megadata Web supports following Tool Controls:
- recno (
) -
text input (Record number input) -
shows selected record number. Changing this input allows navigate through table to record with number typed in this control. - _text_ (
) -
string which should be appeared on Toolbar as label. Its name should start with substring "_text_". - remax (
) -
not editable input Record quantity -
shows quantity of visible records in table. - sortA (
) -
Sort ascending by selected column. - sortD (
) -
Sort descending by selected column. - find (
) -
Find value input. User can specify in this input value to be searched. If this input contains empty string the
value to be search will be taken from cell in selected row and selected column. - case (
) -
Match case checkbox. If checked the search, filter and unique values will be case sensitive, otherwise case
insensitive. - findNext (
) -
Find next. Search Find valuein selected column below selected record. If current record is last one withFind valuesearch will continue from the top. - findUp (
) -
Find previous. Search Find valuein selected column above selected record. If current record is first one withFind valuesearch will continue from the bottom. - globalFindNext (
) -
Global Find next. Search Find valuein all columns below selected record. If current record is last one withFind valuesearch will continue from the top. - globalFindUp (
) -
Global Find previous. Search Find valuein all columns above selected record. If current record is first one withFind valuesearch will continue from the bottom. - replaceTo (
) -
Replace value input. - replaceNext (
) -
Replace Next. Search below selected record, which in selected column contains Find valueand replace it toReplace value. If Match case checkbox is checked the searched values will be case sensitive, otherwise case insensitive. - replaceAll (
) -
Replace All. Search all records, which contain in selected column Find valueand replace it toReplace value. If Match case checkbox is checked the searched values will be case sensitive, otherwise case insensitive. - randomVal (
) -
Random. Generates all random values in selected column.
- filter (
) -
Filter. Generates subset of records, which contain in selected column Find value. If Match case checkbox is checked the filtered values will be case sensitive, otherwise case insensitive. - exclude (
) -
Exclude. Generates subset of records, which does not contain in selected column Find value. If Match case checkbox is checked the excluded values will be case sensitive, otherwise case insensitive. - globalFilter (
) -
Global Filter. Generates subset of records, which contain in some column Find value. If Match case checkbox is checked the filtered values will be case sensitive, otherwise case insensitive. - globalExclude (
) -
Global Exclude. Generates subset of records, which does not contain in all columns Find value. If Match case checkbox is checked the excluded values will be case sensitive, otherwise case insensitive. - unique (
) -
Unique. Generates subset of records, which does not contain Duplicatesin selected column. If Match case checkbox is checked the unique values will be case sensitive, otherwise case insensitive. - upOneRec (
) -
One position up. Moves selected record one position up - downOneRec (
) -
One position down. Moves selected record one position down. - hideRec (
) -
Hide record. Hides the selected record. - hideUp (
) -
Hide records above. Hides all records above the selected record. - hideRest (
) -
'Hide records below. Hides all records below the selected record. - hideAllRec (
) -
'Hide all records. Hides (erase) all records of the table. - standardReport (
) -
Standard report. Generates a report listing all records. - groupedReport (
) -
Grouped report. Generates a report listing all records grouped by selected column. It is useful to sort
(ascending or descending) records by this column before making grouped report - pieNumeric (
) -
Pie Tool. Generates a Pie reports for numeric columns. - chartAggregate (
) -
Aggregate Tool. Generates aggregated reports for any numeric columns - addRec (
) -
Add new record. Appends new record to the table with values from Form defaultRow. - insertRec (
) -
Insert new record. Inserts new record to the table below the selected record with values from Form
defaultRow. - cloneRec (
) -
Clone selected record. Appends clone of selected record to the end of the table. - deleteRec (
) -
Delete selected record. If this record has Action code "Added" it will be hided, otherwise selected record
will be marked as "Deleted". - deleteAllRec (
) -
Delete all records. Hides all record with Action code "Added" and then Marks rest records as "Deleted". - sendEmail (
) -
Send email. Sends e-mail to address from selected record - sendEmailAll (
) -
Send email to all selected records. Send e-mails to e-mail addresses from All records with checked
checkbox in column selected - webSite (
) -
Open customer website. Opens Web Page with link from selected record. - map (
) -
Show map for record address. Opens Google Map for address from selected record. - exportToHTML (
) -
Export to HTML. Exports table to HTML file fith packed data and without formatting.
This format allows to save storage space and to accelerate the loading (opening) time of the saved file.
Usually this format useful in cases for following processing. - exportToFormattedHTML (
) -
Export to Formatted HTML. Generates HTML file with formatted code.
The code is formatted for easily reading end editing. Usually this format useful for programmers who would like
to modify the code. - exportToCSV (
) -
Export to CSV (Excel). Creates Coma Separated Value (CSV) file from table data, which after saving can be used
for importing data to another application. - saveRec (
) -
Save records. Executes function onSaveFnfrom Form Object property formOptions. - saveAllRec (
) -
Save all records. Executes function onSaveAllFnfrom Form Object property formOptions. - undo (
) -
Undo. Undoes the last operation performed: add, hide, filter, exclude, remove duplicates, sort ascending, sort descending...
Note: Not all operation can be undoed. - startOver (
) -
Start Over. Gives us the original records we received from server or from local file (this deletes any changes made before). - searchFilter (
) -
Advanced filter. Allows filter records using any value and multiple appropriate functions related to
type of data in selected column - top (
) -
Top. Selects first record in the table. - pgUp (
) -
Page Up. Selects record in the table located page above the currently selected. - up (
) -
Up. Selects record in the table located above the currently selected. - down (
) -
Down. Selects record in the table located below the currently selected. - pgDown (
) -
Page Down. Selects record in the table located page below the currently selected. - bottom (
) -
Bottom. Selects last record in the table. - masterView (
) -
Switch to Master View. - detailView (
) -
Switch to Detail View. - showDetail (
) -
Shows Detail View. - hideDetail (
) -
Hides Detail View.
- recno (
1845px (image size is reduced):
,948px (image size is reduced):
,660px:
This feature is extremely important for Responsive Design.
Here is example of MDW tollbar with all tool controls:
Form Style (formStyle)
Form Style is represented by Form Object property - object formStyle. This object has following properties:- sBorderColor - string that specify Form border color (optional, default: "#dddddd"). For this property can be used color keywords and RGB hex values supported by Browser.
- sBorderWidth - integer that specify Form cell border width in px (optional, default: 1).
- sCellHeight - integer that specify Form cell height in px (optional, default: 0 - if viewport (the user's visible area of a web page) width less than 1024 px than sCellHeight = 36, otherwise sCellHeight = 31)
- sCellMinWidth - integer that specify Form cell minimum width in px (optional, default: 30)
- sOddCellStyle - string that specify CSS style for cells in odd rows (optional, default: "background-color:#f5f5f5;").
- sEvenCellStyle - string that specify CSS style for cells in even rows (optional, default: "background-color:#fff;").
- sOddRowSelectedStyle - string that specify CSS style for cells in selected odd rows (optional, default: "background-color:#FFE4C4;").
- sEvenRowSelectedStyle - string that specify CSS style for cells in selected even rows (optional, default: "background-color:#FFE4C4;").
- sOddColSelectedStyle - string that specify CSS style for cells in odd rows of selected column (optional, default: "background-color:#FFDFBF;").
- sEvenColSelectedStyle - string that specify CSS style for cells in even rows of selected column (optional, default: "background-color:#FFDFBF;").
- sOddCellSelectedStyle - string that specify CSS style for cell in selected odd row and selected column (optional, default: "background-color:#FFD4B8;").
- sEvenCellSelectedStyle - string that specify CSS style for cell in selected even row and selected column (optional, default: "background-color:#FFD4B8;").
- sOddCellHighlightedStyle - string that specify CSS style for cells in highlighted odd rows when user place mouse over it (optional, default: "background-color:#D8E4EE;").
- sEvenCellHighlightedStyle - string that specify CSS style for cells in highlighted even rows when user place mouse over it (optional, default: "background-color:#D8E4EE;").
Form Options (formOptions)
Form Options are represented by Form Object property - object formOptions. This object has following properties:- selectCol - string ("Y"/"") that specify ability to select column when user will click on it (optional, default: "").
- selectRow - string ("Y"/"") that specify ability to select row when user will click on it (optional, default: "Y").
- selectCell - string ("Y"/"") that specify ability to select cell when user will click on it (optional, default: "Y").
- selectedCol - integer that specify column to be preselected when form will be rendered first time (optional, default: 0)
- selectedRow - integer that specify row to be preselected when form will be rendered first time (optional, default: -1 - no record should be selected)
- highlightCol - string ("Y"/"") that specify ability to highlight the column when user will move mouse over it (optional, default: "")
- highlightRow - string ("Y"/"") that ability to highlight the row when user will move mouse over it (optional, default: "Y")
- highlightCell - string ("Y"/"") that ability to highlight the cell when user will move mouse over it (optional, default: "Y")
- enableColumnMove - string ("Y"/"") that specify ability of form to move columns by dragging them to new position (optional, default: "")
- enableContextMenu - string ("Y"/"") that specify ability of form to use Context menu (optional, default: "Y").
- enableMouseWheel - string ("Y"/"") that specify ability of form to scroll rows using mouse wheel (optional, default: "Y")
- enableRadarKeyControl - string ("Y"/"") that specify ability to navigate form columns using keyboard (optional, default: "Y")
- enableGridKeyControl - string ("Y"/"") that specify ability to navigate form cells using keyboard (optional, default: "Y")
- enableMoveRows - string ("Y"/"") that specify ability to move form rows using drag and drop functionality (optional, default: "").
- enableDropOnTools - string ("Y"/"") that specify ability to drop dragged rows on Toolbar tool icons to execute appropriate function (optional, default: ""). To activate this functionality one of non-editable Columns objects should have property "cDraggable" to be set to value "Y".
Form Events (formEvents)
Form Events are represented by Form Object property - object formEvents. This object has following properties:- onCellSelectFn - function or string with name of function,
which should be executed after selecting new cell in the table Form.
(optional, default:
null). - onChangeFn - function or string with name of function,
which should be executed after changing any value in the table Form.
(optional, default:
null). - onColMoveFn - function or string with name of
function, which should be executed when columns in the
table Form are rearranged. (optional, default:
null). - onColMouseDownFn - function or string with name of
function, which should be executed on mouse down to any column in the
table Form. (optional, default:
null). - onColSelectFn - function or string with name of
function, which should be executed after selecting new column in
the table Form. (optional, default:
null). - onDeleteAllRowsFn - function or string with name of function,
which should be executed after processing all rows from the table initiated by
clicking to the button "Delete All Rows". (optional, default:
null). - onDetailViewFn - function or string with name of
function, which should be executed after replacing Master Form view by Detail Form view in the table
initiated by clicking to the button
detailView. (optional, default:null). - onDragRowDropFn - function or string with name
of function, which should be executed after dropping draggable
record of the table Form. (optional, default:
null). - onFilterFn - function or string with name of
function, which should be executed after filtering rows in the table
initiated by clicking to the button
filterorexclude. (optional, default:null). - onGlobalFilterFn - function or string with name of
function, which should be executed after filtering rows in the table
initiated by clicking to the button
globalFilterorglobalExclude. (optional, default:null). - onHideAllRowsFn - function or string with name of function,
which should be executed after hiding all rows from the table initiated by
clicking to the button "Hide All Rows". (optional, default:
null). - onHideDetailFn - function or string with name of
function, which should be executed after hiding Detail Form in the table
initiated by clicking to the button
hideDetail. (optional, default:null). - onHideRestFn - function or string with name of
function, which should be executed after hiding rows in the table
initiated by clicking to the button
hideRest. (optional, default:null). - onHideAllRowsFn - function or string with name of
function, which should be executed after hiding all rows in the table
initiated by clicking to the button
hideAllRec. (optional, default:null). - onHideUpFn - function or string with name of
function, which should be executed after hiding rows in the
table initiated by clicking to the button
hideUp. (optional, default:null). - onMasterViewFn - function or string with name of
function, which should be executed after replacing Detail Form view by Master Form view in the table
initiated by clicking to the button
masterView. (optional, default:null). - onRowAddFn - function or string with name of
function, which should be executed after hiding rows in the table
initiated by clicking to the button
addRec. (optional, default:null). - onRowCloneFn - function or string with name of function,
which should be executed after cloning record in the table initiated by
clicking to the button
cloneRec. (optional, default:null). - onRowDeleteFn - function or string with name of function,
which should be executed after processing row in the table initiated by
clicking to the button
deleteRec. (optional, default: functionnull). - onRowHideFn - function or string with name of function,
which should be executed after hiding row in the table initiated by
clicking to the button
hideRec. (optional, default: functionnull). - onRowInsertFn - function or string with name of function,
which should be executed after inserting record in the table initiated by
clicking to the button
insertRec. (optional, default: functionnull). - onRowMouseDownFn - function or string with name of function,
which should be executed mouse down to any row in the table Form.
(optional, default:
null). - onRowMoveFn - function or string with name of function,
which should be executed after moving row in the table initiated by
clicking to the button
moveUpormoveDown. (optional, default:null). - onRowSelectFn - function or string with name of function,
which should be executed after selecting new row in the table Form.
(optional, default:
null). - onRowTrashFn - function or string with name of function,
which should be executed after trashing row in the table Form by clicking
to the button
trashRec. (optional, default: functionnull). - onSaveFn - function or string with name of function,
which should be executed after on saving data in the table Form by
clicking to the button
saveRec. (optional, default: functionnull). - onSaveAllFn - function or string with name of function,
which should be executed after on saving ALL data in the table Form by
clicking to the button
saveAllRec. (optional, default: functionnull). - onShowDetailFn - function or string with name of
function, which should be executed after showing Detail Form in the table
initiated by clicking to the button
showDetail. (optional, default:null). - onSortFn - function or string with name of function,
which should be executed after on sorting data in the table Form by clicking
to the button
sortAandsortD. (optional, default:null). - onStartOverFn - function or string with name of function,
which should be executed after on restoring original table data in the table
Form by clicking to the button
startOver. (optional, default:null). - onUpDownRecFn - function or string with name of function,
which should be executed after moving row in the table initiated by
clicking to the button
moveUpormoveDown. (optional, default:null). - onUnDoFn - function or string with name of function,
which should be executed after on undoing data in the table Form by
clicking to the button
undo. (optional, default:null).
Example: fEv.onSortFn.call(fForm).
Note 2: All properties of object formEvents listed above should be specified as string with name of function to be exported to HTML because it is not valid to define functions in JSON format.
- rowDragDroppable - object with list of tool controls where
we can drop dragging table row to execute appropriate functions associated
with controls.
This object contains properties related to Tool controls.
Each property is string, which should be shown when user put mouse over appropriate tool control:
Example:
"rowDragDroppable": { "addRec": "Drop dragging record append new record to the table", "chartAggregate": "Drop dragging record to generate aggregated " + "reports for any columns.", "cloneRec": "Drop dragging record to add new record to the end", "deleteAllRec": "Drop dragging record to to mark all not hidden" + " record as deleted", "deleteRec": "Drop dragging record to delete it", "downOneRec": "Drop dragging record to move it one position down", "exclude": "Drop dragging record to exclude data by column by" + " selected column and selected value!", "excludeAll": "Drop dragging record to exclude data by " + "selected value in any column!", "exportToCSV": "Drop dragging record to export data in CSV format", "exportToHTML": "Drop dragging record to export data in " + "JSON format", "filter": "Drop dragging record to filter data by selected " + "column and selected value!", "filterAll": "Drop dragging record to filter data by " + "selected value in any column!", "findAll": "Drop dragging record to find next record with " + "selected value.", "findAllUp": "Drop dragging record to find previous record " + "with selected value.", "findNext": "Drop dragging record to find next record with " + "selected value in selected column.", "findUp": "Drop dragging record to find previous record with " + "selected value in selected column.", "groupedReport": "Drop dragging record to generate report " + "grouped by selected column.", "hideRec": "Drop dragging record to hide selected record.", "hideRest": "Drop dragging record to hide all records below " + "record selected record.", "hideUp": "Drop dragging record to hide all records above " + "selected record.", "insertRec": "Drop dragging record to insert new record below it", "map": "Drop dragging record to open Web Page for selected record", "chartNumeric": "Drop dragging record to generate a Pie report" + " for numeric columns", "replaceAll": "Drop dragging record to replace in all records " + "with selected value in column selected column.", "replaceNext": "Drop dragging record to replace next with value " + "selected value in column selected column.", "saveRec": "Drop dragging record to save data to the server " + "for batch processing", "sendEmail": "Drop dragging record to send e-mail using " + "selected record", "sendEmailAll": "Drop dragging record to send e-mail using All" + " selected records", "sortA": "Drop dragging record to sort records ascending by" + " selected column.", "sortD": "Drop dragging record to sort records descending by" + " selected column.", "standardReport": "Drop dragging record to generate standard" + " report", "startOver": "Drop dragging record to start over - restore" + " original records we received from server (this deletes" + " any scanges made before)", "trashRec": "Drop dragging record to trash it", "undo": "Drop dragging record to undo - unoes last operation " + "performed: add, delete, hide, filter, exclude, sort...", "upOneRec": "Drop dragging record to move it one position up", "webSite": "Drop dragging record to open Web Page for selected" + " record" }
Form Context Menu (formContextMenu)
Form Context Menu is represented by Form Object property - object formContextMenu. This object has following two properties:- ctmTitle - string that specify context menu title (optional, default: "Menu").
- items - array of objects item that specify appropriate items of menu (optional, default: []).
Every element of array items represented by object item which contains following properties:type- string ('item' or 'divider') that specify control type (optional, default: "item").text- string that specify control name (mandatory).icon- string that specify control Font Awesome icon (mandatory).disabled- string ("Y"/"") that specify item disability (optional, default: "").clickFn- string, that contains divided by character '|" three mandatory parameters:- Table identifier - string which specified in property tableName of object tabObject for the mdw.table.Table(tabObject) constructor
- Position of Form in Table array - integer tableForms to be used as scope for following function:
- Name of function which should be executed when control is activated/clicked - string (mandatory).
minW- integer that specify the visibility of item in context menu for specified minimal viewport (the user's visible area of a web page) width in pixels (optional, default: 0 - menu item is always visible). If the viewport has width more or equal than minW menu item become visible, otherwise it become hidden.minH - integer that specify the visibility of item in context menu for specified minimal viewport (the user's visible area of a web page) height in pixels (optional, default: 0 - menu item is always visible). If the viewport has height more or equal than minH menu item become visible, otherwise it become hidden. This property allows to show more menu items on wider screen and hide some menu items on narrow screens. notMobile- string ("Y"/"") that specify context menu item invisible on mobile devices. It is visible only on computers. (optional, default: "").noExport- string ("Y"/"") that allow ('Y') or don't allow ('') add this item to array items when table is exporting to HTML (optional, default: "").
formContextMenu: {
ctmTitle: 'Menu', // If ctmTitle !='', Context menu header will be appeared
items: [
{type: 'item', text: 'Sort Ascending', icon: 'fa fa-sort-alpha-asc',
clickFn: "T_t|0|sortA"},
{type: 'item', text: 'Sort Descending', icon: 'fa fa-sort-alpha-desc',
clickFn: "T_t|0|sortD"},
{type: 'item', text: 'Move Record Up', icon: 'fa fa-long-arrow-up',
clickFn: "T_t|0|upOneRec"},
{type: 'item', text: 'Move Record Down', icon: 'fa fa-long-arrow-down',
clickFn: "T_t|0|downOneRec"},
{type: 'divider'},
{type: 'item', text: 'Find Previous', icon: 'fa fa-search-minus',
clickFn: "T_t|0|findUp"},
{type: 'item', text: 'Filter, Which Contain', icon: 'fa fa-filter',
clickFn: "T_t|0|filter"},
{type: 'item', text: 'Exclude', icon: 'fa fa-remove',
clickFn: "T_t|0|exclude"},
{type: 'item', text: 'Hide Record', icon: 'fa fa-check-circle',
clickFn: "T_t|0|hideRec"},
{type: 'item', text: 'Hide Records Above', icon: 'fa fa-arrow-circle-down',
clickFn: "T_t|0|hideUp"},
{type: 'item', text: 'Hide Records Below', icon: 'fa fa-arrow-circle-up',
clickFn: "T_t|0|hideRest"},
{type: 'item', text: 'Hide All Records', icon: 'fa fa-eraser',
clickFn: "T_t|0|hideAllRec"},
{type: 'item', text: 'Find Next', icon: 'fa fa-search-plus',
clickFn: "T_t|0|findNext"},
{type: 'divider'},
{type: 'item', text: 'Pie Tool', icon: 'fa fa-pie-chart',
clickFn: "T_t|0|pieNumeric"},
{type: 'item', text: 'Aggregate Tool', icon: 'fa fa-magic',
clickFn: "T_t|0|chartAggregate"},
{type: 'item', text: 'Standard Report', icon: 'fa fa-file-text-o',
clickFn: "T_t|0|standardReport"},
{type: 'item', text: 'Grouped Report', icon: 'fa fa-file-text',
clickFn: "T_t|0|groupedReport"},
{type: 'divider'},
{type: 'item', text: 'Export to HTML', icon: 'fa fa-arrow-circle-o-up',
clickFn: "T_t|0|exportToHTML", noExport: 'Y'},
{type: 'item', text: 'Save to HTML', icon: 'fa fa-arrow-circle-o-right',
clickFn: "T_t|0|saveToHTML"},
{type: 'item', text: 'Export CSV', icon: 'fa fa-file-excel-o',
clickFn: "T_t|0|exportToCSV"},
{type: 'item', text: 'Undo', icon: 'fa fa-undo',
clickFn: "T_t|0|undo"},
{type: 'item', text: 'Start Over', icon: 'fa fa-refresh',
clickFn: "T_t|0|startOver"}
]
}
Responsive Design
I. Main Megadata Web responsive design feature is a Form Column Radar:
for Master View: .for Detail View:
.II. Another significant Megadata Web responsive design feature is a navigation bar auto resize - ability auto-increase height of Toolbar to make visible all controls
Below are three bar views for different Form container horizontal sizes:1845px (image size is reduced):
,948px (image size is reduced):
,660px:
III. Megadata Web allows dynamically change many important property values in response to altering the size of the screen or web browser width
Here are some of Form Object properties, which values may depend from size of viewport (the user's visible area of a web page):- Tool Button size tControlSize
- Bar Width bBarWidth
- Bar Knob Border Radius bKnobBorderRadius
- Bar Knob Minimum Height bKnobMinHeight
- Header Height hHeaderHeight
- Form Cell Height sCellHeight
- Radar Left Margin rLeftMargin
- Radar Right Margin rRightMargin
var vW = mdw.util.getViewportW(), // Getting viewport width
tabObject = {
...
tControlSize: vW < 1024 ? 36 : 26,
...
bBarWidth: vW < 1024 ? 36 : 17,
...
bKnobBorderRadius: fForm.bar.bBarWidth >>> 2,
...
bKnobMinHeight: vW < 1024 ? 36 : 20,
...
hHeaderHeight: vW < 1024 ? 36 : 30,
...
sCellHeight: vW < 1024 ? 36 : 31,
...
rLeftMargin: vW < 1024 ? 20 : 0,
...
}
IV. Megadata Web allows show and hide table Forms in response to altering the size of the screen or web browser width
This feature is supported by following properties of Form Object:- showMaxWidth - integer that specifies the maximum width of viewport (the user's visible area of a web page) when this Form is visible.
If viewport width becomes more than the
showMaxWidth, the Form will be hidden. Optional, default: 100,000. - showMinWidth - integer that specifies the minimum width of viewport (the user's visible area of a web page) when this Form is visible.
If viewport width becomes less than the
showMinWidth, the Form will be hidden. Optional, default: 0.
...
tableForms: [ // Array of table form objects
{
formContainer: 'mdw_computers_table',
fTabNum: 0,
formType: "master",
showMinWidth: 1020,
...
},
{
formContainer: 'mdw_computers_table',
fTabNum: 1,
formType: "detail",
showMaxWidth: 1019,
...
}
]
...
V. In response to the size of the viewport Megadata Web also allows show or hide some columns and/or tool controls
This feature is supported by properties cMinW and cMaxW of Form Columns Object and by properties nMinW, nMaxW, nMinH, nMaxH, nMinA, and nMaxA of Tool Controls Object:- cMinW - integer that specify the visibility of column in Form container for specified minimal width in pixels (optional, default: 0 - control is always visible). If the Form container has width in pixels more or equal than cMinW column become visible, otherwise it become hidden. This property allows to show more columns on wider screen and hide some columns on narrow screens.
- cMaxW - integer that specify the visibility of column in container for specified maximum viewport width in pixels (optional, default: 1,000,000 - control is always visible). If the Form container has width in pixels less or equal than cMaxW column become visible, otherwise it become hidden. This property allows to show more columns on wider screen and hide some columns on narrow screens.
- nMinW - integer that specify the visibility of control in Toolbar for specified minimal viewport (the user's visible area of a web page) width in pixels (optional, default: 0 - control is always visible). If the viewport has width more or equal than nMinW control become visible, otherwise it become hidden. This property allows to show more controls on wider screen and hide some controls on narrow screens.
- nMinH - integer that specify the visibility of control in Toolbar for specified minimal viewport (the user's visible area of a web page) height in pixels (optional, default: 0 - control is always visible). If the viewport has height more or equal than nMinH control become visible, otherwise it become hidden.
- nMinA - integer that specify the visibility of control in Toolbar for specified minimal viewport Area in thousands of square pixels (optional, default: 0 - control is always visible). If the viewport has (height*width)/1,000 more or equal than nMinA control become visible, otherwise it become hidden.
- nMaxW - integer that specify the visibility of control in Toolbar for specified maximal viewport width in pixels (optional, default: 1,000,000 - control is always visible). If the viewport has width less or equal than nMaxW control become visible, otherwise it become hidden. This property allows to show more controls on wider screen and hide some controls on narrow screens.
- nMaxH - integer that specify the visibility of control in Toolbar for specified maximal viewport height in pixels (optional, default: 1,000,000 - control is always visible). If the viewport has height less or equal than nMaxH control become visible, otherwise it become hidden.
- nMaxA - integer that specify the visibility of control in Toolbar for specified maximal viewport Area in thousands of square pixels (optional, default: 1,000,000 - control is always visible). If the viewport has (height*width)/1,000 less or equal than nMaxA control become visible, otherwise it become hidden.
Column "OS" is visible if size of the screen or web browser is bigger or equal 756px (cMinW = 756). Columns "Display", "Resolution", and "Touch" are visible if size of the screen or web browser is bigger or equal 830px, 940px and 1000px accordingly.
...
formColumns: [
{cId: '_num_', cTitle: '#', cW: 76, cFixedW: 'Y', cAlign: 'right',
cSortType: '',
cOptional: 'Y', cVisible: 'Y',cRightBorder: 'Y'},
...
{cId:'speed', cTitle: 'Speed', cW: 64, cFixedW: "Y",
cSortType: 'N', cOptional: 'Y',
cAlign:'center', cVisible: 'Y', cFractionDigits: 1,
cCustomFn: mdw.table.makeFloatCell},
{cId:'os', cTitle: 'OS', cW: 140, cFixedW: 'N',
cSortType:'S', cOptional: 'Y',
cAlign:'left',cVisible: 'Y', cMinW: 756},
{cId:'display', cTitle: 'Display', cW: 74, cFixedW: "Y",
cSortType: 'N', cOptional: 'Y',
cAlign:'center',cVisible: 'Y', cMinW: 830, cFractionDigits: 1,
cCustomFn: mdw.table.makeFloatCell},
{cId:'resolution', cTitle: 'Resolution', cW: 110, cFixedW: "Y",
cSortType: 'N', cOptional: 'Y',
cAlign:'center', cVisible: 'Y', cMinW: 940},
{cId:'touch', cTitle: 'Touch', cW: 66, cFixedW: "Y",
cSortType:'S', cOptional: 'Y',
cAlign:'center', cVisible: 'Y',
cCustomFn: mdw.table.makeCheckBoxCell, cMinW: 1000},
...
]
...
Another form in example below contains three permanently visible controls "recno", "_text_1", and "remax",
because these controls have no property nMinW.Following controls "find, "globalFilter", and "startOver" are visible if size of the screen or web browser is bigger or equal 375px. Control "find" (text input) also has wider size if size of the screen or web browser is bigger or equal 414px.
...
toolBar: {
...
tToolbarTools: [
{nId: "recno", nName: 'Record number input', nTitle: 'Record Number',
nVisible: "Y", nOptional: 'Y', nStyle:"margin: 6px 2px 4px;width:40px;"},
{nId: "_text_1", nName: 'Text "of"', nTitle: 'of', nVisible: "Y",
nOptional: 'Y', nAlign: 'center'},
{nId: "remax", nName: 'Record quantity', nTitle: 'Record quantity',
nVisible: "Y", nOptional: 'Y', nStyle:"margin: 6px 2px 4px;width:40px;"},
{nId: "find", nName: 'Find value input', nTitle: 'Find value',
nVisible: "Y", nOptional: 'Y', nPlaceholder:"Find",
nStyle:"margin: 6px 2px 4px;width:40px;", nMinW: 414},
{nId: "find", nName: 'Find value input', nTitle: 'Find value',
nVisible: "Y", nOptional: 'Y', nPlaceholder:"Find",
nStyle:"margin: 6px 2px 4px;width:40px;", nMinW: 375, nMaxW: 413},
{nId: "globalFilter", nImg: "https://www.megadataweb.com/mdw/images/nfl.gif",
nName: 'Filter', nVisible: "Y",
nTitle: 'Filter',nOptional: 'Y',
nFAicon:"", nMinW: 375}, // filter
{nId: "startOver", nImg: "https://www.megadataweb.com/mdw/images/nst.gif",
nName: 'Start Over', nTitle: 'Start over', nVisible:"Y",
nFAicon:"", nMinW: 375}
]
},
...
VI. Megadata Web has ability to customize form view
Right Click on the header or clicking on the Column Editor button ()
opens the Column customization tool:
It allows to:
- Shifting columns
- Make data columns visible or invisible
- Undo all modifications by deleting all changes made before
- Set default columns using property defaultFormColumns of object Form
)
is controlled by following properties of Object Form Header:
- hShowHeader - string ("Y"/"") that specify visibility of header (optional, default: "Y"). Header is also invisible if object header is not specified in Form Object
- hShowColumnEditor - string ("Y"/"") that specify visibility of
Column Editor button ()
above Form Scrolling Bar (optional, default: "").
Column Editor button ()
is also invisible if Form Scrolling Bar
is not specified in Form Object.
VII. Megadata Web has ability to customize Toolbar controls
Right Click on the Toolbar or clicking on the Tool Control Editor button ()
opens the Toolbar customization tool:
It allows to:
- Move tools controls inside of Toolbar
- Make tool controls visible or invisible
- Undo all modifications by restoring default controls received from server
)
is controlled by following properties of Object Toolbar:
- tShowToolbar - string ("Y"/"") that specify visibility of header (optional, default: "Y"). Tool Control Editor button is also invisible if object bar is not specified in Form Object
- tShowToolControl - string ("Y"/"") that specify visibility of
Tool Control Editor button ()
below or above Form Scrolling Bar (optional, default: "Y").
Tool Control Editor button ()
is also invisible if Form Scrolling Bar is not specified in Form Object.
VII. Megadata Web has ability switch form view between "Master" and "Detail" and hide/show Detail View
This features are supported by following toollbar controls:- masterView () -
Switch to Master View.
- detailView () -
Switch to Detail View.
- showDetail () -
Shows Detail View.
- hideDetail () -
Hides Detail View.
WYSIWYG Editor
WYSIWYG (What You See Is What You Get) Editor is Megadata Web Editor which allows users to make interactive Megadata Web Table without a complicated coding:
Megadata Web Editor is a JavaScript/HTML/CSS library which enables non-programmers to easily create and publish Table.
It is implemented as a simple wizard-style UI which walks the user through table creation from start to finish.
The editor supports a vast collection of table features right out of the box.
Features can be enabled/disabled as desired and required during a straight-forward process.
Furthermore, an advanced properties settings allow modification of major options available in the Megadata Web Table.
Editor supports all modern browsers on desktops and laptops. Experience the same consistent behavior and produce HTML across platforms. Start simple with the Megadata Web Editor then easily customize or add your own modifications later if your product needs to grow. The operation of this WYSIWYG Editor is very intuitive and it's works in the browser without installing any additional programs and plug-ins.
