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
260
How to bing the hyper Link in Ignite Grid - With passing value
posted

Hi,

I tried more in insert hyper link in ignite grid . please help out . I need 1 column should be hyperlink (run time value) with passing parameter.

Issue : Href value and Name should dynamically bind  Example ContractName in  href and contract type to passing variable.

var data1 = [
                      { "StartDate": "07/01/14", "EndDate": "07/01/16", "ContractName": "Data Monitoring Committee", "ContractType": "DMC Contract", "Brand": "", "ContractStatus": "Pending" }

                      { "StartDate": "08/01/14", "EndDate": "08/01/16", "ContractName": "General Consulting", "ContractType": "General Consulting Contract", "Brand": "", "ContractStatus": "Signed" },

];

$("#grid1").igGrid({
                autoGenerateColumns: false,
                renderCheckboxes: true,
                width: "100%",
                columns: [
                    { headerText: "Start Date", key: "StartDate", dataType: "date", width: "15%", format: "dd/MM/yy" },
                    { headerText: "End Date", key: "EndDate", dataType: "date", width: "20%" },
                    { headerText: "Contract Name", key: "ContractName", dataType: "string", width: "20%" },
                    { headerText: "Contract Type", key: "ContractType", dataType: "string", width: "15%", unbound: true, template: "<a href="runtime value" > ${ContractType} </a>" },
                    { headerText: "Brand", key: "Brand", dataType: "string", width: "15%"},
                    { headerText: "Contract Status", key: "ContractStatus", dataType: "string", width: "15%" }
                ],

                primaryKey: "ContractType",
                dataSource: data1,
                responseDataKey: "results",
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "EmployeeID",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "PostalCode",
                                classes: "ui-hidden-phone"
                            }
                        ], responsiveModes: {
                            customPhone: {
                                minWidth: 0,
                                maxWidth: 600
                            },
                            // alternative mode
                            customAlt: {
                                minWidth: 601,
                                maxWidth: Number.MAX_VALUE
                            }
                        }
                    },
                    {
                        name: "Sorting",
                        type: "local"
                    }
                ]
            });