Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Enforce request when using searchForm on ListGrid

    I'm using SmartClient 13 (JS) and have implemented the "searchForm" property. I have created a grid similar to the Custom Toolbar example, but I don't use the filter editor.
    I want to offer the "Refresh grid" option similar to the example, but it uses this.grid.refreshData() when clicked. This doesn't work well when you've just entered a value in the search form. That value is not used. Therefore, I've changed the click action of the refresh button to perform searchForm.submit(). This kind of works, but only if the searching isn't narrowed (of similar to what it was). This is undesired, because refreshing using the same criteria might result in different records (other people might have added/deleted/updated records).

    So I'm looking for "the right way" to do this. Basically I want a search form inside of a grid footer (I use gridComponents with the form nested in it), no filter editor (but it might be added later) and some buttons. All similar to the example, except for the search form.

    What code to use in the refresh button's click handler?

    #2
    Hi wallytax,

    this is working for me here with this code (doesn't matter where the form is, so you can also move it to the footer).
    Perhaps the itemChanged on the searchForm makes a difference?

    Best regards
    Blama

    Code:
    isc.SearchForm.create({
        ID: "specializedForm",
        numCols: 4,
        width: 800,
        fields: [
            {
                name: "hemisphereField",
                type: "radioGroup",
                title: "Hemisphere",
                valueMap: ["Any", "Northern", "Southern"],
                vertical: false,
                getCriterion: function () {
                    var optionHemisphere = this.getValue(),
                        criterion = {},
                        southernCountries = ["Indonesia", "Argentina", "Bolivia", "Australia", "Brasil", "Chile", "Paraguay",
                                             "Ecuador", "Mauritius", "Somalia", "Tanzania", "Zambia",
                                             "Peru", "Uruguay", "Angola", "Botswana", "Burundi", "Madagascar", "South Africa",
                                             "Kenya", "Malawi", "Mozambique", "Namibia", "Nauru", "New Zeland", "Congo"];
                    if (optionHemisphere && optionHemisphere != "Any") {
                        if (optionHemisphere == "Northern") {
                            criterion = {
                                fieldName: "countryName",
                                operator: "notInSet",
                                value: southernCountries
                            }
                        } else {
                            criterion = {
                                fieldName: "countryName",
                                operator: "inSet",
                                value: southernCountries
                            }
                        }
                    }
                    return criterion;
                }
            },
            {
                name: "countryNameField",
                type: "text",
                title: "Name bigger than",
                vertical: false,
                getCriterion: function () {
                    var nameStart = this.getValue(),
                        criterion = {};
                    if (nameStart && nameStart != "") {
                        criterion = {
                            fieldName: "countryName",
                            operator: "greaterThan",
                            value: nameStart
                        }
                    }
                    return criterion;
                }
            }
        ],
        itemChanged: function (item, newValue) {
            this.submit();
        },
        colWidths: [120, "*", 100],
        values: {
            hemisphereField: "Any",
        }
    });
    isc.ListGrid.create({
        ID: "countryList",
        width: 800,
        height: 224,
        alternateRecordStyles: true,
        dataSource: worldDS,
        autoFetchData: true,
        canShowFilterEditor: true,
        searchForm: "specializedForm",
        allowFilterOperators: true,
        alwaysShowOperatorIcon: true,
        fields: [
            {
                name: "countryName"
            },
            {
                name: "continent"
            },
            {
                name: "population"
            },
            {
                name: "area"
            },
            {
                name: "gdp"
            },
            {
                name: "independence",
                width: 100
            }
        ]
    });
    isc.ImgButton.create({
            ID: "myButton",
            src: "[SKIN]/actions/refresh.png",
            showRollOver: false,
            prompt: "Refresh",
            width: 16,
            height: 16,
            showDown: false,
            click: function () {
                countryList.refreshData();
            }
        }),
        isc.VStack.create({
            width: "100%",
            membersMargin: 10,
            members: [specializedForm, countryList, myButton]
        })

    Comment


      #3
      Hi Blama

      I've seen that example (Tiered Filtering) but it didn't help. I've tried that itemChanged(), but this isn't handy for text field where each character causes a submit.

      refreshData() doesn't refresh if the criteria are the same or narrower.

      Comment


        #4
        If you set filterOnKeypress on your grid, instead of overriding itemChanged() on your form, the grid should refresh automatically when the SearchForm's criteriaChanged() notification fires.

        Comment


          #5
          Thanks for the replies, but the problem is not solved:
          • Using refreshData() always performs a request, which is exactly what I want! But... it doesn't take values into account that were just entered. So I have a search form with a text field in it, I type in some characters and click the "Refresh grid" button that does a refreshData(). The typed value is not used.
          • Changing calling refreshData() to this.searchForm.submit() correctly uses the typed value, but... it doesn't refresh when the criteria haven't changed. Which is not what I want since data might have been added/deleted/changed by other users.
          I don't want to be too critical, because you guys are doing great work with the framework, but for me - after lots of years using it - it still feels uncomfortable doing filtering. There's too many mechanism, methods that all behave a bit different. There's filterData(), fetchData(), refreshData() for the grid. I'm sure you have good reasons for this, but for me it's too much distortion.

          Not managing to get the behavior above to work makes me think I must be doing something odd and it makes me feel insecure about my approach. On the other side the request doesn't look too strange.

          Any help would be highly appreciated, but please let's try to avoid heavy discussions.

          Comment

          Working...
          X