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>

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>

Can't make enter behave as tab with jQuery

I want to press enter on the 'Buscar' input and focus on the first input ( 'Qtd on the table').
I tried
$(this).nextAll('input').first().focus();
$(this).next('input:text').focus();
And a lot of solutions and other codes I found here and online but nothing worked. I didn't get any errors on the console which makes it harder to find out what I'm missing.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>

First, you shouldn't be setting numerical ids. Second, buscar has no siblings so you can't say nextAll because they aren't any siblings.
What you can do is watch the input for an enter key up and focus on the first input with the name quantidade. See the first function below.
$('#busca').on('keyup', function(e){
if(e.which === 13){
$('input[name="quantidade"]').first().focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>

// get all the inputs that are not disabled and not hidden
var $allInputs = $(':input:not(:disabled):not(:hidden)');
$('#busca').on('keyup', function(e){
// if enter was pressed
if ((e.keyCode || e.which) === 13) {
// cancel any form submit that might happen
e.preventDefault();
// focus on the input that is the next index after the index that busca has
$allInputs.eq( $allInputs.index(this) + 1 ).focus();
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>

How to change current table row as highlighted if any modification done in that row using jquery

how to make current table row as highlighted if I change any input text or image of that particular table row using Jquery. As code given below which contains two rows, so out of which how to make any of the row as highlighted if I modify input text or change image by keypress event or any other solutions please let me know
<table>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<textarea class="form-control"></textarea>
</td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<textarea class="form-control"></textarea>
</td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
</tbody>
</table>

Try this,
$(document).ready(function() {
$('td').on('keydown', function(ev) {
$('tr').css('background-color','');
$(this).closest('tr').css('background-color','red');
});
});
jsFiddle for the same
https://jsfiddle.net/0k8Lu50v/

Try giving styles to tr,
<style>
tr:focus { background: yellow; }
</style>
<table>
<tbody>
<tr>
<td>1</td>
<td><input type="text" class="form-control" ></td>
<td><textarea class="form-control"></textarea></td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
<tr>
<td>2</td>
<td><input type="text" class="form-control" ></td>
<td><textarea class="form-control"></textarea></td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
</tbody>
</table>

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