Sagar Bandkar

1.4k
347
48.7k

AngularJS ui-grid data appears outside of canvas

Nov 2 2016 1:25 AM

Script Part:-

//Module

var app = angular.module('DesignationApp', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.pagination', 'ui.grid.selection']);

//Controller

app.controller('DesignationCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {

$scope.regionForm = true;

$scope.regionData = null;

var paginationOptions = {

pageNumber: 1,

pageSize: 2,

sort: null

};

$scope.designation = {

vcDsgCode: "",

vcDsgName: "",

vcDsgDesc: ""

}

$scope.clear = function () {

$scope.designation.vcDsgCode = '',

$scope.designation.vcDsgName = '',

$scope.designation.vcDsgDesc = ''

//,

//$scope.addnewdiv = false;

//$scope.updatediv = false;

};

$scope.gridOptions = {

paginationPageSizes: [1, 2, 3, 4, 5],

paginationPageSize: 2,

useExternalPagination: true,

useExternalSorting: true,

enableColumnMenus: true, //Remove Column menus like ascending, descending, etc.

enableSorting: true, //enable sorting for grid

enableFiltering: true, //enable giltering for grid

//enableHiding: false, //remove hide column options from grid column

//enable hide column options require for each column

columnDefs: [

{ field: 'index', displayName: 'Id', width: '5%' },

//{name: 'seq', field: 'name', displayName: 'Id', cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>', width: '5%'},

{ field: 'inDsgId', visible: false }, //hiding autoIncrement column

{

field: 'vcDsgCode', displayName: 'Code', width: '20%', enableHiding: false,

filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-modal></div></div>'

{ field: 'vcDsgName', displayName: 'Name', width: '20%', enableFiltering: false, enableHiding: false },

//enableSorting: false, enable Sorting remove sort Options

{

field: 'vcDsgDesc', displayName: 'Description', width: '20%', enableHiding: false,

menuItems: [{

title: 'Grid Id',

action: function () {

alert('Grid ID: ' + this.grid.id);

}

}],

//pAGINATION

onRegisterApi: function (gridApi) {

$scope.gridApi = gridApi;

//$scope.gridApi.core.refresh()

$scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {

if (sortColumns.length == 0) {

paginationOptions.sort = null;

} else {

paginationOptions.sort = sortColumns[0].sort.direction;

}

getPage();

});

gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {

paginationOptions.pageNumber = newPage;

paginationOptions.pageSize = pageSize;

getPage();

});

}

};

var getPage = function () {

var url;

switch (paginationOptions.sort) {

case uiGridConstants.ASC:

url = "@Url.Action("GetDesignationList", "Designation")";

break;

case uiGridConstants.DESC:

url = "@Url.Action("GetDesignationList", "Designation")";

break;

default:

url = "@Url.Action("GetDesignationList", "Designation")";

break;

}

$http.get(url)

.success(function (data) {

$scope.gridOptions.totalItems = data.length;

$scope.gridOptions.data = data;

var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;

$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);

angular.forEach(data, function (data, index) { //Adding index column in grid

data["index"] = index + 1

});

$scope.divRegion = true;

});

};

getPage();

}])

</script>

Mvc Code:-

@Html.ActionLink("Create New", "AddEditRecord", "Designation", null, new { data_modal = "", id = "openDialog", @class = "btn btn-small btn-primary pull-right" })

</div>

<h style="text-align: left; font-weight: bold">Designation</h>

</div>

<div>

<div ui-grid="gridOptions" ui-grid-pagination

ui-grid-pinning class="grid">

</div>

</body>

Answers (4)

.Net Core Encryption / Decryption

Print PDF using MVC4