@progress/kendo-react-grid/components/GridEditDialog.js

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use client";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react"),x=require("react-dom"),I=require("@progress/kendo-react-layout"),u=require("@progress/kendo-react-buttons"),r=require("@progress/kendo-react-labels"),M=require("@progress/kendo-react-intl"),_=require("@progress/kendo-react-dateinputs"),O=require("@progress/kendo-react-common"),E=require("@progress/kendo-svg-icons"),D=require("@progress/kendo-react-inputs"),C=require("@progress/kendo-react-data-tools"),B=require("@progress/kendo-react-dialogs"),c=require("@progress/kendo-react-form"),w=require("../utils/GridContext.js"),o=require("../messages/index.js");function z(n){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const l in n)if(l!=="default"){const i=Object.getOwnPropertyDescriptor(n,l);Object.defineProperty(d,l,i.get?i:{enumerable:!0,get:()=>n[l]})}}return d.default=n,Object.freeze(d)}const e=z(q),A=n=>{var h;const d=M.useLocalization(),l=O.useAdaptiveModeContext(),i=e.useContext(w.GridContext),g=(a,t)=>{i.onDialogEditSubmit&&i.onDialogEditSubmit({dataItem:a,syntheticEvent:t})},s=a=>{i.onDialogEditCancel&&i.onDialogEditCancel({syntheticEvent:a})},N=a=>{const{validationMessage:t,visited:P,id:f,valid:V,editor:F,value:b,label:k,...S}=a,T=i.mobileMode?"large":"medium";switch(F){case"numeric":return e.createElement(e.Fragment,null,e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(D.NumericTextBox,{...S,size:T,value:b,[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)));case"date":return e.createElement(e.Fragment,null,e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(_.DatePicker,{valid:!0,...S,value:b,adaptive:i.mobileMode,size:T,[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)));case"boolean":return e.createElement("div",{className:"k-form-field-wrap"},e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":  ",e.createElement(D.Checkbox,{...S,size:T,value:b,[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)));default:return e.createElement(e.Fragment,null,e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(D.TextBox,{...S,size:T,value:b||"",[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)))}},p=d.toLanguageString(o.editDialogTitle,o.messages[o.editDialogTitle]),L=d.toLanguageString(o.editDialogSaveButtonTitle,o.messages[o.editDialogSaveButtonTitle]),y=d.toLanguageString(o.editDialogCancelButtonTitle,o.messages[o.editDialogCancelButtonTitle]),R={animation:!0,navigatable:!1,navigatableElements:[],expand:!0,title:i.adpativeTitle||p,suffixActions:e.createElement(u.Button,{svgIcon:E.xIcon,onClick:s,fillMode:"flat"}),animationStyles:l&&i.adaptiveColumnMenuRef<=l.small?{top:0,width:"100%",height:"100%"}:void 0,className:"k-adaptive-actionsheet",position:l&&i.adaptiveColumnMenuRef<=l.small?"fullscreen":void 0},{customEditDialog:v}=n,m=(h=n.columns)==null?void 0:h.filter(a=>a.editable);return e.createElement(e.Fragment,null,x.createPortal(e.createElement(e.Fragment,null,i.mobileMode?e.createElement(e.Fragment,null,v?e.createElement(v,{columns:n.columns,dataItem:n.dataItem,onSubmit:g,onCancel:s}):e.createElement(c.Form,{initialValues:n.dataItem,onSubmit:g,id:"kendo-grid-edit-dialog",render:a=>e.createElement(I.ActionSheet,{...R},e.createElement(I.ActionSheetContent,null,e.createElement(c.FormElement,null,m==null?void 0:m.map(t=>e.createElement(c.FieldWrapper,{key:t.field},e.createElement(c.Field,{name:t.field,id:t.field,editor:t.editor,component:N,label:t.title||t.field,validator:t==null?void 0:t.validator}))))),e.createElement(I.ActionSheetFooter,null,e.createElement(u.Button,{onClick:s,type:"reset",icon:"cancel",size:"large",svgIcon:E.cancelIcon},y),e.createElement(u.Button,{type:"submit",themeColor:"primary",size:"large",disabled:!a.allowSubmit||!a.valid,onClick:a.onSubmit,icon:"save",svgIcon:E.saveIcon},L)))})):v?e.createElement(v,{columns:n.columns,dataItem:n.dataItem,onSubmit:g,onCancel:s}):e.createElement(c.Form,{initialValues:n.dataItem,onSubmit:g,id:"kendo-grid-edit-dialog",render:a=>e.createElement(B.Dialog,{title:p,width:450,onClose:t=>s(t.syntheticEvent)},e.createElement(c.FormElement,null,m==null?void 0:m.map(t=>e.createElement(c.FieldWrapper,{key:t.field},e.createElement(c.Field,{name:t.field,id:t.field,editor:t.editor,component:N,label:t.title||t.field,validator:t==null?void 0:t.validator})))),e.createElement(B.DialogActionsBar,{layout:"start"},e.createElement(u.Button,{type:"submit",themeColor:"primary",disabled:!a.allowSubmit||!a.valid,onClick:a.onSubmit,icon:"save",svgIcon:E.saveIcon},L),e.createElement(u.Button,{onClick:s,type:"reset",icon:"cancel",svgIcon:E.cancelIcon},y)))})),document.body))};exports.GridEditDialog=A;