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
170
FORMAT COLUMNS FOR DYNAMIC DATA BINDING IN THE IGNITE UI GRID
posted

Hi Friends,

As per the our requirement we required to provide the hyperlink in some of the grid columns, the grid columns shall not be static and it shall be loaded dynamically from the database.

We can able to bind the grid by enabling the autoGenerateColumns: true option. but we could not able to format/set the hyperlink in the Grid columns.

please help us to proceed this issue further. 

Also please suggest is it possible to apply the template for the column after binding the grid data? since by clicking the hyperlink we required to show the popup window based on the corresponding cell value.

The below code sample is for your reference.

Function BindStudyGrid(gridID, gridData) {

$("#" + gridID).igGrid({
primaryKey: "StudyId",
autoGenerateColumns: true,
width: "100%",
height: "350px",
columns: [
{ headerText: "ID", key: "StudyId", dataType: "number", width: "0px" }
],
fixedHeaders: true,
autofitLastColumn: false,
features: [
{
name: "Paging"
},
{
name: "Filtering"
},
{
name: "Sorting"
}
],
enableHoverStyles: true,
dataSource: gridData
});
}

if any more information is required from us, please let us know.  

Parents
No Data
Reply
  • 17590
    Offline posted

    Hello Satkhi,

    Thank you for posting in our community.

    In order to apply a column template after initialization the rendered event can be handled. In this event the template can be created and assigned to the template option of a particular column. This event is fired after the whole grid widget has been rendered. For example:

    $(document).delegate("#grid", "iggridrendered", function (evt, ui) {
            var col = $("#grid").igGrid("option", "columns")[2], 
                  tmpl = "<a href='http://infragistics.com'>${LastName}</a>";
                  col.template = tmpl; 
            })

    After the new template is set the dataBind method should be called in order to apply the changes.

    I am attaching a small sample illustrating my suggestion for your reference.  Please test it on your side and let me know whether it helps you achieve your requirement.

    igGridColumnTemplateAfterInitialization.zip
Children