jQWidgets Forums

Hi there,

I’m new to JqWidgets, and the projects i’ve been working on needed filtering, wich i have implemented with no problem.
However, i need to create a new grid, and i used the working ones that i have, as a template for the new one. The grid is working with no problems, but the ‘filter’ function isn’t. It always returns “No data to display”.

After a while debugging i have noticed that in the ‘getfilterinformation’ method, it returns 4 filters instead of one. I mean, the filter is being applied to four columns, instead of only the one wich is suposed to filter.

Here is my code for the creation of the grid:

    CreateGrid = function () {

        var cellsrendererImage = function (row, columnfield, value, defaulthtml, columnproperties) {

            var imageStatusVerde = '@Url.Content("~/content/images/statusSLA.png")';
            var imageStatusVermelha = '@Url.Content("~/content/images/statusSLAVermelha.png")';
            var imageStatusAmarela = '@Url.Content("~/content/images/statusSLAAmarela.png")';

            if (value == "0") {
                return '<center><img  src=' + imageStatusVerde + ' /></>';
            }
            else if (value == "1") {
                return '<center><img  src=' + imageStatusVermelha + ' /></>';
            }
            else if (value == "2") {
                return '<center><img  src=' + imageStatusAmarela + ' /></>';
            }

        } //cellsrendererImage

        var cellsrendererToEuros = function (row, column, value) {
            return "<center>" + CustomJs.ToThousandsComaSeparatorString(value.replace(',', '.')) + ' €</>';
        } //cellsrendererToEuros

        var cellsrendererToDate = function (row, column, value) {
            if (selectedViewMode == "ViewPerDay") {
                return "<center>" + value.substring(0, 11) + '</>';
            }
            else {
                return "<center>" + value + '</>';
            }
        } //cellsrendererToDate

        $("#JqxGrid").jqxGrid(
	    {
	        width: 1250,
	        height: 710,
	        autoheight: true,
	        altstart: 1,
	        theme: 'custom',
	        altrows: true,
	        showemptyrow: true,
	        statusbarheight: 27,
	        filterable: true,
	        columnsheight: 24,
	        autoshowloadelement: false,
	        editable: true,
	        showstatusbar: true,
	        showaggregates: true,
	        selectionmode: 'singlecell',
	        sortable: true,
	        columns: [
			    { editable: false, text: 'Day', filtertype: 'number', datafield: 'Day', renderer: columnrenderer, cellsrenderer: cellsrendererToDate, aggregatesrenderer: function (aggregates, column, element) {
			        return "<div class='jqxGridStatusBar jqxGridStatusBarSLA' id='jqxtotalDay'>...</div>";
			    }
			    },
                { editable: false, text: 'Scanner', width: '190', filtertype: 'number', datafield: 'Scanner', renderer: columnrenderer, cellsrenderer: cellsrendererNumbers, aggregatesrenderer: function (aggregates, column, element) {
                    return "<div class='jqxGridStatusBar jqxGridStatusBarSLA' id='jqxtotalScanner'>...</div>";
                }
                },
                { editable: false, text: 'Type', width: '190', filtertype: 'checkedlist', datafield: 'Type',  renderer: columnrenderer, cellsrenderer: cellsrendererNumbers, aggregatesrenderer: function (aggregates, column, element) {
                    return "<div class='jqxGridStatusBar jqxGridStatusBarSLA' id='jqxtotalType'>...</div>";
                }
                },
                { editable: false, text: 'Read Rate', width: '190', filtertype: 'number', datafield: 'ReadRate', renderer: columnrenderer, cellsrenderer: cellsrendererNumbers, aggregatesrenderer: function (aggregates, column, element) {
                    return "<div class='jqxGridStatusBar jqxGridStatusBarSLA' id='jqxtotalReadRate'>...</div>";
                }
                },
                { editable: false, text: 'SLA (€)', width: '190', datafield: 'SLA', filtertype: 'number', renderer: columnrenderer, cellsrenderer: cellsrendererToEuros, aggregatesrenderer: function (aggregates, column, element) {
                    return "<div class='jqxGridStatusBar jqxGridStatusBarSLA' id='jqxtotalSLA'>...</div>";
                }
                },
                { editable: false, text: 'Status', filterable: false, width: '50', datafield: 'Status', renderer: columnrenderer, cellsrenderer: cellsrendererImage, aggregatesrenderer: function (aggregates, column, element) {
                    return "<div class='jqxGridStatusBar jqxGridStatusBarSLA'>...</div>";
                }
                },
                { text: '', exportable: false, filterable: false, datafield: 'Edit', width: '60', aggregatesrenderer: function (aggregates, column, element) {
                    return "<div class='jqxGridStatusBar jqxGridStatusBarSLA'>...</div>";
                }, editable: false, columntype: "image", cellsrenderer: function (row) {
                    var dataRecord = $("#JqxGrid").jqxGrid('getrowdata', row);
                    var imgId = "coment_" + row;
                    if (dataRecord.Comments == 1) {
                        var imageComment = '@Url.Content("~/content/images/editComments.png")';
                    }
                    else {
                        var imageComment = '@Url.Content("~/content/images/addComments.png")';
                    }
                    return "<center><a href='#' onclick='popupShow(" + '"' + dataRecord.DAY + '",' + '"' + dataRecord.GROUPVALUE + '",' + row + ")' ><img src=" + imageComment + ' id= "' + imgId + '" /></a></>';
                }
                }
		    ]
	    });

        $("#JqxGrid").bind("bindingcomplete", function (event) {

            if (firstTerminalGridLoadDone == false) {
                $('#jqxDateTimeTo').jqxDateTimeInput('setDate', new Date(filterDateTo));
                $('#jqxDateTimeFrom').jqxDateTimeInput('setDate', new Date(filterDateFrom));

                firstTerminalGridLoadDone = true;
            }

            window.setTimeout(CalculateGridTotal, 200);
        });

        $("#JqxGrid").bind("filter", function (event) {
            console.log(event);
            var filterinfo = $("#JqxGrid").jqxGrid('getfilterinformation');
            console.log(filterinfo);
            if (filterinfo.length == 0 && filterFromDateTime) CustomJs.ShowPageLoadingDiv();
        });
    }

What am i doing wrong here? Can somebody help me?