Documentation

Report Edit

Grid with Inline Editing

Grid supports arbitrary content inside its cells. Any widget or even a chart can be put inside it.

NamePhoneCityNotified
ControllerIndex
<Grid
    records-bind='$page.records'
    style={{width: "100%"}}
    columns={[
        {
            header: 'Name',
            field: 'fullName',
            sortable: true,
            style: 'border:none',
            items: <cx>
                <TextField value-bind="$record.fullName" style={{width: '100%'}}/>
            </cx>
        }, {
            header: 'Phone',
            field: 'phone',
            style: 'border:none',
            items: <cx>
                <TextField value-bind="$record.phone" style={{width: '100%'}}/>
            </cx>
        }, {
            header: 'City',
            field: 'city',
            style: 'border:none',
            sortable: true,
            items: <cx>
                <TextField value-bind="$record.city" style={{width: '100%'}}/>
            </cx>
        }, {
            header: 'Notified',
            field: 'notified',
            style: 'border:none',
            sortable: true,
            align: 'center',
            pad: false,
            items: <cx>
                <Checkbox value-bind="$record.notified"/>
            </cx>
        }
    ]}
/>
Copied!Cx Fiddle