Grid

This custom control shows a configurable grid with inline editing. It can only be used by getting or setting the value of the control.

Properties

Details

Name, the name of the control.
Data Type, the data type of the control.

General

Width, the width of the control.
Visible, whether the control is shown.
Enabled, whether the control is enabled.

Data Validation

Error Messages (Text), returns a list of rows that have failed validation.

Events

Changed
Initialized

Screenshots

Browser:

Value

Reading the grid control’s value in K2’s Designer will result in it’s current state (in XML), including row values. Setting the control’s value can be done by providing a valid XML value (see Xml Structure).

Columns will be ordered based on the Header’s Index Node in the XML. Rows will be ordered on the Row’s Index Node in the XML.

XML - Structure

The following node structure is used in the XML to render a value:

├── xml definition
└── Grid
  ├── Headers
  ¦ └── Header (1 or more)
  ¦   ├── DataType*
  ¦   ├── DisplayName (Text)
  ¦   ├── Index (Number)
  ¦   ├── Name (Text)
  ¦   └── Width (must be a value that is a valid width in css)
  └── Rows
    └── Row (0 or more)
      ├── Index (Number)
      └── RowItem
        ├── HeaderName (must match one of header names)
        └── Value (must be a valid value for the datatype set in the column)

Header Datatype must match one of the following K2 property types:

Date
DateTime
Decimal
Guid
Memo
Number
Text
Time
YesNo

XML - Examples

Minimal - 1 Header, no rows:

<?xml version="1.0" encoding="utf-8"?>
<Grid xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <Headers>
    <Header>
      <Name>G</Name>
      <Index>0</Index>
      <DataType>Guid</DataType>
    </Header>
  </Headers>
</Grid>

Full - 9 Headers, 1 row:

<?xml version="1.0" encoding="utf-8"?>
<Grid xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <Headers>
    <Header>
      <Name>G</Name>
      <DisplayName>GuidColumn</DisplayName>
      <Index>0</Index>
      <DataType>Guid</DataType>
      <Width>10%</Width>
    </Header>
    <Header>
      <Name>Dc</Name>
      <DisplayName>DecimalColumn</DisplayName>
      <Index>1</Index>
      <DataType>Decimal</DataType>
      <Width>5%</Width>
    </Header>
    <Header>
      <Name>N</Name>
      <DisplayName>NumberColumn</DisplayName>
      <Index>2</Index>
      <DataType>Number</DataType>
      <Width>5%</Width>
    </Header>
    <Header>
      <Name>DT</Name>
      <DisplayName>DateTimeColumn</DisplayName>
      <Index>3</Index>
      <DataType>DateTime</DataType>
      <Width>15%</Width>
    </Header>
    <Header>
      <Name>TI</Name>
      <DisplayName>TimeColumn</DisplayName>
      <Index>5</Index>
      <DataType>Time</DataType>
      <Width>10%</Width>
    </Header>
    <Header>
      <Name>D</Name>
      <DisplayName>DateColumn</DisplayName>
      <Index>8</Index>
      <DataType>Date</DataType>
      <Width>10%</Width>
    </Header>
    <Header>
      <Name>YN</Name>
      <DisplayName>YesNoColumn</DisplayName>
      <Index>13</Index>
      <DataType>YesNo</DataType>
      <Width>3%</Width>
    </Header>
    <Header>
      <Name>M</Name>
      <DisplayName>MemoColumn</DisplayName>
      <Index>21</Index>
      <DataType>Memo</DataType>
      <Width>15%</Width>
    </Header>
    <Header>
      <Name>T</Name>
      <DisplayName>TextColumn</DisplayName>
      <Index>34</Index>
      <DataType>Text</DataType>
      <Width>10%</Width>
    </Header>
  </Headers>
  <Rows>
    <Row>
      <Index>1</Index>
      <RowItem>
        <HeaderName>G</HeaderName>
        <Value>CE9CF50E-4121-4ABF-8584-9A50E3A6D570</Value>
      </RowItem>
      <RowItem>
        <HeaderName>Dc</HeaderName>
        <Value>2.463</Value>
      </RowItem>
      <RowItem>
        <HeaderName>N</HeaderName>
        <Value>012</Value>
      </RowItem>
      <RowItem>
        <HeaderName>DT</HeaderName>
        <Value>2019-10-01T12:54</Value>
      </RowItem>
      <RowItem>
        <HeaderName>TI</HeaderName>
        <Value>04:05</Value>
      </RowItem>
      <RowItem>
        <HeaderName>D</HeaderName>
        <Value>2018-10-01</Value>
      </RowItem>
      <RowItem>
        <HeaderName>YN</HeaderName>
        <Value>false</Value>
      </RowItem>
      <RowItem>
        <HeaderName>M</HeaderName>
        <Value/>
      </RowItem>
      <RowItem>
        <HeaderName>T</HeaderName>
        <Value/>
      </RowItem>
    </Row>
  </Rows>
</Grid>