Previous <<< Calculations tutorial | Next >>> Expert tutorial |
<html> <head> <link id=GridCSS href="../Grid/Grid.css" title="GridStyle" type="text/css" rel="stylesheet"> <script src="../Grid/GridE.js"> </script> </head> <body> <div style="width:100%;height:100%;"> <treegrid Data_Url="EditingX ... .xml"> </treegrid> </div> </body> </html>If you modify in input data some attributes saved to cookies, increase <Cfg> attribute Version to suppress old configuration.
Show example | Show data source | |
|
By default are all cells editable. You can suppress editing for whole grid by <Cfg
Editing='0'>.
Or you can suppress editing for column, row or cell by setting appropriate CanEdit attribute to 0.
Basic types for editing are Text, Int, Float are edited in <input> textbox, Date is edited in <input> textbox with possibility to show calendar, Enum is edited in <select> and Bool is edited by checkbox. For number formats (Int, Float and Date) you can set advanced options in EditFormat attribute. See TreeGrid cell formats. The items (options) of Enum type are set by Enum attribute, the indexes higher then items count are displayed as integer and formatted by IntFormat attribute. See in example, there are various edit formats in cells. For number formats are also permitted only some keys when editing - digits and separators. By default grid does not handle empty values for number and date types, you can change this behavior by <Cfg> attributes EmptyNumber and EmptyDate. Editing you can control dynamically by JavaScript API events OnStartEdit and OnEndEdit. Also cell types and permissions you can control in events OnCanEdit, OnGetType, OnGetFormat, OnGetEnum. |
<Grid> <Cfg id='Editing1' Sorting='0' EmptyNumber='- empty -' EmptyDate='- none -'/> <Cols> <C Name='A' Type='Text'/> <C Name='B' Type='Int'/> <C Name='C' Type='Float'/> <C Name='D' Type='Date' Width='90'/> <C Name='E' Type='Date' Button='None' Format='HH:mm:ss'/> <C Name='F' Type='Enum' Enum='|one|two|three' IntFormat='(##)'/> <C Name='G' Type='Bool'/> </Cols> <Header A='Text' B='Int' C='Float' D='Date' E='Date' F='Enum' G='Bool'/> <Body> <B> <I/> <I A='Text 1' B='0' C='3.14' D='1/1/2000' E='10:12:30' F='0' G='0'/> <I A='Text 2' B='20' BEditFormat='000' C='7' CEditFormat='000' D='12/31/2005' DEditFormat='MM/dd' E='4:15' EEditFormat='H:mm' F='1' G='1' GCanEdit='0'/> <I A='Text 3' ACanEdit='0' B='-3' C='-13.256' CEditFormat='0.0000' D='7/12/1900' DButton='None' DEditFormat='M/d/yyyy' E='23:59:59' EEditFormat='HH:mm' F='2' FCanEdit='0' G='1'/> <I A='Text 4' B='1234' C='0.032' CEditFormat='00.000' D='5/20/2010' DEditFormat='M/d/yy' E='00:00:00' EEditFormat='H:m:s' F='8' G='0'/> </B> </Body> </Grid> |
Show example | Show data source | |
|
If you want to use multiline editing, you need to permit variable row height by <Cfg
VarHeight='1'>.
The VarHeight can slow down grid rendering for large grids and is not recommended to use with paging.
You can set maximal height for every row by MaxHeight attribute. Multiline editing is set by cell type Lines. For editing is used <textarea>. If you want to predefine values containing new line character, you can write it to XML by its entity 
 If you want to use Enter key for inserting new lines to textarea, set <Cfg AcceptEnters='1'>. To finish editing an user must use Alt+Enter or Ctrl+Enter key now. When some value cannot be edited and row's height is restricted is good to set CanEdit='2' to suppress editing, but let user to click to cell and see all content. |
