Inline editing mode.
Examples
Double Click
<table id="grid"></table>
<script>
var grid = $('#grid').grid({
dataSource: '/Players/Get',
primaryKey: 'ID',
inlineEditing: { mode: 'dblclick' },
columns: [
{ field: 'ID', width: 56 },
{ field: 'Name', editor: true },
{ field: 'PlaceOfBirth', editor: true }
]
});
</script>
Command
<table id="grid"></table>
<script>
var grid, data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo LuÃs Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' },
{ 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany' },
{ 'ID': 5, 'Name': 'James RodrÃguez', 'PlaceOfBirth': 'Cúcuta, Colombia' },
{ 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria' }
];
grid = $('#grid').grid({
dataSource: data,
primaryKey: 'ID',
inlineEditing: { mode: 'command' },
columns: [
{ field: 'ID', width: 56 },
{ field: 'Name', editor: true },
{ field: 'PlaceOfBirth', editor: true }
],
pager: { limit: 3 }
});
</script>
DateTime
<table id="grid"></table>
<script>
var grid, data = [
{ 'ID': 1, 'Date': '05/15/2018', 'Time': '21:12', 'DateTime': '21:12 05/15/2018' },
{ 'ID': 2, 'Date': '05/16/2018', 'Time': '22:12', 'DateTime': '22:12 05/16/2018' },
{ 'ID': 3, 'Date': '05/17/2018', 'Time': '23:12', 'DateTime': '23:12 05/17/2018' }
];
grid = $('#grid').grid({
dataSource: data,
primaryKey: 'ID',
inlineEditing: { mode: 'command' },
columns: [
{ field: 'ID', width: 56 },
{ field: 'Date', type: 'date', format: 'mm/dd/yyyy', editor: true },
{ field: 'Time', type: 'time', format: 'HH:MM', editor: true },
{ field: 'DateTime', type: 'datetime', format: 'HH:MM mm/dd/yyyy', editor: true }
]
});
</script>