This is a migrated thread and some comments may be shown as answers.
Custom button in child grid not showing up
1 Answer 14 Views
This is a migrated thread and some comments may be shown as answers.
TD
Top achievements
Rank 1
TD asked on 29 Jun 2020, 11:55 AM

I have a master / detail grid with a custom add new button in the child inline record that popups up a partial view.  I'm trying to understand why the add new child record doesn't appear on the UI.

 

Any help would be greatly appreciated.

-----

@{
    ViewData["Title"] = "Vendor";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="mt-3">
    <h3>Vendor</h3>

    @(Html.Kendo().Grid<I2MS.Models.VendorViewModel>()
        .Name("gridVendor")
        .Columns(columns =>
        {
            columns.Bound(e => e.VendorID).Hidden(true);
            columns.Bound(e => e.VendorCode).Filterable(false).Width(40);
            columns.Bound(e => e.Name).Width(70).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(e => e.Address).Filterable(false).Width(40);
            columns.Bound(e => e.Address2).Filterable(false).Width(40);
            columns.Bound(e => e.City).Filterable(false).Width(40);
            columns.Bound(e => e.State).Filterable(false).Width(40);
            columns.Bound(e => e.PostalCode).Filterable(false).Width(40);

            columns.Template("<a title=\"Edit\" onclick=AddEditVendor(event);><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteVendor(event)'><img src='images/delete.png' alt='delete' /></a>").Width(50);
        })
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(6)
        .Read(read => read.Action("HierarchyBinding_Vendor", "Vendor"))
        .Model(model => { model.Id(i => i.VendorID); })
        )
        .Events(events => events.DataBound("dataBound"))
        .ToolBar(toolbar =>
        {
            toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Vendor").HtmlAttributes(new { style = "float:right", id = "btnAddNewVendor", onclick = "AddEditVendor()" });
        })
)
    @(Html.Kendo().Window().Name("dlgAddEditVendor").Visible(false).Modal(true).Draggable(true))
    @(Html.Kendo().Window().Name("dlgAddEditVendorContact").Visible(false).Modal(true).Draggable(true))

    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<I2MS.Models.VendorContactViewModel>()
            .Name("grid_#=VendorID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.VendorContactID).Hidden();
                columns.Bound(o => o.FirstName).Width(40);
                columns.Bound(o => o.LastName).Width(40);
                columns.Bound(o => o.Phone).Width(40);
                columns.Bound(o => o.Email).Width(40);
                columns.Bound(o => o.Address).Width(40);
                //columns.Bound(o => o.Address2).Width(200);
                columns.Bound(e => e.City).Width(40);
                columns.Bound(e => e.State).Width(40);
                columns.Bound(e => e.PostalCode).Width(40);

                columns.Template("<a title=\"Edit\" onclick=AddEditVendorContact(event,#=VendorID#);><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteVendorContact(event,#=VendorID#)'><img src='images/delete.png' alt='delete' /></a>").Width(40);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("HierarchyBinding_VendorContacts", "VendorContact", new { vendorID = "#=VendorID#" }))
                .Model(model => { model.Id(i => i.VendorContactID); })
            )
            
            .ToolBar(toolbar =>
            {
                toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Vendor Contact").HtmlAttributes(new { style = "float:right", id = "btnAddNewVendorContact", onclick = "AddEditVendorContact(null,#=VendorID#)" });
            })
            .Pageable()
            .Sortable()
            .ToClientTemplate()

    )
    </script>
</div>

