Friday 7 June 2013

Disable browser cache in ASP.NET MVC

First you need to create a custom action filter. For that you need to inherit  the class from ActionFilterAttribute.


  public class CustomActionFilterAttribute : ActionFilterAttribute
    {
       public override void OnResultExecuted(ResultExecutedContext filterContext)
        {
            var cache = filterContext.HttpContext.Response.Cache;
            cache.SetCacheability(HttpCacheability.NoCache);
            cache.SetRevalidation(HttpCacheRevalidation.ProxyCaches);
            cache.SetExpires(DateTime.Now.AddYears(-5));
            cache.AppendCacheExtension("private");
            cache.AppendCacheExtension("no-cache=Set-Cookie");
            cache.SetProxyMaxAge(TimeSpan.Zero);
        }

    }


To Implement above Action filter to any controller or to any particular action, you need to decorate controller or action as shown below:
   [CustomActionFilter]
    public class DemoController : Controller

    {
        ..Your Code..
    }


In MVC4, to disable browser caching across all controllers, but retain it for anything not served by a controller, add this to FilterConfig.RegisterGlobalFilters:
filters.Add(new  CustomActionFilterAttribute ());

Friday 24 May 2013

Custom ASP.NET MVC Authorize Attribute

AuthorizeAttribute allows you to secure controller actions. The Authorize attribute lets you indicate that authorization is restricted to predefined roles or to individual users. This gives you a high degree of control over who is authorized to view any page on the site.


public class CustomAuthorizeAttribute : AuthorizeAttribute
    {
        // Custom property as you can get Page name which is passed from controller
        public string AccessLevel { get; set; }
        protected override bool AuthorizeCore(HttpContextBase httpContext)
        {
            if (httpContext == null)
                throw new ArgumentNullException("httpContext");

            if (!httpContext.User.Identity.IsAuthenticated)
                return false;
            else
            {
                //Check Roles
                HttpCookie authCookie =          httpContext.Request.Cookies[FormsAuthentication.FormsCookieName];
                if (authCookie == null || authCookie.Value == "")
                {
                }
                FormsAuthenticationTicket authTicket = null;
                try
                {
                    authTicket = FormsAuthentication.Decrypt(authCookie.Value);
                }
                catch
                {
                }        
                // retrieve roles from UserData
                string[] roles = authTicket.UserData.Split(';');
            }                
            return true;
    }


Here I just override the AuthorizeCore methods of AuthorizeAttribute class. Now, you have to decorate your controller or action with this custom attribute

[CustomAuthorize(AccessLevel = "DemoIndex")]
 public ActionResult DemoIndex()
{
       return View();
}


You can redirect an unauthorised user in your custom AuthorisationAttribute by overriding the HandleUnauthorizedRequest method:

protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)
    {
        filterContext.Result = new RedirectToRouteResult(
                    new RouteValueDictionary(
                        new
                            { 
                                controller = "Error", 
                                action = "Unauthorised" 
                            })
                    );
    }

Thursday 23 May 2013

Playing with Jquery Cookie in Chrome and All broswers



When i trying to store value in Local Store means in browser then I have got Good solution by using $.Cookie. But when I Have started to work with it then its working fine in with Mozilla and IE. But when I have started to work in chrome then I have got problem to set and get Cookie through $.cookie. Then I have got a very good solution to Store cookie value in Local Browser by Using jquery.Storage.js($.Storage) and Its solved my problem with ease.

Code : 

<script src="js/jquery-1.9.1.js" language="javascript" type="text/javascript"></script>
<script src="js/jquery.cookie.js" language="javascript" type="text/javascript"></script>
<script src="js/jquery.Storage.js" language="javascript" type="text/javascript"></script>

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

//get cookies
var Flag=(isChrome)?$.Storage.get("Flag"):$.cookies.get("Flag");

//set cookies
if(isChrome)$.Storage.set("Flag", "1");else $.cookies.set("Flag", "1");

Monday 29 April 2013

Jquery Datatable Simple Initialization


Here is the require CSS and Javascript that you need to put in header of HTML to acquire functionality of DataTable JS
/******Script Require ****/

<script src="../../DT/jquery.js" type="text/javascript"></script>
<script src="../../DT/jquery.dataTables.js" type="text/javascript"></script>
<script src="../../Script.js" type="text/javascript"></script>


@* Datatable Css *@
 <link href="../../DT/demo_table.css" rel="stylesheet" type="text/css" />
 <link href="../../DT/demo_page.css" rel="stylesheet" type="text/css" />

You need to write following script to initialize data table.

 $(document).ready(function () {

var myURL = "/List";
                    $.ajax({
                        type: 'POST',
                        url: myURL,
                        contentType: 'application/json; charset=UTF-8',
                        dataType: 'json',
                        beforeSend: function () {
                        },
                        success: function (data) {
                              var objlist = JSON.parse(data);
                            if (objlist.toString() != '') {
                                rwAll = CreateDynamicTable(objlist);
                                //Create HTML Table in  DIV
                                $("#bind").html(rwAll);

                                $('#example').dataTable({
                                    "sPaginationType": "full_numbers",
                                    "fnDrawCallback": function () {
                                        oTable = $('#example').dataTable();
                                    },
                                    "fnStateLoaded": function (oSettings, oData) {

                                    },
                                    "fnInitComplete": function (oSettings, json) {
                                    },
                                });

                            }
                            else {
                                //if no data
                            }
                        },
                        error: function (result) {
                            alert('Please try after some time !');
                        }
                    }).always(function () {

                    });
    });
------------------------------------------

function CreateDynamicTable(objArray) {
    //var array = JSON.parse(objArray);
    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;
}



Tuesday 16 April 2013

Kendo Grid Detail Template with MVC


@using Kendo.Mvc.UI

<input type="button" id="Create" value="Add New" />
<input type="button" id="Delete" value="Delete" onclick="DeleteSelected();" />

//Initailization

@(Html.Kendo().Grid<iFacilitiesDemo.Models.sp_Result>()
     //@(Html.Kendo().Grid<iFacilitiesDemo.Models.Task>()
    .Name("Grid")
     //.BindTo((IEnumerable<iFacilitiesDemo.Models.sp_Result>)ViewBag.Products)
     //.EnableCustomBinding(true)
    .Columns(columns =>
    {
        columns.Bound(p => p.Status).HeaderTemplate("<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);' />").ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkbxq' type='checkbox' />").Sortable(false).Filterable(false).Width(30);
        columns.Bound(p => p.Job_No).ClientFooterTemplate("Total Count: #=count# and Max #= max#");
        columns.Bound(p => p.Company);
        columns.Bound(p => p.Status);
        columns.Bound(p => p.Manager);
        columns.Bound(p => p.Client);
        columns.Bound(p => p.Start_Date).Format("{0:dd/MM/yyyy}");
        columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
        columns.Command(c =>
        {
            c.Custom("RefreshRecord").Text("Your Detail").Click("onClick");
        }).Width(80);
    })
    .Groupable()
    .Pageable(pager => pager
            .Input(true)
            .Numeric(true)
            .Info(true)
            .PreviousNext(true)
            .Refresh(true)
            .PageSizes(true)
            )
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
    .Sortable()
    .Filterable(filterable => filterable
            .Extra(true)
            .Operators(operators => operators
                .ForString(str => str.Clear()
                    .Contains("Contains")
                    .StartsWith("Start With")
                    .IsEqualTo("Is equal to")
             ))
             .Operators(operators => operators
                    .ForDate(str => str.Clear()
                    .IsGreaterThanOrEqualTo("From")
                    .IsLessThanOrEqualTo("To")
             ))
    )
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .Filterable()
    .ClientDetailTemplateId("MyTemplate")
    .HtmlAttributes(new { style = "height:430px;" })
     //.Events(events => events.DataBound("dataBound"))
    .DataSource(dataSource => dataSource.Ajax()
         .Aggregates(aggregates =>
         {
             aggregates.Add(p => p.Job_No).Min().Max().Count();
         })
        .Model(
                model =>
                {
                    model.Id(p => p.Job_No);
                }
        )
        .ServerOperation(false)
        //.Read(read => read.Action("GetTaskAll", "Kendo"))
        .Read(read => read.Action("GetTaskAllBySP", "Kendo"))
     )
        //Bound Start    @*.Events(events => events.DataBound( @<text> function(e) { alert('bound')  }</text>*@
        //Bound End
     .Events(events => events.DataBound("gridDataBound"))
))


