@wavemaker/app-ng-runtime 12.0.0-next.45096 → 12.0.0-next.45097

app-ng-runtime/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/app-ng-runtime",
-    "version": "12.0.0-next.45096",
+    "version": "12.0.0-next.45097",
     "description": "All modules required for a wavemaker application.",
     "main": "index.js",
     "scripts": {

app-ng-runtime/scripts/datatable/datatable.js

@@ -70,7 +70,7 @@ $.widget('wm.datatable', {
         rowDef: {
             position: '0',
             closeothers: false,
-            columnwidth: '30px'
+            columnwidth: '50px'
         },
         summaryRow: false,
         summaryRowDefs: [],
@@ -120,7 +120,7 @@ $.widget('wm.datatable', {
             'style': 'text-align: center;',
             'textAlignment': 'center',
             'show': true,
-            'width': '30px'
+            'width': '50px'
         },
         'rowIndex': {
             'field': 'rowIndex',
@@ -325,7 +325,7 @@ $.widget('wm.datatable', {
             $th.addClass(headerClasses);
             /* For custom columns, show display name if provided, else don't show any label. */
             if (field === 'checkbox') {
-                $th.append('<input type="checkbox" />');
+                $th.append(self._getCheckbox());
             }
             $th.append('<span class="header-data">' + headerLabel + '</span>');
             if (sortEnabled) { //If sort info is present, show the sort icon for that column on grid render
@@ -574,16 +574,10 @@ $.widget('wm.datatable', {
             $tbody.append(rowTemplate);
             if (self.options.rowExpansionEnabled) {
                 var rowHeight = self.options.rowDef.height;
-                var rowPosition = self.options.rowDef.position;
-                var colSpanLength = _.filter(self.preparedHeaderData, function(c) {return c.show}).length - 1;
-                var $tr = $('<tr class="app-datagrid-detail-row" tabindex="0" role="row" data-row-id="' + row.$$pk + '"><td></td><td colspan="' + colSpanLength + '" class="app-datagrid-row-details-cell">' +
+                var colSpanLength = _.filter(self.preparedHeaderData, function(c) {return c.show}).length;
+                var $tr = $('<tr class="app-datagrid-detail-row" tabindex="0" role="row" data-row-id="' + row.$$pk + '"><td colspan="' + colSpanLength + '" class="app-datagrid-row-details-cell">' +
                     '<div class="row-overlay"><div class="row-status"><i class="' + self.options.loadingicon + '"></i></div></div><div class="details-section"></div>' +
                     '</td></tr>');
-                if(rowPosition === "-1"){
-                    $tr = $('<tr class="app-datagrid-detail-row" tabindex="0" role="row" data-row-id="' + row.$$pk + '"><td colspan="' + colSpanLength + '" class="app-datagrid-row-details-cell">' +
-                    '<div class="row-overlay"><div class="row-status"><i class="' + self.options.loadingicon + '"></i></div></div><div class="details-section"></div>' +
-                    '</td><td></td></tr>');
-                }
                 if (rowHeight) {
                     $tr.find('div.row-overlay').css('min-height', rowHeight);
                 }
@@ -638,15 +632,32 @@ $.widget('wm.datatable', {
     _getCheckboxTemplate: function (row, isMultiSelectCol) {
         var checked = row._checked === true ? ' checked' : '',
             disabled = row.disabed ? ' disabled' : '',
-            chkBoxName = isMultiSelectCol ? 'gridMultiSelect' : '';
-        return '<input name="' + chkBoxName + '" type="checkbox"' + checked + disabled + '/>';
+            chkBoxName = isMultiSelectCol ? 'gridMultiSelect' : '',
+            labelClass = row._checked === true ? '' : 'unchecked';
+
+        return this._getCheckbox(labelClass, chkBoxName, checked, disabled);
+    },
+
+    /* Return checkbox literal */
+    _getCheckbox: function (labelClass = '', chkBoxName = '', checked = '', disabled = '') {
+        return `<div class="app-checkbox checkbox">
+        <label class="${labelClass}">
+            <input type="checkbox" name="${chkBoxName}" ${checked} ${disabled} role="checkbox">
+            <span class="caption"></span>
+        </label>
+    </div>`
     },
 
     /* Returns the radio template. */
     _getRadioTemplate: function (row) {
         var checked = row._checked === true ? ' checked' : '',
             disabled = row.disabed ? ' disabled' : '';
-        return '<input type="radio" rowSelectInput name="" value=""' + checked + disabled + '/>';
+        return `<div class="radio app-radio">
+            <label>
+                <input type="radio" rowSelectInput name="" value="" ${checked} ${disabled}>
+                <span class="caption"></span>
+            </label>
+        </div>`;
     },
 
     /* Returns the table cell template. */