@progress/kendo-vue-grid 4.3.3-dev.202404121101 → 4.3.3-dev.202404220722

package/dist/es/Grid.js

@@ -36,7 +36,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var markRaw = allVue.markRaw;
-import { templateRendering, hasListener, getListeners, getDefaultSlots, guid, getter, isRtl, validatePackage, getTemplate, shouldShowValidationUI, canUseDOM, templateDefinition, isObject, setRef, getRef, kendoThemeMaps, WatermarkOverlay } from '@progress/kendo-vue-common';
+import { templateRendering, hasListener, getListeners, getDefaultSlots, guid, getter, isRtl, getNestedValue, validatePackage, getTemplate, shouldShowValidationUI, canUseDOM, templateDefinition, isObject, setRef, getRef, kendoThemeMaps, WatermarkOverlay } from '@progress/kendo-vue-common';
 import { tableColumnsVirtualization, Pager, normalize, tableKeyboardNavigationTools as navigationTools, TableKeyboardNavigationProvider } from '@progress/kendo-vue-data-tools';
 import { Loader } from '@progress/kendo-vue-indicators';
 import { GridNav } from './GridNav';
@@ -51,7 +51,6 @@ import { FilterRow } from './header/FilterRow';
 import { GroupPanel } from './header/GroupPanel';
 import { Footer } from './footer/Footer';
 import { FooterRow } from './footer/FooterRow';
-import { GridCellValue } from './GridCellValue';
 import { operators } from './filterCommon';
 import { VirtualScroll } from './VirtualScroll';
 import { RowHeightService, VirtualScrollFixed } from './VirtualScrollFixed';
@@ -1300,6 +1299,9 @@ var GridVue2 = {
       colSpans = _a.colSpans,
       isColHidden = _a.hiddenColumns;
     var dataRow = function dataRow(item, rowId, rowDataIndex) {
+      var isInEdit = false;
+      var selectedField = this.$props.selectedField;
+      var selectedValue = selectedField ? getNestedValue(selectedField, item.dataItem) : undefined;
       return {
         row: this._columns.map(function (column, index) {
           var _this = this;
@@ -1314,6 +1316,14 @@ var GridVue2 = {
             left: column.right + 'px',
             right: column.left + 'px'
           } : {};
+          var currentColumnIsInEdit = false;
+          if (column.editable && this.$props.editField) {
+            var inEdit = getNestedValue(this.$props.editField, item.dataItem);
+            if (inEdit === true || inEdit === column.field) {
+              isInEdit = true;
+              currentColumnIsInEdit = true;
+            }
+          }
           var columnCellRenderFunction;
           if (column.cell) {
             columnCellRenderFunction = templateRendering.call(this, column.cell, getListeners.call(this));
@@ -1346,7 +1356,8 @@ var GridVue2 = {
                 expanded: isExpanded,
                 dataIndex: item.dataIndex,
                 ariaColumnIndex: column.ariaColumnIndex,
-                isRtl: this.isRtl
+                isRtl: this.isRtl,
+                isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(index) > -1
               },
               colSpan: colSpans[index],
               dataItem: item.dataItem,
@@ -1387,156 +1398,20 @@ var GridVue2 = {
               dataIndex: item.dataIndex,
               style: style,
               ariaColumnIndex: column.ariaColumnIndex,
-              isRtl: this.isRtl
+              isRtl: this.isRtl,
+              isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(index) > -1
             });
           }
-          // @ts-ignore
-          return h(GridCellValue, {
-            dataItem: item.dataItem,
-            attrs: this.v3 ? undefined : {
-              dataItem: item.dataItem,
-              editField: this.$props.editField,
-              column: column,
-              editCell: h(GridEditCell, {
-                id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
-                attrs: this.v3 ? undefined : {
-                  id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
-                  colSpan: colSpans[index],
-                  dataItem: item.dataItem,
-                  field: column.field || '' // todo
-                  ,
-                  editor: column.editor,
-                  format: column.format,
-                  readFormat: column.readFormat,
-                  type: column.type,
-                  className: className,
-                  render: columnCellRenderFunction || cellRenderFunction,
-                  columnIndex: index,
-                  columnsCount: this._columns.filter(function (c) {
-                    return !c.children.length;
-                  }).length,
-                  rowType: item.rowType,
-                  level: item.level,
-                  expanded: isExpanded,
-                  dataIndex: item.dataIndex
-                },
-                key: index,
-                colSpan: colSpans[index],
-                dataItem: item.dataItem,
-                field: column.field || '',
-                editor: column.editor,
-                format: column.format,
-                readFormat: column.readFormat,
-                type: column.type,
-                className: className,
-                render: columnCellRenderFunction || cellRenderFunction,
-                onEdit: this.editHandler,
-                on: this.v3 ? undefined : {
-                  "edit": this.editHandler,
-                  "remove": this.removeHandler,
-                  "save": this.saveHandler,
-                  "cancel": this.cancelHandler,
-                  "change": this.itemChange
-                },
-                onRemove: this.removeHandler,
-                onSave: this.saveHandler,
-                onCancel: this.cancelHandler,
-                onChange: this.itemChange,
-                columnIndex: index,
-                columnsCount: this._columns.filter(function (c) {
-                  return !c.children.length;
-                }).length,
-                rowType: item.rowType,
-                level: item.level,
-                expanded: isExpanded,
-                dataIndex: item.dataIndex,
-                style: style
-              }),
-              inbuildCell: h(GridCell, {
-                key: index,
-                id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
-                attrs: this.v3 ? undefined : {
-                  id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
-                  colSpan: colSpans[index],
-                  dataItem: item.dataItem,
-                  field: column.field || '' // todo
-                  ,
-                  editor: column.editor,
-                  format: column.format,
-                  readFormat: column.readFormat,
-                  type: column.type,
-                  className: className,
-                  render: columnCellRenderFunction || cellRenderFunction,
-                  columnIndex: index,
-                  columnsCount: this._columns.filter(function (c) {
-                    return !c.children.length;
-                  }).length,
-                  rowType: item.rowType,
-                  level: item.level,
-                  expanded: isExpanded,
-                  dataIndex: item.dataIndex
-                },
-                colSpan: colSpans[index],
-                dataItem: item.dataItem,
-                field: column.field || '',
-                editor: column.editor,
-                format: column.format,
-                readFormat: column.readFormat,
-                type: column.type,
-                className: className,
-                render: columnCellRenderFunction || cellRenderFunction,
-                onCellclick: this.cellClickHandler,
-                on: this.v3 ? undefined : {
-                  "cellclick": this.cellClickHandler,
-                  "cellkeydown": this.cellKeydownHandler,
-                  "edit": this.editHandler,
-                  "remove": this.removeHandler,
-                  "save": this.saveHandler,
-                  "cancel": this.cancelHandler,
-                  "change": this.itemChange,
-                  "selectionchange": function selectionchange(e) {
-                    return _this.selectionChangeHandler({
-                      event: e,
-                      dataItem: item.dataItem,
-                      dataIndex: rowDataIndex,
-                      columnIndex: index
-                    });
-                  }
-                },
-                onCellkeydown: this.cellKeydownHandler,
-                onEdit: this.editHandler,
-                onRemove: this.removeHandler,
-                onSave: this.saveHandler,
-                onCancel: this.cancelHandler,
-                onChange: this.itemChange,
-                onSelectionchange: function selectionchange(e) {
-                  return _this.selectionChangeHandler({
-                    event: e,
-                    dataItem: item.dataItem,
-                    dataIndex: rowDataIndex,
-                    columnIndex: index
-                  });
-                },
-                columnIndex: index,
-                columnsCount: this._columns.filter(function (c) {
-                  return !c.children.length;
-                }).length,
-                rowType: item.rowType,
-                level: item.level,
-                expanded: isExpanded,
-                dataIndex: item.dataIndex,
-                style: style
-              })
-            },
-            editField: this.$props.editField,
-            column: column,
-            editCell: h(GridEditCell, {
+          if (currentColumnIsInEdit) {
+            // @ts-ignore
+            return h(GridEditCell, {
               id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
               attrs: this.v3 ? undefined : {
                 id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
                 colSpan: colSpans[index],
                 dataItem: item.dataItem,
-                field: column.field || '',
+                field: column.field || '' // todo
+                ,
                 editor: column.editor,
                 format: column.format,
                 readFormat: column.readFormat,
@@ -1583,71 +1458,23 @@ var GridVue2 = {
               expanded: isExpanded,
               dataIndex: item.dataIndex,
               style: style
-            }),
-            inbuildCell: h(GridCell, {
-              key: index,
+            });
+          }
+          var inbuiltSlot = h(GridCell, {
+            key: index,
+            id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
+            attrs: this.v3 ? undefined : {
               id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
-              attrs: this.v3 ? undefined : {
-                id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
-                colSpan: colSpans[index],
-                dataItem: item.dataItem,
-                field: column.field || '',
-                editor: column.editor,
-                format: column.format,
-                readFormat: column.readFormat,
-                type: column.type,
-                className: className,
-                render: columnCellRenderFunction || cellRenderFunction,
-                columnIndex: index,
-                columnsCount: this._columns.filter(function (c) {
-                  return !c.children.length;
-                }).length,
-                rowType: item.rowType,
-                level: item.level,
-                expanded: isExpanded,
-                dataIndex: item.dataIndex
-              },
               colSpan: colSpans[index],
               dataItem: item.dataItem,
-              field: column.field || '',
+              field: column.field || '' // todo
+              ,
               editor: column.editor,
               format: column.format,
               readFormat: column.readFormat,
               type: column.type,
               className: className,
               render: columnCellRenderFunction || cellRenderFunction,
-              onCellclick: this.cellClickHandler,
-              on: this.v3 ? undefined : {
-                "cellclick": this.cellClickHandler,
-                "cellkeydown": this.cellKeydownHandler,
-                "edit": this.editHandler,
-                "remove": this.removeHandler,
-                "save": this.saveHandler,
-                "cancel": this.cancelHandler,
-                "change": this.itemChange,
-                "selectionchange": function selectionchange(e) {
-                  return _this.selectionChangeHandler({
-                    event: e,
-                    dataItem: item.dataItem,
-                    dataIndex: rowDataIndex,
-                    columnIndex: index
-                  });
-                }
-              },
-              onCellkeydown: this.cellKeydownHandler,
-              onEdit: this.editHandler,
-              onRemove: this.removeHandler,
-              onSave: this.saveHandler,
-              onCancel: this.cancelHandler,
-              onChange: this.itemChange,
-              onSelectionchange: function selectionchange(e) {
-                return _this.selectionChangeHandler({
-                  event: e,
-                  dataItem: item.dataItem,
-                  dataIndex: rowDataIndex,
-                  columnIndex: index
-                });
-              },
               columnIndex: index,
               columnsCount: this._columns.filter(function (c) {
                 return !c.children.length;
@@ -1655,11 +1482,63 @@ var GridVue2 = {
               rowType: item.rowType,
               level: item.level,
               expanded: isExpanded,
-              dataIndex: item.dataIndex,
-              style: style
-            })
+              dataIndex: item.dataIndex
+            },
+            colSpan: colSpans[index],
+            dataItem: item.dataItem,
+            field: column.field || '',
+            editor: column.editor,
+            format: column.format,
+            readFormat: column.readFormat,
+            type: column.type,
+            className: className,
+            render: columnCellRenderFunction || cellRenderFunction,
+            onCellclick: this.cellClickHandler,
+            on: this.v3 ? undefined : {
+              "cellclick": this.cellClickHandler,
+              "cellkeydown": this.cellKeydownHandler,
+              "edit": this.editHandler,
+              "remove": this.removeHandler,
+              "save": this.saveHandler,
+              "cancel": this.cancelHandler,
+              "change": this.itemChange,
+              "selectionchange": function selectionchange(e) {
+                return _this.selectionChangeHandler({
+                  event: e,
+                  dataItem: item.dataItem,
+                  dataIndex: rowDataIndex,
+                  columnIndex: index
+                });
+              }
+            },
+            onCellkeydown: this.cellKeydownHandler,
+            onEdit: this.editHandler,
+            onRemove: this.removeHandler,
+            onSave: this.saveHandler,
+            onCancel: this.cancelHandler,
+            onChange: this.itemChange,
+            onSelectionchange: function selectionchange(e) {
+              return _this.selectionChangeHandler({
+                event: e,
+                dataItem: item.dataItem,
+                dataIndex: rowDataIndex,
+                columnIndex: index
+              });
+            },
+            columnIndex: index,
+            columnsCount: this._columns.filter(function (c) {
+              return !c.children.length;
+            }).length,
+            rowType: item.rowType,
+            level: item.level,
+            expanded: isExpanded,
+            dataIndex: item.dataIndex,
+            style: style
           });
-        }, this)
+          return inbuiltSlot;
+        }, this),
+        isInEdit: isInEdit,
+        isSelected: typeof selectedValue === 'boolean' && selectedValue
       };
     };
     var hiddenRows = 0;
@@ -1723,6 +1602,8 @@ var GridVue2 = {
         attrs: this.v3 ? undefined : {
           dataItem: item.dataItem,
           isAltRow: isAlt,
+          isInEdit: dataRow.isInEdit,
+          isSelected: dataRow.isSelected,
           rowType: item.rowType,
           isHidden: hidden(rowIndex),
           selectedField: this.$props.selectedField,
@@ -1732,6 +1613,8 @@ var GridVue2 = {
           dataIndex: dataIndex
         },
         isAltRow: isAlt,
+        isInEdit: dataRow.isInEdit,
+        isSelected: dataRow.isSelected,
         rowType: item.rowType,
         isHidden: hidden(rowIndex),
         onRowclick: function onRowclick(e) {

package/dist/es/interfaces/GridProps.d.ts

@@ -271,7 +271,7 @@ export interface GridProps {
     /**
      * Defines the custom rendering of the row. Accepts a Vue component, a `render` function, or a slot name.
      */
-    rowRender?: string | boolean | ((h: any, defaultRendering: any | null, dafaultSlots: any, props: any, listeners: any) => any);
+    rowRender?: string | boolean | ((h: any, defaultRendering: any | null, defaultSlots: any, props: any, listeners: any) => any);
     /**
      * Defines the custom rendering of the cell. Accepts a Vue component, a `render` function, or a slot name.
      * ([see example]({% slug groupingaggregates_grid %})).

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-grid',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1712919383,
+    publishDate: 1713770264,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };