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

Saturday, September 20, 2014

Date validation(dd/MM/yyyy) using java script

By Vimal Vataliya 5:12 AM Leave a Comment

//Java Script For date Check
<script type="text/javascript">
        function checkDate(val) {
            if (val != "") {
                var r = false;
                if (!val.value.match(/^\d{2}\/\d{2}\/\d{4}$/)) {
                    alert("Invalid Date");
                    val.value = "";
                }
                else {
                    var arr = val.value.split('/');
                    var d = new Date(arr[2], arr[1] - 1, arr[0]);
                    if (d.getMonth() + 1 != arr[1] || d.getFullYear() != arr[2] || d.getDate() != arr[0]) {
                        alert("Invalid Date");
                        val.value = "";
                    }
                    else
                        r = true;
                }
                if (r == false) val.select();
                return r;
            }

        }
    </script>



// Your HTML TextBox Code Like Below:

 <asp:TextBox runat="server" ID="txtDate" onblur="return checkDate(this);"></asp:TextBox>
Read More

Thursday, July 25, 2013

How to generate random string with alphanumeric in asp.net

By Vimal Vataliya 5:45 AM Leave a Comment
 public string generaterandomno()
    {
 
        string aa = "1234567890qwertyuiopasdfghjklzxcvbnm";
        string R_code = "";
        Random rnd = new Random();
        for (int i = 0; i < 8; i++)
        {
            int a = rnd.Next() % (aa.ToString().Length - 1);
            R_code += aa[a];
        }

       return R_code;
    }
Read More

how to implement Country-State-city using Dropdownlist in asp.net with ajax

By Vimal Vataliya 5:14 AM 1 comment
for design page of your aspx page paste the below code

<table>
        <tr>
            <td>
                Select Country:
            </td>
            <td>
                <asp:DropDownList runat="server" ID="ddlcountry">
                </asp:DropDownList>
                <asp:CascadingDropDown ID="CascadingDropDown1" TargetControlID="ddlcountry" Category="country"
                    PromptText="Select Country" LoadingText="Please Wait..." ServiceMethod="GETCOUNTRY"
                    runat="server">
                </asp:CascadingDropDown>
            </td>
        </tr>
        <tr>
            <td>
                Select State:
            </td>
            <td>
                <asp:DropDownList runat="server" ID="ddlstate">
                </asp:DropDownList>
                <asp:CascadingDropDown ID="CascadingDropDown2" TargetControlID="ddlstate" Category="state"
                    PromptText="Select State" LoadingText="Please Wait..." ServiceMethod="GETSTATE"
                    runat="server" ParentControlID="ddlcountry">
                </asp:CascadingDropDown>
            </td>
        </tr>
        <tr>
            <td>
                Select City:
            </td>
            <td>
                <asp:DropDownList runat="server" ID="ddlcity">
                </asp:DropDownList>
                <asp:CascadingDropDown ID="CascadingDropDown3" TargetControlID="ddlcity" Category="city"
                    PromptText="Select City" LoadingText="Please Wait..." ServiceMethod="GETCITY"
                    runat="server" ParentControlID="ddlstate">
                </asp:CascadingDropDown>
            </td>
        </tr>
    </table>

& code behind this page paste below code:

 [System.Web.Services.WebMethod]
    public static CascadingDropDownNameValue[] GETCOUNTRY(string knownCategoryValues, string category)
    {
      //Fill your dt from database
        dt = //your dt

        List<CascadingDropDownNameValue> oq = new List<CascadingDropDownNameValue>();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            oq.Add(new CascadingDropDownNameValue(dt.Rows[i]["country_name"].ToString(), dt.Rows[i]["country_id"].ToString()));
        }
        return oq.ToArray();
    }

    [System.Web.Services.WebMethod]
    public static CascadingDropDownNameValue[] GETSTATE(string knownCategoryValues, string category)
    {
   
        StringDictionary countrydetails = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        int countryID = Convert.ToInt32(countrydetails["country"]);
          //Fill your dt from database
        dt = //your dt

        List<CascadingDropDownNameValue> oq = new List<CascadingDropDownNameValue>();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            oq.Add(new CascadingDropDownNameValue(dt.Rows[i]["state_name"].ToString(), dt.Rows[i]["state_id"].ToString()));
        }
        return oq.ToArray();
    }
    [System.Web.Services.WebMethod]
    public static CascadingDropDownNameValue[] GETCITY(string knownCategoryValues, string category)
    {
   

        StringDictionary countrydetails = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        int stateID = Convert.ToInt32(countrydetails["state"]);
           //Fill your dt from database
        dt = //your dt

        List<CascadingDropDownNameValue> oq = new List<CascadingDropDownNameValue>();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            oq.Add(new CascadingDropDownNameValue(dt.Rows[i]["city_name"].ToString(), dt.Rows[i]["state_id"].ToString()));
        }
        return oq.ToArray();
    }
Read More