Call WCF webservice with Parameter for PhoneGap by Jquery

 //Call Webservice on Singin Guest
 var MyData = '{"GuestFirstName":"' + $('#txtFirstName').val().toString()
+ '","GuestLastName":"' + $('#txtLastName').val().toString()
+ '","GuestCompany":"'
                                                                           $('#txtCompanyName').val().toString()
+ '","GuestCarNo":"' + $('#txtCarNumber').val().toString()
+ '","MeetingPurpose":"' + $('#txtHereToMeet').val()+ '"}';
            url = VisitorServiceUrl + "InsertGuestDetails";
            try {

                $.support.cors = true;
                $.ajax({
                    type: 'POST',
                    //URL
                    url: url,
                    // Parameter
                   data: MyData,
                    contentType: 'application/json; charset=UTF-8',
                    dataType: 'json',
                    beforeSend: function () {
                        //      alert("Processing...");
                    },
                    success: function (data) {
                        alert('You have Signed In Successfully.');
                        location.reload();
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('error InsertGuestDetails : ' + thrownError);
                    }
                });
            }
            catch (e) {
                alert(e.Message);
            }

Javascript : Create Dynamic HTML Table from JSON Object

function CreateDynamicTable(objArray) {
    //var array = JSON.parse(objArray);
    //debugger;
    var array = objArray;
    var str = '<table class="display" cellpadding="0" cellspacing="0" border="0" id="example">';
    str += '<thead><tr>';
    for (var index in array[0]) {
        str += '<th scope="col">' + index + '</th>';
    }
    str += '</tr></thead>';
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += (i % 2 == 0) ? '<tr class="gradeA">' : '<tr class="gradeA">';
        for (var index in array[i]) {
            if (index == "Date") {

                str += '<td>' + array[i][index] + '</td>';
            }
            else {
                str += '<td>' + array[i][index] + '</td>';
            }
        }
        str += '</tr>';
    }
    str += '</tbody>'
    str += '<tfoot><tr>';
    for (var index in array[0]) {
        str += '<th scope="col">' + index + '</th>';
    }
    str += '</tr></tfoot>';
    str += '</table>';
    return str;
}

kedno Grid Checkbox Column on Data field value

Kendo grid checkbox Column Dynamic checked on Bind:

columns: [
    {
        width: 80,
        template: "<input type='checkbox' class='visible' #= Active == '1' ? checked='checked' : '' # />",
        headerTemplate: 'Visible',
        attributes: {
            "class": "myClass",
            style: "text-align: Center"
        },
        headerAttributes: {
            "class": "myHeader",
            style: "text-align: Center"
        }
    }
]

Here we are applying checked or unchecked on Active field value.

Kendo grid Column Date format

 columns: [
{
       field: "CreatedDate" , format: "{0:yyyy-MM-dd hh:mm:ss}"

       , template: '#= kendo.toString(new Date(parseInt(CreatedDate.replace(/[A-Za-z$--/]/g, ""))),"dd-MM-yyyy") #'
}

Kendo grid - Apply filter on column(s) grid using javascript

 var ds = $("#grdUserPermission").data("kendoGrid").dataSource;
ds.filter([
            { "logic": "or",
               "filters": [{
                                "field": "DisplayName",
                                "operator": "contains",
                                "value": "Allo"
                           }]
            }
 ]);

Kendo grid - Remove all filters using single javascript

If you want to remove all rows filters from Kendo grid using JavaScript. Best way is:

$("#Grid").data('kendoGrid').dataSource.data([ ]);

Kendo Grid Refresh Datasource and Rebind

Refresh Datasource of Kendo Grid If Server side event is off.

 function UpdateUPGridSource(RoleID) {

            var grdUP = $("#grdUserPermission").data("kendoGrid");
            //Set url property of the grid data source
            grdUP.dataSource.transport.options.read.url = '/Users/UserPermission/GetModuleParentIDList?inUserID=' + RoleID;
            //Read data source to update
            grdUP.dataSource.read();
   }

Refresh Datasource of Kendo Grid If Server side event is on Then Just need to do :

$('#grdUserPermission').data("kendoGrid").dataSource.read();
Change Page Index of Kendo Grid with Javascript

grid.dataSource.query({ page: 3, pageSize: 20 });

or

grid.dataSource.page(3);

Kendo grid Detail Template

--------------------------------HTML----------------------------------------
<div>
    <div id="example" class="k-content">
        <div id="grdTest">
        </div>
        <div id="Mydetails">
        </div>
    </div>
</div>

--------------------------------Script----------------------------------------

<script>

        $(document).ready(function () {

            debugger;

            $('#grdTest').kendoGrid({

                dataSource: {

                    type: "odata",

                    transport: {

                        read: {

                            contentType: "application/json; charset=utf-8",

                            type: "POST",

                            url: '/Users/Users/GetUserMasterList'

                        }

                    },

                    pageSize: 10,

                    type: "json"

                },

                width: 400,

                scrollable: true,

                sortable: true,

                resizable: true,

                filterable: true,

                navigatable: true,

                selectable: "multiple",

                //For column detain Template

                detailTemplate: kendo.template($("#Detailtemplate").html()),

                //Detail Expand Click

                detailInit: detailInit,

                pageable: {

                    numeric: true,

                    //refresh: true,

                    pageSizes: [5, 10, 15],

                    previousNext: true,

                    input: true,

                    info: true

                },

                reorderable: true,

                groupable: true,

                dataBound: function () {

                    debugger;

                }

                        ,

                columns: [{

                    field: "UserName",

                    //width: 290,

                    title: "User"

                },

                 {

                     width: 40, template: "<input type='checkbox' class='chkbxq' #= Active == '1' ? checked='checked' : '' # />", headerTemplate: "<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked); ' />", attributes: { "class": "myClass", style: "padding: .5em .6em .4em .6em" }

                 }

            ]

            });

        });

        //Detail Template Click

        function detailInit(e) {

            var detailRow = e.detailRow;

            detailRow.find(".tabstrip").kendoTabStrip({

                animation: {

                    open: { effects: "fadeIn" }

                }

            });

            //Bind Building in Detail Template

            $.post("/Users/Users/GetBuilding", { inUserID: e.data.UserID }, function (DataDetail1) {

                if (DataDetail1 != null) {

                    $(e.detailRow.find(".User")).kendoGrid({

                        dataSource: DataDetail1,

                        scrollable: false,

                        sortable: true,

                        pageable: true

                        //,

                        //columns: [{ field: "POID", title: "PO ID", width: 80 }, { field: "PODetailID", title: "Detail ID", width: 80 }, { field: "Description", title: "Description", width: 400 }, { command: { text: "ViewDetails", click: showDetailDetails }, width: 100}]

                    });

                    //bind paging on load

                    var grid1 = $(e.detailRow.find('.User')).data("kendoGrid");

                    grid1.dataSource.pageSize(5);

                    grid1.refresh();

                }

            });

        }

    </script>

------------------------------Template-----------------------------------

 <script type="text/x-kendo-template" id="Detailtemplate">

                <div class="tabstrip">

                    <ul>

                        <li class="k-state-active">

                           User Permission

                        </li>

                    </ul>

                    <div>

                        <div class="User"></div>

                    </div>

                 </div>

            </script>

Common Javascript Functions

 function IsEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email)
}

//Space Validation
function isSpaceKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if ((charCode == 32)) {
        return false;
    }
    return true;
}
function onlyAplhaNumericSpecial(evt) {
    var keyCode = (evt.which) ? evt.which : event.keyCode

    if (keyCode == 32 || (keyCode > 47 && keyCode < 58) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (keyCode >= 33 && keyCode <= 47) || (keyCode >= 123 && keyCode <= 126) || keyCode == 61 || keyCode != 22)
        return true;
    else
        return false;
}

function onlyAlphaNumeric(evt) {
    var keyCode = (evt.which) ? evt.which : event.keyCode

    if (keyCode == 32 || (keyCode > 47 && keyCode < 58) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))
        return true;
    else
        return false;
}
function onlyDigit(evt) {
    var keyCode = (evt.which) ? evt.which : event.keyCode

    if (keyCode == 32 || (keyCode > 47 && keyCode < 58))
        return true;
    else
        return false;
}
function onlyAlphabets(evt) {
    var keyCode = (evt.which) ? evt.which : event.keyCode

    if (keyCode == 32 || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))
        return true;
    else
        return false;
}