<Grid> <Cfg id='Editing2' AcceptEnters='1' VarHeight='1'/> <Cols> <C Name='A' Type='Text' Width='40'/> <C Name='B' Type='Lines' Width='130'/> <C Name='C' Type='Lines' Width='130'/> </Cols> <Body> <B> <I A='Text 1' B='Short text' C='Short text'/> <I A='Text 2' B='Short text' C='Long text, one two three four five six seven eight nine ten'/> <I A='Text 3' B='Long text, one two three four five six seven eight nine ten' C='Long text, one two three four five'/> <I A='Text 4' B='Long text
with enters
Bla bla plus' C='OneLongLineOfTextOneTwoThreeFourFive'/> <I MaxHeight='45' A='Text 5' B='Very long text, one two three four five six seven eight nine ten eleven twelve thirteen' CCanEdit='2' C='Very long text, one two three four five six seven eight nine ten eleven twelve thirteen'/> </B> </Body> </Grid> |
Show example | Show data source | |
|
Base predefined masks are applied by various cell types, but especially for types
Text and
Lines
you can define your own mask by any RegExp string.
You can set attribute EditMask. This mask is applied when editing, it immediatelly restricts user from writing text that is colliding with the mask. You can also set attribute ResultMask. This mask is applied after user accepts changes and saves changed value and if the result value collides with the mask, does not leave edit mode. In EditMask is usually permitted blank value and is generally less restrictive to simplify editing then ResultMask. See also attributes MaskColor and ResultText. The cell value in input xml data must not collide with its mask or an user could not edit the value. It is better to test mask in external script before is included in grid. The mask often starts with ^ and ends with $ to apply it on whole text. |
<Grid> <Cfg id='Editing3' AcceptEnters='1' VarHeight='1'/> <Cols> <C Name='A' Type='Text' Width='200'/> <C Name='B' Type='Lines' Width='110' CanEdit='0'/> </Cols> <Header A='Text' B='Mask'/> <Body> <B> <I A='abcdef' AMaskColor='blue' AEditMask='^[a-z]*$' B='only small letters'/> <I A='123456' AEditMask='^[0-9]*$' B='only digits'/> <I A='support@coqsoft.com' AEditMask='^[\w\.-]*@[\w\.-]*\.[a-zA-Z\.]*$' AResultMask='^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$' AResultText='Given email address is incorrect !' B='email'/> <I A='sales@coqsoft.com' AResultMask='^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$' AResultText='Given email address is incorrect !' B='email post validation'/> <I A='http://www.coqsoft.com/treegrid/' AEditMask='^http\:\/\/' AResultMask='^http\:\/\/\w{1,}\.[\w\.]{1,}\/' B='WWW URL'/> <I AType='Lines' A='Name: TreeGrid support
Email: support@coqsoft.com' AEditMask='^Name\: [a-zA-z\.\- ]*\r?\nEmail\: [\w.-@]*$' AResultMask='^Name\:\s[a-zA-z][a-zA-z\.\- ]*\r?\nEmail\: [a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$' B='Name and email
Alt+Enter to accept'/> </B> </Body> </Grid> |
Show example | Show data source | |
|
There other cell types with special editing:
Link is link with url and optional text. You can edit both or url only. This you can specify by EditFormat attribute. Img is image with source, optional extents and position and optional link. You can edit only specified parts, by EditFormat attribute. Look also at Formatting images and links. Pass is password input, there is no special settings for this type. But remember, password in data sent to server is not coded. Radio is enumeration integer type displayed as radio buttons or check boxes. You can control all settings by Format attribute. There are two modes of Radio type controlled by 5. bit (&16) of the first item in Format. In the first mode can be only one radio button checked, the value specifies the position of radio button. In the second mode can be more radio buttons checked, the value specifies bit mask of checked radio buttons. List is html type to show different values with the same formatting, it is intended just to shrink input XML and is expected to be read only. |
<Grid> <Cfg id='Editing4' AcceptEnters='1' VarHeight='1' Version='2'/> <Cols> <C Name='X' CanEdit='0'/> <C Name='A'/> <C Name='B' CanEdit='0'/> </Cols> <Header X='Name' A='Editable' B='Noneditable'/> <Def> <D Name='Link' X='Link' AType='Link' BType='Link'/> <D Name='Img' X='Img' AType='Img' AFormat='|||||||1' BType='Img' BFormat='|||||||1'/> <D Name='List' X='List' AFormat='|0||||<B style="color:red">|</B>|||||<B style="color:green">|</B>|||||<B style="color:blue">|</B>' BFormat='|0||||<B style="color:red">|</B>|||||<B style="color:green">|</B>|||||<B style="color:blue">|</B>' AType='List' BType='List'/> </Def> <Body> <B> <I AType='Link' BType='Link' A='|http://www.treegrid.com' B='|http://www.treegrid.com'/> <I AType='Link' BType='Link' A='|http://www.treegrid.com|TreeGrid' B='|http://www.treegrid.com|TreeGrid'/> <I AType='Link' BType='Link' AEditFormat='|2|1|1' A='|http://www.treegrid.com|TreeGrid' B='|http://www.treegrid.com|TreeGrid'/> <I AType='Img' BType='Img' A='|../Grid/Toolbar.gif' B='|../Grid/Toolbar.gif'/> <I AType='Img' BType='Img' A='|../Grid/Toolbar.gif|||||http://www.treegrid.com' B='|../Grid/Toolbar.gif|||||http://www.treegrid.com'/> <I AType='Img' BType='Img' AEditFormat='|2|1|0|1' A='|../Grid/Toolbar.gif|||||http://www.treegrid.com' B='|../Grid/Toolbar.gif|||||http://www.treegrid.com'/> <I AType='Img' BType='Img' AEditFormat='|2|1|1|1' A='|../Grid/Toolbar.gif|20|17|28|0|http://www.treegrid.com' B='|../Grid/Toolbar.gif|20|17|28|0|http://www.treegrid.com'/> <I X='Pass' AType='Pass' BType='Pass' A='abc' B='abc'/> <I X='Radio' AType='Radio' A='6' AFormat='|1||||||0|1|2|3|4|5|6|7|8|9|10' BType='Radio' B='6' BFormat='|1||||||0|1|2|3|4|5|6|7|8|9|10'/> <I X='Radio' AType='Radio' A='6' AFormat='|48||||||1|2|4|8|16' BType='Radio' B='6' BFormat='|48||||||1|2|4|8'/> <I Def='List' A='|R|G|B' B='|R|G|B'/> <I Def='List' A='|One |Two |Three ' B='|One |Two |Three '/> </B> </Body> </Grid> |
Show example | Show data source | |
|
On the right of any cell you can show button and specify action to do after click.
It can be set in column or cell attribute
Button.
By default is for cell type Date specified button "Date", for other types "None". There are four possible Button options:
|
<Grid> <Cfg id='Editing5' Sorting='0' MainCol='A'/> <Cols> <C Name='A' Type='Text' Width='110' Button='Defaults' Defaults='|*RowsSibling'/> <C Name='B' Type='Date' Width='110'/> <C Name='C' Type='Int' Width='60'/> </Cols> <Header A='Text' B='Date' C='Int'/> <Head> <I Kind='Filter' ADefaults='|*RowsAll' BButton='Defaults' BDefaults='|*Date|*RowsAll'/> </Head> <Body> <B> <I A='One' B='1/1/2000' C='4' CButton='Defaults' CDefaults='|*RowsAllMax3' CanFilter='0'> <I A='One A' B='12:30' BButton='None' BFormat='HH:mm' C='1'/> <I A='One B' B='6/7/2005' C='1'/> </I> <I A='Two' AButton='None' B='12/31/2006' C='1' CButton='Defaults' CDefaults='|*RowsAll'/> <I A='Three' ADefaults='|*RowsSiblingMax5' B='12/31/2006' C='2' CButton='Defaults' CDefaults='|*RowsAllMax3|10|20|30'/> <I A='Four' ADefaults='|1|2|3|4|5|6|7|8|9' B='12/31/2006' BButton='Button' BButtonText='Click' BWidthPad='40' C='1'/> <I A='Five' AButton='Button' AButtonText='Click' AWidthPad='30' B='12/31/2006' C='3'/> <I A='Six' ADefaults='|*Button|*RowsSiblingMax5' B='12/31/2006' C='1'/> <I A='Seven' ADefaults='|*Button|1|2|3' B='12:30' BFormat='hh:mm tt' BButton='None' C='2'/> <I A='Eight' AButton='None' B='12/31/2006' BButton='Defaults' BDefaults='|*RowsSibling|*Date' C='4'/> <I A='Nine' AButton='None' B='12/31/2006' BButton='None' C='5'/> </B> </Body> </Grid> |
Previous <<< Calculations tutorial | Next >>> Expert tutorial |