How to set controller parameters for kendo grid in jquery?

[Matt Miller]

Here is my situation: 

I have a kendo dropdown list box and a numeric text box in a view. When the user clicks a button, i want to display a kendo grid in a popup window. 
All i need to do is figure out how to pass the values from the dropdown and textbox to my mvc controller.

Here is the definition of the dropdown and text box:

@Html.Kendo().DropDownListFor(x => x.TrainList).BindTo(Model.TrainList).HtmlAttributes(new { style = "width:150px" }).DataTextField("CNX_AUT").DataValueField("Id").Name("trainList").Value("Id").Text("CNX_AUT")

@Html.Kendo().NumericTextBoxFor(x => x.BeltScaleWeight).Name("beltScaleWeight").HtmlAttributes(new { style = "width:150px" })

Here is the button definition that will display the pop up window: 

<button class="k-button" id="applyToCars" style="width:150px" >Apply To Cars</button>

Here is the definition for my grid inside the pop up window's div:

<div id="GridWindow">
      <br/>
      <br/>
       @(Html.Kendo().Grid<CNX.Domain.Entities.EDIRailcar>()
          .Name("RailCarGrid")
          .Columns(columns =>
            {
                columns.Bound(o => o.Id).Visible(false);
                columns.Bound(o => o.EDI_417_TRAIN_GUID).Visible(false);
                columns.Bound(o => o.EQUIPMENT_INITIAL);
                columns.Bound(o => o.EQUIPMENT_NUMBER);
                columns.Bound(o => o.WEIGHT);
                columns.Bound(o => o.TARE_WEIGHT);
                columns.Bound(o => o.AS_RECEIVED_WEIGHT);
                columns.Bound(o => o.Pile);
                columns.Bound(o => o.Class);
                columns.Bound(o => o.STATUS);
            })
            .DataSource(dataSource => dataSource.Ajax()
                                                .PageSize(10)
                                                .Read(read => read.Action("ApplyWeights", "MenuWeight")
                                                .Type(HttpVerbs.Post))
                                                .Model(model => model.Id(o => o.Id)))
            .Pageable()
            .Sortable()
            .Filterable()

        )
    </div>

Here is the javascript/jquery from my view : 

<script type="text/javascript">

    $(document).ready(function () {
       var win = $("#GridWindow").kendoWindow({
            actions: ["Maximize", "Minimize", "Close"],
            draggable: true,
            height: "500px",
            width: "500px",
            modal: true,
            resizable: true,
            visible: false,
            position: { top: 100, left: 100 }
        }).data("kendoWindow");
    });

    $("#applyToCars").click(function () {
        var selectedTrain = $("#trainList").data("kendoDropDownList");
        var weightValue = $("#beltScaleWeight").data("kendoNumericTextBox");
        var win = $("#GridWindow").data("kendoWindow");
        var grid = $("#RailCarGrid").data("kendoGrid");
       /*How do i pass the values they selected to the controller? */
        grid.dataSource.fetch();
        win.title('Railcar weights for ' + selectedTrain.text()  );
        win.center();
        win.open();
    });


</script>

Kinda under the gun on this one as far as time is concerned. Any help would be most appreciated.
 

[Ignacio]

A good way to achieve this is by defining a javascript function to execute before making the request. Using the Data(string jsFunctionName) method on your CrudOperationBuilder (docs)

Something like

.Read(read => read.Action("ApplyWeights", "MenuWeight").Type(HttpVerbs.Post).Data("myFunction"))

And then define a js function that returns an object with data to send to the server.

function myFunction(options) {
    var dataFromCombobox = "foo"; //get with jQuery
    var dataFromInput = "bar"; //get with jQuery

    return {
        prop1: dataFromComboBox,
        prop2: dataFromInput;

    }
}

Hope this helps.

[Matt Miller]

Thanks! Worked perfectly!