隐藏元素在剑道工具窗口基于按钮点击

Hiding elements in a Kendo Utility Window based on the button clicked

本文关键字:按钮 于按钮 元素 窗口 工具 隐藏      更新时间:2023-09-26

对这一切都比较陌生:我有一个剑道网格,其中客户Id是根据客户、年份和客户得到帮助的次数自动生成的。要用不同的地址或服务创建一个新的副本,它会打开一个实用程序窗口,你选择公司,它会生成Id,然后你填写字段。我还想使用它来更新客户记录,使用编辑按钮打开相同的实用程序窗口,但隐藏Pick company下拉,因为Id已经创建。

这是在主页上:

<script>
function closeWindow(e) {
    $(this.element).empty();
}
function editJobs(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var win = $("#utilityWindow").data("kendoWindow");
    win.refresh({ url: "/BackendSchedule/_Jobs?jobId=" + dataItem.Id});
    win.setOptions({
        title: "Edit Jobs",
        width: 1000,
        height: 600,
    });
    win.center().open();
}
function newJobs() {
    var win = $("#utilityWindow").data("kendoWindow");
    win.refresh({ url: "/BackendSchedule/_Jobs?jobId="});
    win.setOptions ({
        title: "Add New Jobs",
        width: 1000,
        height: 600,
    });
    win.center().open();
}

Here is the Window

<form id="JobForm" class="form-horizontal">
    <fieldset class="input">
        <p class="info">
        </p>
        <p id="buildJobId" class="hidden">
            <label for="storeType">Store Type</label>
            @(Html.Kendo().DropDownList()
                .Name("storeType")
                .OptionLabel("please select")
                .BindTo((SelectList)ViewData["jobtypes"])
                .Events(e => e.Change("storeTypeChange"))
                .HtmlAttributes(new { style = "width:275px;" })
            )
        </p>
        <p>
            <label for="Id">Id</label>
            @Html.TextBoxFor(model => model.Id, new { @class = "k-textbox", @readonly = "readonly" })
        </p>
        <p>
             <label for="Company">Company Name</label>
                @(Html.Kendo().DropDownList()
                .Name("Company")
                .OptionLabel("Please Select")
                .BindTo((SelectList)ViewData["company"])
                .HtmlAttributes(new { style = "width:275px;" })
                )
        </p >
        <p>
            <label for="Address1">Address</label>
            @Html.TextBoxFor(model => model.Address1, new { @class = "k-textbox" })<br/> 
            <p> 
                <label for="Address2"></label>
                @Html.TextBoxFor(model => model.Address2, new { @class = "k-textbox" })
            </p>
        </p>
        <p>
            <label for="City">City</label>
            @Html.TextBoxFor(model => model.City, new { @class = "k-textbox" })
        </p>
        <p>
            <label for="State">State</label>
            @(Html.Kendo().DropDownList()
                .Name("State")
                .OptionLabel("Please Select")
                .BindTo((SelectList)ViewData["states"])
                .HtmlAttributes(new { style = "width:200px;" })
            )
        </p>
        <p>
            <label for="ZipCode">Zip Code</label>
            @Html.TextBoxFor(model => model.ZipCode, new { @class = "k-textbox" })
        </p>
        <p>
            <label for="ContactName">Contact Name</label>
            @Html.TextBoxFor(model => model.ContactName, new { @class = "k-textbox"})
        </p>
        <p>
            <label for="Phone">Phone</label>
            @Html.TextBoxFor(model => model.Phone, new { @class = "k-textbox", type = "tel" })
        </p>
        <p>
            <label for="Email">Email</label>
            @Html.TextBoxFor(model => model.Email, new { @class = "k-textbox", required = "required" })
        </p>
        <p>
            <label for="TimeAllowed">Time Allowed</label>
            @(Html.Kendo().NumericTextBoxFor(
        </p>
        <p>
            <label for="PlanStartDate">Plan Start Date</label>
            @(Html.Kendo().DatePickerFor(m => m.PlanStartDate))
        </p>
        <p>
            <label for="PlanEndDate">Plan End Date</label>
            @(Html.Kendo().DatePickerFor(m => m.PlanEndDate))
        </p>
        <p>
            <label for="ReponsibleParty">Responsible Party</label>
            @(Html.Kendo().DropDownList()
                .Name("Contact")
                .OptionLabel("Please Select")
                .BindTo((SelectList)ViewData["responsibleParty"])
                .HtmlAttributes(new { style = "width:300px;" })
            )
        </p>
        <p>
            <button class="k-button" id="submitForm" name="submitForm" type="submit">Submit</button>
            <button class="k-button right" id="cancelButton" type="button">Cancel</button>
        </p>
        <div id="message" class="text-danger"></div>
    </fieldset>
</form>

现在隐藏的Id=buildJobId将需要显示在create new按钮上。

下面是我认为可行的代码:

        if ($("#Id").data("TextBoxFor").dataSource.data(null)){
            $("#buildJobId").show();
        } else {
            $("#buildJobId").hide();
        };

添加了更多的代码,但让它在最后一部分工作,我已将其连接到将被调用的函数:

 $(document).ready(function() {
    var validator = $("#JobForm").kendoValidator().data("kendoValidator");
    var postUrl = "/BackendSchedule/Jobs_Update";
    if ("@ViewBag.Id".length == 0) {
        postUrl = "/BackendSchedule/Jobs_Create";
        $("#buildJobId").show();
    } else {
        $("#buildJobId").hide();
    }