Forums Ignite UI for jQuery
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
Close
Julie Kirwin
505
Issue with restoring columns that use a formatter
posted

Hello, 

I've been working on an igGrid that uses the formatter to do a simple conversion and add commas... the setup looks something like this. 

{
headerText: "Product Weight", key: "Weight", dataType: "string", width: "30%", formatter: RecalculateWeights, template: "<div class='colAlign'>${Weight}</div>"
}

 

//Formatter for igGrid weight cells to display correct weight format
function RecalculateWeights(val) {
     //Convert to Kgs
     val = val * 2.2046;

     val = Math.round(val);
     return NumberWithCommas(val);
}

//Adds commas to formatted weights
function NumberWithCommas(n) {
     return (n ? n.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",") : 0);
}

This all works fine as is. I also added column moving to my grid and began saving the column positions and restoring them in the rendering event in the grid.
This also works fine as is.

rendering: function (evt, ui) {
     var columns = JSON.parse(sessionStorage.getItem('myGridColumns'));
     if (columns != null) {
          $("#grid").igGrid("option", "columns", columns);
     }
}

However, it seems the combination of using a formatter and restoring the columns in the rendering event is not working together. It over looks the formatter and just looks at the column settings.

I have prepared a jsFiddle to demonstrate this: http://jsfiddle.net/8d6vx7o6/16/

Here are some steps to follow:
1. Open the jsFiddle and notice the column order and that the "Product Weight" column has its fomatter working by seeing that the numbers are different than the ones in the datasource and that they have commas inserted.

2. Drag the "Product Weight" columns over to the left one position and click the "Save Column Settings" button

3. Then, drag the "Product Weight" column back to it's original position

4. Click the "Reload Grid" button

5. Notice that the "Product Weight" column did in fact move to the position you saved it at (one position to the left) and that the column formatter is no longer applied to the "Product Weight" column

I've tried a few things out but nothing has fixed it so far... Is there a fix for this?

Thanks,

Julie 

  • 17590
    Verified Answer
    Offline posted

    Hello Julie,

    Thank you for posting in our community.

    I was able to reproduce the described behavior and I believe the reason for this issue is that the sessionStorage is not storing the formatter function. After debugging I noticed that the formatter option of the Weight column is not available in the myGridColumns variable. What I can suggest as an alternative is using a variable to store the columns collection. Initially, when the grid is loaded this variable is going to be populated with columns and their properties. Later, when the session variable is populated this columns collection is going to be modified and the formatter will be set for the Weight column. for example:

    

      this.createMyGrid = function () {
       var cols=[{
                            headerText: "Product ID",
                            key: "ID",
                            dataType: "number",
                            width: "15%"
                        }, {
                            headerText: "Product Name",
                            key: "Name",
                            dataType: "string",
                            width: "40%"
                        }, {
                            headerText: "Product Weight",
                            key: "Weight",
                            dataType: "string",
                            width: "30%",
                            formatter: RecalculateWeights,
                            template: "<div class='colAlign'>${Weight}</div>"
                        } ];
         
           var columns = JSON.parse(sessionStorage.getItem('myGridColumns'));
                            if (columns != null) {
                           
          var filtered= columns.filter(function(elem ) {
           if(elem.key=="Weight")
           {
            elem.formatter = RecalculateWeights;
           }       
            })
          
            cols=columns;
                            }
       
       
                    $("#grid").igGrid({
                        autoGenerateColumns: false,
                        width: "100%",
                        height: "500px",
         columns: cols,
                        dataSource: myDS,
                        features: [{
                            name: "ColumnMoving",
                            columnMovingDialogContainment: "window"
                        }],
                        rendering: function (evt, ui) {
                        
                        }
                    });
                }

    I also modified your sample and I am attaching it for your reference.

    Please let me know if you need any further assistance with this matter.

    igGridrestoreColumnsWithFormatter.zip