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);
    }
}




Read More

Thursday, November 13, 2014

Searching multiple column value in repeater control using javascript without postback

By Vimal Vataliya 4:10 AM Leave a Comment


Your ASPX page like below:
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="rpt" runat="server">
            <HeaderTemplate>
                <table>
                    <tr>
                        <th>
                            Name:
                        </th>
                        <th>
                            Mobileno
                        </th>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <%#Eval("name") %>
                    </td>
                    <td>
                        <%#Eval("mobileno") %>
                    </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                <td>
                    <asp:TextBox runat="server" ID="txt" onkeyup="doSearch(this);"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox runat="server" ID="txta" onkeyup="doSearch(this);"></asp:TextBox>
                </td>
                </table>
            </FooterTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>



Java Script For Searching Repeater Control...
  //get  the index of specific column from grid
        function getColumnIndex(row, col) {
            var totalTds = row.getElementsByTagName("td").length;
            var index = "";
            for (i = 0; i < totalTds; i++) {
                if (col.parentNode.getElementsByTagName("td")[i].innerHTML == col.innerHTML) {
                    index = i; break;
                }
            }
            return index;
        }

        //To Search in repeater.. search textbox must be in footer in repeater.
        function doSearch(obj) {
            var col = obj.parentNode;
            var row = col.parentNode;
            var grd = col.parentNode.parentNode;
            if (obj.value != "") {
                var index = getColumnIndex(row, col);
                for (i = 1; i < grd.rows.length - 1; i++) {
                    if (grd.rows[i].cells[index].innerText.toLowerCase().indexOf(obj.value.toLowerCase()) >= 0)
                        grd.rows[i].style.display = "block";
                    else
                        grd.rows[i].style.display = "none";
                }
            }
            else {
                for (i = 1; i < grd.rows.length - 1; i++) {
                    grd.rows[i].style.display = "block";
                }
            }
        }


Read More

Wednesday, November 12, 2014

How to return multiple value with different data type from function in C#

By Vimal Vataliya 3:21 AM Leave a Comment
public Tuple<string, int, decimal, string[], DataTable> myFunction()
    {
        string a = "ABC";
        int b = 50;
        decimal c = 45;
        string d = "XYZ";
        string[] ab = new string[2];
        ab[0] = a;
        ab[1] = d;
        DataTable dt = new DataTable();
        return new Tuple<string, int, decimal, string[], DataTable>(a, b, c, ab, dt);

    }



For Calling the Function use below code:

        var res = myFunction();
        string a = res.Item1;
        int b = res.Item2;
        decimal c = res.Item3;
        string[] ab = res.Item4;
        DataTable dt = res.Item5;
Read More