Question

我想创建搜索功能，所以我创建了一个文本框

<div class="search float-right">
    <input type="text" class="k-textbox" id="GridSearch" />
</div>

我认为将textbox的值与grid的数据源绑定，但问题是如何做到这一点？
这是我的代码

Contorller：

public ActionResult ReadWaybillData([DataSourceRequest] DataSourceRequest request, String id)
    {
        var waybill = db.WayBills.Where(x => x.Status == 1);
        var result = waybill.ToDataSourceResult(request, o => new
        {
            WaybillNumber = o.WaybillNumber,
            ETD = o.ETD,
            ETA = o.ETA,
            PIB_Date = o.PIB_Date,
            Description = o.Description,
            CurrencyID = o.CurrencyID,
            PIB_PaymentDate = o.PIB_PaymentDate,
            ShipmentID = o.ShipmentID,
            Status = o.Status
        });

        return Json(result, JsonRequestBehavior.AllowGet);
    }

查看

<div class="table">
    @(Html.Kendo().Grid<COGS.Models.WayBill>()
    .Name("grid")
    .DataSource(DataSource => DataSource
        .Ajax()
        .PageSize(100)
        .Model(model => model.Id(data => data.WaybillNumber))
        .Read(read => read.Action("ReadWaybillData", "Home"))
        .Sort(sort => sort.Add(product => product.ETA).Descending())
    )
    .Columns(columns =>
            {
                columns.Template(
                    @<text>
                        @Html.ActionLink(@item.WaybillNumber, "home", "details", new { id = @item.WaybillNumber })
                    </text>
                ).ClientTemplate("<a href='home/details/#=WaybillNumber#'>#=WaybillNumber#</a>").Title("Waybill");
                columns.ForeignKey(data => data.ShipmentID, (System.Collections.IEnumerable)ViewData["shipment"], "ShipmentID", "Content").Title("Shipmnet Type");
                columns.ForeignKey(data => data.CurrencyID, (System.Collections.IEnumerable)ViewData["currency"], "CurrencyID", "Content").Title("Currency");
                columns.Bound(data => data.Description);
                columns.Bound(data => data.ETD).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}");
                columns.Bound(data => data.ETA).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}");
                columns.Bound(data => data.PIB_Date).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Title("PIB Date");
                columns.Bound(data => data.PIB_PaymentDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Title("PIB Payment Date");
            }
    )
    .Pageable()
    .Sortable()
    )
</div>

的Javascript

<script>
    $(document).ready(function () {

        var grid = $("#grid").data("kendoGrid");

        $("#GridSearch").keyup(function (event) {
            if (event.keyCode == 13) {
                alert("search function");
                //binding function
            }
        });
    });
</script>

Answer 1

我找到了答案，

我已将控制器更改为

public ActionResult Read([DataSourceRequest] DataSourceRequest request, string searchbox)
    {
        var waybill = db.WayBills.Where(x => x.Status == 1 && x.WaybillNumber.Contains(searchbox));
        var result = waybill.ToDataSourceResult(request, o => new
        {
            WaybillNumber = o.WaybillNumber,
            ETD = o.ETD,
            ETA = o.ETA,
            PIB_Date = o.PIB_Date,
            Description = o.Description,
            CurrencyID = o.CurrencyID,
            PIB_PaymentDate = o.PIB_PaymentDate,
            ShipmentID = o.ShipmentID,
            Status = o.Status
        });

        return Json(result, JsonRequestBehavior.AllowGet);
    }

和我的观点

<div class="table">
    @(Html.Kendo().Grid<COGS.Models.WayBill>()
    .Name("grid")
    .DataSource(DataSource => DataSource
        .Ajax()
        .PageSize(100)
        .Model(model => model.Id(data => data.WaybillNumber))
        .Read(read => read.Action("Read", "Home").Data("addSearch"))
        .Sort(sort => sort.Add(product => product.ETA).Descending())
    )
    .Columns(columns =>
            {
                columns.Template(
                    @<text>
                        @Html.ActionLink(@item.WaybillNumber, "home", "details", new { id = @item.WaybillNumber })
                    </text>
                ).ClientTemplate("<a href='home/details/#=WaybillNumber#'>#=WaybillNumber#</a>").Title("Waybill");
                columns.ForeignKey(data => data.ShipmentID, (System.Collections.IEnumerable)ViewData["shipment"], "ShipmentID", "Content").Title("Shipmnet Type");
                columns.ForeignKey(data => data.CurrencyID, (System.Collections.IEnumerable)ViewData["currency"], "CurrencyID", "Content").Title("Currency");
                columns.Bound(data => data.Description);
                columns.Bound(data => data.ETD).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}");
                columns.Bound(data => data.ETA).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}");
                columns.Bound(data => data.PIB_Date).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Title("PIB Date");
                columns.Bound(data => data.PIB_PaymentDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}").Title("PIB Payment Date");
            }
    )
    .Pageable()
    .Sortable()
    )
</div>

并持续我的javascript

    <script>
    $(document).ready(function () {

        var grid = $("#grid").data("kendoGrid");

        $("#GridSearch").keyup(function (event) {
            if (event.keyCode == 13) {
                grid.dataSource.read();
            }
        });
    });

    function addSearch() {
        return { searchbox: $('#GridSearch').val() };
    }
</script>

如何使用Telerik将网格数据源与文本框绑定

1 个答案: