Question

我使用kendo ui下拉列表过滤我的kendo网格

$(function () {
    var grid = $("#balanceGrid")
            .kendoGrid({
                dataSource: {
                    type: "aspnetmvc-ajax",
                    transport: {
                        read: {
                             url: "@Url.Action(MVC.Home.GetBalance())",
                            data: additionalParams
                        }
                    },
                    schema: {
                        "data": "Data",
                        "total": "Total"
                    },
                    pageSize: 20,
                    serverPaging: true
                },
                height: 700,
                pageable: true,
                resizable: true,
                dataBound: function(e) {
                },
                columns: [
                    { title: "Period", type: "text", field: "Period" },
                    { title: "Payment sum", type: "text", field: "PaymentSum" },

                ]
            }).getKendoGrid();

    var balanceFilterType = @Html.Raw(new JavaScriptSerializer().Serialize(EnumExtensions.GetEnumDropdownCollection<EBalanceSortType>()));

    $("#dlPeriodValue").kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "Id",
        placeholder: "Period",

        dataSource: balanceFilterType,
        dataBound: function () {
            this.select(0);
            console.log(this.value());
        }
    });



function additionalParams() {
            return {
                PeriodTypes: $("#dlPeriodValue").val(),

            }
        }

我的控制器将模型作为参数。模型具有字段

public int PeriodTypes { get; set; }

所以控制器是下一个：

 public virtual JsonResult GetBalance(GetPaymentBalanceFilterModel model)
        {
            GridModel<GetPaymentBalanceModel> getCustomersResponse = _paymentService.GetBalancePayment(model);

            var response = new
            {
                Data = getCustomersResponse.Data,
                Total = getCustomersResponse.Count
            };
            return Json(response, JsonRequestBehavior.AllowGet);
        }

我将默认值设置为1，但是第一次加载页面时，它将值“ 0”（这是不正确的默认值）传递给我的控制器。仅当我单击“过滤器”按钮时，下拉菜单中的值才是正确的通过。页面首次加载时，如何将选择的正确下拉值传递给我的contoller？谢谢

Answer 1

如果默认值始终为'1'，则不要这样做：

dataBound: function () {
        this.select(0);
        console.log(this.value());
    }

相反，在构造函数中显式设置值：

<body>
  <select id="dlPeriodValue"/>
  <script>
    $(document).ready(function(){ 

      var balanceFilterType = [{"Id":1,"Name":"Month"},{"Id":2,"Name":"Quarter"},{"Id":3,"Name":"Year"}];

            $("#dlPeriodValue").kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "Id",
            placeholder: "Period",
                    dataSource: balanceFilterType,
                    value: "2"
            });
    alert('after page load: ' + $("#dlPeriodValue").val());
  })

  alert('before page load: ' + $("#dlPeriodValue").val());
  </script>
</body>

页面加载之前为null，页面加载之后为“ 2”。请注意，值是字符串，因此必须用引号引起来。

这里是Telerik dojo：

https://dojo.telerik.com/AzateXIP

请参阅：

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/value

加载页面时将正确的kendo ui下拉默认值传递给contoller

1 个答案: