Tuesday, 31 May 2016

US ZIP Code Validation

<input type="text" name="zip" id="zip" />
<a href="#" id="test">click to test</a>


$(document).ready(function () {

    function checkZip(value) {
        return (/(^\d{5}$)|(^\d{5}-\d{4}$)/).test(value);
    }

    $('#test').on('click', function (e) {
        e.preventDefault;
        var value = $('#zip').val();
        if (checkZip(value)) {
            alert('valid zip');
        } else {
            alert('invalid zip');
        }
    });

});

Monday, 30 May 2016

how to disable all rows in a kendo gride

dataBound: function () {
var grid = this;
                    grid.tbody.find('>tr').each(function(){
                        var dataItem = grid.dataItem(this);
                        $(this).addClass('disableRow');
                        $(this).find(':input').attr('disabled', 'disabled');
                       
                    })
}

how to hide delete button & checkbox from a gride

$("#Banner-grid tbody tr").each(function () {
                    var currentDataItem = $("#Banner-grid").data("kendoGrid").dataItem($(this).closest("tr"));
                    if (currentDataItem.IsPublish) {
                        $(this).find(".k-delete,.checkboxGroups").hide();
                    }
                });

how to hide delete & edit button in kendor gride

imageClass: "k-icon k-delete",
 dataBound: function () {
                $("#Address-grid tbody tr").each(function () {
                    var currentDataItem = $("#Address-grid").data("kendoGrid").dataItem($(this).closest("tr"));
                    if (currentDataItem.IsDefault) {
                        $(this).find(".k-icon").hide();
                    }
                });
}

how to disable edit button from kendo gride

 dataBound: function ()
            {

                $("#RePackagingSummary-grid tbody tr .k-grid-edit").each(function () {
                    var currentDataItem = $("#RePackagingSummary-grid").data("kendoGrid").dataItem($(this).closest("tr"));
                    if (currentDataItem.Sid != 1) {
                        $(this).addClass("k-state-disabled");              
                    }
                });
               
                }

how to remove edit button from kendo gride

,  dataBound: function ()
            {

                $("#RePackagingSummary-grid tbody tr .k-grid-edit").each(function () {
                    var currentDataItem = $("#RePackagingSummary-grid").data("kendoGrid").dataItem($(this).closest("tr"));
                    if (currentDataItem.Sid != 1) {
                        $(this).remove();
                    }
                });
}

how to pass array in kendo gride

$("#Upload-grid").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        url: "@Html.Raw(Url.Action("FillUploadGride", "Banner"))",
                    type: "POST",
                    dataType: "json",
                    data: { Ids: @Html.Raw(Json.Encode(Model.BannerIds)) }

                }


            },
public JsonResult FillUploadGride(DataSourceRequest command,List<int> Ids)
        {
            var gridModel = new DataSourceResult();
            var data = _bannerService.GetAllBanner(command.Page - 1, command.PageSize);
            var query = (from x in data
                         select new
                         {
                             x.Id,
                             x.PictureId,
                             Image = GetUrl(_pictureService.GetPictureUrl(_pictureService.GetPictureById(x.PictureId.Value))),
                             x.Title,

                         }
                                 );

            gridModel.Data = query;
            gridModel.Total = query.Count();
            return Json(gridModel, JsonRequestBehavior.AllowGet);
        }

Wednesday, 11 May 2016

validation on kendo date picker

 <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="form-group">
                @Html.LabelFor(model => model.StartDate, htmlAttributes: new { @class = "" })
                <div class="col-md-12 zero-padding-left">
                    <div class="col-md-6 zero-padding-left">
                        @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger", @id = "StartDateMessage" })
                    </div>
                    <div class="col-md-6">
                        @Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.StartTime, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="form-group">

                @Html.LabelFor(model => model.EndDate, htmlAttributes: new { @class = "" })

                <div class="col-md-12 zero-padding-left">
                    <div class="col-md-6 zero-padding-left">
                        @Html.EditorFor(model => model.EndDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.EndDate, "", new { @class = "text-danger", @id = "EndDateMessage" })
                    </div>
                    <div class="col-md-6">
                        @Html.EditorFor(model => model.EndTime, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.EndTime, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

            </div>


<script type="text/javascript">
    $(function () {
 $('#StartTime').kendoTimePicker({ format: "h:mm tt" });
        $('#EndTime').kendoTimePicker({ format: "h:mm tt" });
        function startChange() {
            var fromDate = start.value(),
            toDate = end.value();

            if (fromDate) {
                fromDate = new Date(fromDate);
                fromDate.setDate(fromDate.getDate());
                end.min(fromDate);
                $("#EndDate").data("kendoDatePicker").value(fromDate);

            } else if (toDate) {
                start.max(new Date(toDate));
            } else {
                toDate = new Date();
                start.max(toDate);
                end.min(toDate);
            }
        }

        function endChange() {
            var toDate = end.value(),
            fromDate = start.value();

            if (toDate) {
                toDate = new Date(toDate);
                toDate.setDate(toDate.getDate());
                start.max(toDate);
            } else if (fromDate) {
                end.min(new Date(fromDate));
            } else {
                toDate = new Date();
                start.max(toDate);
                end.min(toDate);
            }
        }

        var start = $("#StartDate").kendoDatePicker({
            change: startChange,
            min: new Date(),
        }).data("kendoDatePicker");


        var todayDate = kendo.toString(kendo.parseDate(new Date()), 'MM/dd/yyyy');
        $("#StartDate").data("kendoDatePicker");

        var end = $("#EndDate").kendoDatePicker({
            change: endChange
        }).data("kendoDatePicker");
        start.max(end.value());
        end.min(start.value());
        $("#EndDate").data("kendoDatePicker");

});
</script>