Hello

Here is the JS code for adding and updating records from igGrid.

 $("#Sites").live("iggridupdatingeditrowending", function (event, ui) {
           // ui.update=true;
                // Récupère les valeurs des champs
                var  codeSite = ui.values["Site"];
                //var codeSite = $("#Sites").igGrid("getCellValue", ui.rowID, "Site");
                var description = ui.values["Description"];
                var nom = ui.values["Nom"];
                var adresse1 = ui.values["Adresse1"];
                var adresse2 = ui.values["Adresse2"];
                var codePostal = ui.values["CodePostal"];
                var ville = ui.values["Ville"];
                var contact = ui.values["Contact"];
                var telephone = ui.values["Telephone"];
                var siret = ui.values["Siret"];

                // Mode édition --> Modification du site
                if (ui.update && ui.rowAdding == false) {
                 ... CODE TO UPDATE calling URL on controller

                //refresh

                window.location.href = url;                
             }
             else  // Mode ajout --> Création du site
                if (ui.update && ui.rowAdding == true) {
                  ... CODE TO UPDATE RECORD
                window.location.href = url2;
             }
        });

Here is the code to define grid from MVC ASPX view

 <%= Html.Infragistics().Grid(Model.ListeSites).ID("Sites").AutoCommit(true).PrimaryKey("Site").AutoGenerateColumns(false).EnableHoverStyles(false).Columns(column =>
    {
        column.For(x => x.Site).HeaderText("Site").Width("45");
        column.For(x => x.Description).HeaderText("Description").Width("150");
        column.For(x => x.Nom).HeaderText("Nom").Width("100");
        column.For(x => x.Adresse1).HeaderText("Adresse 1").Width("100");
        column.For(x => x.Adresse2).HeaderText("Adresse 2").Width("100");
        column.For(x => x.CodePostal).HeaderText("Code postal").Width("100");
        column.For(x => x.Ville).HeaderText("Ville").Width("90");
        column.For(x => x.Contact).HeaderText("Contact").Width("90");
        column.For(x => x.Telephone).HeaderText("Téléphone").Width("90");
        column.For(x => x.Siret).HeaderText("Siret").Width("90");
    })
        .Features(features =>
        {
            features.Paging().Type(OpType.Local).PageSize(20);
            features.Sorting().Mode(SortingMode.Single);
            if (User.IsInRole(((int)Andra.PriscaND.Business.Model.RoleName.Administrateur).ToString()))
            {
                features.Updating()
                    .EnableAddRow(true)
                    .EnableDeleteRow(true)
                    .EditMode(GridEditMode.Row)
                    .ColumnSettings(settings =>
                    {
                        settings.ColumnSetting().ColumnKey("Site").ReadOnly(false).EditorType(ColumnEditorType.Text).Required(true).Validation(true)
                                                                    .EditorOptions(@"validatorOptions: {requiredMessage: 'Site obligatoire'}, maxLength:3");
                        settings.ColumnSetting().ColumnKey("Description").EditorType(ColumnEditorType.Text).Required(true)
                            //.EditorOptions(@"validatorOptions: {errorLabel: 'GridValidation', onChange: true}");
                                                                    .EditorOptions(@"validatorOptions: {requiredMessage: 'Description obligatoire'}, maxLength:250");
                        settings.ColumnSetting().ColumnKey("Nom").ReadOnly(false).EditorOptions("maxLength:50");
                        settings.ColumnSetting().ColumnKey("Adresse1").ReadOnly(false).EditorOptions("maxLength:50");
                        settings.ColumnSetting().ColumnKey("Adresse2").ReadOnly(false).EditorOptions("maxLength:50");
                        settings.ColumnSetting().ColumnKey("CodePostal").ReadOnly(false).EditorOptions("maxLength:20");
                        settings.ColumnSetting().ColumnKey("Ville").ReadOnly(false).EditorOptions("maxLength:50");
                        settings.ColumnSetting().ColumnKey("Contact").ReadOnly(false).EditorOptions("maxLength:50");
                        settings.ColumnSetting().ColumnKey("Telephone").ReadOnly(false).EditorOptions("maxLength:20");
                        settings.ColumnSetting().ColumnKey("Siret").ReadOnly(false).EditorOptions("maxLength:14");
                    });
            }
        }).DataBind().Render()%>

My problem is :

If a begin an update of an existing row, and then click outside of the edited row, we enter into the iggridupdatingeditrowending callback function and we cannot differentiate if this is an effective end of edition or an abord of edition.

We tried using iggridupdatingeditrowended and we had the same problem.

Maybe we don't understand something with the edition process by igGrid.

I hope this will be more understandable.

Regards,

Hardis

How can we add additional row in a grid based on a button click?

This sounds great !

Thank's for your help.

Regards,

Hardis

Hello Hardis,

You can use the iggridupdatingeditrowending event for the purpose.

If user has clicked Cancel button ui.update will be false.

If user has clicked Done button or he has clicked on another row then  ui.update will be true.

If you want to differentiate if he has clicked on another row or Done button then you should use the original event.

If another row has been clicked its type is "mousedown". If Done button is clicked its type is "click"

$("#grid1").live("iggridupdatingeditrowending", function (evt, ui) {

            var original = evt.originalEvent;

            var update = ui.update;

            if (update && original.type == "mousedown") {

                ui.keepEditing = true;             

                // TO DO

            }

        });

Hope this helps.