igGrid, merge json objects

I colleague of mine came to me and and showed me a screenshot of excel layout representing some data and asked me: “Is it possible to achieve this with igGrid?” He had some predefined data structure in form of json and he wanted to merge two columns in one.  Here is what the initial json structure was:


     {
		"Control":"xamDataChart",
		"Product_Impact":"Improvement",
		"Description":"Indexes of CategoryDateTimeXAxis should not resorted on every zoom level change of the chart.",
		"Notes":"Performance when zooming and panning with the CategoryDateTimeXAxis has been improved."
	},
	{
		"Control":"xamMap",
		"Product_Impact":"Fix",
		"Description":"When maximazing browser or WPF window, xamMap does not resize to fill up the whole area",
		"Notes":""
	}

He wanted to achieve the following layout:

“Notes” column should be merged to “Description”, Here is a function that I’ve came up with approaching this requirement.

   function merge(data) {
        //keep  the merged objects
        var mergedData = [];

        for (i = 0; i < data.length; i++) {

            /*Iterate through the arry elements*/
            //console.log(i);

            var mergedObject = {};
            var arrayElement = data[i];

            /*Iterate through the object properties */
            for (obj in arrayElement) {
                /*Merge Notes property to Description one*/
                if (obj == 'Notes' && '' != arrayElement[obj]) {
                    mergedObject['Description'] +=
						' </br> <span class="notesClass">Notes</span> '
                            + arrayElement[obj];
                } else {
                    mergedObject[obj] = arrayElement[obj]
                    //console.log(mergedObject);
                }
            }
            /* Add the newly created object to merged array*/
            console.log(i);
            mergedData.push(mergedObject);
        }
        return mergedData;
    }

If you are wondering how the igGrid looks in this scenario, here is  its definition:

    var template = "<tr><td><span class='row_template'>Control:</span> ${Control} </td>" +
	"<td><span class='row_template'>Product Impact: </span> ${Product_Impact} </td>" +
	"<td><span class='row_template'>Description: </span> ${{Description}} <span>  ${{Notes}} </span></td></tr>";

	$("#grid1").igGrid({

		autoGenerateColumns: false,
		rowTemplate: template,

		columns: [
					{ headerText: "Control", key: "Control" , width: '150px' },
					{ headerText: "Product Impact", key: "Product_Impact" , width: '110px' },
					{ headerText: "Description", key: "Description" , width: '900px' },
				    ],
        dataSource: merge(data),
        features: [
				        {
				            name: 'Sorting',
				            type: "local"
				        },
                        {
                        name: 'Filtering',
                        type: "local"
                        },
                        {
					            name: 'GroupBy'
				        }
			        ]
            });

I’ve used rowtemplate feature in order to achieve this layout.
More information about igGrid can be found here : http://samples.infragistics.com/jquery/grid
Best,
Rado

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s