单击搜索按钮后，Kendo Ui Grid 不会重新绑定 [英] Kendo Ui Grid not rebinding after search button click

查看：14
本文介绍了单击搜索按钮后，Kendo Ui Grid 不会重新绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在单击搜索"按钮后，Kendo Ui 网格无法使用新结果重新绑定，我遇到了困难.请告诉我如何实现这一点.谢谢

目前 GetList 将正确返回数据，但 KendoUi 网格不会使用新结果重新绑定.

.cshtml

<div><div class="smallBox"><input type="button" id="btnSearch" style="height:32px; font-size:14px; background-color:#3399FF" class="k-button" title="Search" value="Search"/>

<div><div class="searchOption">@Html.LabelFor(model => model.FamilyName)@Html.EditorFor(model => model.FamilyName)

<div><div class="searchOption">@Html.LabelFor(model => model.GivenName)@Html.EditorFor(model => model.GivenName)

<div><div class="searchOption">@Html.LabelFor(model => model.Priority)@Html.EditorFor(model => model.Priority)

@(Html.Kendo().Grid().Name("结果").HtmlAttributes(new { @Style = "align:center; font-size:10px; width:985px" }).Events(ev => ev.Change("onChange")).Columns(columns =>{column.Bound(p => p.GivenName).Width(90);column.Bound(p => p.FamilyName).Width(90);column.Bound(p => p.Community).Width(130);}).ToolBar(toolbar => toolbar.Save()).Editable(editable => editable.Mode(GridEditMode.InCell)).Sortable().Pageable(paging => paging.输入(假).数字(真).PreviousNext(真).PageSizes(new int[] { 5, 10, 25, 50 }).刷新(假)).Selectable().Scrollable().ColumnMenu(c => c.Columns(false)).DataSource(dataSource => 数据源.Ajax()//用Ajax绑定而不是服务器绑定.PageSize(10).ServerOperation(真).模型(模型=>{模型.Id(p => p.Pid);model.Field(p => p.FamilyName).Editable(false);model.Field(p => p.GivenName).Editable(false);}).Read(read => read.Action("GetData", "Details").Type(HttpVerbs.Get)).Update("编辑", "详细信息")))<script type="text/javascript">$(document).ready(function () {$('#btnConsumerSearch').click(function (e){var community = $("#Community").val();var familyName = $("#FamilyName").val();var givenName = $("#GivenName").val();$.ajax({类型:'POST'，完成:功能(e){$("#Result").data("kendoGrid").dataSource.read();},url: "@(Url.Content("~/Details/GetData/"))",数据: {社区":社区，家庭名称":家庭名称，给定名称":给定名称},成功:函数(){$("#btnSearch").removeAttr('禁用');}});$("#btnSearch").attr('disabled','disabled');});});

控制器:

//以下代码将按预期返回数据新结果，但是剑道网格不会使用以下代码的结果刷新:

public ActionResult GetData([DataSourceRequest] DataSourceRequest 请求，SearchCriteria 模型){数据表结果 = GetList(model);Response.Cache.SetCacheability(HttpCacheability.NoCache);返回 Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);}///<总结>///从客户端表中获取所有可用列表并使用数据表返回///</总结>///<returns></returns>私有数据表 GetList(SearchCriteria 模型，字符串 ReferralListID){使用 (PEntities context = new PEntities()){string ConnectionString = (context.Connection as EntityConnection).StoreConnection.ConnectionString;SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder(ConnectionString);builder.ConnectTimeout = 2500;使用 (SqlConnection con = new SqlConnection(builder.ConnectionString)){使用 (SqlDataAdapter 适配器 = 新 SqlDataAdapter()){使用 (SqlCommand cmd = new SqlCommand("spListResults", con)){cmd.CommandType = CommandType.StoredProcedure;cmd.Parameters.Add("paramCommunity", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.Community) ?(object)model.Community : DBNull.Value;cmd.Parameters.Add("paramGivenName", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.GivenName) ?(object)model.GivenName : DBNull.Value;cmd.Parameters.Add("paramFamilyName", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.FamilyName) ?(object)model.FamilyName : DBNull.Value;cmd.Parameters.Add("paramPriority", SqlDbType.VarChar, 10).Value = !String.IsNullOrEmpty(model.Priority) ?(object)model.Priority : DBNull.Value;适配器.SelectCommand = cmd;cmd.CommandTimeout = 0;数据表 dt = 新数据表();适配器.填充(dt)；返回 dt;}}}}}

解决方案

试试这个，

在你的 grid 读取方法中，像这样

 .Read(read => read.Action("GetData", "Details").Data("GetData"))

你的按钮应该是Submit Type

 <input type="Submit" id="btnSearch" style="height:32px; font-size:14px; background-color:#3399FF" class="k-button" title="搜索" 值="搜索"/>

脚本

 函数 GetData() {返回 {HRN: $('#HRN').val(),家庭名称:$('#FamilyName').val(),GivenName: $('#GivenName').val(),优先级:$('#Priority').val()};}$(document).ready(function () {$("#btnSearch").click(function (e) {$("#Result").data("kendoGrid").dataSource.read();$("#Result").data("kendoGrid").refresh();e.preventDefault();});});

控制器

public ActionResult GetData([DataSourceRequest] DataSourceRequest request, string HRN, string FamilyName, string GivenName, string Priority){数据表结果 = GetList(HRN,FamilyName,GivenName,Priority);Response.Cache.SetCacheability(HttpCacheability.NoCache);返回 Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);}

I having difficulty where the Kendo Ui grid would not rebind with new result after the Search button click.Please let me know how i could achieve this. Thank you

Currently the GetList will return data correctly however the KendoUi grid would not rebind with the new result.

.cshtml

