1. #1
    Sencha User
    Join Date
    Mar 2015
    Posts
    10
    Vote Rating
    0
    kalyankonduri is on a distinguished road

      0  

    Default Filtering on ExtJS grid.

    Hi,

    Considering my little experience with ExtJS so far , i tried to implement the following.

    I am trying to do a local filtering on columns in a ExtJS grid panel.

    I used a custom summaryType to calculate the totals of that number column. But if the data is filtered on any column, this summaryType is not getting recalculated. it filters the records and shows right rows but the summary was not getting updated accordingly.

    Here is my code sample:
    Code:
    var filters = {
            ftype: 'filters',
            local: true   // defaults to false (remote filtering)
        };
    
    Column code:
    {
                text: 'Planned Estimate',
                width: 80,
                sortable: true,
                dataIndex: 'plannedestimate',            
                field: 'textfield',
                summaryType: function(records){
                    var helpDuration=0;
                    var pe=0
                    Ext.Array.forEach(records, function (record){                    
                        helpDuration += Number(record.data.plannedestimate);
                    });
                    return helpDuration.toFixed(2);
                },
                renderer: function(v, params, record,row){
                    if (String(v) == '0.00'){
                        return ' ' 
                    }else return String(v) ;
                },
                filterable: true
            }
    Can someone help me out in clearing out my ignorance here.

    Thanks in advance.

  2. #2
    Sencha - Support Team
    Join Date
    Mar 2015
    Location
    Chicago
    Posts
    200
    Vote Rating
    17
    guilherme.lopes will become famous soon enough

      0  

    Default

    Hi,

    What version of ExtJS are you using?
    Guilherme Lopes
    Sencha Support

  3. #3
    Sencha User
    Join Date
    Mar 2015
    Posts
    10
    Vote Rating
    0
    kalyankonduri is on a distinguished road

      0  

    Default

    Version 4.2

  4. #4
    Sencha - Support Team
    Join Date
    Mar 2015
    Location
    Chicago
    Posts
    200
    Vote Rating
    17
    guilherme.lopes will become famous soon enough

      0  

    Default

    Your custom summary seems to be working with filter here:
    Check the code and see if there is anything different than what you are doing.


    Guilherme Lopes
    Sencha Support

  5. #5
    Sencha User
    Join Date
    Mar 2015
    Posts
    10
    Vote Rating
    0
    kalyankonduri is on a distinguished road

      0  

    Default

    Thanks for the sample code. I modified it a bit that matches my requirement. I added status column with pass/fail as string and added couple of entries for Student 1 so that there would be group of records under student 1.

    now the issue is, if you try to filter the grid based on Status = pass, the Estimate column's summary would not get re-calculated. here is the code, you may copy the entire thing and set the env to 4.2 on fiddle.

    Code:
    var filtersCfg = {
        ftype: 'filters',
        autoReload: true, //don't reload automatically
        local: true,
        filters: [{
            type: 'numeric',
            dataIndex: 'mark'
        }, {
            type: 'string',
            dataIndex: 'student'
        },{
            type: 'string',
            dataIndex: 'status'
        }, {
            type: 'numeric',
            dataIndex: 'plannedestimate'
        }]
    };
    
    
    
    
    var groupingFeature = Ext.create('Ext.grid.feature.GroupingSummary',{  
            id: 'group',
            ftype: 'groupingsummary',        
            groupHeaderTpl: '{name}',
            hideGroupedColumn: true,
            enableGroupingMenu: false,        
            startCollapsed: true
        });
    
    
    Ext.application({
        name : 'Fiddle',
        requires: ['Ext.ux.grid.FiltersFeature'],
        launch : function() {
            
            Ext.define('TestResult', {
                extend: 'Ext.data.Model',
                fields: [
                    'student',
                    'status',
                    {
                        name: 'mark',
                        type: 'int'
                    },{
                        name: 'plannedestimate',
                        type: 'int'
                    }]
            });
            
            Ext.create('Ext.grid.Panel', {
                width: 600,
                height: 600,
                title: 'Summary Test',
                style: 'padding: 20px',
                renderTo: document.body,
                features: [groupingFeature,filtersCfg],
                store: {
                    model: 'TestResult',
                    groupField: "student",
                    data: [{
                        student: 'Student 1',
                        status: 'Pass',
                        mark: 84,
                        plannedestimate: 300
                    },{
                        student: 'Student 1',
                        status: 'Fail',
                        mark: 20,
                        plannedestimate: 300
                    },{
                        student: 'Student 1',
                        status: 'Pass',
                        mark: 20,
                        plannedestimate: 400
                    },{
                        student: 'Student 2',
                        status: 'Pass',
                        mark: 72,
                        plannedestimate: 150
                    },{
                        student: 'Student 3',
                        status: 'Pass',
                        mark: 96,
                        plannedestimate: 280
                    },{
                        student: 'Student 4',
                        status: 'Pass',
                        mark: 68,
                        plannedestimate: 320
                    }]
                },
                columns: [
                {
                    dataIndex: 'student',
                    text: 'Name',
                    summaryType: 'count',
                    summaryRenderer: function(value, summaryData, dataIndex) {
                        return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
                    }
                },{
                    dataIndex: 'status',
                    text: 'Status'
                },{
                    dataIndex: 'mark',
                    text: 'Mark',
                    summaryType: 'average'
                },{
                    text: 'Estimate Studied Hours',
                    flex: 1,
                    sortable: true,
                    dataIndex: 'plannedestimate',
                    renderer: function(v, params, record,row){
                        if (String(v) == '0.00'){
                            return ' ' 
                        }else return String(v) ;
                    },
                    summaryType: function(records){
                        var helpDuration=0;
                        var pe=0
                        Ext.Array.forEach(records, function (record){                    
                            helpDuration += Number(record.data.plannedestimate);
                        });
                        return helpDuration.toFixed(2);
                    },
                    filterable: true
                }]
            });
        }
    });

  6. #6
    Sencha User
    Join Date
    Mar 2015
    Posts
    10
    Vote Rating
    0
    kalyankonduri is on a distinguished road

      0  

    Default

    My point is that, on filtered grid, summary be recalculated and total the ones that are currently there after filtering. So initially if there are 3 records with total of 1000, after filtering based on a condition on a column called status, summary should be 700 as an example. It always shows 1000 even while showing the whole data or the filtered data.

  7. #7
    Sencha - Support Team
    Join Date
    Mar 2015
    Location
    Chicago
    Posts
    200
    Vote Rating
    17
    guilherme.lopes will become famous soon enough

      0  

    Default

    It is being recalculated here (see pictures).

    What browser are you using?

    (Before Filter)
    before_filter.png

    (After Filter)
    after_filter.png
    Guilherme Lopes
    Sencha Support

  8. #8
    Sencha User
    Join Date
    Mar 2015
    Posts
    10
    Vote Rating
    0
    kalyankonduri is on a distinguished road

      0  

    Default

    Thanks again for the response.
    I am using Google Chrome for this. Is this going be an issue when grouping is enabled? or filtering enabled based on a text field column. If you can load my code on fiddle to see, it would be great. Thanks alot for your prompt responses.

  9. #9
    Sencha User
    Join Date
    Mar 2015
    Posts
    10
    Vote Rating
    0
    kalyankonduri is on a distinguished road

      0  

    Default

    I found that it's not a feature under ftype: 'groupingsummary', it works fine under ftype: 'summary'.So as an alternative I enabled " enableGroupingMenu: true" so that atleast user has the ability to change the perspective of data depending on the need. This is good enough for us.In any case, if groupingSummary also has this re-calculation it would be great.Thanks alot for all the reponses by you.

Thread Participants: 1

Tags for this Thread