@*For Custom Command*@
@(Html.Kendo().Window().Name("Details")
    .Title("My Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
)


@*For Detail Template start*@
<script id="MyTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("tabStrip_1")
            //.Name("tabStrip_#=Job_No#")
            .SelectedIndex(0)
            .Animation(false)
            .Events(e => e.Select("tabstrip_select"))
            //.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Orders").Content(@<text>
                    @(Html.Kendo().Grid<iFacilitiesDemo.Models.sp_Result>()
                        .Name("grid_#=Job_No#")

                        .Columns(columns =>
                        {
                            columns.Bound(o => o.Job_No).Title("ID").Width(56);
                            columns.Bound(o => o.Company).Width(110);
                            columns.Bound(o => o.Status);
                            columns.Bound(o => o.Client).Width(190);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(5)
                            .Read(read => read.Action("GetTaskAllBySP", "Kendo"))
                            //.Read(read => read.Action("GetTaskAllBySP", "Kendo", new { employeeID = "#=EmployeeID#" }))
                        )
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate())
                </text>
                );
                items.Add().Text("aa").Content(
                    "<div class='employee-details'>hihi </div>"
                );
            })
            .ToClientTemplate())
</script>
//Css
<style scoped="scoped">
    .k-detail-cell .k-tabstrip .k-content
    {
        padding: 0.2em;
    }
   @*Td and tr Padding [height]*@
    .k-grid td
    {
        padding: 2px 4px;
    }
 
</style>

@*For Detail Template End*@

@*View Detail Start*@
<script type="text/x-kendo-template" id="ViewTemplate">
    <div id="details-container">
        <h2>#= Job_No # and #= Company #</h2>
        <em>#= Manager #</em>
        <dl>
            <dt>Status: #= Status #</dt>
            <dt>Client: #= Client #</dt>
        </dl>
    </div>
</script>

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#ViewTemplate").html());

    //PreviewClick
    function showDetails(e) {
        //        $("div.k-widget.k-window").css("-webkit-transform", "scale(1)");

        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));

        wnd.center().open();
    }
</script>
@*View Detail End*@

