Passing additional values along with Grid, Create or Update action

2 posts, 0 answers
  1. Jagbir
    Jagbir avatar
    2 posts
    Member since:
    Mar 2020

    Posted 03 Mar 2020 Link to this post

    Hi,

    I have two controls(datepicker and dropdown) outside of the Kendo Grid, I want to send the selected values of those two controls to the controller along with the Grid values on click of save changes of the Kendo Grid.

    Could you please help me how to pass those values along with Create or Update Action of Kendo Grid, or If I can bind those values creating hidden columns in the grid, as these values would be required in all the rows while updating.

    Below is my view : 

    @{
        ViewBag.Title = Project.Web_v5.Framework.PageTitleHelper.GetPageTitle("PigPriceEdit", Request.Url.AbsolutePath);
        Layout = "~/Views/Shared/_Layout_v2.cshtml";
        var sess = new aplCustomerPortal.SessionManagement();
    }
    <style>

        #grid .k-grid-header, .k-grid-header .k-header {
            color: palevioletred;
            font-size: large;
        }

        #inputvaluesbox {
            height: 25px;
            width:70%;
            margin:0;
        }
        .k-edit-cell input {
            width: 100%;
        }
    </style>
    @section Scripts
    {
        <script type="text/javascript">
            function error_handler(e) {
                if (e.errors) {
                    var message = "Errors:\n";
                    $.each(e.errors, function (key, value) {
                        if ('errors' in value) {
                            $.each(value.errors, function () {
                                message += this + "\n";
                            });
                        }
                    });
                    alert(message);
                }
            }

            function showEdit(e) {
                e.preventDefault();
                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                window.location.href = '@Url.Action("PigPriceEdit", "MarketingPigPrice")' + '?pModelId=' + dataItem.id + '&pContactId=@ViewBag.ContactId';
            }

            $(function () {
                kendo.culture("en-AU");
            });

              $("#bEdit").click(function () {
                    window.location.href = '@Url.Action("PigPriceEdit", "MarketingPigPrice")'  + '&pContactId=@ViewBag.ContactId';
                });

           
        </script>
    }

    <div class="col-md-12">
        <form>

            <div class="form-group col-md-12">
                <br />
                <h3 class="panel-title">
                    Form Type : Buyer
                </h3>
            </div>
            <div class="col-md-12">
                <div>
                    <table>
                        <tr>
                            <td>
                                <h3>
                                    Week End Date&nbsp;
                                    @(Html.Kendo().DatePicker().Name("datepicker").Format("dd/MM/yyyy").DisableDates(DayOfWeek.Sunday, DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Saturday).HtmlAttributes(new { required = "required", validationmessage = "Week End is required", style = "width:100%;", placeholder = "dd/MM/yyyy" })
                                    <br />
                                </h3>
                            </td>
                            <td>
                                &nbsp;&nbsp;&nbsp;
                            </td>
                            <td>
                                <h3>
                                    State
                                    @Html.DropDownList("StateList", new SelectList(ViewBag.PigStateList, "Value", "Key"), "-- Select One --", new { @class = "form-control", required = "required", validationmessage = "State is required", placeholder = "State", tabindex = "3", @id = "state", style = "width:250%; height:35px;" })
                                </h3>
                                <p>


                                </p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="text-right btn-toolbar">
                <button id="bLoadPrevious" class="btn btn-sm btn-default" type="button">Fill Last Week’s Figures</button>&nbsp; &nbsp;
                <button id="bClearData" class="btn btn-sm btn-default" type="button">Clear Data</button>&nbsp; &nbsp;
            </div>
            <br />
            <br />
            <div class="form-group col-md-12">
                <div style="width:100%;overflow:auto;">
                    @(Html.Kendo().Grid<Project.Core.EF.weekly_pigprice_data>
        ()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.pig_type).Title("Pig Type");
            columns.Bound(p => p.pig_weight).Title("Pig Weight").Width(140);
            columns.Bound(p => p.price_type).Title("Price Type").Width(140);
            columns.Bound(p => p.price).Title("Price(cent/kg)").Width(50);
            columns.Bound(p => p.number_traded).Title("Numbers").Width(50);

        })
        .ToolBar(toolbar =>
        {
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .HtmlAttributes(new { style = "height:1250px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .Group(g => g.Add(p => p.pig_type))
        .PageSize(50)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.id);
            model.Field(p => p.id).Editable(false);
            model.Field(p => p.week_end_date);
            model.Field(p => p.state);
            model.Field(p => p.pig_type).Editable(false);
            model.Field(p => p.pig_weight).Editable(false);
            model.Field(p => p.price_type).Editable(false);
            model.Field(p => p.price);
            model.Field(p => p.number_traded);

        })
        .Events(events => events.Error("error_handler"))
        .Create("Editing_Create", "MarketingPigPrice", new { id = ViewBag.ContactId })
        .Read(read => read.Action("PigPriceEdit_Read", "MarketingPigPrice", new { id = ViewBag.ContactId }))
        .Update("Editing_Update", "MarketingPigPrice")
        .Destroy("Editing_Destroy", "MarketingPigPrice")
        )
        )
        <br />
    </div>
                <br />
            </div>

        </form>
    </div>

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2500 posts

    Posted 05 Mar 2020 Link to this post

    Hi Jagbir,

     

    In order to send additional values to the Create or Update Grid actions it is recommended to specify a Data option for the respective action. Then a JavaScript function can be executed and will return the relevant information that will be passed to the Controller. The article below describes the approach. The example shows the Read action, however, the same approach is applicable for Create and Update.

    https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/faq#how-can-i-send-values-to-my-action-method-when-binding-the-grid

     

     

    Regards,
    Viktor Tachev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top