Hello All,

This is regarding an odd behaviour of iggrid what i have noticed while implementing multicolumn header [ two or more column with single column header] feature in ignite ui iggrid.

I have a employeeList with following columns : EmpNo,First Name,Last Name,Salary, Is Active.

Now I have to make a iggrid with following header:Employee Number, First Name,Last name, Salary.But under first column header following three columns needs to be shown:

1) checkbox to select a row,

2) image base on active or not

3)Employee Number

While implementing multicolumn header in my iggrid i am getting following jquery error "Unable to get the value of rowspan. object is null or undefined".

If I remove that feature I am getting following jquery error: "Unable to get the value of group. object is null or undefined".

Following is the sample code snippet:

<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>

<script src="~/Scripts/jquery-ui-1.10.4.js"></script>

<link href="~/IgniteUI/css/structure/infragistics.css" rel="stylesheet" />

<link href="~/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

<link href="~/IgniteUI/css/structure/jquery.ui.theme.css" rel="stylesheet" />

<script src="~/IgniteUI/js/infragistics.core.js"></script>

<script src="~/IgniteUI/js/infragistics.lob.js"></script>

Ajax call:

   $.ajax({
                    url: '@Url.Action("LoadEmployee", "Employee")',
                    type: "POST",
                    data: { empNo: $("#txtEmployeeNo").val() },
                    async: false,                  
                    cache: false,
                    success: function (data) {
    var empData=[];
                                    var image = '@Url.Content("~/Images/ActiveImage.jpg")';
     for (var i = 0; i < data.employeeList.length; i++) {
                                    debugger;
                                    var empRow = {};
                                    var item = data.employeeList[i];
     if(item.isActive=="Y")
     {
     empRow.ActiveImage ='<input type=\'image\' id=\'imgActive\' src=\'' + image + '\' style=\'width: 14px; height: 14px; visibility:visible\' />';
     }
     else
     {
     empRow.ActiveImage ='<input type=\'image\' id=\'imgActive\' src=\'' + image + '\' style=\'width: 14px; height: 14px; visibility:hidden\' />';
     }
               empRow.IdCheck='<input type="check" id="chkEmployee"'+i+' />';
               empRow.EmpNo = (item.EmpNo + "").trim();
                                    empRow.EmpFirstName = (item.EmpFirstName + "").trim();
                                    empRow.EmpLastName = (item.EmpLastName + "").trim();
                                    empRow.EmpSalary  = (item.EmpSalary + "").trim();                                  
        empData.push(empRow);

    }

    $('#tblEmployee').igGrid({
                                autoGenerateColumns: false,

                                columns: [
                                    {
                                        headerText: "Employee Number",
                                        group: [
                                               { headerText: "", key: "IdCheck", dataType: "CheckBox", width: "25px" },

                                               { headerText: "", key: "ActiveImage", dataType: "image", width: "25px" },

                                                { headerText: "", key: "EmpNo", dataType: "string", width: "100px" },
                                        ]

                                    },

                                    { headerText: "First Name", key: "EmpFirstName", dataType: "string", width: "100px" },
                                    { headerText: "Last Name", key: "EmpLastName", dataType: "string", width: "100px" },
                                    { headerText: "Salary", key: "EmpSalary", dataType: "string", width: "200px" },
                                 
                                ],
                                dataSource: empData,
                                height: "400px",
                                width: "550px",
                                features: [

                                     {
                                         name: 'Sorting', type: "local"
                                     },
                                             {
                                                 name: 'MultiColumnHeaders'
                                             },

                                ]

                            });

Please help me to resolve this issue.

Regards,

Biswajit