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
455
igHierarchicalGrid
posted

Hi

 

I am working on igHierarchicalGrid. I am able to update the child table as you can see in attached pic .

 

  • My problem is that I don’t want to use Done and Cancel Button shown in above fig.. Instead of these button I want to handle this on ‘Enter’ key. How can we achieve this?
  • Please let me know enter key event to validate the data. (For Angular2).
  • After entering the data and press enter, now the focus or selection will be on next  “ ACQValue” as shown in pic.
  • One more thing I need to expand only one row at time i.e. if one row is already expanded and we expanding other row then other row must be collapsed.

 

Note : As I am using angular2 please let me know can we achieve in this. It will be very helpful for me.

 

Thanks

Ankur Shah

  • 23953
    Offline posted

    Hello Ankur,

    - To remove Done and Cancel buttons set the [showDoneCancelButtons](http://igniteui.com/help/api/2016.1/ui.iggridupdating#options:rowEditDialogOptions.showDoneCancelButtons) option to false

    Example:

    features: [{

    name: "Updating",

    showDoneCancelButtons: false,

    editMode: "cell",

    columnSettings: [

    {

    columnKey: "Title",

    editorOptions: {

    validation: true,

    validatorOptions: {

    onblur: true,

    custom: {

    method: function(value) {

    if (value === "CEO") {

    return false;

    }

    return true;

    },

    errorMessage: "You cannot enter CEO title"

    }

    }

    }

    }

    ]

    }]

    - To validate the data use the [columnSettings.editorOptions.validatorOptions](http://igniteui.com/help/api/2016.1/ui.iggridupdating#options:columnSettings.editorOptions) setting as shown in the code snippet above

    - To have only one row expanded at a time handle the [rowExpanding](http://igniteui.com/help/api/2016.1/ui.ighierarchicalgrid#events:rowExpanding) event and collapse the other expanded rows.

    Example:

    rowExpanding: function (evt, ui) {

    $("#hgrid1 tr[aria-expanded=true]").each(function (ix, el) {

    $("#hgrid1").igHierarchicalGrid("collapse", el);

    });

    }

    In this code snippet the "hgrid1" is the ID of the `igHierarchicalGrid` DOM placeholder

    Hope this helps,
    Martin Pavlov
    Infragistics, Inc.