Kendo Grid - 具有更新功能的窗口模板按钮

时间:2016-12-07 20:49:44

标签: javascript jquery button kendo-ui kendo-grid

现在我正在使用一个窗口来查看未在网格中显示的细节。我也在窗口中创建了自己的自定义编辑器,它隐藏了详细信息并用输入替换它们。

不幸的是,我无法让Update按钮具有与kendo工具栏中的更新按钮相同的功能。

我正在使用传输和参数映射来完成我的创建。我只需要能够点击更新,这是我无法做到的。

以下是模板的代码片段:

<li><b>Change Control Objective</b></li>
<li><textarea type="text" class="k-textbox k-input" data-bind="value:ChangeControlObjective">#= ChangeControlObjective #</textarea></li>
<li><b>Change Control Specifics</b></li>
<li><textarea type="text" class="k-textbox k-input" data-bind="value:ChangeControlSpecifics">#= ChangeControlSpecifics #</textarea></li> 
<a href="\\#" class="k-button k-button-icontext k-grid-update"><span class="k-update k-icon k-i-tick"></span>Save</a>

我无法展示我的JS代码,但它基于这个道场:http://dojo.telerik.com/abUHI

更新

我能够点击保存按钮点击的参数列表中的更新,但是它将旧数据发送到更新而不是新数据。这是按钮点击代码:

 $("#saveChanges").click(function () {
        dataItem.dirty = true;
       $("#ccrGrid").data('kendoGrid').saveChanges();
    });

每个输入都有一个data-bind属性,parametermap如下所示:

case "update":
                        var changeControlRequestId = options.ChangeControlRequestID;
                        var changeControlObjective = options.ChangeControlObjective;
                        var changeControlSpecifics = options.ChangeControlSpecifics;
                        var productAssociation;
                        if (options.AccountChangeInfo.ProductAssocation == undefined) {
                            productAssociation = "";
                        } else { productAssociation = options.ProductAssocation; }
                        var amortization;
                        if (options.AccountChangeInfo.Amortization == undefined) {
                            amortization = "";
                        } else { amortization = options.Amortization; }
                        var productType;
                        if (options.ProductChangeInfo.ProductType == undefined) {
                            productType = "";
                        } else { productType = options.ProductType; }
                        var productName;
                        if (options.ProductChangeInfo.ProductName == undefined) {
                            productName = "";
                        } else { productName = options.ProductName; }
                        var productDescription;
                        if (options.ProductChangeInfo.ProductDescription == undefined) {
                            productDescription = "";
                        } else { productDescription = options.ProductDescription; }
                        var productContract;
                        if (options.ProductChangeInfo.ProductContractualFeatures == undefined) {
                            productContract = "";
                        } else { productContract = options.ProductContractualFeatures; }
                        var productBehavior;
                        if (options.ProductChangeInfo.ProductBehavioralAssumptions == undefined) {
                            productBehavior = "";
                        } else { productBehavior = options.ProductBehavioralAssumptions; }
                        var evaluationBehavior;
                        if (options.ProductChangeInfo.ProductEvaluationBehavior == undefined) {
                            evaluationBehavior = "";
                        } else { evaluationBehavior = options.ProductEvaluationBehavior; }
                        var productStratification;
                        if (options.ProductChangeInfo.ProductStratificationRoutines == undefined) {
                            productStratification = "";
                        } else { productStratification = options.ProductStratificationRoutines; }
                        if (content.isreadonly == "True") {
                            alert("you have readonly access");
                        }
                        else {
                            var urlString = "env=" + content.env + "&allyid=" + content.userId + "&changeRequestID" + changeRequestID + "&changeControlObjective=" + changeControlObjective + "&changeControlSpecifics=" + changeControlSpecifics +
                                               "&productAssociation" + productAssociation + "&amortization" + amortization +
                                               "&productType" + productType + "&productName" + productName + "&productDescription" + productDescription +
                                               "&productContract" + productContract + "&productBehavior" + productBehavior + "&evaluationBehavior" + evaluationBehavior +
                                               "&productStratification" + productStratification;
                            return urlString;

1 个答案:

答案 0 :(得分:0)

几个月前我一直在经历这个问题。根据我的广泛研究,在整个互联网中有两个在Kendo中进行自定义弹出编辑的主要来源;):

Custom editor template 我在这里为你创建了一个简化版本:http://jsbin.com/qudotag/ 一旦你掌握了关键概念,就可以削减可以扩展的元素。请注意,由于未保留更改,因此无法完全运行。这是预期的行为,因为您需要为网格定义CRUD操作(保存,取消等操作时会发生什么)。

第二个来源提供了如何处理CRUD: Crud with external form

对这两个问题进行了大量研究,并进入了更深层次的MVVM(起初可能会令人生畏,但对于与剑道更顺畅的工作非常有用)会让你前进。

编辑:实际上你可以用第一种方法做,这更容易,并通过在取消后刷新网格来保持状态。