<script>
    //Grid Data Bound Start
    function gridDataBound(e) {

        //$("div.k-widget.k-window").css("-webkit-transform", "scale(2)");
        //        var dds = $("#Details").parent('div');

        //        alert(dds.innerHTML)
        //        dds.css({
        //            '-moz-transform': 'scale(2)',
        //            '-webkit-transform': 'scale(2)'
        //        });
        var grdApplyColor = $('#Grid').data("kendoGrid");
        row = grdApplyColor.tbody.find(">tr:not(.k-grouping-row)");

        //6th row is Status on its value we want to apply color
        rowActive = row.find("td:nth-child(5)");
        $.each(rowActive, function (i, rowValue) {
            //debugger;
            //alert(rowValue.innerHTML);
            //check Status = Invoiced 'then' #ECF6CE
            if (rowValue.innerHTML == 'Invoiced') {
                objRow = grdApplyColor.tbody.find('tr:nth-child(' + (i + 1) + ')');
                objRow.css("background-color", "#ECF6CE"); ;
            }
            else if (rowValue.innerHTML == 'false') {
                objRow = grdApplyColor.tbody.find('tr:nth-child(' + (i + 1) + ')');
                objRow.css("background-color", "#848484");
            }
        });
    }
    //Grid Data Bound End
    //Grid Header Chkbox chk all chkbox
    function ToggleChkBox(flag) {
        $('.chkbxq').each(function () {
            $(this).attr('checked', flag);
        });
    }
    //On Delete button click
    function DeleteSelected() {
        //        if (confirm('Are you sure you want to Delete')) {
        //            return false;
        //        }
        var idArray = "";
        $('.chkbxq').each(function () {
            if (this.checked == true) {
                idArray = idArray + "," + this.id;
            }
        });
        alert('Data to delete: ' + idArray);

        //grid.dataSource.read();
        //grid.query({ page: 1, pageSize: 10, sort: { field: "POID", dir: "asc"} });
    }
    //To change tab strip in Grid
    function tabstrip_select(e) {
        //alert('tabstrip_select');
        var x = e.item;
        var selectedIndex = $(e.item).index();
    }

    //check box toggle state (problem 2 time toggle so did it third time for control click)
    function grdChkBoxClick(obj) {
        if (obj.checked == true) {
            obj.checked = false;
        }
        else if (obj.checked == false) {
            obj.checked = true;
        }
    }
    //Cell click Checkbox select
    $('#Grid').on("click", "td", function (e) {
        var selectedTd = $(e.target).closest("td");
        var cellText = $(e.target).closest("td").find('input:checkbox').context;
        cellText = cellText.textContent || cellText.outerText;
        if (cellText != "ViewDetails") {
            var grdChkBox = selectedTd.parents('tr').find("td:first").next("td").find('input:checkbox');
            grdChkBox.prop('checked', !grdChkBox.prop('checked'));
        }
    });
    function onClick(e) {
        grid = $("#Grid").data("kendoGrid");
        dataItem = grid.dataItem($(e.srcElement).closest("tr"));
        var jobNos = dataItem.Job_No;
        $.post("/Kendo/getViewDetailJobNo", { 'inJobNo': jobNos }, function (ViewDetaildatas) {
            if (ViewDetaildatas != null) {
                var winData = '<h2>' + ViewDetaildatas[0].OrderNo + ' and ' + ViewDetaildatas[0].ECSJobNo + '</h2>' +
                             '<em>' + ViewDetaildatas[0].Manager + '</em>' +
                             '<dl>' +
                                   '<dt>DescOfFault:' + ViewDetaildatas[0].DescOfFault + '</dt>' +
                                    '<dt>Type:' + ViewDetaildatas[0].Type + '</dt>' +
                               '</dl>';
                var wnd = $("#Details").data("kendoWindow");

                wnd.content(winData);
                wnd.center().open();
            }
        });
    }
</script>

Monday 1 April 2013

Login Page - MVC


-----------------------HTML---------------------------------------------
<fieldset>
                <legend>Login</legend>
                <div>
                    <div>
                        User:
                    </div>
                    <div>
                        @Html.TextBox(UserName)
                        &nbsp;&nbsp;<span style="font-weight: bold"> Hint: </span>admin
                    </div>
                </div>
                <div>
                    <div>
                        Password
                    </div>
                    <div>
                        @Html.Password(Password)
                        &nbsp;&nbsp;<span style="font-weight: bold"> Hint: </span>admin
                    </div>
                </div>
                <div>
                    <div>
                        <input type="submit" value="Sign In" title="Sing In" onclick="return UserValidate();"
                            id="btnSave" />
                        <input type="button" value="Cancel" title="Clear" id="btnClear" />
                    </div>
                    <div>
                    </div>
                </div>
            </fieldset>
-------------------------------Script---------------------------------------


 function UserValidate() {
        if ($('#UserName') != null) {
            if (trim($('#UserName').val()) == '') {
                alert('Please enter Username.')
                document.getElementById('UserName').focus();
                return false;
            }
        }
        if ($('#Password') != null) {
            if (trim($('#Password').val()) == '') {
                alert('Please enter Password.')
                document.getElementById('Password').focus();
                return false;
            }
        }
/*Validate Here*/


        $.post('/Controller/Action', { Param: $('#UserName').val() }, function (Data) {
            if (Data != null) {
             if(Data.toString() == 'exist')
                 {
                  Alert('Name already Exist')
                return False;
                   }
              }
        });

    }

 function trim(str) {
        return str.replace(/^\s+|\s+$/g, "");
    }
------------------------------------------Controller.cs ----------------
public JsonnResult Action(string Param)
{

if(objUserMasterRep.IsExist(Param))
{
return Json("exist");
}
return "";
}


Saturday 16 March 2013

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([ ]);

Friday 15 March 2013

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

Thursday 14 March 2013

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>

Wednesday 13 March 2013

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.