Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Summary fields do not appear in Filter Editor

    SmartClient: v10.0p_2015-06-23

    After creating a summary field in the grid, the field does not appear in the Filter Editor. I realize that summary and formula fields are display type fields and do not belong to the underlying data source, but how can I get these fields to display in the filter editor? I have another issue where I dynamically create fields in the grid after the data source is loaded, and I believe that this is the same root cause.

    Reproduction steps:
    1. Load test case
    2. Add summary field to grid
    3. Open filter editor with command: filterDialog.show()
    4. Observe that the summary field is not displayed in teh field list

    Code:
    <!DOCTYPE html>

<html>
<head>
    <title ></title>
    
    <style>
            .diagInfo {
                font-size: 14px;
                font-weight: bold;
                padding: 5px;
            }
        </style>
        
       <script type="text/javascript" >
        var isomorphicDir="http://localhost:8080/isomorphic/";

        
            
</script>
    
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Core.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Foundation.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Containers.js"></script>
  <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Grids.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Forms.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_DataBinding.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Drawing.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_PluginBridges.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Charts.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Tools.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/skins/SafetyNetSkin/load_skin.js"></script>

</head>
<body>

 <script type="text/javascript">

    var data = [
            { project: "123 Avenue", path:"East->GA->Atlanta->Engineering", redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "Long Project Name", path:"East->PA->Pittsburgh->Engineering",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "6789 Avenue B", path:"East->PA->Pittsburgh->Finance",redflag: "", owner: "University of MD", ins: 33, obs: 23, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "123 Avenue", path:"East->PA->Pittsburgh->Maintenance",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "Feliz Navidad", path:"East->VA->Newport News",redflag: "", owner: "University of MD", ins: 33, obs: 1, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "123 Avenue", path:"East->VA->Newport News->Engineering",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "Whitehouse Lawn Maintenance", path:"East->PA->Philadelphia->Electrical",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "123 Avenue", path:"East->PA->Philadelphia->Electrical", redflag: "", owner: "University of MD", ins: 33, obs: 1, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "Automated Teller MAchine Upgrades", path:"East->PA->Philadelphia->Electrical->Panels",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "123 Avenue", path:"East->PA->Philadelphia->Plumbing",redflag: "", owner: "University of MD", ins: 33, obs: 34, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "123 Avenue", path:"West->CA->San Diego->Engineering",redflag: "", owner: "University of MD", ins: 33, obs: 1, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "123 Avenue", path:"West->CA->San Diego->Marketing",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "Saks Avenue", path:"West->CA->San Diego->Marketing",redflag: "", owner: "University of MD", ins: 33, obs: 1, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" }
        ];

        // ===== DO NOT REMOVE =====
            var diagLabel = isc.Label.create({
                        ID: "diagInfo",
                        width: "100%",
                        styleName: "diagInfo",
                        autoFit: true
                    });
            // ===== DO NOT REMOVE =====
            
</script>

</head>

<body>

    <script type="text/javascript">
    // set this to the correct JIRA ticket
            var JIRA_TICKET = "SNQA-942";
            
    // once page loads set some diagnostic information, DO NOT CHANGE
            isc.Page.setEvent("load", function() {
                document.title = JIRA_TICKET + "   (SmartClient version " + isc.versionNumber + ")";
                var html = [];
                html.push("Jira: " + JIRA_TICKET);
                html.push("SmartClient: " + isc.versionNumber);
                html.push("Browser: " + navigator.appCodeName + " " + navigator.appName + " " + navigator.appVersion);
                diagLabel.setContents( html.join("<br>"));
            });
            
    isc.DataSource.create({
            ID: "ds",
            fields: [
            //{name:PATH_DS_NAME, title:"Hierarchy", type:"text", groupingModes:[PATH_GROUP_NORMAL,PATH_GROUP_FULL]},
                {name:"project", title:"Project", type:"text" },
                
                {name:"redflag", type:"text", title:"Flag"},
                {name:"owner", type:"text", title:"Owner"},
                {name:"ins", type:"integer", title:"#Inspections"},
                {name:"obs", type:"integer", title:"#Observations"},
                {name:"unsafe", type:"integer", title:"# Non-Compliant"},
                {name:"safe", type:"integer", title:"# Compliant"},
                {name:"insDate", type:"date", title:"Last Inspection"}
            ],
            cacheData:data,
            clientOnly: true
        });

        
        
        var grid = isc.ListGrid.create({
            dataSource : ds,
            dataFetchMode : "local",
            autoFetchData: true,
            width : 1200,
            align : "center",
            autoDraw: false,
            autoFitData : "vertical",
            autoFitMaxHeight : 600,
            alternateRecordStyles : true,
            canAddFormulaFields : true,
            canAddSummaryFields : true,
            canGroupBy : true,
            //canReorderFields : true,
            showGroupSummary : true,
            //groupByMaxRecords : 1000,
            canMultiGroup : true,
            useAdvancedFieldPicker : true,
            advancedFieldPickerThreshold : 3,
            canEditTitles: true,
            nullgroupTitle: "NA"
        });
        
        

                        
            var filter = isc.FilterBuilder.create({
                    dataSource : ds,
                    topOperatorAppearance : "radio",
                    allowEmpty : true,
                    height : 10
            });
            
            var filterDialog = isc.Window.create({
                width : 600,
                height : 350,
                title : "Filter Grid",
                canDragReposition : true,
                canDragResize : true,
                padding : 10,
                autoCenter : true,
                autoDraw : false,
                items : [     
                    filter,
                    isc.LayoutSpacer.create({
                        height : 10
                    }),
                    isc.HLayout.create({
                        membersMargin : 25,
                        defaultLayoutAlign : "center",
                        align : "center",
                        width : "100%",
                        height : 10,
                        members : [     
                            isc.IButton.create({
                                    title : "Filter",
                                    click : function() {
                                        grid.filterData(filter.getCriteria());
                                    }
                            }),
                            isc.IButton.create({
                                title : "Clear Filter",
                                click : function() {
                                    filter.clearCriteria();
                                    grid.filterData(filter.getCriteria());
                                }
                            })
                        ]
                    })
                ]
            });
    
    
        var layout = isc.VLayout.create({
                width:"100%",
                membersMargin: 20,
                members: [
                    // ===== DO NOT REMOVE diagLabel
                    diagLabel,
                    // ===== place anty components here
                    grid
                ]
            });
        
            </script>
            
            
</body>

</html>
    Tags: None
    #2
    Note that you have used the term "filterEditor" whereas you really mean FilterBuilder. The "filterEditor" is the row of inputs that appears at the top of a ListGrid when you set showFilterEditor:true.

    As far as having a formula field in the FilterBuilder, as you guessed, the field must exist in the DataSource for this to happen - note that the FilterBuilder is configured with the DataSource, and doesn't even know about the ListGrid.

    If the formulas in question are developer-specificed (that is, not created on the fly by end users), you can go ahead and add them to the DataSource, and calculate them either client-side in DataSource.transformResponse() or server-side before data is delivered to the browser.

    If you are trying to provide a filtering interface for end-user provided formulas, this gets more complicated - the first problem to think about is how server-side filtering is going to work. Either your server-side code is going to need to be able to compute formula values and filter them, or the filtering will need to be performed on the client - but filtering on the client means you would have to disable data pagng (see listGrid.dataFetchMode), which will only work for low data volume. So, think through whether you need this, and if so, whether you're prepared to implement server-side support or accent the alternative of limited data volume - we can outline the right approach once you've chosen a method.

    Comment

      #3
      My use case is rather complex, as we integrate the grid into some legacy components. The test case was slimmed down for brevity. Basically, use use a custom paging mechanism that essentially reloads the grid with a new page of data when the user advances the page. We are not using the built in paging functionality at this time. This paradigm currently works for our users, we load 1000 records on each page and filter locally. Please outline how I could get user defined formulas into the filter builder, as this is what we really want to do. When some of our grids load, we perform some post processing of the data and dynamically create formula columns, so this is really where the requirement comes from.

      Comment

        #4
        There is one thing which isn't clear to us from this description. We're not clear whether the formula fields are being set up by your application code, or picked by the user dynamically.
        Are you saying
        a)
        - You have a ListGrid which fetches 1000 records from some DataSource and displays them. (We'll assume this is a standard SQL dataSource, but it doesn't really matter)
        - The user uses the context menu on the grid to create and show a set of formula fields.
        - Subsequently, you create and draw a FilterBuilder allowing the user to filter the data displayed in the grid locally. And this FilterBuilder should include entries for the user-added formula fields allowing the user to filter the data by those fields.

        Or
        b)
        - You have a ListGrid which fetches 1000 records from some DataSource and displays them. (We'll assume this is a standard SQL dataSource, but it doesn't really matter)
        - Your application code also includes some additional fields on the grid, which show formula values calculated from the data.
        - When the grid draws, you also want to draw the FilterBuilder to allow local filtering of this data, including by these calculated formula field values.

        (or something else)?
        Thanks

        Comment

          #5
          We do both. I allow users to create formulas via the context menu of the grid. We would like filtering to work for these user created formulas (and summaries)

          We also, when data is fetched, we create N summary fields (in application code), based on the data that is returned from another field. We would like these dynamically created fields to also appear in the FilterBuilder as well. I cannot add these to the datasource as the number of fields that get created is different on each fetch, one page may has two additional fields, while the next may have 7.

          Comment

            #6
            In order to get the fields to appear in the FilterBuilder, you will need a DataSource that defines those fields. So you will need to create/recreate the DataSource dynamically as the user adds formula or summary fields to the grid.

            It sounds like you don't expect to do server-side filtering on these values, so the DataSource you'll be creating will be a clientOnly-DataSource, and you can keep providing the same, already-cached dataSource.cacheData to each successive new DataSource instance you create as new fields are added. Be sure to call destroy() on old instances of the DataSource, but do so only after you have provided the new DataSource to your ListGrid (destroying a DataSource while there are DataBoundComponents using it is invalid).

            Note that for each new formula field added, you will need to add both a DataSourceField definition and a corresponding ListGridField definition - the ListGridField definition will have the UserFormula on it (which is not valid on a DataSourceField) and the DataSourceField will just be a plain field of type "float" (or "text" a UserSummary).

            Note that it is not valid to use the same DataSourceField Objects with multiple DataSources, or the same ListGridField Object with multiple ListGrids. So be to sure to provide fresh copies of the configuration data each time you re-create the DataSource or replace the ListGridFields.

            Comment

            Previous template Next
            Working...
            X