function FocusChange(evnt, objCntrl) {
    var key = (evnt.which || evnt.keyCode || evnt.charCode);
    if (key == 13) {
        if (document.getElementById(objCntrl) != null) {
            document.getElementById(objCntrl).focus();
            return false;
        }
    }
}
function SetFocus(objCntrl) {
    if (document.getElementById(objCntrl) != null) {
        document.getElementById(objCntrl).focus();
    }
}
function ValidateForm(objCntrl) {
    if (document.getElementById(objCntrl) != null) {
        if (isDate(document.getElementById(objCntrl).value) == false) {
            document.getElementById(objCntrl).focus()
            return false;
        }
        return true;
    }
    return false;
}
/********************* Select All checkbox  ***************************/
function SelectAllCheckbox() {
    var ckhid;
    var allckhid;
    var selectcnt = 0;
    var chkBoxes;
    if (document.getElementsByName("chkSelect") != null) {
        chkBoxes = document.getElementsByName("chkSelect");
    }
    var chkleng = chkBoxes.length;
    if (document.getElementsByName('selectall') != null) {
        if (document.getElementsByName('selectall')[0].checked == true) {
            for (var i = 0; i < chkleng; i++) {
                chkBoxes[i].checked = true;
                ckhid = chkBoxes[i].id;
                selectcnt += 1;

                if (allckhid != undefined) {
                    allckhid = ckhid + '|' + allckhid
                }
                else {
                    allckhid = ckhid;
                }
            }
        }
        else {
            for (var j = 0; j < chkleng; j++) {
                chkBoxes[j].checked = false;
                selectcnt = 0;
                allckhid = undefined;
            }
        }
    }
    if (allckhid != undefined) {
        var URL = "/Common/SetAction/";
        $.post(URL, {
            strArchiveAll: allckhid
        });
    }
}
/********************* Select All checkbox  ***************************/
/********************* Check All checkbox is checked or not ***************************/
function isallchecked() {  
    var ckhid;
    var allckhid;
    var selectcnt = 0;
    var chkBoxes;
    if (document.getElementsByName("chkSelect") != null) {
        chkBoxes = document.getElementsByName("chkSelect");
    }
    var chkleng = chkBoxes.length;
    for (var i = 0; i < chkleng; i++) {
        if (chkBoxes[i].checked == true) {
            selectcnt += 1;
            ckhid = chkBoxes[i].id;
            if (allckhid != undefined) {
                allckhid = ckhid + '|' + allckhid
            }
            else {
                allckhid = ckhid;
            }
        }
        if (selectcnt == chkleng) {
            document.getElementsByName('selectall').checked = true;
        }
        else {
            document.getElementsByName('selectall').checked = false;
        }
    }

    if (allckhid != undefined) {
        var URL = "/Common/SetAction/";
        $.post(URL, {
            strArchiveAll: allckhid
        });
    }
}
/********************* Check All checkbox is checked or not ***************************/
var dtCh = "/";
var minYear = 1900;
var maxYear = 2100;

function isInteger(s) {
    var i;
    for (i = 0; i < s.length; i++) {
        // Check that current character is number.
        var c = s.charAt(i);
        if (((c < "0") || (c > "9"))) return false;
    }
    // All characters are numbers.
    return true;
}

function stripCharsInBag(s, bag) {
    var i;
    var returnString = "";
    // Search through string's characters one by one.
    // If character is not in bag, append to returnString.
    for (i = 0; i < s.length; i++) {
        var c = s.charAt(i);
        if (bag.indexOf(c) == -1) returnString += c;
    }
    return returnString;
}