<div id="search">

        <div>
            <div class="searchOption">
                @Html.LabelFor(model => model.HRN)
                @Html.EditorFor(model => model.HRN)
            </div>

        </div>

        <div>

            <div class="smallBox">
                 <input type="button" id="btnSearch" style="height:32px; font-size:14px; background-color:#3399FF" class="k-button" title="Search" value="Search" />

            </div>

        </div>
        <div>
            <div class="searchOption">
                @Html.LabelFor(model => model.FamilyName)
                @Html.EditorFor(model => model.FamilyName)
            </div>

        </div>

        <div>
            <div class="searchOption">
                @Html.LabelFor(model => model.GivenName)
                @Html.EditorFor(model => model.GivenName)

            </div>

        </div>
        <div>
             <div class="searchOption">
                @Html.LabelFor(model => model.Priority)
                @Html.EditorFor(model => model.Priority)
            </div>

        </div>

</div>

@(Html.Kendo().Grid<PWeb_App.ViewModels.ResultModel>()

        .Name("Result")
        .HtmlAttributes(new { @Style = "align:center; font-size:10px; width:985px" })
        .Events(ev => ev.Change("onChange"))
        .Columns(columns =>
        {
            columns.Bound(p => p.GivenName).Width(90);
            columns.Bound(p => p.FamilyName).Width(90);
            columns.Bound(p => p.Community).Width(130);

        })
        .ToolBar(toolbar => toolbar.Save())
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()

        .Pageable(paging => paging
            .Input(false)
            .Numeric(true)

            .PreviousNext(true)
            .PageSizes(new int[] { 5, 10, 25, 50 })
            .Refresh(false)

        )

        .Selectable()
        .Scrollable()
        .ColumnMenu(c => c.Columns(false))
        .DataSource(dataSource => dataSource

            .Ajax()//bind with Ajax instead server bind
            .PageSize(10)
            .ServerOperation(true)
                .Model(model =>
                {
                    model.Id(p => p.Pid);
                    model.Field(p => p.FamilyName).Editable(false);
                    model.Field(p => p.GivenName).Editable(false);



                })


                        .Read(read => read.Action("GetData", "Details").Type(HttpVerbs.Get))
                        .Update("Edit", "Details")

            )

    )


<script type="text/javascript">
$(document).ready(function () {

$('#btnConsumerSearch').click(function (e){

            var community = $("#Community").val();
            var familyName = $("#FamilyName").val();
            var givenName = $("#GivenName").val();


                $.ajax({
                type: 'POST',
                complete: function(e) {
                        $("#Result").data("kendoGrid").dataSource.read(); 
                },

                url: "@(Url.Content("~/Details/GetData/"))",
                data: {

                        "Community":community,
                        "FamilyName":familyName,
                        "GivenName":givenName


                },

                success: function () {
                    $("#btnSearch").removeAttr('disabled');

                }

                });
                $("#btnSearch").attr('disabled','disabled');


      });

});
</script>

controller:

//The following code will return data new result as expected however the kendo grid does not refresh with the result of the following code:

public ActionResult GetData([DataSourceRequest] DataSourceRequest request, SearchCriteria model)
        {
            DataTable result = GetList(model);
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }


        /// <summary>
        /// Get all available List from Client table and return using datatable
        /// </summary>
        /// <returns></returns>
        private DataTable GetList(SearchCriteria model, string ReferralListID)
        {
            using (PEntities context = new PEntities())
            {


                string ConnectionString = (context.Connection as EntityConnection).StoreConnection.ConnectionString;
                SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder(ConnectionString);
                builder.ConnectTimeout = 2500;
                using (SqlConnection con = new SqlConnection(builder.ConnectionString))
                {
                    using (SqlDataAdapter adapter = new SqlDataAdapter())
                    {
                        using (SqlCommand cmd = new SqlCommand("spListResults", con))
                        {

                            cmd.CommandType = CommandType.StoredProcedure;

                            cmd.Parameters.Add("paramCommunity", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.Community) ? (object)model.Community : DBNull.Value;
                            cmd.Parameters.Add("paramGivenName", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.GivenName) ? (object)model.GivenName : DBNull.Value;
                            cmd.Parameters.Add("paramFamilyName", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.FamilyName) ? (object)model.FamilyName : DBNull.Value;
                            cmd.Parameters.Add("paramPriority", SqlDbType.VarChar, 10).Value = !String.IsNullOrEmpty(model.Priority) ? (object)model.Priority : DBNull.Value;

                            adapter.SelectCommand = cmd;
                            cmd.CommandTimeout = 0;
                            DataTable dt = new DataTable();
                            adapter.Fill(dt);
                            return dt;
                        }
                    }
                }




            }

        }

解决方案

Try like this,

In your grid read method in view like this

  .Read(read => read.Action("GetData", "Details").Data("GetData"))

You button should be Submit Type

  <input type="Submit" id="btnSearch" style="height:32px; font-size:14px; background-color:#3399FF" class="k-button" title="Search" value="Search" />

Script

 function GetData() {
    return {
HRN: $('#HRN').val(),
FamilyName: $('#FamilyName').val(),
GivenName: $('#GivenName').val(),
Priority: $('#Priority').val()

    };
}



$(document).ready(function () {
  $("#btnSearch").click(function (e) {
            $("#Result").data("kendoGrid").dataSource.read();
            $("#Result").data("kendoGrid").refresh();
            e.preventDefault();
        });
});

Controller

public ActionResult GetData([DataSourceRequest] DataSourceRequest request,  string HRN, string FamilyName, string GivenName, string Priority)
        {
            DataTable result = GetList(HRN,FamilyName,GivenName,Priority);
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

这篇关于单击搜索按钮后，Kendo Ui Grid 不会重新绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