<script>
    var gridName = "";
    function AddEditVendorContact(event, VendorID)
    {
        gridName = "grid_" + VendorID;
        var window = $('#dlgAddEditVendorContact').data('kendoWindow');
        if (event != null )
        {
            window.setOptions({ title: "Edit Vendor Contact" });
            var dataItem = $("#" + gridName).data('kendoGrid').dataItem($(event.currentTarget).closest("tr"));
            var url = "@Url.Action("AddEditVendorContact", "VendorContact")" + "?VendorContactID=" + dataItem.VendorContactID + "&VendorID=" + VendorID;
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditVendorContact",
                windowWidth: 660,
                windowHeight: 450,
                url:url
            });
        }
        else
        {
            window.setOptions({ title: "Add New Vendor Contact" });
            var url = "@Url.Action("AddEditVendorContact", "VendorContact")" + "?VendorContactID=" + "&VendorID=" + VendorID;
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditVendorContact",
                windowWidth: 660,
                windowHeight: 450,
                url: url
            });
        }
    }

    function onDeleteVendorContact(event, VendorID)
    {
        if (confirm('Are you sure you want to delete this Record?'))
        {
            var gridName = "grid_" + VendorID;
            var dataItem = JSON.stringify($("#" + gridName).data('kendoGrid').dataItem($(event.currentTarget).closest("tr")));
            if (dataItem && dataItem != null)
            {
                $.ajax({
                    cache: false,
                    type: 'POST',
                    dataType: 'JSON',
                    contentType: 'application/json; charset=utf-8',
                    data:  dataItem,
                    url: '@Url.Action("DeleteVendorContact", "VendorContact")',
                    success: function (result) {
                        if (result && result.success == true) {
                            $('#' + gridName).data('kendoGrid').dataSource.read();
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {},
                    complete: function (xhr, status) {}
                });
            }
        }
    }

    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }


    function AddEditVendor(e)
    {
        var window = $('#dlgAddEditVendor').data('kendoWindow');
        if (e != null)
        {
            window.setOptions({ title: "Edit Vendor" });
            var dataItem = $("#gridVendor").data('kendoGrid').dataItem($(e.currentTarget).closest("tr"));
            var url = "@Url.Action("AddEditVendor", "Vendor", new { VendorID = "value" })".replace("value", dataItem.VendorID);
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditVendor",
                windowWidth: 660,
                windowHeight: 365,
                url:url
            });
        }
        else
        {
            window.setOptions({ title: "Add New Vendor" });
            var url = "@Url.Action("AddEditVendor", "Vendor", new { VendorID = "value" })".replace("value", "");
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditVendor",
                windowWidth: 660,
                windowHeight: 365,
                url:url
            });
        }
    }

    function onDeleteVendor(event)
    {
        if (confirm('Are you sure you want to this Record?'))
        {
            var dataItem = JSON.stringify($("#gridVendor").data('kendoGrid').dataItem($(event.currentTarget).closest("tr")));
            if (dataItem && dataItem != null)
            {
                $.ajax({
                    cache: false,
                    type: 'POST',
                    dataType: 'JSON',
                    contentType: 'application/json; charset=utf-8',
                    data:  dataItem,
                    url: '@Url.Action("DeleteVendor", "Vendor")',
                    success: function (result) {
                        if (result && result.success == true) {
                            $('#gridVendor').data('kendoGrid').dataSource.read();
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {},
                    complete: function (xhr, status) {}
                });
            }
        }
    }
</script>

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 01 Jul 2020, 10:50 AM

Hi TD,

Thank you for the provided code. Are there any errors in the browser's console when you run the project? Is everything in the Grid operating correctly except for the missing custom button? 

Just to be sure we are talking about the same thing, the button you have issues with is the one from the detail Grid. Is this correct? 

If the above is correct, based on the provided code, I would assume that there is an issue with the template defining the custom button. To be more specific, can you try escaping all "#" symbols inside the "template" kendo template with "\\". More about this escaping can be found in this Hash Literals article from our documentation. 

toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Vendor Contact").HtmlAttributes(new { style = "float:right", id = "btnAddNewVendorContact", onclick = "AddEditVendorContact(null,\\#=VendorID\\#)" });

If the above doesn't resolve the issue and there are no errors in the browser's console, can you send me a runnable example in which the reported behavior can be replicated? If you don't want to publicly expose your code or project, you can submit a support ticket and we will handle the case in it. 

Being able to replicate the reported behavior, we can further investigate the source of the issue.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
TD
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or