Posts Tagged UI-Grid

Applying css style on cellClass not working in Angular UIGrid

cellClass is an attribute which allows user to specify different styles to cells in angular UI Grid.

Problem Description:

When user tries to apply custom styling to cellClass the changes won’t get applied to UIGrid.

An important point to be noted is by design uigrid have its own css styles. These css rules comes from uigrid.css or bootstrap.css. So if a user tries to change the default style of uigrid, we need to make sure that the CSS specificity applied properly.

eg:- User is trying to change the background color of uigrid cell. uigrid already have a default cell background color ( grey / white) . So if user need to make change to background color of cell, we need to make sure that CSS Specificity is applied properly.

Solution:

Let’s have a look at CSS Specificity. When you have two or more css rules pointing to same html element, then browser follows some rules to determine which css rule is more specific and that css rule will get applied to html element. This is called CSS Specificity.

  • ID Selector (#Someword)                              : More Specificity
  • Class/Attribute Selector (.Someword)         : Less Specificity than the ID selector.
  • html Selector (all)                                           : Less Specificity than the class selector.

If you notice above list ID selector has more priority, however we can assign priority to css selector by using !important attribute.if a css value is appended with !important, it overrides all other CSS specificity and precedence will be given to the css value with !important.

Hence in order to resolve the issue user need to make sure that user defined style sheet should have more specific css rule than the default rules from uigrid.css / bootstrap.css.

For ex: below user defined css rule will not work

.cellColorChange{
      background-color : 'red' ;
}

Reason is default css from ui-grd.css have more specificity. So this will take priority.

.ui-grid-row:nth-child(odd) .ui-grid-cell{
background-color: #fdfdfd;
}
.ui-grid-row:nth-child(even) .ui-grid-cell{
background-color: #f3f3f3;
}

We need to provide more specificity in user defined CSS. I have used (!important ) along with css property. It works perfectly fine

.cellColorChange{
    background-color : 'red'  !important;
}

 

 

Advertisements

, , , , ,

Leave a comment

Insert functionality in UIGrid

Introduction

This is a continuation of my previous articles in which I demonstrated the procedure to

In this article I will demonstrate how to implement Add new record functionality in Angular UIGrid.

Prerequisites:

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

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 Adding new record in UIGrid.

You can see a sample Demo of entire functionality below.

demo

UIGrid Updates

We will add a new button on page which responds to click event and open a modal pop up window. Users can enter the details and on save button click we will save the data to database.

AddCustomer function:

AddCustomer function will take the scope object as input which contains all values as provided by user and then save the data to database. User will also see an alert stating the status of insert operation.

Updated Angular code with Insert new Record functionality

Modal Pop up HTML

WEBAPI AddCustomer Method

You can find complete source code of this demo from github

, , , , , , ,

Leave a comment

Implementing delete functionality in UIGrid

Introduction

This is continuation to my previous two articles in which I demonstrated the steps to

In this article I am going to demonstrate how to implement row delete functionality in UIGrid.  The series will contain continuation articles to cover the topic in detail.

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 deleting records in UIGrid.

Sample Demo of Delete functionality is given below

Demo

UIGrid Updates:

We will update cellTemplate in “Actions” column to add Delete button. We will reuse the editRow flag to hide and display delete buttons.  To delete the record,, we call deleteRow function from Delete button

Delete function:

Delete function will take the selected row object as input parameter; we will find the rowindex using input parameter. Using row index we will find CustomerID of selected row and delete the record. Additionally before deleting the record we will ask for user confirmation. Finally we will call the DeleteCustomer method in Factory service to delete the record in database.

Updated Angular code with Delete functionality

HTML

Delete Customer Method(WEBAPI)

 

, , , ,

1 Comment

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 Angular UIGrid in MVC using AngularJS

Description

In this article I will explain the steps for populating UI-Grid in angularjs from database using WebAPI. UI-grid is a powerfull tool which provides a table like representation. Apart from table like structure Ui-Grid also provides functionality like filtering, sorting, exporting etc.  You can find more details about UI-Grid from here

PreRequisites:

Ui-Grid is dependant on AngularJS.Hence ensure that you have added reference of Angular js on page.

Implementation:

Model:

To load the data from database, we are using EntityFramework and its related method. In this example I have used the DatabaseFirstApporach.  DatabaseFirstApporach lets the EnityData Model to generate classes, dbcontext etc from the database automatically. All other functionalities like database and model sync exists as is.

Follow the below procedures to generate Model for Customer database in Northwind database

  • Right click on the Model folder
  • Select Add option
  • And then select the New Item option
  • Choose Data from Installed Templates group
  • Select the ADO.NET Entity Data Model option and Provide a name for it
  • In the Entity Data Model Wizard, Select EF Designer from database and click on Next
  • Choose the Connection string options
    • If you already have connection string configured then you can select that from the available list.
    • If you don’t have the connection string configured then use the New Connection option and create the connection
  • Expand the Table option and then select the tables which you want
  • Click on Finish

You will have necessary class files generated in your solution now

Northwind

You can get more details about how to use DatabaseFirst approach from this link.

Controller (WebAPI)

In this example we are using WebAPI to load the data. The next procedure is to write code to fetch records from database using WebAPI.  For this demo I have used a basic select operation. You can modify this as per your need.

Another point to note here is UI-grid read data which is in Json format, Hence we need to ensure that the data which we return from controller is of Json format. We will use the JsonResult method for this.

View:

On View we will have the codes for UI-Grid and its related files. If you look at the design of UI-Grid it’s a div which will be styled to look like a table at runtime.

We need to add div with an attribute as ui-grid=”gridOptions”.  We add all the details from angular js code to gridOptions and UI-Grid at runtime uses this div to populate the grid.

RouteConfig Changes:

I have changed the Action Name from “Get” to “GetCustomer” to be more specific with what the method do. In order for api to identify the proper method add the below route setting to web api route config

Angular JS Script

Below are the code to fetch the data from database and populate it to UI-Grid. I have used a factory to call the Get Customer method and used that in the main method.

 

, , , , ,

1 Comment