How to render Button for each row in a grid

Hi,

Just started using igGrid here, and was wondering what would be the best approach to show a button for each row of data in igGrid ? for instance, I want to have a ‘Copy’ button for each row of data.

I’ve been looking around and found something called rowTemplate, but the jQuery js file kept throwing error, below is the code snippet:

@(Html.Infragistics().Grid<Matrix>()
.AutoGenerateColumns(false)
.ID(“testGrid”)
.RenderCheckboxes(true)
.Columns(column =>
{
column.For(x => x.ID).HeaderText(” “).Width(“80”);
column.For(x => x.Description).DataType(“string”).HeaderText(“Description”);
column.For(x => x.Status).DataType(“string”).HeaderText(“Status”);
column.For(x => x.EffectiveFrom).DataType(“date”).HeaderText(“Effective From”);
column.For(x => x.EffectiveTo).DataType(“date”).HeaderText(“Effective To”);
column.For(x => x.CreatedBy).DataType(“string”).HeaderText(“Created By”);
})
.RowTemplate(“<tr><td>test</td><tr>”)
.JQueryTemplating(true)

Hi,

Your best option is to use feature called “Column template”.

Here you can find the help topic on the subject and here you can find the sample in our samples browser.

Attached you can find sample demonstrating column template for your scenario.

Here is the grid initialization code:

Code Snippet

1. $.ig.loader(function () {
2.     $(“#grid1”).igGrid({
3.         width: 700,
4.         height: 400,
5.         columns: [
6.             { headerText: “”, key: “ProductID”, dataType: “number”, template: “<input type=\”button\” value=\”Copy\” data-id=\”${ProductID}\” onclick=\”handleCopy(this)\”/>”, width: 150},
7.             { headerText: “”, key: “Name”, dataType: “string”, template: “Product Name: ${Name}”, width: 250 },
8.             { headerText: “Product Number”, key: “ProductNumber”, dataType: “string”, width: 100 },
9.             { headerText: “Color”, key: “Color”, dataType: “string”, width: 100 },
10.             { headerText: “Standard Cost”, key: “StandardCost”, dataType: “string”, width: 100 }
11.         ],
12.         autoGenerateColumns: false,
13.         dataSource: adventureWorks,
14.         responseDataKey: “Records”
15.     });
16. });

In the sample I’ve defined template which creates button for the ProductID column. I also added data-id attribute to the button so I can later use it to identify the row from the grid. There is also a onclick handler which shows the data from the data-id attribute.

Note that you need to define template on the column from the data source(i.e. you cannot define unbound column).

Hope this helps,

Martin Pavlov

Infragistics, Inc.

igGridColumnTemplate

Martin,

Thanks for the reply. That solution works but now I run into another problem. Once I use that Column Template feature, the boolean column that used to render checkboxes stop doing that.

Do you know why the grid is doing that ?

Hello jAndika,

Thank you for the update. I am looking into the matter of the Boolean column no longer rendering checkboxes after using the template column. I will give you a progress update by the end of the day tomorrow.

 

Sincerely,

Mike P.

Developer Support Engineer

Infragistics, Inc.

http://www.infragistics.com

Hi Jeffrey Andika,

What you’re observing is a known issue. The renderCheckboxes description in the API documentation states that it doesn’t work when templating is enabled. In this case you should define column template and for the boolean columns in your grid.

I’ve updated the sample to include template for MakeFlag boolean column. I simply declare checkbox element in the template.

Here is the code for the grid initialization:

Code Snippet

1. $.ig.loader(function () {
2.     $(“#grid1”).igGrid({
3.         columns: [
4.             { headerText: “”, key: “ProductID”, dataType: “number”, template: “<input type=\”button\” value=\”Copy\” data-id=\”${ProductID}\” onclick=\”handleCopy(this)\”/>”, width: 150},
5.             { headerText: “”, key: “Name”, dataType: “string”, width: 250 },
6.             { headerText: “Product Number”, key: “ProductNumber”, dataType: “string”, width: 100 },
7.             { headerText: “Color”, key: “Color”, dataType: “string”, width: 100 },
8.             { headerText: “Standard Cost”, key: “StandardCost”, dataType: “string”, width: 100 },
9.             { headerText: “Make flag”, key: “MakeFlag”, dataType: “bool”, template: “<input type=\”checkbox\” {{if ${MakeFlag} === \”true\”}} checked=\”checked\” {{/if}} disabled=\”disabled\”>”, width: 100 }
10.         ],
11.         autoGenerateColumns: false,
12.         dataSource: adventureWorks
13.     });
14. });

You can find the whole working sample attached to this post.

Hope this helps,

Martin Pavlov

Infragistics, Inc.

Attachments:

1. igGridColumnTemplate-1.zip

Thanks, that works. Missed that comment on the API.

Jeffrey

I can run your sample code just fine.  However, I have the same code except I am not using the ig.loader to create the grid.  When I click on one of the buttons associated with the row, my "handleCopy" method is undefined. I know it is working because I put alert(this.Id) in the onclick attribute and that works just fine. For some reason, it my event handler cannot be found.

Here's my code… as you can see I even tried passing the handler function to the function that creates the grid and that didn't work either. Any Ideas?

I found a way around the problem but it's not pretty. I defined my handler like this:

$.onDissociate = function (id_) {

// Handle dissociation here

};

And the onclick looks like this:

onclick=\"$.onDissociate(this.id)\"

It's ugly but it works.

Hi Martin,

I would like to add button to every alternate column in the row. I saw this post that you suggest to use column template. As I know that one can achieve the same with rowTemplate. I am just wondering what is the best practice and what are the difference between the two. Thanks.

Hi Andy,

Column templates and row templates are basically the same. In fact column template internally is transformed to row template. Column template makes your job easier if you only need to set template for only a subset of the columns.

I’ve attached a sample which demonstrates how to put a button for alternate rows only.

Hope this helps,

Martin Pavlov

Infragistics, Inc.

 

Attachments:

1. igGrid_ButtonColumn_AlternateRow.zip

This is a solution for some scenarios but it does not work when you have an ID column that must be displayed and the button also need to be tied to that same key.  In your scenario where you bound the Product ID to the button, if you needed to also have a column to display the Product ID and button to Remove that item (tied to Product ID), the template version would place a button in any column that is tied to the key "ProductID".

Any other suggestions for putting a button in the grid that is "associated with" but not directly tied to that key?

For example, I have a grid full of users.  In the far right column, I want a button that says "Remove" for each user. The far left column has "User ID".  When the user clicks the Remove button for a specific user, I need to be able to get the User ID associated with that button. I don't want the button to be bound to any key at all.  I just want to know when one of the buttons was clicked what ID is associated with it so I can handle the removal in the background.

Off the top of my head, I can think of two solutions:

– Do you have row selection enabled ? if so, you can grab the selected row because I think the row is selected no matter where you click on the row using: $(".selector").igGridSelection("selectedRow");

then grab the ID from the row object returned from that call

– If you're using .NET MVC, you can pass the Product ID in a viewbag, and put it as a property of the button, then on click you should be able to retrieve the ID from the button property

 

I actually just went around the problem by adding an additional property to my view model.  I now have UserId and UserId2 and I just bind the button's id attribute to UserId2.  Everything works fine.  I wish there was a better/cleaner way though.