Hello Mason,

 

The Columns Configuration section in my first response shows snippet for this as well, the ng-template looks very similar, but is decorated with an igxHeader directive instead. If you have already added this ‘.center-align’ class to your component CSS file, this is what the column declaration would look like:

 

    
        
{{ column.field }}
    

 

Please note that if you want to style both the column cells and the headers, you would need to use the two snippets I have shown together, like this:

    
        
{{ column.field }}
    
    
            {{ cell.value }}
    

 

Feel free to contact me if you need any additional assistance.

Hello Ronny,

 

I am glad that you find my answer helpful.

Feel free to contact me if you have any additional questions regarding this matter.

Hello Ronny,

 

This error message usually shows up when you try to call an Updating API method, but have not enabled the Updating feature itself by adding it to the “features” array. Here is a sample grid configuration:

$("#gridUpdating").igGrid({
    primaryKey: "ProductID",
    columns: [
   // …some columns…
    ],
    dataSource: ds,
    features: [
    // …some other features…
    {
        name: "Updating",
        enableAddRow: true,
        enableDeleteRow: false
    }]
});

 

I see the “Add new row” UI on the first screenshot you have provided – it shows up only when the Updating has been enabled. Have you disabled it afterwards for some reason, or is it still enabled?

Hello Dev,

 

Setting the parent container’s height to a 100%, would make it take the height of its parent, not the viewport. Did you try setting it to 100vh instead?

 

Providing me an isolated code sample if possible, whether on StackBlitz or a .zip file, would be much appreciated as it would allow me to see your configuration, the CSS that you apply, debug on my side and find what is causing the issue so I could give you a more detailed answer.

Hello Ronny,

 

Deleting a row in the original array would not be reflected by the igGrid, because by design it creates an internal copy of the data, which it uses for databinding afterwards.

 

Instead, try calling the deleteRow method that the igGridUpdating API exposes. It expects a rowId, also called a primary key, to be passed in, then deletes the given record from the igGrid’s data source (that is the internal copy of the original array) and updates the UI.

In your configuration autoCommit has been set to “true”, which means you do not have to explicitly call the “commit” igGrid method – when you delete a row, the transaction would be committed automatically and the UI would be updated accordingly.  

 

Feel free to contact me if you have any additional questions regarding this matter.

Hello Dev,

 

Thank you for posting in our forum.

 

As there were changes in the latest versions of Ignite UI for Angular, with regard to the grid’s auto-sizing and filling its container’s width and height, I would appreciate some additional information:

 

1. Which version of Ignite UI for Angular do you use? The auto-sizing behavior has been changed in the recent versions, so this could make a difference in your scenario.
2. Do you have the data when databinding the grid initially, or does it come later on (for example as a result of some async operation or a call to some web API)?
3. The “height: 100%” means the grid would take 100% of the height of its parent container. How do you set the parent’s height?

 

If you are using some of the latest versions of Ignite UI for Angular, try this: In addition to setting the hierarchical grid’s height to 100%, try also putting it in a parent <div> element, which has a “height: 100vh;”.

That way the browser would know you want a div that fills the entire viewport height, and its child element (the grid) should take 100% of the available height.

 

I look forward to your reply.

Hello Ronny,

 

Thank you for posting in our forum.

 

In case you have not set the “autoCommit” option to “true”, the igGrid would not commit the pending transactions to the UI automatically – if you delete a row from the data source (on the client side), the grid would strikethrough the text and change its color in order to notify you the row has been deleted. Here is a sample screenshot:

 

 

If you want to commit the pending transaction (in your case – deletion of a row) and update the UI, try calling the “commit” API method in the AJAX “success” callback.

 

As I notice you use some custom templating for the last column, I would appreciate if you elaborate some more on the way you delete the row and when does it happen – is it after the call to the DB? If that is the case, then you would want to first call the “delete” API method, and then “commit” the transaction.

Another possible approach would be to set “autoCommit” to true in the grid options – that way you would not have to call the “commit” method manually – it depends on your scenario and the requirements that you have.

 

Please let me know if you need any further assistance or if you have some additional questions.