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

[Arul]

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();

        });

    });

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

 

[Petur Subev]

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

 

 

[Arul]

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.

[Petur Subev]

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