How to set controller parameters for kendo grid in jquery?

3 posts, 1 answers
  1. Matt Miller
    Matt Miller avatar
    23 posts
    Member since:
    Jan 2012

    Posted 24 Oct 2013 Link to this post

    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. Answer
    nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 24 Oct 2013 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Matt Miller
    Matt Miller avatar
    23 posts
    Member since:
    Jan 2012

    Posted 24 Oct 2013 Link to this post

    Thanks! Worked perfectly!
Back to Top