How add custom buttons on simple view?

[Boeckmann, Ryan J]

I have a simple view that does not use a grid.  The view is used to edit a record and contains the default "Save" and "Cancel" buttons.  I want to add two buttons next to them.

I found how to accomplish this in a grid but how can it be done in a view?

@using Syncfusion.EJ2
@using DManager.Controllers

@model DManager.Models.DatabaseCab.svrpart

@{
    var keepBomComboData = new ComboItemIntId[]
    {
        new ComboItemIntId(1, "Yes"), new ComboItemIntId(0, "No")
    };

    System.Diagnostics.Debug.Assert(Model != null, nameof(Model) + " != null");
    var selectedKeepBomValue = new ComboItemIntId(Convert.ToInt32(Model.sp_keep_bom), "");
}

<ejs-toolbar id="default">
    <e-toolbar-items>
        <e-content-template>
            <div>
                <div> <ejs-button id="beginLocateBom" content="Locate BOM" prefixIcon="bi-search"></ejs-button></div>
                <div> <ejs-button id="beginReleaseBom" content="Release" prefixIcon="bi-balloon"></ejs-button></div>
            </div>
        </e-content-template>
    </e-toolbar-items>
</ejs-toolbar>

<div class="mb-1 row">
    <label for="sp_appl_val" class="col col-form-label">Replacement Quote Number </label>
    <ejs-textbox id="sp_appl_val" value="@Model.sp_appl_val" width="110" readonly></ejs-textbox>
    <div class="col-3">
        <ejs-textbox id="sp_repl_order_number" value="@Model.sp_repl_order_number" width="110" readonly></ejs-textbox>
    </div>
</div>

<div class="mb-1 row">
    <label for="sp_orig_order_number" class="col col-form-label">Original Order </label>
    <div class="col-3">
        <ejs-textbox id="sp_orig_order_number" value="@Model.sp_orig_order_number" maxLength="15" oninput="this.value = this.value.toUpperCase()"></ejs-textbox>
    </div>
</div>

<div class="mb-1 row">
    <label for="sp_keep_bom" class="col col-form-label">Keep Bom? </label>
    <div class="col-3">
        <ejs-combobox id="sp_keep_bom" dataSource="keepBomComboData" value="@selectedKeepBomValue.ID" width="80">
            <e-combobox-fields value="ID" text="Text"></e-combobox-fields>
        </ejs-combobox>
    </div>
</div>

<div class="mb-1 row">
    <label for="sp_order_status" class="col col-form-label">Order Status </label>
    <div class="col-3">
        <ejs-textbox id="sp_order_status" value="@Model.sp_order_status" readonly></ejs-textbox>
    </div>
</div>

<div class="mb-1 row">
    <label for="sp_orig_order_numberdesc" class="col col-form-label">Description </label>
    <label for="sp_orig_order_numberdesc" class="col col-form-label">KIT,VIS-FAB </label>
    <div class="col-3">
        <ejs-textbox id="sp_orig_order_numberdesc" value="@Model.sp_orig_order_number" readonly></ejs-textbox>
    </div>
</div>

<div class="mb-1 row">
    <label for="sp_bom_to_plant_date" class="col col-form-label">BOM to Plant Date </label>
    <div class="col-3">
        <ejs-textbox id="sp_bom_to_plant_date" value="@Model.sp_bom_to_plant_date" customFormat="@(new { type = "dateTime", format = "MM/dd/yyyy hh:mm:ss a" })" readonly></ejs-textbox>
    </div>
</div>

<ejs-scripts></ejs-scripts>

<script type="text/javascript">
    function toolbarClick(args) {
        if (args.item.id === "beginLocateBom") {
            var ajax = new ej.base.Ajax({
                url: "@Url.Action("LocateBom", "ReplacementPartMaintenance")",
                type: "GET",
                contentType: "application/json",
                //data: JSON.stringify({ value: args.rowData })
            });
            ajax.send().then(function (data) {
                console.log(data);
            }).catch(function (xhr) {
                console.log(xhr);
            });
        }
    }
</script>

Thank you in advance!

[Keerthikaran Venkatachalam]

Hi Boeckmann,

Thank you for reaching out to Syncfusion Support.

We have checked your shared image and modified the sample according to your requirements. Please refer to the below code snippet and sample.

<div class="mb-1 row justify-content-end">

    <div class="col-3">

        <ejs-button id="save" content="Save" class="e-primary"></ejs-button>

        <ejs-button id="cancel" content="Cancel"></ejs-button>

    </div>

</div>

If we have misunderstood your query, kindly provide more details or a video demonstration. Based on that information, we will promptly check and offer you a more suitable solution.

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: ButtonSample_6d674e.zip

[Boeckmann, Ryan J]

Keerthikaran,

Thank you for your response.  What I was trying to accomplish was to have my two additional buttons, "Locate BOM" and "Release", inline and next to the standard "Save" and "Cancel" buttons.

And since this is using the default edit view, what is the java script to execute the new buttons?  I have tried a couple of different ways but the script only gets executed on the calling view.

Thank you,

Ryan

[Keerthikaran Venkatachalam]

Hi Boeckmann,

We have checked your shared code snippets, but we didn't find any code for rendering save and cancel buttons. Are you looking to add default save and cancel buttons like in a grid template? If yes, please specify which component requires these buttons. Could you also provide more details about this query with a video demonstration? Based on that, we will check and provide you with a better solution quickly.

Regards,

KeerthiKaran K V