show buttons on iggrid based on conditions for each row

Question

I am showing an igGrid on my view which have edit and delete enabled on each row.

I want to show the buttons for Edit and Delete based on records. Based on column data, some row will have both Edit and Delete button while others can have only Edit or Delete button. I want to control these buttons when grid is rendered so user dont see any button which is not applicable.

Please guid me how to achieve this feature in igGrid and what event I should call?

Answer 1

There are actually a few way you can do this, but I think the easiest would be to use Conditional Templates (either row or for the specific column). Using those you can evaluate other column's values and based on that render buttons. I started with the column template sample and added another column for the edit:

$("#grid").igGrid({
    //...
    columns : [
        {
            headerText : "",
            key : "Delete",
            dataType : "string",
            width : "10%",
            unbound : true,
            template : "{{if ${MakeFlag} }}<input type='button' onclick='deleteRow(${ProductID})' value='Delete' class='delete-button'/>{{/if}}"
        }
        //...
    ]
});

jSFiddle: http://jsfiddle.net/damyanpetev/dVLrA/

You can use this template on the actual column that you evaluate if its only purpose is being a flag to enable the buttons. If you want more flexibility or to use more than one sequential condition to put both buttons in one column you can use jsRender instead like in this: http://jsfiddle.net/damyanpetev/85ZGS/

Note: set "localSchemaTransform" to false if your templates need to evaluate values that are not going to be bound to columns.

Documentation links for further reading:

• Since I have no idea what you would do with the edit button - here's a link to the Grid's Updating feature
• Infragistics Templating Engine
• jsRender Integration (igGrid)