Reputation: 4721
I want to display some data in a datatable
format by using Angular.js.
So I did something like below.
Angular
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-datatables.js"></script>
var app = angular.module('myapp', ['datatables']);
app.controller('homectrl', ['$scope', '$http', 'dtoptionsbuilder', 'dtcolumnbuilder',
function ($scope, $http, dtoptionsbuilder, dtcolumnbuilder) {
$scope.dtcolumns = [
//dtcolumnbuilder.newcolumn("action", "action"),
dtcolumnbuilder.newcolumn("objectid", "id"),
dtcolumnbuilder.newcolumn("service_code", "service code"),
dtcolumnbuilder.newcolumn("cond1", "condition 1"),
dtcolumnbuilder.newcolumn("cond2", "condition 2"),
dtcolumnbuilder.newcolumn("cond3", "condition 3"),
dtcolumnbuilder.newcolumn("service_type", "service type"),
dtcolumnbuilder.newcolumn("remark", "remark"),
dtcolumnbuilder.newcolumn("description", "description")
]
$scope.dtoptions = dtoptionsbuilder.newoptions().withoption('ajax', {
url: "/home/getdata",
type: "post"
})
.withpaginationtype('full_numbers')
.withdisplaylength(10);
}])
<div ng-app="MyApp" class="container" ng-controller="homeCtrl">
<div ng-controller="homeCtrl">
<table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover">
</table>
<br />
</div>
And Controller
public ActionResult getdata()
{
DataTable dt = new DataTable();
using (OracleConnection conn = new OracleConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnAPP_NEIQC"].ToString()))
{
GetData objGetData = new GetData();
dt = objGetData.GetDataForGrid();
var circleList = (from DataRow dr in dt.Rows
select new
{
//Action = "",
OBJECTID = Convert.ToString(dr["OBJECTID"]),
SERVICE_CODE = Convert.ToString(dr["SERVICE_CODE"]),
COND1 = Convert.ToString(dr["COND1"]),
COND2 = Convert.ToString(dr["COND2"]),
COND3 = Convert.ToString(dr["COND3"]),
SERVICE_TYPE = Convert.ToString(dr["SERVICE_TYPE"]),
REMARK = Convert.ToString(dr["REMARK"]),
DESCRIPTION = Convert.ToString(dr["DESCRIPTION"]),
}).ToList();
return Json(circleList, JsonRequestBehavior.AllowGet);
}
}
Now what I want is, I want to add a CHECKBOX
in each row so that I can edit and update its record.
Upvotes: 1
Views: 1738
Reputation: 85518
As mentioned by yujinpan you can use the select extension. Or simply just render out a checkbox yourself:
$scope.dtcolumns = [
dtcolumnbuilder.newcolumn(null, '').renderWith(function(data, type, full)
return '<input type="checkbox" class="check" data-object-id="'+full.objectid+'">'
}),
dtcolumnbuilder.newcolumn("objectid", "id"),
...
]
Now you can associate delegated event handlers with the checkboxes through the .check
class.
Use a dtInstance
as explained here or in the docs here (look at the bottom of page). Now you could do something like
$('#entry-grid').on('click', '.check', function() {
var data = $scope.dtInstance.DataTable.row($(this).closest('tr')).data()
})
Upvotes: 1