Telerik Product and Version
|
Q3 2014 (2014.3 1209) or above
|
|
Supported Browsers and Platforms
|
All supported browsers
|
|
Components/Widgets used (JS frameworks, etc.)
|
jQuery
|
PROJECT DESCRIPTION
This Code Library provides an extension for the RadGrid Batch Editing functionality, which allows you to implement
related RadComboBoxes functionality between column and to set
Batch Validation. Each of the functionalities is easily integrated with RadGrid in Batch edit mode through separate managers.
Related RadComboBoxesManager
Due to the way that Batch Editing is implemented, having related drop down controls with enabled LoadOnDemand functionality is almost impossible to be achieved or will require a ton of custom JavaScript. In the attached
BatchExtensions object in this Code Library, the
RelatedComboBoxesManager simulates such functionality by displaying a
RadToolTip with
RadComboBox control over the currently edited cell. The only thing that you need to do to enable the related
RadComboBox functionality is to set the grid object, specify the
RadToolTip containing the
RadComboBox control, set the columns relationships and handle the server-side
OnItemsRequested event of the
RadComboBox to provided the data. Everything else will be handled by the manager.
Integration
Before you start the integration of the
RelatedComboBoxesManager, you need to include the
batchManagerExtensions.js and
batchManagerExtensions.css files in your project. After including those files, you will have to follow the steps below:
1) Copy and paste the following
RadToolTip within the same container as the RadGrid (especially when you are using RadAjax):
2) Add the server-side handler for the
OnItemsRequested event of the
RadComboBox. Within that event you will have access to the column name and the related cell value, which should be enough for getting the items that should be displayed in a particular cell:
3) The next step is to attach event handler for the client-side
OnGridCreated event, where we will initialize the
RelatedComboBoxesManager:
Important Note
The
RelatedComboBoxesManagers will work with
bound columns and
GridTemplateColumn with the following
ItemTemplate:
You should also have in mind that
RelatedComboBoxesManager will work only with
Cell edit mode.
Batch Validation - ValidationManager
Although that Batch Editing supports standard Validatiors, they do not provide a great user experience in the context of Batch Editing, because the user will not be able to leave the cell until the values is valid. Furthermore, the error messages will be displayed besides the editor, which could lead to distorted layout of the grid. The
ValidationManager from the
BatchExtensions is created to handle the validation with Batch Editing in very user-friendly manner, where the error messages is displayed in the cells (in normal mode) and the user will still be able to perform other operations, even if there is failed validation.
Integration
Before you start the integration of the
ValidationManager, you need to include the
batchManagerExtensions.js and
batchManagerExtensions.css files in your project. After including those files, you will have to follow the steps below:
1) Attach event handler for the client-side
OnGridCreated event of your RadGrid:
2) Within the handler for the
OnGridCreated event, initialize a new
ValidationManager for the grid and set your validators for the column that you need to validate:
As you can notice, each validator accepts the
columnName (required) and the following optional properties:
- errorMessage - The message that will be displayed within the cell on failed validation;
- toolTipMessage - The message that will be displayed on hovering over a cell with failed validation;
- validationFunction - Custom validation function that has the current value as an argument and defines on what conditions the value is valid.
ValidationManager Methods
- add_validator({...}) - adds new validator to the ValidationManager:
- add_elementToDisable(element) - adds an element that will be disabled when RadGrid is invalid and has cells with failed validation. By default, the Save Changes button of RadGrid is included in this collection of elements and the user will not be able to save the changes, unless all cells are valid:
- isValid() - this method will return true if all the cells in the grid are valid (this method could be useful within the client-side OnUserAction event of the grid, where you can prevent paging, sorting, filtering, etc., if there is failed validation):