chore: improve Row Detail demos (#2501)

ghiscoding · web-flow · commit 6fb7263d8aa0 · 2026-03-26T00:32:42.000-04:00
diff --git a/demos/aurelia/src/examples/slickgrid/example19-detail-view.html b/demos/aurelia/src/examples/slickgrid/example19-detail-view.html
@@ -3,7 +3,7 @@ <h3>${model.title}</h3>
   <div class="row">
     <div class="col-3 detail-label"><label>Assignee:</label> <input class="form-control" value.bind="model.assignee" /></div>
     <div class="col-3 detail-label"><label>Reporter:</label> <span>${model.reporter}</span></div>
-    <div class="col-3 detail-label"><label>Duration:</label> <span>${model.duration | decimal: 2}</span></div>
+    <div class="col-3 detail-label"><label>Duration:</label> <span>${model.duration}</span></div>
     <div class="col-3 detail-label"><label>% Complete:</label> <span>${model.percentComplete}</span></div>
   </div>
 
diff --git a/demos/aurelia/src/examples/slickgrid/example19-detail-view.ts b/demos/aurelia/src/examples/slickgrid/example19-detail-view.ts
@@ -5,7 +5,7 @@ import './example19-detail-view.scss';
 
 interface Item {
   assignee: string;
-  duration: Date;
+  duration: number;
   percentComplete: number;
   reporter: string;
   start: Date;
diff --git a/demos/aurelia/src/examples/slickgrid/example19.ts b/demos/aurelia/src/examples/slickgrid/example19.ts
@@ -62,8 +62,6 @@ export class Example19 {
         id: 'duration',
         name: 'Duration (days)',
         field: 'duration',
-        formatter: Formatters.decimal,
-        params: { minDecimal: 1, maxDecimal: 2 },
         sortable: true,
         type: 'number',
         minWidth: 90,
@@ -192,7 +190,7 @@ export class Example19 {
       dataset[i] = {
         rowId: i,
         title: 'Task ' + i,
-        duration: Math.ceil(Math.random() * 100),
+        duration: i % 33 === 0 ? null : Math.floor(Math.random() * 100) + 1,
         percentComplete: randomPercent,
         percentComplete2: randomPercent,
         percentCompleteNumber: randomPercent,
diff --git a/demos/aurelia/src/examples/slickgrid/example47-detail-view.ts b/demos/aurelia/src/examples/slickgrid/example47-detail-view.ts
@@ -7,7 +7,7 @@ import './example47-detail-view.scss';
 interface Item {
   id: number;
   assignee: string;
-  duration: Date;
+  duration: number;
   percentComplete: number;
   reporter: string;
   start: Date;
diff --git a/demos/react/src/examples/slickgrid/Example19-detail-view.tsx b/demos/react/src/examples/slickgrid/Example19-detail-view.tsx
@@ -63,7 +63,7 @@ const Example19DetailView: React.FC<RowDetailViewProps<Item, any>> = ({ model, a
           <label>Reporter:</label> <span>{model.reporter}</span>
         </div>
         <div className="col-3 detail-label">
-          <label>Duration:</label> <span>{model.duration || 0}</span>
+          <label>Duration:</label> <span>{model.duration}</span>
         </div>
         <div className="col-3 detail-label">
           <label>% Complete:</label> <span>{model.percentComplete}</span>
diff --git a/demos/react/src/examples/slickgrid/Example19.tsx b/demos/react/src/examples/slickgrid/Example19.tsx
@@ -200,7 +200,7 @@ const Example19: React.FC = () => {
       tmpData[i] = {
         rowId: i,
         title: 'Task ' + i,
-        duration: i % 33 === 0 ? null : Math.random() * 100 + '',
+        duration: i % 33 === 0 ? null : Math.floor(Math.random() * 100) + 1,
         percentComplete: randomPercent,
         percentComplete2: randomPercent,
         percentCompleteNumber: randomPercent,
diff --git a/demos/react/src/examples/slickgrid/Example47-detail-view.tsx b/demos/react/src/examples/slickgrid/Example47-detail-view.tsx
@@ -66,7 +66,7 @@ const Example47DetailView: React.FC<RowDetailViewProps<Item, any>> = (props) =>
           <label>Reporter:</label> <span>{props.model.reporter}</span>
         </div>
         <div className="col-3 detail-label">
-          <label>Duration:</label> <span>{props.model.duration || 0}</span>
+          <label>Duration:</label> <span>{props.model.duration}</span>
         </div>
         <div className="col-3 detail-label">
           <label>% Complete:</label> <span>{props.model.percentComplete}</span>
diff --git a/demos/vue/src/components/Example19.vue b/demos/vue/src/components/Example19.vue
@@ -48,8 +48,6 @@ function defineGrid() {
       id: 'duration',
       name: 'Duration (days)',
       field: 'duration',
-      formatter: Formatters.decimal,
-      params: { minDecimal: 1, maxDecimal: 2 },
       sortable: true,
       type: 'number',
       minWidth: 90,
@@ -196,7 +194,7 @@ function getData(count: number) {
     tmpData[i] = {
       rowId: i,
       title: 'Task ' + i,
-      duration: i % 33 === 0 ? null : Math.random() * 100 + '',
+      duration: i % 33 === 0 ? null : Math.floor(Math.random() * 100) + 1,
       percentComplete: randomPercent,
       percentComplete2: randomPercent,
       percentCompleteNumber: randomPercent,
diff --git a/demos/vue/src/components/Example19Detail.vue b/demos/vue/src/components/Example19Detail.vue
@@ -4,7 +4,7 @@ import type { RowDetailViewProps } from 'slickgrid-vue';
 
 interface Item {
   assignee: string;
-  duration: Date;
+  duration: number;
   percentComplete: number;
   reporter: string;
   start: Date;
@@ -58,10 +58,10 @@ function callParentMethod(model: Item) {
 
     <div class="row">
       <div class="col-3 detail-label">
-        <label>Start:</label> <span>{{ model.start ? format(model.start, 'YYYY-MM-DD') : '' }}</span>
+        <label>Start:</label> <span>{{ model.start ? format(props.model.start, 'YYYY-MM-DD') : '' }}</span>
       </div>
       <div class="col-3 detail-label">
-        <label>Finish:</label> <span>{{ model.start ? format(model.start, 'YYYY-MM-DD') : '' }}</span>
+        <label>Finish:</label> <span>{{ model.finish ? format(props.model.finish, 'YYYY-MM-DD') : '' }}</span>
       </div>
       <div class="col-3 detail-label"><label>Effort Driven:</label> <i :class="model.effortDriven ? 'mdi mdi-check' : ''"></i></div>
     </div>
diff --git a/demos/vue/src/components/Example47.vue b/demos/vue/src/components/Example47.vue
@@ -3,7 +3,6 @@ import { VueRowDetailView } from '@slickgrid-universal/vue-row-detail-plugin';
 import {
   Aggregators,
   Editors,
-  ExtensionName,
   Filters,
   Formatters,
   GroupTotalFormatters,
@@ -41,7 +40,7 @@ const showSubTitle = ref(true);
 const serverWaitDelay = ref(FAKE_SERVER_DELAY); // server simulation with default of 250ms but 50ms for Cypress tests
 let vueGrid!: SlickgridVueInstance;
 
-const rowDetailInstance = computed(() => vueGrid?.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView));
+const rowDetailInstance = computed(() => vueGrid?.extensionService.getExtensionInstanceByName('rowDetailView'));
 
 onBeforeMount(() => {
   defineGrid();
diff --git a/demos/vue/src/components/Example47Detail.vue b/demos/vue/src/components/Example47Detail.vue
@@ -6,7 +6,7 @@ import { showToast } from './utilities.js';
 interface Item {
   id: number;
   assignee: string;
-  duration: Date;
+  duration: number;
   percentComplete: number;
   reporter: string;
   start: Date;
@@ -50,7 +50,7 @@ function showNotification(model: Item) {
         <label>Reporter:</label> <span>{{ model.reporter }}</span>
       </div>
       <div class="col-3 detail-label">
-        <label>Duration:</label> <span>{{ model.duration || 0 }}</span>
+        <label>Duration:</label> <span>{{ model.duration }}</span>
       </div>
       <div class="col-3 detail-label">
         <label>% Complete:</label> <span>{{ model.percentComplete }}</span>
diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md b/frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md
@@ -226,7 +226,7 @@ import { Component } from '@angular/core';
 })
 export class RowDetailViewComponent {
   model: {
-    duration: Date;
+    duration: number;
     percentComplete: number;
     reporter: string;
     start: Date;
@@ -314,7 +314,7 @@ import { GridRowDetailComponent } from './grid-rowdetail.component';
 })
 export class RowDetailViewComponent {
   model: {
-    duration: Date;
+    duration: number;
     percentComplete: number;
     reporter: string;
     start: Date;
diff --git a/frameworks/angular-slickgrid/src/demos/examples/example19-rowdetail.component.html b/frameworks/angular-slickgrid/src/demos/examples/example19-rowdetail.component.html
@@ -6,7 +6,7 @@ <h3>{{ model?.title }}</h3>
       <label>Reporter:</label> <span>{{ model?.reporter }}</span>
     </div>
     <div class="col-3 detail-label">
-      <label>Duration:</label> <span>{{ model?.duration | number: '1.2-2' }}</span>
+      <label>Duration:</label> <span>{{ model?.duration }}</span>
     </div>
     <div class="col-3 detail-label">
       <label>% Complete:</label> <span>{{ model?.percentComplete }}</span>
diff --git a/frameworks/angular-slickgrid/src/demos/examples/example19-rowdetail.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example19-rowdetail.component.ts
@@ -1,4 +1,4 @@
-import { DatePipe, DecimalPipe } from '@angular/common';
+import { DatePipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import type { SlickDataView, SlickGrid } from '../../library';
@@ -19,7 +19,7 @@ interface ItemDetail {
 @Component({
   styles: ['.detail-label { display: inline-flex; align-items: center; gap: 4px; padding: 4px; }', 'label { font-weight: 600; }'],
   templateUrl: './example19-rowdetail.component.html',
-  imports: [DatePipe, DecimalPipe, FormsModule],
+  imports: [DatePipe, FormsModule],
 })
 export class Example19RowDetailComponent {
   model: ItemDetail = {} as ItemDetail;
diff --git a/frameworks/angular-slickgrid/src/demos/examples/example19.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example19.component.ts
@@ -71,8 +71,6 @@ export class Example19Component implements OnDestroy, OnInit {
         id: 'duration',
         name: 'Duration (days)',
         field: 'duration',
-        formatter: Formatters.decimal,
-        params: { minDecimal: 1, maxDecimal: 2 },
         sortable: true,
         type: 'number',
         minWidth: 90,
@@ -221,7 +219,7 @@ export class Example19Component implements OnDestroy, OnInit {
       tmpData[i] = {
         rowId: i,
         title: 'Task ' + i,
-        duration: i % 33 === 0 ? null : Math.random() * 100 + '',
+        duration: i % 33 === 0 ? null : Math.floor(Math.random() * 100) + 1,
         percentComplete: randomPercent,
         percentComplete2: randomPercent,
         percentCompleteNumber: randomPercent,
diff --git a/frameworks/angular-slickgrid/src/demos/examples/example47-rowdetail.component.html b/frameworks/angular-slickgrid/src/demos/examples/example47-rowdetail.component.html
@@ -6,7 +6,7 @@ <h3>{{ model?.title }}</h3>
       <label>Reporter:</label> <span>{{ model?.reporter }}</span>
     </div>
     <div class="col-3 detail-label">
-      <label>Duration:</label> <span>{{ model?.duration | number: '1.2-2' }}</span>
+      <label>Duration:</label> <span>{{ model?.duration }}</span>
     </div>
     <div class="col-3 detail-label">
       <label>% Complete:</label> <span>{{ model?.percentComplete }}</span>
diff --git a/frameworks/angular-slickgrid/src/demos/examples/example47-rowdetail.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example47-rowdetail.component.ts
@@ -1,4 +1,4 @@
-import { DatePipe, DecimalPipe } from '@angular/common';
+import { DatePipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import type { SlickDataView, SlickGrid } from '../../library';
@@ -20,7 +20,7 @@ interface ItemDetail {
 @Component({
   styles: ['.detail-label { display: inline-flex; align-items: center; gap: 4px; padding: 4px; }', 'label { font-weight: 600; }'],
   templateUrl: './example47-rowdetail.component.html',
-  imports: [FormsModule, DecimalPipe, DatePipe],
+  imports: [FormsModule, DatePipe],
 })
 export class Example47RowDetailComponent {
   model!: ItemDetail;
diff --git a/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-detail.md b/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-detail.md
@@ -221,7 +221,7 @@ import { bindable } from 'aurelia-framework';
 
 export class DetailViewCustomElement {
   @bindable() model: {
-    duration: Date;
+    duration: number;
     percentComplete: number;
     reporter: string;
     start: Date;
@@ -300,7 +300,7 @@ import { GridRowDetailComponent } from './grid-rowdetail.component';
 
 export class DetailViewCustomElement{
   model: {
-    duration: Date;
+    duration: number;
     percentComplete: number;
     reporter: string;
     start: Date;
diff --git a/frameworks/slickgrid-react/docs/grid-functionalities/row-detail.md b/frameworks/slickgrid-react/docs/grid-functionalities/row-detail.md
@@ -187,7 +187,7 @@ import './example19-detail-view.scss';
 
 interface Props {
   model: {
-    duration: Date;
+    duration: number;
     percentComplete: number;
     // ...
   };
diff --git a/frameworks/slickgrid-vue/docs/grid-functionalities/row-detail.md b/frameworks/slickgrid-vue/docs/grid-functionalities/row-detail.md
@@ -169,7 +169,7 @@ import type { RowDetailViewProps } from 'slickgrid-vue';
 
 interface Item {
   assignee: string;
-  duration: Date;
+  duration: number;
   percentComplete: number;
   reporter: string;
   start: Date;
@@ -347,7 +347,7 @@ import type { RowDetailViewProps } from 'slickgrid-vue';
 
 interface Item {
   assignee: string;
-  duration: Date;
+  duration: number;
   percentComplete: number;
   reporter: string;
   start: Date;
