Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Andy
250
MVC3 Grid edit Dialog
posted

I would like to display a dialog with some igEditors in it when the user is editing a row in a igGrid instead of using the default mode that is provided with the grid. Is there a way to override that event or wire up a jquery function to display a dialog when the grid row enters edit mode.

 

Currently I use an action link (from post https://es.infragistics.com/community/forums/f/ignite-ui-for-javascript/58692/links-inside-a-grid) in the grid rows to send them to another view and then when they are done editing the data and it is saved they are  redirected back to the main page.

 

I am new to both MVC and jquery so any code samples/examples would be much appreciated.

Thank you in advance

MVC 3, C# Razor

Parents
No Data
Reply
  • 24497
    posted

    Hi jagwynn,

    I wrote example for you which supresses default functionality of grid-updating to start row-editing and instead shows dialog (startEditDialog ) which contains fields for desired columns. Those fields are initialized with values of cells located in row. On OK button, values from dialog-fields are used to update row in grid.

    If igGrid is created by javascript application, then it is easier to use member-event-option editRowStarting. If igGrid is created by Mvc application, then you should use "live" feature of jquery. In this case you will not need codes related to create grid:
     - variables gridData, colors, names
     - statement $("#grid1").igGrid({...});
     - <table id=grid1></table>

    For simplicity processing, that sample uses ids of dialog-fields on base of column-keys of grid. Also editors in that example are plain INPUTs, so, they set string values to modified cells. If application uses other data types, then special editors (like igDateEditor, igNumericEditor, etc), can be used, or application may to convert specific values to desired type within "set" (click event of dialogOK).
    Please read comments in javascript below.

    <head>
    //application should have <link>s for css and <script>s for jquery and infragistics files

     <script type="text/javascript">
     // Reference to event arguments used to start editing.
     // It is also used as container of grid-column-keys.
     // That allows to simplify logic used on end editing.
     var gridUpdating,
      // reference to edit-dialog
      editDialog,
      // data source of grid
      gridData = [],
      i = -1,
      colors = ['Red', 'Orange', 'Pink', 'Yellow', 'Green'],
      names = ['Jet', 'Train', 'Car', 'Boat'];
     // create data for grid
     while (i++ < 10) {
      gridData[i] = {
       'ProductID': i,
       'Name': names[i % 4],
       'Color': colors[i % 5],
       'ListPrice': Math.pow((6 - i % 4), 7) * 1.25 + i
      };
     }

     $(function () {
      // create grid
      $("#grid1").igGrid({
       autoGenerateColumns: true,
       defaultColumnWidth: '150px',
       features: [ {
        /*
        // example to process event which is raised before start-edit-row
        // when igGrid is created by javascript, rather than Mvc helper
        editRowStarting: function (evt, ui) {
         // open dialog with fields
         startEditDialog(ui);
         // cancel default editing
         return false;
        },
        */
        name: 'Updating'
       } ],
       dataSource: gridData
      });

      // process event which is raised before start-edit-row (for Mvc)
      $("#grid1").live("iggridupdatingeditrowstarting", function (evt, ui) {
       // open dialog with fields
       startEditDialog(ui);
       // cancel default editing
       return false;
      });

      // process OK button and update grid with data from dialog
      $('#dialogOK').click(function () {
       // keys of grid-columns
       var keys = gridUpdating.keys,
        len = keys.length,
        // new values
        values = [];
       // fill values from dialog-editors
       while (len-- > 0) {
        values[keys[len]] = $('#' + keys[len] + 'Editor').val();
       }
       // update row in grid
       gridUpdating.owner.updateRow(gridUpdating.rowID, values);
       // close dialog
       editDialog.dialog('close');
      });

      $('#dialogCancel').click(function () {
       editDialog.dialog('close');
      });
     });

     function startEditDialog (ui) {
      var key, val, i = -1,
       // columns in grid
       columns = ui.owner.grid.options.columns,
       len = columns.length;
      // show which row is currently editing
      $('#rowID').html('Edit Row #' + ui.rowID);
      // save reference to arguments used by this event (for easier processing end editing)
      gridUpdating = ui;
      // optional old values in case application will need to verify new value on end editing
      ui.oldValues = {};
      // column keys (used to simplify end editing)
      ui.keys = [];
      // loop through all columns of grid and initialize editors
      while (++i < len) {
       // grid-column key
       key = columns[i].key;
       // save column key
       ui.keys.push(key);
       // get value of cell in row at column
       val = ui.owner.grid.getCellValue(ui.rowID, key);
       //or
       //val = ui.owner._getVal(ui.rowID, key);
       // save old value
       ui.oldValues[key] = val;
       // initialize edit-field with cell value
       // note: for simplicity, the ids of edit-fields match with name-of-column+"Editor"
       $('#' + key + 'Editor').val(val);
      }
      if (!editDialog) {
       // create dialog
       editDialog = $('#editDialog').dialog();
      }
      // show dialog
      editDialog.dialog('open');
     }
     </script>
    </head>

    <body>
        <table id="grid1"></table>

        <div id="editDialog" title="Grid Row Editor" style="display:none">
          <span id="rowID" style="background: #E0E0E0;"></span><br />
          ProductID: <input id="ProductIDEditor" /><br />
          Name: <input id="NameEditor" /><br />
          Color: <input id="ColorEditor" /><br />
          ListPrice: <input id="ListPriceEditor" /><br /><br />
          <input id="dialogOK" type="button" value="OK" />
          <input id="dialogCancel" type="button" value="Cancel" />
        </div>
    </body>

Children