Hello,
I'm working with an MVC5 project, and I'm trying to figure out the best way to approach this problem. In my grid, there is a column for "Name" which displays a particular name that has meaning in my business logic. This column is not the primary key of the grid. However, the rule is that "Name" must be unique for all items in the collection, so if the user edits a row in the grid and changes the Name to one that is already in use, I need to prevent that.
Looking through the iggrid documentation, I wasn't sure if there is a validation option in the MVC helper that I could use, or if it would be better for me to do something with the editRowEnding event, perhaps, and check the new Name against all of the other names in the grid. Ideally, I'd like to provide a little validation message on the cell (like what I see when I mark a cell as required and don't input a value), and of course I need to stop the row from being updated.
I'm mainly posting because I didn't want to lose a lot of time chasing an approach that doesn't make good use of the API, and since this has probably been done before, I wanted to see if others had any opinions about how to approach this.
Thanks!
Hello kylemilner ,
Thank you for posting in our forum.
There’s no built-in validation option that would check if a cell value is unique in a column.
You could however add some custom validation so that a custom error message would appear if the value of the edited cell is available in another cell of the column.
You can achieve this by using the checkValue event of the editor’s validation. It will be raised when the value in the editor is changed.
You can define the validation options for the editor of a column inside the columnSettings of the Updating feature.
Here’s an example:
columnSettings: [
{ columnKey: "Name", editorOptions: { type: "text",validatorOptions : {onblur: true, keepFocus: "once",
checkValue: function (evt, ui) {
…}
In the checkValue event you can get the current value that’s being validated, loop trough the rows to check if there’s such a value in any other cell and if there is you can set a custom error message and display it.
The code could look similar to this:
var value= ui.value;
//check for a matching value in all rows(except the currently edited row)
var rows = $("#grid").igGrid("rows");
for (var i = 0; i < rows.length; i++) {
var currentRow=rows[i];
var currentValue = $("#grid").igGrid("getCellValue", $(currentRow).attr("data-id"), "Name");
//if there are editing cells in the row, then this is the row that is being edited. So we should skip the check for its value.
if(value==currentValue && $(currentRow).find(".ui-iggrid-editingcell").length==0 )
{
// set a custom error message
ui.message="This value alredy exist in the column.Duplicated values are not allowed.";
//Return false in order to consider value as invalid and to display error message.
return false;
}
I’ve attached a sample for your reference. Let me know if this approach would work in your scenario.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://www.infragistics.com/support
Hi! I tried to do the same, but nothing happens. It looks like the event not raises. I've downloaded the sample and write it in Razor
This is my code:
@(Html.Infragistics() .Grid(Model) .ID("DeliveryMethodsGrid") .Width("100%") .PrimaryKey("ID") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .Columns(column => { column.For(x => x.Name).HeaderText("Name").Width("100%");
}) .Features(features => { features.Filtering().Mode(FilterMode.Advanced).ColumnSettings(setting => { setting.ColumnSetting().ColumnKey("Name").AllowFiltering(true);
}); features.Updating().EditMode(GridEditMode.None).EnableAddRow(true).EnableDeleteRow(true).ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("Name").Required(true).EditorOptions("type: 'text',validatorOptions: { onblur: true, keepFocus: 'once', checkValue: function(evt, ui) { var value = ui.value; var rows = $('#DeliveryMethodsGrid').igGrid('rows'); for (var i = 0; i < rows.length; i++) { var currentRow = rows[i]; var currentValue = $('#DeliveryMethodsGrid').igGrid('getCellValue', $(currentRow).attr('data-id'), 'Name'); if (value == currentValue && $(currentRow).find('.ui-iggrid-editingcell').length == 0) { ui.message = 'This value alredy exist in the column. Duplicated values are not allowed.'; return false; } } }}"); }); features.Sorting().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("Name").AllowSorting(true); }); }) .DataSourceUrl(Url.Action("GetAllForGrid")) .UpdateUrl(Url.Action("SaveGrid")) .DataBind() .Render())