Jquery 单击编辑按钮加载kendogrid的编辑模板，如详细信息模板

我需要在编辑行下方的剑道网格中单击编辑按钮加载编辑模板。 当前详细信息模板在小提琴中显示为编辑模板

function detailInit(e) {
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var detailRow = dataItem.detailRow;
    var model = e.data; //keep reference to the model

    detailRow.find(".tabstrip").kendoTabStrip({
        animation: {
            open: { effects: "fadeIn" }
        }
    });

    detailRow.find(".user-details > input[type='button']").click(function() {
        var ds = $(this).closest(".k-grid").data("kendoGrid").dataSource;
        //retrieve the input values
        var UserDescriptionValue = detailRow.find(".user-details>input[name=UserDescription]").val();
        var NumberValue = detailRow.find(".user-details>input[name=Number]").val();
        var CodeValue = detailRow.find(".user-details>input[name=Code]").val();
        var PartitionValue = detailRow.find(".user-details>input[name=Partition]").val();
        //use set method to change the corresponding values of the model
        //in that way the record will be marked as dirty
        model.set("UserDescription", UserDescriptionValue);
        model.set("Number", NumberValue );
        model.set("Code", CodeValue );
        model.set("Partition", PartitionValue );        
    });
}

---

请参阅fiddle:

因此，为了让您的行自定义命令按钮执行，您需要通过每个命令上的“单击”属性告诉他们必须执行哪些操作

为了让工具栏正常工作，您必须将它们连接到javascript函数。由于您希望addUser输入显示在add按钮的正下方，因此我将所有工具栏规范移到了一个模板中，这样您就可以轻松地用javascript连接所有内容

这是你的电话号码

模板：

<script type="text/x-kendo-template" id="template">
    <div class="toolbar">
        <input type="button" class="k-button" id="addUser" onClick="addUser()" value="Add User" />
    </div>
    <div id="addNewUser" style="display:none">
        User Description: <input id="newUserName" type="text" name="UserDescription"/><br />
        Number: <input id="newUserNumber" type="text" name="Number"/><br />
        Code: <input id="newUserCode" type="text" name="Code"/><br />
        Partition: <input id="newUserPartition" type="text" name="Partition"/><br />
        <input type="button" id='saveNewUser' class="k-button" onClick="saveUser()" value="Save" /><input type="button" id='cancelAddUser' class="k-button" onClick="cancelAddUser()" value="Cancel" />
    </div>
</script>

---

您需要告诉您的“编辑”命令在被单击时要做什么：

命令：[{name:“编辑”，单击：detailInit，text:}，{name:“销毁”，text:}

。在那之后，您会发现

var model=e.data

有问题，但我不太确定您在那里做什么。因此，您必须处理好它。但是，

dataItem

看起来对我来说是正确的，但是

detailRow

没有定义。请参阅有关自定义命令的剑道文档更多信息：单击自定义命令按钮（编辑），我添加了展开行功能更新的提琴：看起来对你有用。你还有其他问题吗？是的，问题很少。单击“添加”按钮时，我需要相同的EditUserTemplate位于网格上方和“添加用户”按钮下方。更新的提琴：感谢乔的帮助。这非常有效。我在这里面临的唯一问题是dropdownlist是not加载到剑道模板中。这是更新的提琴：我得到了解决方案。参考此网站后：更新的提琴在这里：对于ZWave锁控件列，复选框在详细模板中没有绑定。另外，下拉列表不加载到Authority列，而加载到addtemplate中。您能帮我解决这个问题吗？感谢您的时间。下面是更新的fiddle:jsfiddle.net/Z26U3/63您需要在详细信息行中引用Authority，如

${Authority}

。过一会儿我会看看如何让KendoDropDown在详细信息行中工作。基于以下示例：，您需要为

detailInit

添加一个函数，并在您的网格配置中的detailTemplate分配的正下方分配它：

detailInit:detailInit

。在detailInit函数中，您需要使用jquery为你的权威创建剑道下拉列表。如果你遵循这个例子，从那里开始应该非常简单。

function addUser(){
    $("#addNewUser").toggle();
}
function saveUser(){
    alert("place code to save user here");
    //Get the input valies from your addUserForm.
    var name = $("#newUserName").val();
    var number = $("#newUserNumber").val();
    var code = $("#newUserCode").val();
    var partition = $("#newUserPartition").val();
}
function cancelAddUser()
{
    $("#newUserName").val("");
    $("#newUserNumber").val("");
    $("#newUserCode").val("");
    $("#newUserPartition").val("");
    $("#addNewUser").toggle();
}