Archive for category JQuery

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.

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

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.

We have multiple ways to read excel file in C# and then convert it to JSON or insert the data in to database etc. However there are not much options available when it comes to reading the Excel file using javascript. In this article I will explain an option using a Jquery Plugin called SheetJS.

To use the SheetJS user need to add the reference files first. You can do this either by downloading files from here and then refer these js files to project. Another option is to use the online CDN available.

In this article I am going to explain how to hide columns in grid view based on user selection in checkbox. We can achieve this requirement with both client side and server side approach. Here I am going to explain the client side approach where we uses Jquery to hide column in gridview.

Gridview will render as table with header and rows at runtime, we will use jquery selector to access this header and calculate selected column index and then hide or show accordingly.

When using WEBAPI you will get data in client side and you need to manipulate it at client side so that the data will get populated in Gridivew. Point to note here is we cannot go with the normal approach of setting DataSource and calling DataBind method. We have various options to load data into grid like AngularJs, Jquery etc.

As mentioned earlier in this article I am using getJSON() method to fetch the value and then populate the data in gridview. Gridview will load as table at runtime we will access this table and then append the values to it.

First we need to populate an empty row in GridView. Reason behind this is if we didn’t assign any datasource then the GridView won’t populate at runtime and we won’t be able to access it at client side.

When we add the WebAPI references in your project you will see a Model folder and Controller folder.

Model

Here we add the Model classes which basically represents data in WebAPI. For this article we add Customer class. Right Click on the Model folder and choose Add and then select class file. Name it like Customer

In controller we will add the code to fetch values from database. Right click on the Controllers folder and Choose Add and then select Controller. In code you can see an HttpGet entry added above to GetCustomers method. This is because Rest WebAPI is making use of verbs(Get,Post,Put,Delete) for each actions in Read,Create,Update,Delete respectively. You can get more details from here

In this article I am going to explain how to search and Populate GridView from database using Jquery Ajax.

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.

First we need to populate an empty row in GridView. Reason behind this is if we didn’t assign any datasource then the GridView won’t populate at runtime and we won’t be able to access it at client side

Next is the GetOrderDetails method which will read the parameter from client side and the search the database and then pass the result set back. Note the [Services.WebMethod()] attribute I added to the GetOrderDetails method,this is important otherwise the serverside method will not be called from client side jQuery AJAX call.

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.

In this article I am going to explain how to get the selected value from RadioButtonList control using JQuery in Asp.Net.

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.

Implementation:

Here we will make use of Jquery selectors to get the selected item value and text from RadioButtonList and then get the value.