剑道网格下拉问题

时间:2015-07-24 07:26:32

标签: kendo-ui kendo-grid

我有一个带标签的视图,每个标签都有一个带内联编辑的剑道网格,并在网格内有下拉列表。我面临的问题是,当我更新下拉列表的值没有显示更新的值时,但是当我刷新页面时,显示更新的值。但是,如果我刷新这里的问题是如果我更新值是sceond选项卡它我刷新它将转到第二个选项卡。有没有什么方法可以在没有refesh的情况下实现这一点。

    @model BHI.TESQ.Entities.Interfaces.Models.ILocationAdminModel
@if (TempData["Result"] == "Data Saved Successfully")
{
    <script>
        alert('Location Data Saved Successfully');
    </script>
}
@using (Html.BeginForm("SaveLocationAdmin", "Administration", FormMethod.Post))
{
    <div style="margin-top: 45px;height:400px">
        <h5 class="page-header k-block k-primary" style="overflow: hidden; margin-left: 5px; max-width: 1133px;">@ViewBag.Title</h5>

        <table style="width: 100%; margin-top: 0px">

            <tr style="margin-top: 0px;">
                <td>
                    @*<table style="width: 100%">
                        <tr>
                            <td>*@
                    @(Html.Kendo().Splitter()
                    .Name("vertical")
         .HtmlAttributes(new { style = "min-height:400px" })
                    .Orientation(SplitterOrientation.Horizontal)
                    .Panes(verticalPanes =>
                     {
                         verticalPanes.Add()
                             .Size("150px")
                              .HtmlAttributes(new { style = "min-height:400px" })
                             .Scrollable(false)
                             .Resizable(false)
                             .Content(Html.Action("AdminLinks").ToString());

                         verticalPanes.Add()
                         .HtmlAttributes(new { id = "top-pane" })
                         .Scrollable(false)
                         .Collapsible(false)
                         .Content(

                           Html.Kendo().Splitter()
                               .Name("horizontal")
                               .HtmlAttributes(new { style = "min-height:400px" })
                               .Panes(horizontalPanes =>
                               {

                                   horizontalPanes.Add()
                                       .HtmlAttributes(new { id = "left-pane" })
                                       .Size("300px")
                                       .Collapsible(true)

                                       .Resizable(false)
                                       .Content(@<div class="pane-content">
                                        <h6 class="header k-block">Create New Location</h6>
                                        <table>
                                            <tr>
                                                <td class="td-style">Location Name<span class="asterisk_input"></span></td>
                                                <td>
                                                    <input id="txtLocName" name="txtLocName" type="text" class="textbox" required />
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="td-style">Country<span class="asterisk_input"></span></td>
                                                <td>
                                                    @(Html.Kendo().DropDownList()
                                                .Name("ddCountry")
                                                        .HtmlAttributes(new { required = "required" })
                                                            //.BindTo(new List<string>() {
                                                            //      "United States",
                                                            //      "United Kingdom (UK)",
                                                            //                })
                                                .BindTo(@Model.Country)
                                                .OptionLabel("--Select Country--")
                                                .DataTextField("CountryName")
                                                .DataValueField("CountryId")
                                                .Events(e => e.Change("OnCountryChange"))
                                                    )
                                                    <input type="hidden" id="hddCountry" name="hddCountry" value="" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-style">State</td>
                                                <td>
                                                    @(Html.Kendo().DropDownList()
                                                .Name("ddState")
                                                .OptionLabel("--Select State--")
                                                .DataTextField("StateName")
                                                .DataValueField("StateId")
                                                .Events(e => e.Change("OnStateChange"))
                                                            //.BindTo(new List<string>() {
                                                            //      "Texas",
                                                            //    })
                                                .DataSource(source =>
                                                    {
                                                        source.Read(read => { read.Action("GetStateList", "Administration").Data("filterState"); }).ServerFiltering(true);
                                                    })
                                                .Enable(false)
                                                .AutoBind(false)
                                                .CascadeFrom("ddCountry")
                                                    )
                                                    <script>
                                                        function filterState() {
                                                            return {
                                                                countryId: $("#ddCountry").val()
                                                            };
                                                        }
                                                    </script>
                                                    <input type="hidden" id="hddState" name="hddState" value="" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-style">Location Status<span class="asterisk_input"></span></td>
                                                <td>
                                                    @*@(Html.Kendo().DropDownList()
                                                        .Name("ddLocStatus")
                                                        .BindTo(new List<string>() {
                                                              "Active",
                                                              "In-Active",
                                                                        })
                                                            )*@
                                                    <input id="chkBoxStatus" type="checkbox" name="chkBoxStatus" value="true" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right">
                                                    @(Html.Kendo().Button()
            .Name("btnInsert")
            .Events(ev => ev.Click("onClick"))
                    .HtmlAttributes(new { type = "submit", @class = "btn btn-primary button" })
            .Content("Save"))

                                                </td>
                                                <td>
                                                    @(Html.Kendo().Button()
            .Name("btnCancel")
            .HtmlAttributes(new { type = "button", @class = "btn btn-primary button" })
            .Content("Cancel"))
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                            );

                                   horizontalPanes.Add()
                                       .HtmlAttributes(new { id = "center-pane" })
                                       .Scrollable(false)
                                       .Content(@<div>
                                        @(Html.Kendo().Grid(Model.Locations)
                                            .Name("Grid")
                                                    .HtmlAttributes(new { style = "min-height:400px" })
                                            .Columns(columns =>
                                            {
                                                columns.Command(command => { command.Edit().HtmlAttributes(new { type = "button", @class = "btn btn-primary button" }); }).Width(100);
                                                columns.Bound(p => p.LocationId).Width(140).Hidden(true);
                                                columns.Bound(p => p.LocationName).Width(140);
                                                columns.Bound(p => p.CountryId).EditorTemplateName("CountryNames").Title("CountryName").ClientTemplate("#:CountryName#").Width(150);
                                                columns.Bound(p => p.StateId).EditorTemplateName("StateNames").Title("StateName").ClientTemplate("#:StateName#").Width(150);
                                                columns.Bound(p => p.IsActive).Width(100);
                                            })

                                            .Editable(editable => editable.Mode(GridEditMode.InLine))
                                            .Pageable()
                                            .Navigatable()
                                            .Sortable()
                                            .Scrollable()
                                            .Groupable()
                                            .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .PageSize(20)
                                            .ServerOperation(false)
                                            .Events(events => { events.Error("error_handler"); events.RequestEnd("onRequestEnd"); })
                                            .Model(model => { model.Id(p => p.LocationId); model.Field(p => p.LocationId).Editable(false); })
                                            .Update(update => update.Action("Update_Location", "Administration"))

                                            )
                                        )

                                    </div>
                            );

                               }).ToHtmlString()
                  );

                     })
                    )

                </td>
            </tr>
        </table>
        @*</td>
                </tr>
            </table>
        *@
    </div>
}
<style scoped>
    #vertical {
        width: 95%;
    }

    .pane-content {
        width: 300px;
    }

    div.k-grid-content {
        min-height: 300px;
    }
