Question

我需要在编辑的行下方点击Kendo Grid中的“编辑”按钮加载编辑模板。目前，细节模板在小提琴中显示为编辑模板。

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 );        
    });
}

请参阅小提琴：http://jsfiddle.net/Z26U3/16/

Answer 1

因此，总而言之，为了执行您的行自定义命令按钮，您需要通过每个命令的“click”属性告诉他们必须完成的操作。

为了让工具栏工作，你必须将它们连接到javascript函数。由于您希望addUser输入显示在添加按钮下，我将所有工具栏规范移到模板中，这样您就可以轻松地使用javascript来连接所有内容。

这是fiddle with the updated code。

模板：

<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>

然后，在你的javascript中，你需要添加函数来处理所有事情：

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();
}

加载kendogrid的编辑模板点击编辑按钮，如详细模板

1 个答案: