hi.

i can create a column template?? I need include imagebutton for all datas in my grid for row, but is possible that issue??

thanks

Hello ckorrat,

There is no column template feature out of the box, but you can use row template to accomplish your scenario.

Your code should look like this:

$(function () {

$("#grid1").igGrid({

autoGenerateColumns: false,

rowTemplate: "<tr><td> ${Name} </td> <td> <button type="button" onclick="showDetails(${ID})"><img width='110' height='150' src='${ImageUrl}'></img></button></td><td> <a href='${Link}'> ${Link} </td></tr>",

columns: [

{headerText: "ID", key: "ID" },

{headerText: "Name", key: "Name" },

{headerText: "Image", key: "ImageUrl" },

{headerText: "Link", key: "Link" }

],

jQueryTemplating: true,

dataSource: exampleDataSource

});

});

In the example above I defined button for the second column. When the button is clicked it will execute showDetails function and will pass the "ID" value of the row.

Hope this helps,

Martin Pavlov

Infragistics, Inc.

thanks for your response Martin.

Can i do this in razor? because i have many features enabled, but i don't know how applicate this option.

thanks again.

Hello ckorrat,

The problem is that in the row template you define 3 columns, but in the column definitions of the table you define 2 columns.

You can choose from 2 solutions:

1.Put the button in one of 2 columns you have defined.
Pros:
You don't have to define 3-rd column, because defining 3-rd column will need extra work(which I'll explain in the second solution).
Cons:
It is not visually appealing.
When clicking on the button the cell will be selected which will annoy the user.

2.Put the button in its own column.
This is what you did, but there is one more step. You have to define another column in the column definitions. The problem is that you cannot define custom column in the column definition so you have to duplicate the definition of one of the existing columns.
For example your column definitions will look like this:

           Columns(column => {
                column.For(x => x.idPais).DataType("string").HeaderText("idPais");
                column.For(x => x.Nombre).DataType("string").HeaderText("Nombre");
                @* this definition will hold the button from the template *@
                column.For(x => x.idPais).DataType("string").HeaderText("");
            })

<script type="text/javascript">
 $(function () {
        $(document).delegate("#grid1", "iggridselectionactivecellchanging", function (evt, ui) {
            //cancel activation of the cell for column with the button
            if(ui.cell.index === 2)
                return false;
        });
        $(document).delegate("#grid1", "iggridselectioncellselectionchanging", function (evt, ui) {
            //cancel selection of the cell for column with the button
            if(ui.cell.index === 2)
                return false;
        });
    });
</script>

In order to hide the filter of the column which holds the buttons you can add similar code to this one:

<style type="text/css">
    .hideButtonColumnFilter
    {
        display: none;
    }
</style>
<script type="text/javascript">
$(function () {
     // here I assume that the buttons column is the last column
               $("#grid1 .ui-iggrid-filtercell").last().addClass("hideButtonColumnFilter");
           });
</script>

Note: These workarounds cannot be done in Razor.

Hope this helps,

Martin Pavlov,

Infragistics, Inc.

Here's an example of my current grid:
                    $("#SearchResults").igGrid({
                        autoGenerateColumns: false,
                        columns: [
                                { headerText: "Id", key: "Id", width: "80px", dataType: "string" },
                                { headerText: "Name", key: "EntityName", width: "140px", dataType: "string" },
                                { headerText: "Address", key: "EntityAddress1", width: "160px", dataType: "string" },
                                {headerText: "City", key: "EntityCity", width: "80px", dataType: "string" },
                                { headerText: "State", key: "EntityState", width: "30px", dataType: "string" },
                                { headerText: "Zip", key: "EntityZip", width: "55px", dataType: "string" },
                                { headerText: "DOB", key: "DateOfBirth", width: "60px", dataType: "date" },
                                { headerText: "Phone", key: "HomePhone", width: "80px", dataType: "string" }
                                ],
                        dataSourceType: 'json',
                        dataSource: obj,
                        height: '300px',
                        features: [
                            {
                                name: 'Sorting',
                                type: "local",
                                columnSettings: [
                                    { columnKey: "EntityName", currentSortDirection: "ascending" },
                                    {
                                        columnKey: "SelectEntity",
                                        editorType: 'button'
                                    }
                                ]
                            },

                        ]
                    });

Related to this, I'm simply trying to add a button column to "select" the row.  Right now the row can be selected by double clicking, which then autofills out some fields on the form.  Can someone point me to an example of the doing this one the client side as I'm not having much luck finding what I'm looking for...  I did find the "features" section of the igGrid, but setting a column's "editorType" to 'button' does not produce a column of buttons.  In fact it throws an error...

I appreciate any references, etc.

Hello ckorrat,

I was able to workaround the problem.

Simply speaking you have to change the keys of the columns with links (because 3 columns has the same keys) and then use the columnSettings to disable sorting and filtering for these two columns by key.

Your code for the columns definition should look like this:

Your code for the Features definition should look like this:

Hope this helps,
Martin Pavlov
Infragistics, Inc.