I want to write a custom directive for ui-grid with different input columnDefs

Question

This is my Controller

$scope.usersList = {};

$scope.usersList = {
    paginationPageSizes: [10,15, 20],
    paginationPageSize: 10,
    columnDefs: [
               


        

Answer 1

Your question is hard to understand, hopefully I got it right. You want to define default-settings for your grid but enable the user to input some special settings if needed?

Warp ui-grid in your own directive. Pass your wanted arguments into that directive and create default settings in your directive.

Your .cshtml. You pass your settings variable into that.

<my-grid options="usersList" />

Your Directive. Grab the settings there (see options: '=') and bind that to controller or scope.

angular.module('app').directive('myGrid', myGrid);
function myGrid() {
  return {
    templateUrl : 'grid.html',
    controller : 'GridCtrl',
    controllerAs : 'grid',
    restrict: 'E',
    scope: {
      options : '=',
    },
    bindToController: true,
  };
}

Your Controller. Now you can access your settings in that controller. There you could combine the default settings with your inserted settings and pass that into the directive template.

angular.module('app').controller('GridCtrl', GridCtrl);
function GridCtrl() {
  var grid = this;

  console.log(grid.options); // containts your settings

  grid.gridOptions = {
    paginationPageSize: grid.options.paginationPageSize,
    ...,
    columnDefs: grid.options.columnDefs
    etc
  }
}

And your grid.html, you pass the combined settings into the grid-API.

<div id="grid1" ui-grid="grid.gridOptions" class="grid"></div>

There are many more details to watch out for, but thats a possible setup.

e: I made a Plunkr for another similar question. For future reference.