function daysInFebruary(year) {
    // February has 29 days in any year evenly divisible by four,
    // EXCEPT for centurial years which are not also divisible by 400.
    return (((year % 4 == 0) && ((!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28);
}
function DaysArray(n) {
    for (var i = 1; i <= n; i++) {
        this[i] = 31
        if (i == 4 || i == 6 || i == 9 || i == 11) { this[i] = 30 }
        if (i == 2) { this[i] = 29 }
    }
    return this
}

function isDate(objOwnCntrl, objCntrl) {
    var dtStr;
    if (document.getElementById(objOwnCntrl) != null) {
        dtStr = document.getElementById(objOwnCntrl).value;
    }
    var daysInMonth = DaysArray(12)
    var pos1 = dtStr.indexOf(dtCh)
    var pos2 = dtStr.indexOf(dtCh, pos1 + 1)
    var strDay = dtStr.substring(0, pos1)
    var strMonth = dtStr.substring(pos1 + 1, pos2)
    var strYear = dtStr.substring(pos2 + 1)
    strYr = strYear
    if (strDay.charAt(0) == "0" && strDay.length > 1) strDay = strDay.substring(1)
    if (strMonth.charAt(0) == "0" && strMonth.length > 1) strMonth = strMonth.substring(1)
    for (var i = 1; i <= 3; i++) {
        if (strYr.charAt(0) == "0" && strYr.length > 1) strYr = strYr.substring(1)
    }
    month = parseInt(strMonth)
    day = parseInt(strDay)
    year = parseInt(strYr)
    if (pos1 == -1 || pos2 == -1) {
        alert("The date format should be : dd/mm/yyyy")
        if (document.getElementById(objOwnCntrl) != null) {
            document.getElementById(objOwnCntrl).focus();
        }
        return false
    }
    if (strMonth.length < 1 || month < 1 || month > 12) {
        alert("Please enter a valid month")
        if (document.getElementById(objOwnCntrl) != null) {
            document.getElementById(objOwnCntrl).focus();
        }
        return false
    }
    if (strDay.length < 1 || day < 1 || day > 31 || (month == 2 && day > daysInFebruary(year)) || day > daysInMonth[month]) {
        alert("Please enter a valid day")
        if (document.getElementById(objOwnCntrl) != null) {
            document.getElementById(objOwnCntrl).focus();
        }
        return false
    }
    if (strYear.length != 4 || year == 0 || year < minYear || year > maxYear) {
        alert("Please enter a valid 4 digit year between " + minYear + " and " + maxYear)
        if (document.getElementById(objOwnCntrl) != null) {
            document.getElementById(objOwnCntrl).focus();
        }
        return false
    }
    if (dtStr.indexOf(dtCh, pos2 + 1) != -1 || isInteger(stripCharsInBag(dtStr, dtCh)) == false) {
        alert("Please enter a valid date")
        if (document.getElementById(objOwnCntrl) != null) {
            document.getElementById(objOwnCntrl).focus();
        }
        return false
    }
    if (document.getElementById(objCntrl) != null) {
        document.getElementById(objCntrl).focus();
    }
    return true
}
--------------------------------------------------------------------------


============Alert Popup Dialoge====================
function alertPopup(msg, focusElement) {
    $("#dialog-message").html(msg);
    $("#dialog-message").dialog({
        modal: true,
        height: 190,
        width: 380,
        zIndex: 12001,
        closeOnEscape: false,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
                if (focusElement != null && focusElement != "") {
                    document.getElementById(focusElement).focus();
                }
            }
        },
        open: function () {
        }
    });
}
function confirmPopup(msg, okFunc, cancelFunc) {
    $("#dialog-message").html(msg);
    $("#dialog-message").dialog({
        modal: true,
        height: 190,
        width: 380,
        zIndex: 12001,
        closeOnEscape: false,
        buttons: {
            Ok: function () {
                $(this).dialog('close');
                if (typeof (okFunc) == 'function') {
                    okFunc();
                    $(this).dialog("close");
                }
                else {
                    okFunc;
                }
            },
            Cancel: function () {
                $(this).dialog("close");
                if (typeof (cancelFunc) == 'function') {
                    cancelFunc();
                    $(this).dialog("close");
                }
            }
        }
    });
}
=====================Set Forgery======================
function setAntiForgeryHeader() {
    $.ajaxPrefilter(function (options, originalOptions) {
        if (options.type.toUpperCase() == "POST") {
            options.headers = {
                '__RequestVerificationToken': $('[name=__RequestVerificationToken]').val()
            }
        }
    });
}
/*============== Start - Set Tooltips==============*/
$(document).ready(function () {
    $(document).tooltip({
        // place tooltip on the right edge
        position: {
            my: "left right",
            at: "right right"
        },

        // a little tweaking of the position
        offset: [-2, 40],

        // use the built-in fadeIn/fadeOut effect
        effect: "fade",

        // custom opacity setting
        opacity: 0.7
    }).off("mouseover mouseout");
});

Call Ajax from Javacript

Here We can call GetBulding function of Home Class / Controller and We are passing parameter here 'inUserID' and Response will be in 'data'.

var URL = '/Home/GetBuilding';
 $.post(URL, { inUserID: 1 }, function (data) {
            alert('call')
            if (data != null) {
            }
  });

Or

 $.ajax({
                type: "POST",
                url: "",
                contentType: "application/json; charset=utf-8",
                data: {},
                success: function (data) {
                },
                error: function (xhr, ajaxOptions, thrownError) {
                       alert(xhr.responseText);
                }

});

If you can generate your URL dynamically using Url.Action method.

var URL = '/Home/GetBuilding';

For above URL you can use Url.Action method like:

var URL = "@Url.Action("GetBuilding","Home")";

which will create URL dynamically.