Skip to content

Extending UI Grid with new editable column


This tutorial will show the steps required when creating a new module which extends some UI Grid with new editable column in another module.

Download / fork source code for described modules from GitHub vc-samples repository.


External.PriceModule extend PricingModule with new field BasePrice and visualize it in product prices Grid.

This example contains functionality which extends database model, for more information visit Managing Module Database page.

UI Grid extends with javascript code extension. New column name should be represented in *.json resource file.

UI Grid with price list

PricingModule contains grid with price list for selected product wich we can extend with our new field.

Add new price2.js file in Scripts directory.

Create module name and register it as dependency:

//Call this to register our module to main application
var moduleName = "virtoCommerce.samples.externalPrice";

if (AppDependencies != undefined) {

PricingModule contains price list grid with pricelist-grid identifier. Creation of this grid is discribed in prices-list.tpl.html file. To extend pricelist-grid grid add new column definition with specified parameters:

angular.module(moduleName, [])
.run(['platformWebApp.ui-grid.extension', function (gridOptionExtension) {
    gridOptionExtension.registerExtension('pricelist-grid', function (gridOptions) {
            name: 'basePrice',
            displayName: 'external-pricing.blades.prices-list.labels.base-price',
            editableCellTemplate: 'sale-cellTextEditor',
            validators: { saleValidator: true },
            cellTemplate: 'priceCellTitleValidator',
            enableCellEdit: true
  • pricelist-grid - price list grid identifier which we extend.
  • basePrice - name of new field.
  • external-pricing.blades.prices-list.labels.base-price is path to localized string which will be described below.

Create folder Localizations and add new en.VirtoCommerce.ExternalPrice.json file with following content:

  "external-pricing": {
    "blades": {
      "prices-list": {
        "labels": {
          "base-price": "Base price"

Compile your solution, restart IIS and open Manager in browser to check how your new module looks like.

Price list grid extends with new column and value in this column can be modified.

Last update: June 18, 2020