Posts Tagged Row

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 highlight the selected rows in Repeater using Jquery

Introduction:

In this article I am going to explain how to highlight the selected row in Repeater control using Jquery.  At runtime Repeater control will render as table we will be manipulating this table structure to access each row and then use the css to highlight the row.

Prerequisites:

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

Solution:

We will use the below css to hightlight the rows in gridview.

<style type="text/css">
        .highlightRow
        {
            background-color: #9999FF;
        }
    </style>

Jquery Code:             

Below Jquery function will remove the css from all other rows except the selected row

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script>
    $(function () {
         $(".trclass").click(function () {
            $(this).addClass("highlightRow").siblings().removeClass("highlightRow");
          });
     });
 </script>

HTML

   <asp:Repeater runat="server" ID="Repeater1">
            <HeaderTemplate>
                <table width="500px" border="1px">
                    <tr style="background-color: #fb7700">
                        <td>Value1
                        </td>
                        <td>Value2
                        </td>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr class="trclass">
                    <td>
                        <asp:Label ID="lblValue1" runat="server" Text='<%# Eval("val1") %>'></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="lblValue2" runat="server" Text='<%# Eval("val2") %>'></asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>

Below code is to populate dummy data, you dont need this code if you are populating the repeater from database in code behind.

C#:

  protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable table1 = new DataTable();
                table1.Columns.Add("val1");
                table1.Columns.Add("val2");
                table1.Rows.Add("Value1", "Message1");
                table1.Rows.Add("Value2", "Message2");
                table1.Rows.Add("Value3", "Message3");
                table1.Rows.Add("Value4", "Message4");
                table1.Rows.Add("Value5", "Message5");
                table1.Rows.Add("Value6", "Message6");
                table1.Rows.Add("Value7", "Message7");
                Repeater1.DataSource = table1;
                Repeater1.DataBind();
            }
        }

Demo

, , , , ,

Leave a comment