Question

我是使用Kendo UI的新手。我想要做的是将mvc动作映射到我的网格中的读取动作。我有一个硬编码的下拉列表，我想将选定的索引传递给我的控制器。

在我的网格中，我将读取操作设置为控制器/处理程序..见下面的网格

   @(Html.Kendo()
          .Grid(Model.ControlResults)
          .Name("ControlResultGrid")
          .Columns(columns =>
          {
              columns.Bound(p => p.PeCode).Title("PE").Width(100);
              columns.Bound(p => p.AppropName).Title("Approp").Width(100);
              columns.Bound(p => p.LimitCode).Title("Limit").Width(100);
              columns.Bound(p => p.FundingTypeAbbrev).Title("FundType").Width(100);
              columns.Bound(p => p.AccountDetailType).Title("AccType").Width(100);
              columns.Bound(p => p.Category).Title("Category").Width(100);
              columns.Bound(p => p.SubCategory).Title("Sub Category").Width(100);
              columns.Bound(p => p.SetAside).Title("Set Aside").Width(100);
              columns.Bound(p => p.ProjectNumber).Title("Task").Width(100);
              columns.Bound(p => p.EEIC).Title("EEIC").Width(100);
              columns.Bound(p => p.ReimbOrg).Title("Reimb Org").Width(100);
              columns.Bound(p => p.FY1Result).Title("2013 Results").Width(100);
              columns.Bound(p => p.FY2Result).Title("2014 Results").Width(100);
              columns.Bound(p => p.FY3Result)
                     .Title("2015 Results")
                     .Width(100)
                     .ClientFooterTemplate("Sum: #=sum#");
              columns.Bound(p => p.FY4Result).Title("2016 Results").Width(100);
              columns.Bound(p => p.FY5Result).Title("2017 Results").Width(100);
              columns.Bound(p => p.FY6Result).Title("2018 Results").Width(100);
              columns.Bound(p => p.FY7Result).Title("2019 Results").Width(100);
              columns.Bound(p => p.FY8Result).Title("2020 Results").Width(100);
              columns.Bound(p => p.FY9Result).Title("2021 Results").Width(100);
          })
          .ToolBar(toolbar =>
          {
              toolbar.Template(@<text>
                  <ul class="navbar-nav nav ">

                  <li> 

                  @(Html.Kendo()
                        .DropDownList()
                        .Name("ddlTransControlResults")
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .SelectedIndex(0)
                        .OptionLabel("Choose View")
                        .BindTo(new List<SelectListItem>()
                               {
                                   new SelectListItem()
                                   {
                                       Text = "Control Results",
                                       Value = "0"
                                   },
                                   new SelectListItem()
                                   {
                                       Text = "Program Results",
                                       Value = "1"
                                   },
                                   new SelectListItem()
                                   {
                                       Text = "Authorization Results",
                                       Value = "1"
                                   }
                               })
                        **.Events(e => e.Select("grd_toolbar_OnSelect_ViewDD"))**         
                  )
                  </li>                 
                  <li>
                  @(Html.Kendo()
                        .Button()
                        .Name("RefreshButton")
                        .Tag("a")
                        .HtmlAttributes(new { title = "Refresh" })
                        .Content("<i class='fa fa-refresh'></i>&nbsp;&nbsp;Refresh")
                        .Events(events => events.Click("onRefreshClick"))

                  )
                  </li>
                  <li>
                  @(Html.Kendo()
                        .Button()
                        .Name("CloseButton")
                        .Tag("a")
                        .HtmlAttributes(new { title = "Close" })
                        .Content("<i class='fa fa-times'></i>&nbsp;&nbsp;Close")
                        .Events(events => events.Click("onCloseClick"))
                  )
                  </li>
                  <li class="navBarExpandButton">

                  <label class="category-label k-button" for="ExpandAll">
                  <i class="fa fa-plus"></i>&nbsp;&nbsp;Expand All Rows
                  </label>
                  </li>
                  </ul>
                  </text>);
          })
          .DataSource(datasource => datasource
                                              .Ajax()
                                              **.Read(read => read.Action("PartialView", "GetAll"))**
                                              .Aggregates(aggregates => { aggregates.Add(p => p.FY3Result).Sum(); })
                                              .Model(model =>
                                              {
                                                  model.Id(p => p.MgmtControlId);
                                              }))
          .Pageable()
          .Scrollable()
          .BindTo(Model.ControlResults)
    )

**I then wire up the event in javascript...see javascript below**
function grd_toolbar_OnSelect_ViewDD(e) {
            ////////update main grid datasource        
            $("#ControlResultGrid")
                .data("kendoGrid")
                .dataSource
                .read({
                          "ddlIndex": this.dataItem(e.item.index()).Value
                      });

      ;
        }
***Here is my controller signature....***
public ActionResult GetAll([DataSourceRequest] DataSourceRequest request, int ddlIndex)
        {

Answer 1

最简单的方法是更改网格数据源读取的签名。

如果您改为：

.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("PartialView", "GetAll"))

到

.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("PartialView", "GetAll").Data("selectedDropDrown"))

然后创建适当的javascript函数

    function selectedDropDown()
    {
       var selectedValue = $('#dropdownlist').data('kendoDropDownList').select();
       if (selectedValue == 'undefined' || selectedValue == null) 
       {
          selectedValue = -1;
        }

     return { ddlIndex : selectedValue}
    }

然后，如果您可以从下拉列表更改中调用读取操作来使用更改事件，然后只需调用以下内容：

function dropDownChange()
{
 $("#ControlResultGrid").data("kendoGrid").dataSource.read(); 
}

这将触发读取事件并为您更新网格。

希望这就是你所追求的。

Kendo UI读取动作和MVC控制器

1 个答案: