WijGrid HowTo : Apply Filter on Enter KeyPress

The Wijmo Grid widget (wijgrid) is a tabular datagrid that allows users to interactively select, edit, sort, scroll through, filter, and group data. The grid is highly customizable and can be used to better understand and visualize data more effectively. In this blog we'll discuss how to Filter grid on Enter key press. For this implementation we will handle the keyPress event of the FilterRow textboxes. These textboxes are of wijmo-wijgrid-filter-input class. Since jQuery allows users to write events using class tags, we will handle the keyPress of the textbox class in the loaded event of Grid. In this event, as the code below suggests, if the entered key is 'Enter' (KeyCode = 13), we will call the ApplyFilter() method :

$(".wijmo-wijgrid-filter-input").keypress(function (s, args) {  
     if (s.keyCode == 13) {  
          ApplyFilter($(this));  
    }  
});

The basic idea of ApplyFilter() method is to get the value entered in the FilterRow and use it as FilterValue option. Based on the datatype of the column, we will use the FilterOperator. For simplicity, we are using 'contains' filter for string columns and 'equals' method for other datatypes.

function ApplyFilter($elem) {  
    var colindex = $(".wijmo-wijgrid-filter-input").index($elem);  
    var id = $(".wijmo-wijgrid-filter-input").eq(colindex).val();  
    var grid = $("#demo").data("wijgrid");  
    if (id != "") {  
        //Apply filter  
        grid.columns()[colindex].option("filterValue", id);  
        //Define the FilterOperator  
        if (grid.columns()[colindex].options.dataType == "string")  
            grid.columns()[colindex].option('filterOperator', 'contains');  
        else  
            grid.columns()[colindex].option('filterOperator', 'equals');  
    }  
    else {  
        grid.columns()[colindex].option("filterOperator", "nofilter");  
    }  
}

Download Sample