Archive for category BootStrap

How to implement row edit functionality in Angular UIGrid

Introduction

In this article I will explain the procedures to implement row level editing functionality in Angular UIGrid. This is a continuation of my previous article in which I showed the procedures to populate a UIGrid.

Prerequisites:

I have used icons from FontAwesome Library, which is a great source for  icons. You can download Fontawesome icons from here.

Also to display message after every operation we used UIBootstrap

Implementation:

You would already have the Model configured by following my previous article on loading UIGrid with data. We will directly look into the details of Editing in UIGrid.

UIGrid by design supports the inline edit functionality by double clicking on a particular cell. In this article we will implement editing all columns in a row using button click and save the details to database on Save Button click.

You can see a sample demo of editing functionality below

Demo

UIGrid Updates

We will use the cellTempalate, to make the cell editable. We are using a flag to make the row editable. When user click on the Edit button, we will set the EditRow flag as true. Later in the UIGrid, we check if the flag has been set to true or false. Based on the flag value the row will be editable or readonly.

We will update cellTemplate in “Actions” column to add Edit, Update, Cancel button. We will reuse the editRow flag to hide and display Edit and update buttons.  Also we call edit, saveRow, CancelEdit functions from Edit, Update and Cancel buttons respectively.

Edit function:

Edit function will take the selected row object as input parameter, we will find the rowindex using input parameter and set the editRow flag for selected row to true. This will make the UIGrid row editable.

cancelEdit function:

cancelEdit function will take the selected row object as input parameter, we will find the rowindex using input parameter and set the editRow flag for selected row to false. This will make the UIGrid row read only.

saveRow function:

saveRow function will take the selected row object as input parameter, we will find the rowindex using input parameter and set the editRow flag for selected row to false. This will make the UIGrid row read only.  Next line of code will read the values from edited row and assign it to customer class in scope. Finally we will call the SaveCustomer method in Factory service to update the record in database.

Updated Angular JS Script:

HTML

UpdateCustomer Method(WebAPI)

 

, , , , , ,

1 Comment

How to Populate JSON results in Html table

Introduction:

In this article I am going to explain how to populate JSON data to table using Javascript.

Description:

Here we are going to use a Bootstrap Table plugin to load the data from Json to table. This is an easy option to load the data because parsing of Json is handled internally.

Prerequisites:

You need to add the necessary JQuery and bootstrap files to your page prior to use this plugin. In this example I have used the online JQuery and Bootstrap CDN files available. If you don’t want to use the online available cdn file then you can manually add the jquery and Bootstrap files to your solution.

Implementation:

First we will design the table according to the column in Json. Main point to note is to set the data-toggle attribute properly.

 <table id="table">
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="Name">Name</th>
                    <th data-field="Address">Address</th>
                </tr>
            </thead>
        </table>

Now you can use the below code to assign the  Json data to a table.

  $('#table').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });

Complete Code

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            //Sample Json data
            var jsondata = [
                {
                    "id": "1",
                    "Name": "Name1",
                    "Address": "Address1"
                },
                {
                    "id": "2",
                    "Name": "Name2",
                    "Address": "Address2"
                },
                {
                    "id": "3",
                    "Name": "Name3",
                    "Address": "Address3"
                },
                {
                    "id": "4",
                    "Name": "Name4",
                    "Address": "Address4"
                },
                {
                    "id": "5",
                    "Name": "Name5",
                    "Address": "Address5"
                }];

            $('#table').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table id="table">
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="Name">Name</th>
                    <th data-field="Address">Address</th>
                </tr>
            </thead>
        </table>
    </form>
</body>
</html>

, , , , ,

2 Comments

Bootstrap Popover : An overview

Leave a comment