Kendo MVC grid – how to send an ajax post from javascript (or jquery) along with currently selected row of data from grid

4 posts, 0 answers
  1. Arul
    Arul avatar
    11 posts
    Member since:
    Oct 2014

    Posted 09 Nov 2014 Link to this post

    Title:
    Kendo MVC grid – how to send an ajax post from javascript (or jquery) along with currently selected row of
    data from grid (without using the "update" built in button of the grid)

    I tried to create hidden variables for the model that the grid is using so that
    the controller can grab it, when we do an ajax post. The following code doesn’t
    seem to wrok.

    What am I missing?

    Steps I did in my code and the questions:

    -    Created submit button; when the button is clicked, it
    should grab the currently selected row of data from grid and pass it to the
    controller.

    -    Getting the current row seems to work in the javascript I wrote below ($("#btnSearch").click)
    and the ajax post goes to the conttoller. But then the model data does NOT have DisposalContainer filled in. Am I
    making a mistake in ClientTemplate of mvc grid (when i am trying to make some hidden variables for the model) or am I NOT passing the DisposalContainer (or any model data would do fine) correctly?

     My model that is bound to the grid is:
        [Serializable]
        public class PackUnitModelView
        {
            public string Item;
            public int ShippedQty;
            public int ReturnedQty;
            public string ItemDescription;
            public string DisposalContainer;        // Non-Harzardous, Flammable-INC15-E2, Reactive-BPO, Flammable-AF07
        }

    ===================================================================================

    Code in the controller:

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult PackUnits_Update(PackUnitModelView packUnit, string packageID)

    {

      // will do some db persistent stuff.

      Return View();

    }

    Code in the view (*.cshtml):

    ==================================================================================

        <input type="Submit" id="btnSearch" style="height:32px; font-size:14px; background-color:#3399FF" class="k-button" title="Search" value="Search" />

     

    ==================================================================================

        @(Html.Kendo().Grid<PackUnitModelView>()

            .Name("gridPackUnits")

            .Columns(columns =>

            {

                // do
    this in case if I need to pass pacakage unique id along with each
    PackUnitModel.

                //
    columns.Bound(c => c.Id).Visible(false);

                columns.Bound(c =>
    c.Item).Title("Item").Width(50)

                        .ClientTemplate("#= Item #" +

                                "<input type='hidden' name='PackUnitModelView[#=
    index(data)#].Item' value='#= Item #' />");

     

                columns.Bound(c =>
    c.ShippedQty).Title("Shipped").Width(60).HtmlAttributes(new { style = "text-align:center" })  // For text alignment on the column use the HtmlAtributes
    like it is done here.

                        .ClientTemplate("#= ShippedQty #" +

                                "<input type='hidden' name='PackUnitModelView[#=
    index(data)#].ShippedQty' value='#= ShippedQty#' />");

               

                columns.Bound(c =>
    c.ReturnedQty).Title("Returned").Width(60).HtmlAttributes(new { style = "text-align:center" });

                        //columns.Bound(e =>
    e.Industry).ClientTemplate("#= Industry #" +

                        //"<input type='hidden' name='Occupation[#=
    index(data)#].Industry' value='#= Industry#' />");

               

                columns.Bound(c =>
    c.ItemDescription).Title("Item
    Description").Width(250);

                columns.Bound(c =>
    c.DisposalContainer).Title("Disposal
    Container").Width(150);

            })

           

            .HtmlAttributes(new { style = "height: 290px;"
    })       //
    grid height

            .Scrollable()

            .Selectable()

            //.Groupable()          // This will show the title for the
    grid and the title text can be set via jscript code
    "kendo.ui.Groupable.prototype.options.messages =.." below

            .Sortable()

            .RowAction(row =>

                            {

                                //if (condition) // would be check the container hazardous
    stata - then color as red

                                {

                                   
    row.HtmlAttributes["class"] = "k-state-selected";

                                }

                            })

            .Reorderable(reorder =>
    reorder.Columns(false))

            .Resizable(r => r.Columns(true))

            .Events(e => e.DataBound("DataBoundGrid"))

            .DataSource(dataSource => dataSource

                .Ajax()

                .Read(read => read.Action("PackUnits_Read", "Main"))

                .Update(update => update.Action("PackUnits_Update", "Main", new { packageID = "111-11-1111" }))

            )

        )

       ===============================================================================

    Javascript functions:        

    // Index function to get the dynamic value of columns and put in the hidden variable of
    //html page - so that model can be bound to controller function when we do HttpPos (via ajax typically).

    function index(dataItem) {

            var data = $("#gridPackUnits").data("kendoGrid").dataSource.data();

            return data.indexOf(dataItem);

        }

    ============================================================================
    $("#btnSearch").click(function (e) {
                var grid = $("#gridPackUnits").data("kendoGrid");
                var selectedBackup = grid.dataItem(grid.select());

                if (selectedBackup == null)
                    return;
                selectedBackup.dirty = true;

                $.ajax({
                    type: "POST",
                    url: "Main/PackUnits_Update",   // post to your controller action that does what you want
    to do with the model
                    dataType: "json",
                    data: { DisposalContainer: 'cont', PackageID: 1234}
                });

               e.preventDefault();

            });

        });

    =======================================================================

     
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 12 Nov 2014 Link to this post

    Hello Arul,

    Try to change the signature of your action method so it has a string parameter named the same way :

    e.g.

    public ActionResult PackUnits_Update(PackUnitModelView packUnit, string packageID, string disposalContainer)


    Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Arul
    Arul avatar
    11 posts
    Member since:
    Oct 2014

    Posted 12 Nov 2014 in reply to Petur Subev Link to this post

    Hi Petur:
    Thank you for replying. Sorry i made a mistake in the question. What i want to do is send the "packUnit" (which has fields that are in PackUnitModelView model) from ajax post in my sample above from the view to the controller. How do i do that? The data that goes into packUnit should be from the currently selected row of the grid.

    Please note that i am trying to create "hidden fields" to hold these members of this model using "ClientTemplate" of each column so that the data can be retained from view to the controller.

    Thank you for your time.
    -Arul.
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 14 Nov 2014 Link to this post

    Hello Arul,

    How to send a model as JSON from jQuery request to an MVC controller is a question not really related to KendoUI but to general MVC development.

    I assume the missing part is to stringify and set contentType the data:

    http://stackoverflow.com/questions/4120212/mvc-ajax-json-post-to-controller-action-method

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top