Sunday, 27 March 2016

Add, Edit & Delete in kendo gride.

 var date = new Date();
        var currentYear = date.getFullYear();
        var mindate = "01/01/" + currentYear;
        var maxdate = "12/31/" + currentYear;
       


     
        $("#holidays-grid").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        url: "@Html.Raw(Url.Action("FillGride", "VendorPortal", new { VendorId = Model.VendorId, Year = Model.SelectedYear }))",
                        type: "POST",
                        dataType: "json",


                    },
                    create: {
                        url: "@Html.Raw(Url.Action("SaveData", "VendorPortal", new { VendorId = Model.VendorId }))",
                        type: "POST",
                        dataType: "json"
                    },
                    update: {
                        url: "@Html.Raw(Url.Action("UpdateData", "VendorPortal", new { VendorId = Model.VendorId }))",
                        type: "POST",
                        dataType: "json"
                    },
                    destroy: {
                        url: "@Html.Raw(Url.Action("DeleteData", "VendorPortal"))",
                        type: "POST",
                        dataType: "json"
                    },
                    parameterMap: function (data, operation) {
                        if (operation != "read") {
                            return data;
                        } else {
                            return JSON.stringify(data);
                        }
                    }
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors",
                    model: {
                        id: "Id",
                        fields: {
                            Date: { editable: true, type: "date", format: "{0:MM/dd/yyyy}", validation: { required: true, min: new Date(mindate), max: new Date(maxdate) } },
                            Month: { editable: false, type: "string" },
                            // HolidayName:{editable: true, type: "string"},
                            HolidayName: {
                                editable: true, type: "string", validation: {
                                    required: true,
                                    maxlength:
                                            function (input) {
                                                if (input.val().length > 80) {
                                                    input.attr("data-maxlength-msg", "Max length is 80");
                                                    return false;
                                                }
                                                return true;
                                            }
                                }
                            },
                            Id: { editable: false, type: "number" }
                        }
                    }

                },
                requestEnd: function (e) {
                    if (e.type == "create" || e.type == "update") {
                        this.read();
                    }
                },
                error: function (e) {
                    var grid = $('#holidays-grid').data('kendoGrid');
                    grid.dataSource.read();
                },

                serverPaging: false,
                serverFiltering: false,
                serverSorting: false
            },
            filterable: {
                extra: false,
                operators: {
                    string: { contains: "Contains" }
                }
            },
            toolbar: [{ name: "create", text: "Add Holiday" }],
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            editable: {
                confirmation: true,
                mode: "inline"
            },
            scrollable: false,
            columns: [
                { field: "Date", title: "Date", format: "{0:MM/dd/yyyy}", width: 145 },
                { field: "Month", title: "Month", attributes: { style: "text-align:center" }, },
                { field: "HolidayName", title: "Holiday Name" },

                {
                    title: "Action",
                    attributes: { style: "text-align:center" },
                    command: [{
                        name: "edit",
                        text: ""
                    }, {
                        name: "Delete", text: "", imageClass: "k-icon k-delete", click: function (e) {
                            e.preventDefault();
                            var dataItem = this.dataItem($(e.target).closest("tr"));
                            //*******
                            var kendoWindow = $("<div />").kendoWindow({
                                title: "Confirm",
                                resizable: false,
                                modal: true,
                                width: 500,
                                height: 200
                            });
                            kendoWindow.data("kendoWindow")
                            .content($("#delete-confirmation").html())
                            .center().open();

                            kendoWindow
                                .find(".delete-confirm,.delete-cancel")
                                    .click(function () {
                                        if ($(this).hasClass("delete-confirm")) {

                                            $.ajax({
                                                cache: false,
                                                type: "POST",
                                                url: "@(Url.Action("DeleteData", "VendorPortal"))",
                                                data: { Id: dataItem.Id },
                                                success: function () {
                                                    var grid = $('#holidays-grid').data('kendoGrid');
                                                    grid.dataSource.read();
                                                }
                                            });

                                        }
                                        kendoWindow.data("kendoWindow").close();

                                    })
                           .end();

                        }
                    }],

                }
            ],
            dataBound: function () {
                if ($('#holidays-grid').find("tr").length == 1) {
                    $('#holidays-grid').find('tbody')
                            .append('<tr class="kendo-data-row"><td colspan="4" style="text-align:center"><b>No Results Found!</b></td></tr>');
                }

                var selectedYear = $("#ddl").val();
                var year = new Date().getFullYear();

                if (selectedYear != year) {

                    $(".k-grid-toolbar", "#holidays-grid").hide();
                    $(".k-grid-edit", "#holidays-grid").hide();
                    $(".k-grid-delete", "#holidays-grid").hide();
                }
                else {
                    $(".k-grid-toolbar", "#holidays-grid").show();
                }

            }

        });


Controller Code

 public JsonResult FillGride(DataSourceRequest command, int VendorId, int Year)
        {
            var gridModel = new DataSourceResult();
            var data = _VendorHolidayCalendarService.GetAllVendorHolidayCalendar(command.Page - 1, command.PageSize);
            if (data.Count != 0)
            {
                gridModel.Data = data.Where(n => n.Date.Value.Year == Year).Select(m =>
               new CalendarVM
               {
                   Id = m.Id,
                   Date = m.Date.Value.ToShortDateString(),
                   Month = m.Date.Value.ToString("MMMM"),
                   HolidayName = m.HolidayName,
               }
               ).ToList();
            }
            else
            {
                List<CalendarVM> lst = new List<CalendarVM>();
                gridModel.Data = lst;
            }


            return Json(gridModel, JsonRequestBehavior.AllowGet);
        }
        public void SaveData(CalendarVM vc,int VendorId)
        {
            DateTime dt = Convert.ToDateTime(vc.Date.ToString().Substring(4, 11));
            VendorHolidayCalendar vendorHolidayCalendar = new VendorHolidayCalendar();
            vendorHolidayCalendar.Date = dt;
            vendorHolidayCalendar.HolidayName = vc.HolidayName;
            vendorHolidayCalendar.VendorId = VendorId;
            vendorHolidayCalendar.CreatedBy = VendorId;
            vendorHolidayCalendar.CreatedDate = DateTime.Today;
            _VendorHolidayCalendarService.InsertVendorHolidayCalendar(vendorHolidayCalendar);
         

        }
       
        public void UpdateData(CalendarVM vc,int VendorId)
        {
            DateTime dt = Convert.ToDateTime(vc.Date.ToString().Substring(4, 11));
            VendorHolidayCalendar vendorHolidayCalendar = new VendorHolidayCalendar();
            vendorHolidayCalendar.Id = vc.Id;
            vendorHolidayCalendar.Date = dt;
            vendorHolidayCalendar.HolidayName = vc.HolidayName;
            vendorHolidayCalendar.VendorId = VendorId;
            vendorHolidayCalendar.UpdatedBy = VendorId;
            vendorHolidayCalendar.UpdatedDate = DateTime.Today;
            _VendorHolidayCalendarService.UpdateVendorHolidayCalendar(vendorHolidayCalendar);
         
        }
        public JsonResult DeleteData(int Id)
        {
            _VendorHolidayCalendarService.DeleteVendorHolidayCalendar(Id);
            return Json("Data deleteted", JsonRequestBehavior.AllowGet);
        }

No comments:

Post a Comment