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
jAndika
1150
UI not rendered when handling igGrid Updating Row Started
posted

Hi,

I have a grid with igCombo control on edit. When user enters the editing mode, I want to hide/unhide the combo based on data on other columns. The problem is when I hook into the updatingRowStarted event, the combo has not been rendered yet, so I can't access it.

Is there another event after iggridupdatingeditrowstarted that I can hook into so that I can access the igCombo control ?

Please help.. Thanks

Jeffrey

Parents
  • 24497
    Verified Answer
    posted

    Hi Jeffrey,

    The editRowStarting/Started events are related to overall row information, but not to specific cells/columns in a row.

    To process editing of specific cell/column application should use editCellStarting/Started events. Those events provide information about column, row, value, editor and possible add-new-row flag. The ui members for those events are following:
    Use ui.owner to get reference to igGridUpdating.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.rowID to get key or index of row.
    Use ui.columnIndex to get index of column.
    Use ui.columnKey to get key of column.
    Use ui.editor to get reference to igEditor.
    Use ui.value to get or set value of editor.
    Use ui.rowAdding to check if that event is raised while new-row-adding.

    If you need reference to specific editor, then you may use any jquery method, like ui.editor.hide(), or "typecast" ui.editor to a specific widget, like ui.editor.igCombo('option', 'dropDownMaxHeight', 100), or ui.editor.data('igCombo').options.allowCustomValue.

    Note: if you make explicit changes to editor, like ui.editor.hide(), then that change can be permanent and it will affect all following edit sessions. So, you will need to "undo" that by something like ui.editor.show().

    If you need only to hide editor for specific row/column, then there is no need to apply any settings to editor by itself, but only return false from editCellStarting.
    Below are 2 examples for you which hide editor by 2 ways.

    $("#grid").igGrid({
          features: [{
        name: "Updating",
           editCellStarting: function (evt, ui) {
              if (ui.columnIndex === 2 && ui.rowID === 103) {
                return false;
              }
        },
        editCellStarted: function (evt, ui) {
              if (ui.columnIndex === 2) {
                var e = ui.editor;
                var combo = ui.editor.data('igCombo');
                // alert('combo:' + combo + ', key:' + ui.columnKey + ' val:' + ui.value + ' adding:' + ui.rowAdding);
              if (ui.rowID === 105) {
                  e.hide();
              } else {
                  e.show();
              }
          }
        },
        columnSettings: [{
          columnKey: "NationalIDNumber",
          editorType: "combo"
            }]

      }],
      ...

     

Reply Children