Building grid dynamically | Infragistics Forums

Building grid dynamically

dandy posted over 6 years ago

Just to confirm I'm not insane--if the following works:

$( '#idGrid' ).igGrid(
{
  ...
  features: [
   {
    name: 'GroupBy',
    columnSettings: [
     {
      columnKey: 'MpName',
      isGroupBy: true,
      dir: 'desc'
     }
    ]
   }
  ]
}
);

...then the following should be expected to work as well, right??

var columnSettingsGroupBy = [];
...
columnSettingsGroupBy.push( { columnKey: 'MpName', isGroupBy: true, dir: 'desc' } );

$( '#idGrid' ).igGrid(
{
  ...
  features: [
   {
    name: 'GroupBy',
    columnSettings: columnSettingsGroupBy
   }
  ]
}
);

I have a loop iterating over column names and building my columnSettingsGroupBy array dynamically (pushing values into it based on settings saved in a file rather than being hardcoded), but ultimately the end result is the same. So if I can confirm that the above can be expected to work...I'll know the problem probably lies within my loop somewhere (even though by the time it's done, my array looks the same).

485

Offline Vasil Pavlov posted over 6 years ago in reply to dandy

Hello dandy,

I am just guessing what your cfgObj looks like, but in order to reproduce this behavior I used an object literal with a column that has to be hidden and another one that should be initially grouped. I used your loop as well. The code is provided below and it is working as expected on my side.

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.loader.js"></script>
</head>
<body>

    <table id="grid"></table>
    <script>
        $.ig.loader({
			scriptPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/",
			cssPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/",
			resources: "igGrid.*, igCombo",
            ready: function () {
                let ds = [
                    { "ProductID": 1, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 36 },
                    { "ProductID": 2, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 },
                    { "ProductID": 3, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 },
                    { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 },
                    { "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 },
                    { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 },
                    { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 },
                    { "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 },
                    { "ProductID": 9, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 },
                    { "ProductID": 10, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 },
                    { "ProductID": 11, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 39 },
                    { "ProductID": 12, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 },
                    { "ProductID": 13, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 },
                    { "ProductID": 14, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 }
                ]
                
                columns = [
                        { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%",},
                        { headerText: "Product Name", key: "ProductName", dataType: "string", width: "25%"},
                        { headerText: "Category", key: "CategoryName", dataType: "string", width: "25%"},
                        { headerText: "Units In Stock", key: "InStock", dataType: "number", width: "35%"},
                    ]

                let cfgObj = {"Hiding": ["CategoryName"], "Grouping": ["InStock"]}
                let columnSettingsGroupBy = [];
                if ( cfgObj != null ) {
                 for ( var c in columns )  {
                    var colObj = columns[c];
                    console.log( 'Processing column with key ' + colObj.key );
                    if ( cfgObj.Hiding !== undefined )
                    {
                    var oHidden = cfgObj.Hiding.find( o => o === colObj.key );
                    if ( oHidden !== undefined )
                    {
                        colObj.hidden = oHidden.hidden == 1 ? true : false;
                    }
                    else
                    { 
                        colObj.hidden = false;
                    }
                    }
                    if ( cfgObj.Grouping !== undefined )
                    {
                    var oGrouping = cfgObj.Grouping.find( o => o === colObj.key );
                    if ( oGrouping !== undefined )
                    {
                        columnSettingsGroupBy.push( { columnKey: colObj.key, isGroupBy: true, dir: oGrouping.dir } );
                        console.log( 'Grouping column ' + oGrouping.key );
                    }
                    else
                        console.log( 'Could not find a grouping option for column ' + colObj.key );
                    }
                    else console.log( 'No grouping option whatsoever' );
                    }
                    console.log( columnSettingsGroupBy );
                }

                $("#grid").igGrid({
                    dataSource: ds,
                    responseDataKey: "results",
                    primaryKey: "ProductID",
                    height: '400px',
                    columns: columns,
                    features: [
                        {
                            name: "Sorting"
                        },
                        {
                            name: "ColumnMoving"
                        },
                        {
                            name: "Resizing"
                        },
                        {
                            name: "GroupBy",
                            columnSettings: columnSettingsGroupBy
                        }
                    ]  
                })
            }
        })
        
    </script>
</body>
</html>

Feel free to modify it in case I am missing something important here, or if the cfgObj looks very different from what I have used. If you reproduce the behavior sending the sample back would be appreciated and would allow me to debug on my side and give you a more detailed answer on what is the root cause.

If you need any additional assistance, feel free to contact me.

15

Offline dandy posted over 6 years ago in reply to Vasil Pavlov

Thanks for confirming. Indeed, I read my file and process its content (and build my array from it) before the grid is built - and then I don't need to touch that array ever again (in fact it would go out of scope once the function building the grid dynamically returns). If I need to make additional changes at runtime, but after the grid's already been initialized, I do it through the proper channels, such as:

$( '#idGrid' ).igGridGroupBy( 'groupByColumn', colName );

Here's more of what my initialization looks like. 'columns' is the column array I provide to the grid, and columnSettingsGroupBy is the array provided to the columnSettings property for GroupBy (as per my previous sample). As mentioned before, if the hardcoded line (currently commented out below) is used, the grouping is done - but when it goes through the loop, it's not. 'cfgObj' is an object representing the configuration options read from a file. As you can see, I'm also hiding columns at the same time (which works).

var columns = [
{ headerText: 'col1', key: 'col1', dataType: 'string' },
{ headerText: 'col2', key: 'col2', dataType: 'string' },
{ headerText: 'col3', key: 'col3', dataType: 'string' },
};

var columnSettingsGroupBy = [
// { columnKey: 'col1', isGroupBy: true, dir: 'desc' }
];

if ( cfgObj != null )
{
for ( var c in columns )
{
  var colObj = columns[ c ];
  ConsoleLog( 'Processing column with key ' + colObj.key );
  if ( cfgObj.Hiding !== undefined )
  {
   var oHidden = cfgObj.Hiding.find( o => o.key === colObj.key );
   if ( oHidden !== undefined )
   {
    colObj.hidden = oHidden.hidden == 1 ? true : false;
   }
   else
   {
    colObj.hidden = false;
   }
  }
  if ( cfgObj.Grouping !== undefined )
  {
   var oGrouping = cfgObj.Grouping.find( o => o.key === colObj.key );
   if ( oGrouping !== undefined )
   {
    columnSettingsGroupBy.push( { columnKey: colObj.key, isGroupBy: true, dir: oGrouping.dir } );
    ConsoleLog( 'Grouping column ' + oGrouping.key );
   }
   else
    ConsoleLog( 'Could not find a grouping option for column ' + colObj.key );
  }
  else ConsoleLog( 'No grouping option whatsoever' );
}
ConsoleLog( columnSettingsGroupBy );
}

Regardless of the method I use to initialize columnSettingsGroupBy, this is what Console.Log( columnSettingsGroupBy ) shows, just before handing it off to the grid initialization:

Because for all intents and purposes it's identical, this is why I get confused as to why the hardcoded array works, but not the one built from the loop.

Anyway, at this point it doesn't matter much, because I do have the option to call:

$( '#idGrid' ).igGridGroupBy( 'groupByColumn', colName );

...after the grid's already been initialized - but I would think it best if the grouping was simply done as the grid is being initialized instead of waiting after it's been rendered already.
Cancel
Reply

Cancel
485

Offline Vasil Pavlov posted over 6 years ago

Hello dandy,

Thank you for posting in our forum.

Both of these snippets are valid, but it is recommended that the columnSettings array gets defined before you initialize and bind the grid.

Providing some of your code that reads the file, as well as this for-loop you mentioned would be appreciated and would allow me to give you a more detailed answer.

Also, do you have a requirement to modify the columnSettings array afterwards at runtime, or do you just want to construct it dynamically?

If you need any additional assistance, feel free to contact me.
Cancel
Reply

Cancel