Develop Reference

append form rows using JS

Hello I have an HTML form and want to be able to add or delete rows dynamically.
ie just by a click on an Icon or a text the entire form row should be duplicated and by clicking on a text or icon the duplicated row should be deleted.
I know JavaScript append can solve this but I don't know how to implement it since my my HTML has needed php tags in them.
the drop-downs options are getting it values from a db and some other input fields are also getting it's values from a db hence the reason I have PHP tags in there.
Below is the attached code.
Kindly help me with how I can append the row with the appended form working just like the parent row
<div class="col-xl-8 col-md-12">
<form>
<div class="card">
<div class="card-header">
<h3 class="card-title"><strong class="text-success" style="cursor: pointer;"><?=ucwords($clientName)?></strong> REP'S INFORMATION</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Reps Name<span class="text-red">*</span></label>
<input type="text" name="" class="form-control" required="">
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">E-Mail<span class="text-red">*</span></label>
<input type="email" name="" class="form-control" required="">
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Phone No.<span class="text-red">*</span></label>
<input type="text text-dark" class="form-control" name="client_contact2" required="" id="client_contact2" onkeypress="return restrictAlphabets(event)" onpaste="return false;" ondrop="return false;" autocomplete="off" required="">
<input type="date" name="" value="<?=date("Y-m-d")?>" hidden="">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">ADD DEVICE(S) INFORMATION</h3>
</div>
<div class="card-body">
<?php
if ($clientType === $slaClient) {
?>
<table id='dyntbl' class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th class="text-center" >Device Brand</th>
<th class="text-center">Device Model</th>
<th class="text-center">Serial Number</th>
<th class="text-center" style="width:10%">SLA Device</th>
<th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper " id="table_body">
<tr>
<td>
<select class="form-control form-select brand" data-bs-placeholder="Select" name="brand[]" required="" id="brand" onchange="checkDeviceStatus()">
<?php
$readALL = "SELECT * FROM productbrands WHERE deleted = 0";
$displayAll = mysqli_query($conn,$readALL);
while($rowFetchAll = mysqli_fetch_array($displayAll)){
$brandName = $rowFetchAll['brandName'];
$brandid = $rowFetchAll['brandID'];
?>
<option value="<?=$brandid?>"><?=$brandName?></option>
<?php } ?>
</select>
</td>
<td>
<select class="form-control form-select model" data-bs-placeholder="Select" name="model[]" required="" id="model" onchange="checkDeviceStatus()">
<?php
$readALL1 = "SELECT * FROM productmodels WHERE deleted = 0";
$displayAll1 = mysqli_query($conn,$readALL1);
while($rowFetchAll1 = mysqli_fetch_array($displayAll1)){
$modelName = $rowFetchAll1['modelName'];
$modelid = $rowFetchAll1['modelID'];
?>
<option value="<?=$modelid?>"><?=$modelName?></option>
<?php } ?>
</select>
</td>
<td><input type="text" name="serialNo" class="form-control serialNo" id="serialNo" onchange="checkDeviceStatus()"></td>
<!-- The input field below is to get value from AJAX -->
<td><input type="text" name="deviceLevel" class="form-control" readonly="" id="deviceLevel">
<!-- End of Input field -->
</td>
<input type="text" name="" id="client" value="<?=$clientID?>" hidden="" class="client">
<td><button type="button" class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>
<?php } ?>
<?php
if ($clientType === $nonSla) {
?>
<table class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th>Product Model Non-SLA</th>
<th>Serial Number Non-SLA</th>
<th>Device Status Non-SLA</th>
<th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper " id="table_body">
<tr>
<td><input type="text" name="" class="form-control" ></td>
<td><input type="text" name="" class="form-control"></td>
<td><input type="text" name="" class="form-control"></td>
<td><button type="button" class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>
<?php } ?>
</div>
</div>
</form>
</div>

