This example showcases the ability to edit the cells of the Grid similar to an Excel spreadsheet.
To edit a cell simply click it with the mouse. You can use the keyboard to navigate through cells.
When clicking the "Save Changes" button all the changes from the Grid are saved into the database at once.
You can also add new records or delete existing ones.
Currently the excel style feature may be enabled only as a custom solution using templates.
First, you need to load the "excel-style.js" file from the "oboutSuite / Grid / resources / custom_scripts / excel-style" folder at the bottom of your page:
<script type="text/javascript" src="resources/custom_scripts/excel-style/excel-style.js"></script>
You also need to load the custom stylesheet required by this feature (e.g. in the
<head> section):
<link href="resources/custom_scripts/excel-style/excel-style.css" rel="stylesheet" type="text/css" />
Then, call the
convertToExcel client-side method for the Grid that you want to expose excel-style features:
Grid1.convertToExcel(
columnTypes
dataContainerHiddenId,
deletedIdsHiddenId
);
columnTypes - an array indicating the type of each column;
dataContainerHiddenId - the client-side ID of a hidden field which will store the data for the Grid;
endColumnIndex - the client-side ID of a hidden field which will store the ids of the deleted rows;
For example:
Grid1.convertToExcel(
['ReadOnly', 'TextBox', 'TextBox', 'MultiLineTextBox', 'ComboBox', 'TextBox', 'CheckBox', 'Actions'],
'<%=Grid1ExcelData.ClientID %>',
'<%=Grid1ExcelDeletedIds.ClientID %>'
);
For the source code please check the "aspnet_commands_excel_style_full.aspx" sample from the Grid folder in the
Suite.