From 95004fc26224af07ac79edc04d8a3679a5accb87 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Wed, 18 Oct 2023 17:49:05 +0300 Subject: [PATCH] [add] a section on editing columns with type:number into grid/treegrid guides --- docs/assets/grid/col_number_validation.png | Bin 0 -> 3948 bytes docs/grid/configuration.md | 31 ++++++++++++++++++ .../api/api_treegridcolumn_properties.md | 2 +- docs/treegrid/configuration.md | 31 ++++++++++++++++++ 4 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 docs/assets/grid/col_number_validation.png diff --git a/docs/assets/grid/col_number_validation.png b/docs/assets/grid/col_number_validation.png new file mode 100644 index 0000000000000000000000000000000000000000..a7fffd58c5160ed7fba7edd47f7ff6fca755bdce GIT binary patch literal 3948 zcmd54Zd*iYtA^5;RS2au4;?6~(i&=Li|TL{ zG1n}rY9>OfrV?W!67k%--uk}x?wh{#{`&sdXPcaOyliZ2 z01IpXA zxom78J_}<5R9N216z=@cc7De?oYvk&=$LFBhdR8`oD^#|tyT9mD@Z2sPuWOdXwaMG zF2yauXIABIE)fJTj}GO^=5}5r*u0#I_B)pt+)Tho6pIxrjlDd}Hx);1FUy2AyJo41 zU#dFA=rAzQW*(h}5Z4=^swo>fcnS^MpsKwWMRd|I-lkHi($d!()CL5OejJxm;P*(f zY|AbHtAzB4ps^|gfk!`in@YeyS6JSWwy?9(H_ThleiF6O13ZJzY@COi(eA zb+<+)iaMaA+XescChjWp0zHi2YN-dnlA<*5*8ad^{B~T_867}<{+w)J2a@?5N5vGD zvO3QdNQ(F`luA!8f2ymL66{a&usoc9A{(RK@6($u$NwqwL0|qOp4%HYK#KUO{%)Sz zyXyst7vh#Rk;IC;?SmL+U`jEZY;2JYbHQrCV+&#F&(m@hY9EaD|-djmB~*KUtSPtT-pumw^gXs zKIyU|yRsXiK=XC?99nSA0fgt9zGEi;s+;z+vV~#^rwkkc!`VZ_k13|_HR^U(pR+jY z*w9=O);ap_ZV*Uclh5yVQmQfzvXwy0NtChOaA3a`2}ump(FX-{ql>#KQiad^lhL!76*gfW59AiFQ7 zTB$=#eSGGSH8oYb7SRf*R)0dAw22OY&?dFAK`6x8FSs{Jo+PDJD-h=6q>6L)+;0q) zFD-DOB_!#sUX^^J%)ZcCxQ@-eo|-pbG8OE%gT8T$(lkhsu`u5PLZJk+DKDFUe-27I z+L5z#Lbw#l{G=9%etkJUz}@k4JHMO()L>h&(!B8@#Qo)#z7LAzpJXX0&Y2 zsFp}owr8;DrLe+4?1OW><3Cm=-SX} zhHlmgz~e{h8+kT@7#OErWt&I1MT94OqINJ_T{2gS}l+r8vO*EW1}{w+{k7H zPVlQNT$(aa_q>zmSwGMSthF~e9qNtf_wRFa4V7eACCQa*cDGB<$m1I35$~bCgwOf13>3!Ds1d(lJ8DsDoN|tR}mLM{yCUI0~tUg=I zUe2SwSXW%H7GG=&6Ov_=F=L;+>vgWS-xV%VKQ%X?v?zm=)Sy%tSHmQNNX^8-1d^4D zw3V3ns_Uwxt!J?18U9q!BJOrO`U(fAd#V;Ca1j>kaxzPUIe` zqJR4B+;HS##s?!#-^r0a5Nx84M5r4(OHs6BJ&%rkZ3GKJG4i~>#}fLhsigP5d!Me< zvig}n*-T`m9QTLCLm;6U)r;p4ll;EM$6*i+)9!KW)inIQ!E>o`b2(R8WYPUyN~#eg z_$(tRU}rwOK4ha#d&?b2OX*)^-(A@PyJLE2)eKko=dPKgV;rno4|dx%!0sMgzA0B6 z4I!!9@I_~Sv)*hfCV-Kid~xAWX-OCL-Khe_%(zFbi;yUNJ9RXM1BaNK?Nd=vcb?G& zn%?$SOtNh0DYNx9deg6A|3`0%dn~UqDV`MBe!t+s8hFL+40=Pa

RgEaaDh!WF8R z+3z0PZ_N{Yiaxx#+0>5EWw^jG(}bBXS~!m>Pl&t%k1B?FYsgSnF)C5rXJTQ=yO5>N zBirGyGw>7>>7iLR#Q;}ADD^3khGzSAvRB|gxFtFnyF!+%a3$H-r*D#`UPY}-3A^H= z+MM#VsXn&ME_6$MHgZ)!^R{yEeZ^-qdl4S?|E8ZNd;9qTcQ;YeXArHdjM-PSKmJIo zJZII-2QYicddFfqa|&|ZRb)4`h@Z!^uO#BvweiGf>8YYay~_n3>2{TB_(z>Xmg)-s zA&vbSr?zhWL(aEMe+0@A?_QISdBWQRy%R9~Or_*`7~jbTozp*>olCVM=^jVq6nFxs zsy464H45j;-!-DNv_ivn{bxQ$A0v?t*EPo63D7_R`D|NbC1zxfr>ndum8lP|=l;}J zMTf8LiIH=87xiK?r`Cv#+W_zA*-N8aSEsYZ*2oVt?D^uwO`#svNQ*G7K*?8q_bx*? z5SnCD5R;-FV>hw<{2G^xwdCpR3X=#9-EvrXippNdZ65!(t8ww%{@Q@|x;08tYl}Jl zY@ix0z>}rLeMXhXr6cfHikZd*peP`0k`pHY+nLl$k~39pPpCkFFJ9^W%%37S&e@-55 zyv+MVxOs7q3|qqhk3pdg0wLcGgRRIf+LT#5ORI5p48Q9~)Z4TDQ0Cb$Ym5p=*Ne39>`WK znZy5y({+~m#iisQFvEY1OQQ+X#UyMkTyXPfqFigRiaUzWRqKkT*!`C-sKCHLim{#H zcW>~}#Dv7z@~kZ3>%E7kv_2;o7aUMX)4P8P_y5iOy|z}LE?6Wu+Y}J;_aykB z4g5C*Sh~F;XMv}4sARcEJgwfv)M?z&kqB+grixqQ=n6s<^>3klGF~$ZXI3p_L%!Uy zTPoamT5D$y|RTzS!TRpag_tJkfE)bP>bNy6`AUH@! z*n5s!=yB0@tcw|v7}9Ma9l7o9Zad_FbnJ9s-N>KLuwFYfUWUCQP^X(~GhTkg-D`HI zSsLoU^n$#Y8CJkiSexrpiru`>P4aIC_4d1ZhEO@Y=x~It(s5N!5i`wMi^~gQo1**v zigL78my4G>cb0>`jQC#Z@dmM4iy`ZP?Mbt+z2n(+r;^Q9ZQy$(v(f5P0Nuz~qx}IP z(Lv-VB49#(ckk>25m^^H9cYA1OfB2&oIv*Gi&THyN6@l6-l;ipY+BUF@3tW9uwZgw zLl-OvPaQU8>KDMNEr=5MeR`8W)+PqenE~Wjpb`&VlNxR)H zLO>s~TE>CEO|a{?;zA8GINdxWjxd5m}|iI?x62GNA@&HJ>{$JB1^LPG|)EswpB+je#a|Piwo^Etkn{&RnX=;fxHW)TZt6N#yHT&U*Aed^&q) zj4zCwrY?7~3%>u=9t^R8=>5v`mg2Ea%ahXMHj$mVX0J`t+dlHp%C*=X&7WD3BlEiR z#J7C*X`6K=ZXiSh{uD>}eqy^r`A%IzWPEZdwJwJs7whR*g5L2mD?BthD!LUfXmZuJ;C4iWP-cRZ(*ED|7wW!O=hrYTU*Q)AlQNry MiLG&kq1&Cm09c-5H2?qr literal 0 HcmV?d00001 diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index 86f33175..fc9b446a 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -868,6 +868,37 @@ There is a list of [configuration settings](grid/api/api_gridcolumn_properties.m } ~~~ +### Editing columns with the "number" type + +For columns with the **type:"number"** setting the **editorConfig** object may contain additional properties, besides the [common ones](grid/api/api_gridcolumn_properties.md#editorconfig). They are: + +- **min** - (optional) the minimum allowed value +- **max** - (optional) the maximum allowed value + +~~~js +const grid = new dhx.Grid("grid", { + columns: [ + { + id: "col1", + width: 180, + type: "number", + editorConfig: { min: 5, max: 100 }, + }, + // more columns + ] +}); +~~~ + +In case a user enters a value that goes beyond the limits specified by the above settings, the entered value is highlighted in red: + +![Validation of columns with the number type](../assets/grid/col_number_validation.png) + +If the user ignores the warning and still tries to enter an unallowable value, it will be replaced with the minimum/maximum value defined in the **editorConfig** object by the **min/max** values. Thus, in the above example the entered value `200` will be replaced with `100`, since it is the upper limit set in the editor configuration. + +:::note +In the autoHeight:true mode columns with the type:"number" must have the editor with the "input" type, unless a different editor type is specified. +::: + ### Editable combobox From v7.3, you may allow end users to add new options into the combobox editor ([editorType: "combobox"](#types-of-column-editor)) from UI. To activate the functionality, specify the **newOptions: true** attribute of the **editorConfig** property in the configuration of the [column](grid/api/api_gridcolumn_properties.md): diff --git a/docs/treegrid/api/api_treegridcolumn_properties.md b/docs/treegrid/api/api_treegridcolumn_properties.md index fdc065f6..168ed936 100644 --- a/docs/treegrid/api/api_treegridcolumn_properties.md +++ b/docs/treegrid/api/api_treegridcolumn_properties.md @@ -219,7 +219,7 @@ columns:[

  • selectAllButton - (optional) adds a button that allows selecting all the options in the editor

- If the type: "date" is specified for a column, the editorConfig object can include a set of properties of Calendar (except for the value, range, and dateFormat ones).
+ If the type: "date" is specified for a column, the editorConfig object can include a set of properties of Calendar (except for the value, range, and dateFormat ones).

If the type:"number" is specified, the editorConfig object can include two more properties:
  • min - (optional) the minimum allowed value
    • diff --git a/docs/treegrid/configuration.md b/docs/treegrid/configuration.md index b4528cfb..3f114bd7 100644 --- a/docs/treegrid/configuration.md +++ b/docs/treegrid/configuration.md @@ -878,6 +878,37 @@ There is a list of [configuration settings](treegrid/api/api_treegridcolumn_prop } ~~~ +### Editing columns with the "number" type + +For columns with the **type:"number"** setting the **editorConfig** object may contain additional properties, besides the [common ones](treegrid/api/api_treegridcolumn_properties.md#editorconfig). They are: + +- **min** - (optional) the minimum allowed value +- **max** - (optional) the maximum allowed value + +~~~js +const treegrid = new dhx.TreeGrid("treegrid", { + columns: [ + { + id: "col1", + width: 180, + type: "number", + editorConfig: { min: 5, max: 100 }, + }, + // more columns + ] +}); +~~~ + +In case a user enters a value that goes beyond the limits specified by the above settings, the entered value is highlighted in red: + +![Validation of columns with the number type](../assets/grid/col_number_validation.png) + +If the user ignores the warning and still tries to enter an unallowable value, it will be replaced with the minimum/maximum value defined in the **editorConfig** object by the **min/max** values. Thus, in the above example the entered value `200` will be replaced with `100`, since it is the upper limit set in the editor configuration. + +:::note +In the autoHeight:true mode columns with the type:"number" must have the editor with the "input" type, unless a different editor type is specified. +::: + ### Editable combobox From v7.3, you may allow end users to add new options into the combobox editor ([editorType: "combobox"](#types-of-column-editor)) from UI. To activate the functionality, specify the **newOptions: true** attribute of the **editorConfig** property in the configuration of the [column](treegrid/api/api_treegridcolumn_properties.md):