Trouble Repopulating WijGrid Using Custom Filter

Question

I'm having some trouble updating a wijgrid using a json result returned from an ajax call. The wijgrid does not seem to redraw. Here is the relevent javascript/jQuery:

$(function () {
    var datasource = new wijdatasource({
        data: [{"Id":1,"Name":"Sidney","Type":"Engineer"},{"Id":4,"Name":"Mavis","Type":"Student"},{"Id":5,"Name":"Betty","Type":"Student"},{"Id":80,"Name":"Taylor","Type":"Student"},{"Id":92,"Name":"Graham","Type":"Student"},{"Id":94,"Name":"Belle","Type":"Student"},{"Id":100,"Name":"Terrence","Type":"Student"},{"Id":106,"Name":"William","Type":"Student"},{"Id":108,"Name":"Synthia","Type":"Student"},{"Id":109,"Name":"Lucious","Type":"Customer"},{"Id":116,"Name":"Leonard","Type":"Student"},{"Id":119,"Name":"Katy","Type":"Student"},{"Id":122,"Name":"Sarah","Type":"Student"},{"Id":127,"Name":"Amy","Type":"Student"},{"Id":178,"Name":"Carl","Type":"Student"}],
        reader: new wijarrayreader([
            { name: 'Id', mapping: 'Id' },
            { name: 'Name', mapping: 'Name' },
            { name: 'Type', mapping: 'Type' }
        ])
    });

    $('#ClientTable').wijgrid({
        allowSorting: true,
        allowPaging: true,
        pageSize: 10,
        data: datasource,
        columns: [
            { visible: false },
            {
                cellFormatter: function (args) {
                    var wg = $.wijmo.wijgrid,
                    row = args.row;

                    if ((row.type & wg.rowType.data) && (row.state === wg.renderState.rendering)) {
                        args.$container.append($('<a href="/Client/Update/' + row.data.Id + '">' + row.data.Name + '</a>'));
                        return true;
                    }
                }
            },
            {}
        ]
    });

    $('#pageSize').bind('change', function (e) {
        $('#ClientTable').wijgrid('option', 'pageSize', parseInt($(e.target).val()));
    });

    $('#filterBy').keyup(function (e) {
        var filter = $('#filterBy').val();
        if (typeof filter == 'string' && filter.length > 1) {
            $.ajax({
                url: '/Home/MemberAsyncResults',
                async: true,
                traditional: true,
                type: 'GET',
                data:
                {
                    filter: filter
                },
                success: function (response) {
                    //                            datasource.data = response;
                    //                            datasource.read();
                    datasource.load(response, false);
                    $('#ClientTable').wijgrid('ensureControl', true);
                    $('#ClientTable').wijgrid('doRefresh');
                },
                error: function (e) {
                    var breakOnThisLine = 1;
                }
            });
        }
    });
});

Also, here is the relevent html:

<label for="pageSize">Page Size</label>
<select id="pageSize">
    <option>10</option>
    <option>25</option>
    <option>50</option>
    <option>100</option>
</select>
<label for="pageSize">Filter By</label>
<input type="text" id="filterBy" />
<table id="ClientTable"></table>

When a breakpoint is set inside of the success method of the ajax call, the correct data is returned from the server. However, the code for repopulating the datasource of the wijgrid control, or for rerendering the control must not be right...

On a related note, I wasn't really sure what the name or the mapping properties of the wijarrayreader are for. I think the wijarrayreader is set up correctly, but I only made an educated guess based on some examples.

Many thanks in advance!

score 1 · Accepted Answer · answered Mar 20 '13 at 09:11

Try setting ensureControl option of wijgrid in the loaded event of wijdatasource, or set it when initializing wijgrid :

$(‘#ClientTable’).wijgrid({
    allowSorting: true,
    allowPaging: true,
    pageSize: 10,
    ensureControl : true
});

As an alternative, instead of using the $ajax call, I would suggest you to use wijhttpproxy widget which is helpful in these scenarios. Please refer to the following link for more info : http://wijmo.com/wiki/index.php/Datasource#proxy

Please take a look at the code below :

$(document).ready(function () {

        var superPanelRefreshed = false;
        var proxy = new wijhttpproxy({
            url: "http://ws.geonames.org/searchJSON",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: 'ab'
            },
            key: 'geonames'
        });
        var myReader = new wijarrayreader([{
            name: 'label',
            mapping: function (item) {
                return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName
            }
        }, {
            name: 'value',
            mapping: 'name'
        }, {
            name: 'selected',
            defaultValue: false
        }]);

        var input = $('#testinput');

        datasource = new wijdatasource({
            reader: myReader,
            proxy: proxy,
            loading: function () {

            },
            loaded: function (data) {

            }
        });

        $("#grid").wijgrid({
            data: datasource,
            ensureControl: true
        });

        datasource.load();
    });

    function loadRemoteData() {
        datasource.proxy.options.data.name_startsWith = $('#testinput').val();
        datasource.load();
    }

Trouble Repopulating WijGrid Using Custom Filter

1 Answers1