Pass values from UI via .read action in grid to controller

3 posts, 0 answers
  1. Larry
    Larry avatar
    27 posts
    Member since:
    Apr 2017

    Posted 27 Apr Link to this post

    See the page screen shot.

    I would like to pass the values in the textbox and two calendar controls to the controller using the .read action in the datasource.

    One way I read about is using hidden HTML which I tried but the grid doesn't like it, at least the way I did it. I tried many ways.

    When I hard code the values in the .read action, it does work and return the correct results. It's now just parameterizing it that is giving the problem.

    @Html.Hidden("txtPartNum", "S2G-120");
    @Html.Hidden("dtDateto", "2015-01-01");
    @Html.Hidden("dtDatefrom", "2015-05-02");

    Please advise the recommended method to retreive the values of the controls and pass to the backend please.

    @(Html.Kendo().Grid<KendoUI.Sasco.Dashboard.Models.PartsHistoryViewModel>()
          .Name("PartsHistory")
          .HtmlAttributes(new { style = "height: 800px; border: 0;" })
          .Columns(columns =>
          {
              //columns.Bound(c => c.Part_Number).HeaderTemplate("<div><label for='PartNum'>Part Number</label> <input type='text' id='PartNum'/></div>");
              columns.Bound(c => c.Month);
              columns.Bound(c => c.SalesVolume).Title("Sales Volume");
              columns.Bound(c => c.SalesAmount).Title("Sales Amount").Format("{0:c0}");
              columns.Bound(c => c.Unit).Hidden();
              columns.Bound(c => c.PPH).Title("Price per 100");
          })
         .ToolBar(toolbar => {
             toolbar.Excel();
             toolbar.Pdf();
         })
          .Selectable()
          .Scrollable()
          .Pageable()
          .Events(e => e
          .DataBound ("onDataBound") //not needed unless something to pop open
         )
          .Navigatable()
          //.Filterable(filterable => filterable.Mode(GridFilterMode.Row))
          .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
                //   .Read(  "PartsHistory", "PartsHistory" )  
                //          .Read(read => read.Action("PartsHistory", "PartsHistory", new { pPartName = "S2G-120", pStartDate = "2015-03-01", pEndDate = "2017-02-01"}))
                .Read(read => read.Action("PartsHistory", "PartsHistory", new { pPartName = txtPartnum.val() , pStartDate = txtDatefrom.val() , pEndDate = txtdateto.val() }))

    Thanks much!
  2. Larry
    Larry avatar
    27 posts
    Member since:
    Apr 2017

    Posted 27 Apr Link to this post

    Can update this in that I've got the basic method

        .Read(read => read.Action("PartsHistory", "PartsHistory").Data("onRead"))
     

       function onRead() {
            return {
                pPartName: $("#txt_partnum").val(),
                pStartDate: $("#dt_fromdate").val(),
                pEndDate: $("#dt_todate").val()
            };

    (in response to a button)

        function onClick() {
            //validate the input elements and check if there are any errors
                var grid = $("#PartsHistory").data("kendoGrid");

                grid.datasource.read();

     

        };

     

    The read method does not exist in the datasource

    When I look at intellisense, nothing is there for read, just onRead and ready.

    Do I need a particular version of kendo.mvc.dll and/or javascript files for this to work? I've had some issues with the license and so far can only use one from 2016.

  3. Larry
    Larry avatar
    27 posts
    Member since:
    Apr 2017

    Posted 27 Apr Link to this post

    Fixed problem.

    Seems that a javascript error interfered with the object model. I don't know for sure but after fixing the javascript errors the method works.

    Also I updated the javascript libraries to 2017. However until fixed the JS error this wasn't enough...

     

     

Back to Top