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: [
        { name: 'userId', cellTemplate: '<div class="ui-grid-cell-contents"><a ui-sref="appSetting.userSelected({userId: row.entity.userId})">{{ row.entity.userId }}</a></div>' },
        { name: 'firstName' },
        { name: 'lastName' },
        { name: 'emailId' },
        {
            name: 'action',
            cellTemplate: '<div>' +
                    '  <button  ng-click="grid.appScope.sampledetails()">Delete</button>' +
                    '</div>',
            enableSorting: false,
            enableColumnMenu: false
        }
    ]
};

and this is my .cshtml

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

I want to write this in such a way that it should be used in other .cshmtls, but the columnDefs varies depending on table column name. How should I write in such a way that ths user should give the columnsDefs in directive along with pagination?

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.