Grid and Angular ( Custom Editors)

Originally Posted 21 February 2014, 7:20 am EST

  • Originally Posted 21 February 2014, 7:20 am EST

    Hello, Tried your example about custom editors in wijgrid (using the latest version )using the angular declaration. Your example illustrates knockout approach but anyway I managed to make it work , Sort of...
    <wij-grid allow-sorting="true" allow-editing="true" data="i.custItemCatalogues" columns-autogeneration-mode="none" allow-paging="true" page-size="50"   editing-mode="cell" show-footer="true"
    afterCellEdit="onAfterCellEdit" >
    <column data-key="itemName" header-text="Item Descr." read-only="true" width="400"></column>
    <column data-key="itemQuantity" header-text="Quantity" data-type="number" width="50"></column>
    <column data-key="aux_MeasurementUnitsId" data-type="string" header-text="Unit" width="250"></column>
    <column data-key="vendorUnitPrice" header-text="Price" data-type="currency" width="40" aggregate= "sum"></column>
    <column data-key="vendorDiscAmount" header-text="Discount" data-type="number" width="40"></column>
    <column data-key="vendorDiscPerc" header-text="Disc %" data-type="number" data-format-string="n0" width="40"></column>
    <column data-key="itemComments" header-text="Notes" data-type="string" width="300"></column>

    The Thing is:
    1. How do you keep value and label when the Datasource for the combo is an object with ID and Description and The selected Item ( in the specific cell ) is from another Object having only the ID ( FK to the table which is feeding the Combo)
    2. I also tried an approach with <column><column-template></column-template></column>
    which does not work at all.... ( angularjs declarative approach)

    I am attaching the js script populating the grid and the index

  • Reply

    What I forgot to say is that in your example as far as I get it I cannot have ID and description in my field aux_MeasurementUnitsId, when I first load it I get The ID showing and when I click for edit and choose a desxcription I get the description added to the field ( but I need both in order to update my DB.

    I also reuploaded the index file
  • Reply

    2. I also tried an approach with


    which does not work at all…. ( angularjs declarative approach)
  • Reply


    I don't think there is any direct way to create custom editors using AngularJS directives. You need to manually create the custom editors in the 'onBeforeCellEdit' event. I have forwarded it to the concerned team for review and would update you as soon as possible.

    Moreover, WijComboBox displays the items which are defined as label while creating WijComboBox in the BeforeCellEdit event of the WijGrid. If you want to display the ID instead of Description in the cell after selecting the respective description from the DropDown then you can handle the 'onBeforeCellUpdate' event and set the ID like this:

     case "ProductName":
    var editor = args.cell.container().find("input");
    var value = editor.wijcombobox("option", "selectedValue");
    args.value = value;

    If I misunderstood your query then do let me know so that I can assist you accordingly.

  • Reply

    Thank you for your reply, basically what I want is just to have a dropdown in my Wijgrid. I want both the descriptions as the label and the ID as the Value. If the Declarative way is not an option I d try anything else you would suggest.
  • Marked as Answer



    You can create DropDown in WijGrid as demonstrated in the following demo:

    If you want to get both the description and ID of the selected item then you can get it in the 'onBeforeCellUpdate' event :

                        var txt = editor.wijcombobox("option", "text");
    var value = editor.wijcombobox("option", "selectedValue");

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels