This is a migrated thread and some comments may be shown as answers.

How to set controller parameters for kendo grid in jquery?

2 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt Miller
Top achievements
Rank 1
Matt Miller asked on 24 Oct 2013, 11:46 AM
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.
 

2 Answers, 1 is accepted

Sort by
0
Accepted
Ignacio
Top achievements
Rank 1
answered on 24 Oct 2013, 07:41 PM
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.
0
Matt Miller
Top achievements
Rank 1
answered on 24 Oct 2013, 09:08 PM
Thanks! Worked perfectly!
Tags
Grid
Asked by
Matt Miller
Top achievements
Rank 1
Answers by
Ignacio
Top achievements
Rank 1
Matt Miller
Top achievements
Rank 1
Share this question
or