Live Traffic Feed

Traffic Widgets

Saturday, November 22, 2014

filter row datagrid with multiple column on keyup in jeasyui

By Vimal Vataliya 1:20 AM 1 comment
Jeasyui provide filter row datagrid.., but if we put custom operator like greator,less,etc. then we must click on the button to search in datagrid.

 If we want search by key press then its not available in jeasyui's datagrid.

 I searched so many things since last 3 days.. and finally write my own custom function to search in datagrid on key press...



Our HTML page like below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/easyui.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="ABC" onclick="window.location='Default.aspx';" />
        <table id="tt" class="easyui-datagrid" style="width: 700px; height: 250px" url="WebService.asmx/FillData"
            title="Load Data" iconcls="icon-save" sortname="productid" sortorder="asc" rownumbers="true"
            pageposition="both" pagination="true" data-options="remoteFilter:true">
            <thead>
                <tr>
                    <th field="productid" width="80" sortable="true">
                        Item ID
                    </th>
                    <th field="productname" width="100" sortable="true">
                        Product ID
                    </th>
                    <th field="listprice" width="80" align="right" sortable="true">
                        List Price
                    </th>
                    <th field="unitcost" width="80" align="right" sortable="true">
                        Unit Cost
                    </th>
                    <th field="attr1" width="220">
                        Attribute
                    </th>
                    <th field="status" width="60" align="center">
                        Stauts
                    </th>
                </tr>
            </thead>
        </table>
        <script src="js/datagrid-filter.js" type="text/javascript"></script>
        <script type="text/javascript">

            $(function () {
                $('#tt').datagrid('enableFilter', [{
                    field: 'listprice',
                    type: 'numberbox',
                    options: {},
                    op: ['contains', 'equal', 'notequal', 'less', 'greater']
                }, {
                    field: 'unitcost',
                    type: 'numberbox',
                    options: { precision: 1 },
                    op: ['contains', 'equal', 'notequal', 'less', 'greater']
                }]);
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('body').on('keyup', '.textbox-text ', function (e) {
                     customSearch(e, this, 'tt');
                });
            });
         
        </script>
    </div>
    </form>
</body>


custom function for search like as follow:

function customSearch(e, obj, grdId) {
    var fieldName = obj.parentNode.parentNode.childNodes[0].name;
    var rule = $("#" + grdId + "").datagrid('getFilterRule', fieldName);
    var operator = rule == null ? "contains" : rule.op;
    var B = e.keyCode;
    if (B == 9 || (B >= 16 && B <= 45) || (B >= 111))
    { }
    else {
        if (obj.value != "")
            $("#" + grdId + "").datagrid('addFilterRule', { field: fieldName, op: operator, value: obj.value });
        else
            $("#" + grdId + "").datagrid('removeFilterRule', fieldName);
        $("#" + grdId + "").datagrid('doFilter');
        setTimeout(function () {
            obj.focus(); //for All Browser Except IE
            if (obj[0])//for IE 8,9,10
                obj[0].value = obj[0].value;
        }, 500);
    }
}




If You Enjoyed This, Take 5 Seconds To Share It

1 comment: