ui grid custom cell select - not available

[JyotiBannigidad]

Hi Team,

I am trying to use the custom cell select in my ui-grid. The OP and OrdType columns should be read-only at all levels, and row wise read-only is set based on certain value in the isActive column.

In grid.ascx page,
<script src="scripts/angular.js" ></script>
<script src="scripts/ui-grid.js" ></script>
<script src="scripts/custom-cell-select.js" ></script>

<link rel="stylesheet" href="styles/custom-cell-select.css" />

<div id="lineItemGrid" ui-grid="gridOptions" ui-grid-pinning ui-grid-edit ui-grid-row-edit ui-grid-cellnav ui-grid-custom-cell-select class="ui-grid-selectable" ></div>

in app.js file,
var userApp = angular.module("dmsWorkItemApp", ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.cellNav', 'ui.grid.rowEdit', 'ui.grid.resizeColumns', 'ui.grid.exporter', 'ui.grid.selection', 'ui.grid.saveState', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.grouping', 'ui.grid.pagination', 'ui.grid.validate', 'ui.bootstrap', 'ui.grid.custom.cell.select'])

columnDefs: [ { name: 'SL#', field: 'SL', enableCellEdit: true, }, { name: 'OP', field: 'OP', enableCellEdit: false, cellClass: 'nonEditable', allowCellFocus: false }, { name: 'PO', field: 'PO', enableCellEdit: true }, { name: 'OrdType', field: 'OrdType', enableCellEdit: false, cellClass: 'nonEditable'}, { name: 'IsActive', field: 'isActive', enableCellEdit: true } ],

Error: [$injector:modulerr] Failed to instantiate module ui.grid.custom.cell.select due to:
Error: [$injector:nomod] Module 'ui.grid.custom.cell.select' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

The sample has been created in the below plunker.
https://plnkr.co/edit/qzQubDaJjbO5s1Gh?open=lib%2Fscript.js&deferRun=1

Could anyone please suggest how to use custom cell select in this case? Thanks in advance.