Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
jAndika
1150
How to render Button for each row in a grid
posted

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)

  • 23953
    Verified Answer
    Offline posted

    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.zip