Friday, August 7, 2015

Post form data along with kendo grid data

    ** Suppose I have three kendo grids and two textboxs in my page . Now I want to post all data along with data of three grid . I did this by below style.



  @model DAL.ViewModel.ProfileViewModel
        @{
            ViewBag.Title = "Profile";
            Layout = "~/Views/Shared/_LayoutAfterLogin.cshtml";
        }

        <h2>Profile</h2>

        <div>
            <h4>ApplicationUser</h4>
            <hr />
            <dl class="dl-horizontal"></dl>

            <form id="frmProfile">
                <div>
                    <label>Email<span class="mandatory"></span></label>

                    @Html.Kendo().TextBoxFor(model => model.Email)
                </div>
                <div>
                    <label>UserName<span class="mandatory"></span></label>

                    @Html.Kendo().TextBoxFor(model => model.UserName)
                </div>
            </form>

            @(Html.Kendo().Grid<DAL.ViewModel.PhoneViewModel>()
            .Name("PhoneGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.PhoneID).Groupable(false);
                columns.Bound(p => p.PhoneType).Width(160);
                columns.Bound(p => p.PhoneNumber).Width(120);
                columns.Bound(p => p.IsPrimary).Width(120);

                columns.Command(command => command.Destroy()).Width(90);
            })
            .ToolBar(toolBar =>
                {
                    toolBar.Create();
                    // toolBar.Save();
                })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style = "height:430px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.PhoneID);
                    model.Field(p => p.PhoneID).Editable(false);
                })
                .PageSize(20)
                .Read(read => read.Action("PhoneList", "Account"))
                                .Create(create => create.Action("AddPhone", "Account"))
                                .Update(update => update.Action("EditPhone", "Account"))
                                .Destroy(destroy => destroy.Action("DeletePhone", "Account"))
            )
            )


        </div>
        <p>
            <button type="button" id="btnSave">Save</button>
            @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
            @Html.ActionLink("Back to List", "Index")
        </p>



        //jquery
        $("#btnSave").on("click", function () {
                sendData();
            });

            function sendData() {

                var grid = $("#PhoneGrid").data("kendoGrid"),
                    parameterMap = grid.dataSource.transport.parameterMap;

                //get the new and the updated records
                var currentData = grid.dataSource.data();
                var updatedRecords = [];
                var newRecords = [];

                for (var i = 0; i < currentData.length; i++) {
                    if (currentData[i].isNew()) {
                        //this record is new
                        newRecords.push(currentData[i].toJSON());
                    } else if (currentData[i].dirty) {
                        updatedRecords.push(currentData[i].toJSON());
                    }
                }

                //this records are deleted
                var deletedRecords = [];
                for (var i = 0; i < grid.dataSource._destroyed.length; i++) {
                    deletedRecords.push(grid.dataSource._destroyed[i].toJSON());
                }

                var serializedData = $("#frmProfile").serializeObject();

                var data = {};
                $.extend(data, parameterMap({ updated: updatedRecords }), parameterMap({ deleted: deletedRecords }), parameterMap({ new: newRecords }));

                var finaldata = {};
                $.extend(finaldata, parameterMap({ phone: data }), parameterMap({ email: data }), parameterMap({ address: data }), parameterMap({ pagedata: serializedData }));
                $.ajax({
                    url: '@Url.Action("UpdateCreateDelete1", "Account")',
                    data: JSON.stringify(finaldata),
                    type: "POST",
                    contentType: 'application/json',
                    dataType: 'json',
                    error: function (e) {
                        alert('error');
                        //Handle the server errors using the approach from the previous example
                    },
                    success: function () {
                        grid.dataSource._destroyed = [];
                        //refresh the grid - optional
                        // grid.dataSource.read();
                    }
                })
            }

            jQuery.fn.serializeObject = function () {
                var arrayData, objectData;
                arrayData = this.serializeArray();
                objectData = {};

                $.each(arrayData, function () {
                    var value;

                    if (this.value != null) {
                        value = this.value;
                    } else {
                        value = '';
                    }

                    if (objectData[this.name] != null) {
                        if (!objectData[this.name].push) {
                            objectData[this.name] = [objectData[this.name]];
                        }

                        objectData[this.name].push(value);
                    } else {
                        objectData[this.name] = value;
                    }
                });

                return objectData;
            };



       //action method
         public ActionResult UpdateCreateDelete1(
                   [Bind(Prefix = "phone.updated")]List<PhoneViewModel> updatedPhone,
                   [Bind(Prefix = "phone.new")]List<PhoneViewModel> newPhone,
                   [Bind(Prefix = "phone.deleted")]List<PhoneViewModel> deletedPhone,

                   [Bind(Prefix = "email")]List<PhoneViewModel> emaillist,
                   [Bind(Prefix = "address")]List<PhoneViewModel> addresslist,

                   [Bind(Prefix = "pagedata")] ProfileViewModel pagedata

                    )
                {
        }