Here is basic example:
const table_row_html = `
<tr>
<th scope="row">{{ROW_NO}}</th>
<td>Mark</td>
<td>
<select class="form-select" name="modal[]"">
<option selected>Open this select menu</option>
<option value=" 1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
<td>#mdo</td>
<td><a class="btn btn-danger btn-sm delete" href="#">Remove</a></td>
</tr>`;
$(document).on("click", ".table a.insert", function() {
const table_body = $(this).closest(".table").find("tbody");
table_body.append(
table_row_html.replace("{{ROW_NO}}", table_body.children("tr").length + 1)
);
return false;
});
$(document).on("click", ".table a.delete", function() {
$(this).closest("tr").remove();
return false;
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">
<a class="btn btn-primary insert" href="#">Add</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>
<select class="form-select" name="modal[]" ">
<option selected>Open this select menu</option>
<option value=" 1 ">One</option>
<option value="2 ">Two</option>
<option value="3 ">Three</option>
</select>
</td>
<td>#mdo</td>
<td><a class="btn btn-danger btn-sm delete " href="# ">Remove</a></td>
</tr>
</tbody>
</table>
</div>

How do I manipulate the jQuery Clone to remove an attribute

I have a table with rows where data is populated through the foreach.
I am using :last selector to select the element and clone to add new row. Whereas using remove to delete the rows.
While populating the result using foreach, I have disabled few fields, I am looking for a workaround on how to remove the disabled attribute for the particular element.
Prefilled the data for ease
$("#add_row").on("click", function (e) {
var $tableBody = $('#tab_logic').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
});
$("#delete_row").click(function () {
$('#tab_logic #tab_logic_body tr:last').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tab_logic" id="tab_logic">
<thead class="orange ">
<tr>
<th>
Product Name
</th>
<th>
HSN Code
</th>
<th class="center">
GST
</th>
<th>
Quantity
</th>
<th>
Rate(per Nos)
</th>
<th>
Amount
</th>
</tr>
</thead>
<tbody id="tab_logic_body">
#foreach ($invoice_details as $items) // Can be ignored
<tr>
<td>
<input type="text" class="product_name autocomplete" placeholder="" value="Product Name" disabled>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" class="hsn_code autocomplete" placeholder="" value="HSNCODE">
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" class="gst autocomplete" placeholder="GST" name="gst[]"
readonly="readonly" value="18">
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty"
step="0" min="0" value="1" />
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='product_price[]' placeholder='Enter Price'
class="form-control product_price" step="0" min="0" value="100" />
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='row_total_amount[]' placeholder='Total Amount'
class="form-control row_total_amount" step="0" min="0" value="118" />
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
<table>
<thead>
<tr>
<th>
<th class="right">
<button type="button" class="btn z-depth-1" id="add_row"><i class="material-icons">add_box</i>
</button>
<button type="button" class="btn z-depth-1 red" id="delete_row"><i class="material-icons">remove</i>
</button>
</th>
</th>
</tr>
</thead>
</table>

To achieve this you can use find() within the $trNew to retrieve all disabled form controls. Then you can use prop('disabled', false) to enable them again:
$trNew.find(':input[disabled]').prop('disabled', false);
$("#add_row").on("click", function(e) {
var $tableBody = $('#tab_logic').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
$trNew.find(':input[disabled]').prop('disabled', false);
});
$("#delete_row").click(function() {
$('#tab_logic #tab_logic_body tr:last').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tab_logic" id="tab_logic">
<thead class="orange ">
<tr>
<th>Product Name</th>
<th>HSN Code</th>
<th class="center">GST</th>
<th>Quantity</th>
<th>Rate(per Nos)</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="tab_logic_body">
<tr>
<td>
<input type="text" class="product_name autocomplete" placeholder="" value="Product Name" disabled>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" class="hsn_code autocomplete" placeholder="" value="HSNCODE">
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18">
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="1" />
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='product_price[]' placeholder='Enter Price' class="form-control product_price" step="0" min="0" value="100" />
</div>
</div>
</div>
</td>
<td>
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="number" name='row_total_amount[]' placeholder='Total Amount' class="form-control row_total_amount" step="0" min="0" value="118" />
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>
<th class="right">
<button type="button" class="btn z-depth-1" id="add_row"><i class="material-icons">add_box</i></button>
<button type="button" class="btn z-depth-1 red" id="delete_row"><i class="material-icons">remove</i></button>
</th>
</th>
</tr>
</thead>
</table>

jQuery: append function is not working fine in webpage

hi m trying to append a form which is in bootstrap (using jQuery append funciton),,, it has to open it once but is opening it twice and the button which is at the end of for shows one time and hide other time i just wants to show the form once by clicking once, and when i click again then it display again:" this is the current output i just wants that it show only once https://ibb.co/CtLrBzr "
html code:
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br>
Assign Task
</span>
</div>
<div id="table-bordered">
</div>
$(document).ready(function() {
$('.append').click(function() {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
Assign Task
</span>
</div>

$(".append").on("click", function(){
$('#table-bordered').html();
});
Use your form inside the jquery html function. it will help you.

Use jQuery's one :
$('.append').one("click" , function(){ ... }
$('.append').one("click", function() {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br>
Assign Task
</span>
</div>
<div id="table-bordered">
</div>

I just test your code and it's working fine..
Maybe you write the script before render the html? (mean in the head of the html, without defer)?
Make sure you add the script in the end of the body, or add the defer attribute there. otherwise when the script called, the button where you trying add a listener to is not exist in the moment when the script run
$(document).ready(function () {
$('.append').click(function () {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br/>
Assign Task
</span>
</div>
<div id="table-bordered"></div>

Cloning rows with jquery

I have a table which should have an option to add a row and delete a row. I used jquery to insert HTML and it worked perfectly, but I was told this method may have drawbacks and I should rather consider cloning. After doing some more research, I tried implementing it in my website. It doesn't seem to be working.
My html code:
<div class="row">
<div class="col-md-12">
<br/>
<!--A card inside the second tab, and the table is inside the card-->
<div class="card">
<div class="header">
<h4 class="title">1.1 Teaching</h4>
<p class="category">Please Add the Courses taught in the academic year</p>
</div>
<div class="content">
<div class="content table-responsive table-full-width" id="t_table">
<table class="table table-hover table-striped" id="t_tab_logic">
<thead>
<th>#</th>
<th>Course</th>
<th>Section</th>
<th>Session</th>
<th>Term</th>
<th>Day/Evening</th>
<th>%age Taught</th>
<th>Load/Overload</th>
<th>Enrolment</th>
<th>Number of T.As/IAs</th>
</thead>
<tbody>
<tr class="tr_clone">
<td>
1
</td>
<td>
<input type="text" name='t_name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='t_section0' placeholder='Section' class="form-control"/>
</td>
<td>
<input type="text" name='t_session0' placeholder='Session' class="form-control"/>
</td>
<td>
<input type="number" name='t_term0' placeholder='Term' class="form-control"/>
</td>
<td>
<input type="text" name='t_day0' placeholder='D/E' class="form-control"/>
</td>
<td>
<input type="number" name='t_%age0' placeholder='%age' class="form-control"/>
</td>
<td>
<input type="text" name='t_load0' placeholder='Load/Over' class="form-control"/>
</td>
<td>
<input type="number" name='t_enrolment0' placeholder='#' class="form-control"/>
</td>
<td>
<input type="number" name='t_number0' placeholder='#' class="form-control"/>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-sm-2">
<a id="t_add_row" class="btn btn-primary btn-fill pull-left">Add Row</a>
</div>
<div class="col-sm-2 col-sm-offset-8">
<a id="t_delete_row" class="btn btn-submit btn-fill pull-right">Delete Row</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And my java script code looks like:
$(document).ready(function () {
$("#t_add_row").live('click', function(){
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(":text").val('');
$tr.after($clone);
});
});
I would also like to implement the delete row link, which I felt would be implemented after I implement the add row link.
Any help would be greatly appreciated, thank you for being patient, I am sort of a beginner at jQuery.

try this code
$("body").on('click','#t_add_row', function(){
var tr = $('#t_tab_logic .tr_clone:last');
var clone = tr.clone();
clone.find("input").val('');
tr.after(clone);
});

How to show my data on UI Grid using AngularJS in ASP.NET MVC

I have a page where I can do CRUD operations using ASP.NET MVC with AngularJS. I am showing the my Data in the html table. I want to show them with UI Grid as its in http://ui-grid.info/
Can anyone help me show the data in the UI Grid?
This is how my WebApp looks:
Controller.js
app.controller('crudController', function ($scope, crudService) {
$scope.IsNewRecordProject = 1;
loadRecordsProject();
//Function to load all Projects records
function loadRecordsProject() {
var promiseGet = crudService.getProjects(); //The Method Call from service
promiseGet.then(function (pl) { $scope.Projects = pl.data },
function (errorPl) {
$log.error('failure loading Projects', errorPl);
});
}
});
Module.js
var app;
(function () {
app = angular.module("crudModule", []);
})();
Service.js
app.service('crudService', function ($http) {
//Get All Projects
this.getProjects = function () {
return $http.get("/api/ProjectsAPI");
}
});
And this is my Project.cshtml file
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- page content -->
<body>
<div class="container-fluid">
<div class="header-title">
<h1>Projects</h1>
<br />
</div>
</div>
#*<div class="right_col" role="main">*#
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" ng-controller="crudController">
<div class="col-md-7">
<div class="col-md-4 left-zero">
<div class="form-group">
<div class="col-md-5 left-zero">
<div class="form-group row">
<div class="col-md-2">
<input id="txtSearch" type="text" placeholder="Search by name..." class="form-control" Height="33" Width="200" />
</div>
<div class="col-md-2 pull-right">
<div style="margin-left: 47px;"><input id="btnSearch" type="button" value="Search" Class="btn btn-primary" /></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 pull-right">
<table style="border-collapse: separate; border-spacing: 10px 0px;">
<tr>
<td>
<select id="cbStatus" class="form-control">
<option>Active</option>
<option>Inactive</option>
</select>
</td>
<td>
<select id="cbPlatform" class="form-control">
<option>Desktop</option>
<option>Web</option>
<option>Mobile</option>
</select>
</td>
<td>
<select id="cbVerify" class="form-control">
<option>Veryfy1</option>
<option>Veryfy2</option>
</select>
</td>
<td>
<select id="cbBlank" class="form-control">
<option>Test1</option>
<option>Test2</option>
</select>
</td>
<td>
<select id="cbBlank2" class="form-control">
<option>Test1</option>
<option>Test2</option>
</select>
</td>
<td><input id="btnNewProjects" type="button" value="Create New" data-ng-click="ShowInsertPanel = !ShowInsertPanel" class="btn btn-success" /></td>
</tr>
</table>
</div>
<table class="table table-bordered" align="center">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Application</th>
<th>Status</th>
</tr>
</thead>
<tbody ng-repeat="Proj in Projects">
<tr ng-click="getProject(Proj)">
<td width="50"> <span>{{Proj.id}}</span></td>
<td width="150"> <span>{{Proj.name}}</span></td>
<td width="150"> <span>{{Proj.application}}</span></td>
<td width="150"> <span>{{Proj.status}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5">
<br />
<br />
<div class="row">
<div class="col-md-12" ng-show="ShowInsertPanel">
<div class="x_panel">
<div class="x_title">
<h2>New Project <small></small></h2>
<ul class="nav navbar-right panel_toolbox">
<li class="pull-right">
<a class="close-link" data-ng-click="ShowInsertPanel = !ShowInsertPanel"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="dashboard-widget-content">
<table class="table table" align="center">
<tbody>
<tr>
<th>ID</th>
<td style="vertical-align: middle;"><input type="text" id="p_id" readonly="readonly" ng-model="id" class="form-control" /></td>
</tr>
<tr>
<th>Name</th>
<td style="vertical-align: middle;"><input type="text" id="p_name" required ng-model="name" class="form-control" /></td>
</tr>
<tr>
<th>Application</th>
<td style="vertical-align: middle;"><input type="text" id="p_application" required ng-model="application" class="form-control" /></td>
</tr>
<tr>
<th>Status</th>
<td style="vertical-align: middle;">
<select id="cbStatus" required ng-model="status" class="form-control">
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" id="new" value="New" ng-click="clearProject()" class="btn btn-default" />
<input type="button" id="save" value="Save" ng-click="saveProject()" class="btn btn-success" />
<input type="button" id="delete" value="Delete" ng-click="deleteProject()" class="btn btn-danger" />
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<br />
#*</div>*#
</body>
<!-- /page content -->

You need to define the grid options and return the data as JSON. Look at the following tutorial documentation: http://ui-grid.info/docs/#/tutorial/106_binding