</style>
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
            var grid = $("#Grid").data("kendoGrid");
            grid.cancelChanges();
        }
    }

    $(document).ready(function () {
        $('#btnCancel').click(function () {
            $(':input').not(':button, :submit, :reset, :hidden').val('')
            $('input:checkbox').removeAttr('checked')
            var dropdownlist = $("#ddCountry").data("kendoDropDownList");
            dropdownlist.select(0);
            var dropdownlist = $("#ddState").data("kendoDropDownList");
            dropdownlist.select(0);
        });
    });

    function onClick(e) {
        var locationName = $("#txtLocName").val();
        if (locationName != "") {
            var selectedText = $("#ddCountry").data("kendoDropDownList").text();
            if (selectedText == "--Select Country--") {
                alert('Please select country');
            }
        }
    }
    function OnCountryChange(e) {
        var selectedText = $("#ddCountry").data("kendoDropDownList").text()
        $("#hddCountry").val(selectedText);
    }

    function OnStateChange(e) {
        var selectedText = $("#ddState").data("kendoDropDownList").text()
        $("#hddState").val(selectedText);
    }

    function onRequestEnd(e) {
        if (e.type == "create" || e.type == "update") {
            if (e.response == null || e.response.Errors == null) {
                alert("Location Data Updated Successfully");
            }
        }
    }

</script>

1 个答案:

答案 0 :(得分:0)

确定。所以拿你的代码样本并假设一些事情:

您的代码:

public ActionResult Update_Parameter([DataSourceRequest] DataSourceRequest request, Parameter UpdatedParameter)
        {
            try
            {
                mTestAdminLogic.SaveModel((ITestAdminModel)model, ViewBag.ApplicationId, Operation.UpdateParameter);

            }
            catch (Exception ex)
            {
                ModelState.AddModelError("ParameterUpdateError", ex.Message);
            }
            return RedirectToAction("TestAdmin");
        }

这些是我的变化:

 public JsonResult Update_Parameter([DataSourceRequest] DataSourceRequest request, Parameter UpdatedParameter)
        {
            var returnModel = {your return model here}; 
            try
            {
              returnModel =  mTestAdminLogic.SaveModel((ITestAdminModel)model, ViewBag.ApplicationId, Operation.UpdateParameter);

            }
            catch (Exception ex)
            {
                ModelState.AddModelError("ParameterUpdateError", ex.Message);
            }
            return Json(new[] { returnModel }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.DenyGet);
        }

让我解释一下。

如果此操作仅用于更新网格,则将其更改为JsonResult,因为网格更新将导致JSON返回。

我假设你已经离开我们Data Layer逻辑的声明并将其缩减到这一行:

 mTestAdminLogic.SaveModel((ITestAdminModel)model, ViewBag.ApplicationId, Operation.UpdateParameter);

现在,如果此模型与网格预期的模型不同,则此行的结果操作应返回网格所期望的相应模型。因为你没有在你的网格中声明我假设它是某种LocationBasedModel。

现在,一旦此更新完成,您应该返回相应的模型并添加以下使用语句using Kendo.Mvc.Extensions;,这样您就可以访问 .ToDataSourceResult() 扩展方法,然后允许您将此单个模型转换回网格,并让网格更新其数据视图。包括请求和模型状态也将提供任何错误并将任何现有的过滤等应用回网格。

每次调用此操作时,这将解决页面“刷新”的问题。

任何问题都会让我知道,我会更新我的回答以反映您需要的任何更改。