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

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

2 Answers 441 Views

Grid

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

Larry asked on 27 Apr 2017, 03:52 PM

parthistory1.jpg

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 Answers, 1 is accepted

answered on 27 Apr 2017, 05:12 PM

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.