Grid / Tab Strip and ToolBar Buttons

[TD]

I have a Parent Child relationship that is using a Parent Grid and Tab strip with child grids.  I can get the data to show up but my custom buttons to add / edit and delete data is not working or showing up

TIA

 

Error

TypeError: Cannot read property 'dataItem' of undefined
    at AddEditCustomerShip (https://localhost:44368/Customer:238:63)
    at HTMLAnchorElement.onclick (https://localhost:44368/Customer:1:1)

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("tabStrip_#=CustomerID#")
            .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Contacts").Content(@<text>
                    @(Html.Kendo().Grid<I2MS.Models.CustomerContactViewModel>
                    ()                    
                    .Name("grid_contact#=CustomerID#")
                    .Columns(columns =>
                    {
                    columns.Bound(o => o.CustomerContactID).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=AddEditCustomerContact(event,#=CustomerID#);><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomerContact(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(read => read.Action("HierarchyBinding_CustomerContacts", "CustomerContact", new { customerID = "#=CustomerID#" }))
                    .Model(model => { model.Id(i => i.CustomerContactID); })
                    )
                    .ToolBar(toolbar =>
                    {
                        toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Contact").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerContact", onclick = "AddEditCustomerContact(null,#=CustomerID#)" });
                        //toolbar.Create();
                    })
                    .Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
                    .Sortable()
                    .ToClientTemplate()

                    )
                </text>
                );
                 items.Add().Text("Shipping Addresses").Content(@<text>
                    @(Html.Kendo().Grid<I2MS.Models.CustomerShipViewModel>()
                        .Name("grid_ship#=CustomerID#")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.CustomerShipID).Hidden();
                            columns.Bound(o => o.Name).Width(40);
                            columns.Bound(o => o.PhoneNumber).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=AddEditCustomerShip(event,#=CustomerID#);><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomerShip(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(10)
                            .Read(read => read.Action("HierarchyBinding_CustomerShips", "CustomerShips", new { customerID = "#=CustomerID#" }))
                            .Model(model => { model.Id(i => i.CustomerShipID); })
                        )
                        .ToolBar(toolbar =>
                        {
                            toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Ship").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerShip", onclick = "AddEditCustomerShip(null,#=CustomerID#)" });
                        })
                        .Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
                        .Sortable()
                        .ToClientTemplate()

                        )
                </text>
                );
            })
            .ToClientTemplate())
</script>

[Georgi Denchev]

Hello Tuong,

Thank you for the provided code snippet!

I don't see anything in particular that could lead to the undefined error. The only thing I am noticing is that quotation marks are missing on the Edit onclick attribute.

<a title=\"Edit\" onclick=AddEditCustomerContact(event, #=CustomerID#);>

<a title=\"Edit\" onclick='AddEditCustomerContact(event, #=CustomerID#)'>

Somewhere in the code you are attempting to access the dataItem but the grid is either not initialized yet or the id of the grid could be incorrect.

Would it be possible for you to share the full View, including the parent grid and any additional javascript code that you may have? I should be able to provide you with a more appropriate response after that.

I am looking forward to your reply.

Best Regards,
Georgi Denchev
Progress Telerik

[TD]

Here is the entire view

 

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

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

    @(Html.Kendo().Grid<I2MS.Models.CustomerViewModel>()
        .Name("gridCustomer")
        .Columns(columns =>
        {
            columns.Bound(e => e.CustomerID).Hidden(true);
            columns.Bound(e => e.CustomerCode).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.Bound(e => e.CreditLimit).Filterable(false).Width(40);

            columns.Template("<a title=\"Edit\" onclick=AddEditCustomer(event);><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomer(event)'><img src='images/delete.png' alt='delete' /></a>").Width(50);
        })
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Sortable()
        .Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Read(read => read.Action("HierarchyBinding_Customer", "Customer"))
        .Model(model => { model.Id(i => i.CustomerID); })
        )
        .Events(events => events.DataBound("dataBound"))
        .ToolBar(toolbar =>
        {
            toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomer", onclick = "AddEditCustomer()" });

        })
    )
    @(Html.Kendo().Window().Name("dlgAddEditCustomer").Visible(false).Modal(true).Draggable(true))
    @(Html.Kendo().Window().Name("dlgAddEditCustomerContact").Visible(false).Modal(true).Draggable(true))
    @(Html.Kendo().Window().Name("dlgAddEditCustomerShip").Visible(false).Modal(true).Draggable(true))

</div>


<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<I2MS.Models.CustomerContactViewModel>
    ()
    .Name("grid_contact#=CustomerID#")
    .Columns(columns =>
    {
    columns.Bound(o => o.CustomerContactID).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=AddEditCustomerContact(event,#=CustomerID#);><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomerContact(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(10)
    .Read(read => read.Action("HierarchyBinding_CustomerContacts", "CustomerContact", new { customerID = "#=CustomerID#" }))
    .Model(model => { model.Id(i => i.CustomerContactID); })
    )
    .ToolBar(toolbar =>
    {
        toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Contact").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerContact", onclick = "AddEditCustomerContact(null,#=CustomerID#)" });
    })
    .Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
    .Sortable()
    .ToClientTemplate()

    )
    <h4>Customer Shipping Addresses</h4>
    @(Html.Kendo().Grid<I2MS.Models.CustomerShipViewModel>()
        .Name("grid_ship#=CustomerID#")
        .Columns(columns =>
        {
            columns.Bound(o => o.CustomerShipID).Hidden();
            columns.Bound(o => o.Name).Width(40);
            columns.Bound(o => o.PhoneNumber).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=AddEditCustomerShip(event,#=CustomerID#);><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomerShip(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("HierarchyBinding_CustomerShips", "CustomerShips", new { customerID = "#=CustomerID#" }))
            .Model(model => { model.Id(i => i.CustomerShipID); })
        )
        .ToolBar(toolbar =>
        {
            toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Ship").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerShip", onclick = "AddEditCustomerShip(null,#=CustomerID#)" });
        })
        .Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
        .Sortable()
        .ToClientTemplate()

        )
</script>

<script>
    var gridName = "";
    function AddEditCustomerContact(event, CustomerID)
    {
        gridName = "grid_contact" + CustomerID;
        var window = $('#dlgAddEditCustomerContact').data('kendoWindow');
        if (event != null )
        {
            window.setOptions({ title: "Edit Customer Contact" });
            var dataItem = $("#" + gridName).data('kendoGrid').dataItem($(event.currentTarget).closest("tr"));
            var url = "@Url.Action("AddEditCustomerContact", "CustomerContact")" + "?CustomerContactID=" + dataItem.CustomerContactID + "&CustomerID=" + CustomerID;
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomerContact",
                windowWidth: 660,
                windowHeight: 460,
                url:url
            });
        }
        else
        {
            window.setOptions({ title: "Add New Customer Contact" });
            var url = "@Url.Action("AddEditCustomerContact", "CustomerContact")" + "?CustomerContactID=" + "&CustomerID=" + CustomerID;
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomerContact",
                windowWidth: 660,
                windowHeight: 460,
                url: url
            });
        }
    }

    function onDeleteCustomerContact(event, CustomerID)
    {
        if (confirm('Are you sure you want to delete this Record?'))
        {
            var gridName = "grid_contact" + CustomerID;
            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("DeleteCustomerContact", "CustomerContact")',
                    success: function (result) {
                        if (result && result.success == true) {
                            $('#' + gridName).data('kendoGrid').dataSource.read();
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {},
                    complete: function (xhr, status) {}
                });
            }
        }
    }

    function AddEditCustomerShip(event, CustomerID)
    {
        gridName = "grid_ship" + CustomerID;
        var window = $('#dlgAddEditCustomerShip').data('kendoWindow');
        if (event != null )
        {
            window.setOptions({ title: "Edit Customer Ship" });
            var dataItem = $("#" + gridName).data('kendoGrid').dataItem($(event.currentTarget).closest("tr"));
            var url = "@Url.Action("AddEditCustomerShip", "CustomerShips")" + "?CustomerShipID=" + dataItem.CustomerShipID + "&CustomerID=" + CustomerID;
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomerShip",
                windowWidth: 660,
                windowHeight: 460,
                url:url
            });
        }
        else
        {
            window.setOptions({ title: "Add New Customer Ship" });
            var url = "@Url.Action("AddEditCustomerShip", "CustomerShips")" + "?CustomerShipID=" + "&CustomerID=" + CustomerID;
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomerShip",
                windowWidth: 660,
                windowHeight: 460,
                url: url
            });
        }
    }

    function onDeleteCustomerShip(event, CustomerID)
    {
        if (confirm('Are you sure you want to delete this Record?'))
        {
            var gridName = "grid_ship" + CustomerID;
            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("DeleteCustomerShip", "CustomerShip")',
                    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 AddEditCustomer(e)
    {
        var window = $('#dlgAddEditCustomer').data('kendoWindow');
        if (e != null)
        {
            window.setOptions({ title: "Edit Customer" });
            var dataItem = $("#gridCustomer").data('kendoGrid').dataItem($(e.currentTarget).closest("tr"));
            var url = "@Url.Action("AddEditCustomer", "Customer", new { CustomerID = "value" })".replace("value", dataItem.CustomerID);
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomer",
                windowWidth: 660,
                windowHeight: 370,
                url:url
            });
        }
        else
        {
            window.setOptions({ title: "Add New Customer" });
            var url = "@Url.Action("AddEditCustomer", "Customer", new { CustomerID = "value" })".replace("value", "");
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomer",
                windowWidth: 660,
                windowHeight: 370,
                url:url
            });
        }
    }

    function onDeleteCustomer(event)
    {
        if (confirm('Are you sure you want to this Record?'))
        {
            var dataItem = JSON.stringify($("#gridCustomer").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("DeleteCustomer", "Customer")',
                    success: function (result) {
                        if (result && result.success == true) {
                            $('#gridCustomer').data('kendoGrid').dataSource.read();
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {},
                    complete: function (xhr, status) {}
                });
            }
        }
    }
</script>

[Georgi Denchev]

Hi Tuong,

Could you try changing the onclick attributes like so:

columns.Template("<a title=\"Edit\" onclick='AddEditCustomer(event)'><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomer(event)'><img src='images/delete.png' alt='delete' /></a>").Width(50);

columns.Template("<a title=\"Edit\" onclick='AddEditCustomerContact(event,#=CustomerID#)'><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomerContact(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);

columns.Template("<a title=\"Edit\" onclick='AddEditCustomerShip(event,#=CustomerID#)'><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomerShip(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);

Let me know in case the issue continues to persist.

Best Regards,
Georgi Denchev
Progress Telerik

[TD]

Thanks.  I'll give it a try

[Georgi Denchev]

Hi Tuong,

Let me know how it goes after you've tested.

Best Regards,
Georgi Denchev
Progress Telerik

[TD]

Problem

No buttons where there should be one in the tab strip

 

 

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

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

    @(Html.Kendo().Grid<I2MS.Models.CustomerViewModel>()
        .Name("gridCustomer")
        .Columns(columns =>
        {
            columns.Bound(e => e.CustomerID).Hidden(true);
            columns.Bound(e => e.CustomerCode).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.Bound(e => e.CreditLimit).Filterable(false).Width(40);

            columns.Template("<a title=\"Edit\" onclick='AddEditCustomer(event)'><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomer(event)'><img src='images/delete.png' alt='delete' /></a>").Width(50);
        })
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Sortable()
        .Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Read(read => read.Action("HierarchyBinding_Customer", "Customer"))
        .Model(model => { model.Id(i => i.CustomerID); })
        )
        .Events(events => events.DataBound("dataBound"))
        )
    )
    @(Html.Kendo().Window().Name("dlgAddEditCustomer").Visible(false).Modal(true).Draggable(true))
    @(Html.Kendo().Window().Name("dlgAddEditCustomerContact").Visible(false).Modal(true).Draggable(true))
    @(Html.Kendo().Window().Name("dlgAddEditCustomerShip").Visible(false).Modal(true).Draggable(true))

</div>


<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("tabStrip")
            .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Contacts").Content(@<text>
                    @(Html.Kendo().Grid<I2MS.Models.CustomerContactViewModel>
                    ()
                    .Name("grid_contact#=CustomerID#")
                    .Columns(columns =>
                    {
                    columns.Bound(o => o.CustomerContactID).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='AddEditCustomerContact(event,#=CustomerID#)'><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomerContact(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(read => read.Action("HierarchyBinding_CustomerContacts", "CustomerContact", new { customerID = "#=CustomerID#" }))
                    .Model(model => { model.Id(i => i.CustomerContactID); })
                    )
                    .ToolBar(toolbar =>
                    {
                        toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Contact").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerContact", onclick = "AddEditCustomerContact(null,#=CustomerID#)" });
                        //toolbar.Create();
                    })
                    .Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
                    .Sortable()
                    .ToClientTemplate()

                    )
                </text>
                );
                items.Add().Text("Shipping Addresses").Content(@<text>
                    @(Html.Kendo().Grid<I2MS.Models.CustomerShipViewModel>()
                        .Name("grid_ship#=CustomerID#")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.CustomerShipID).Hidden();
                            columns.Bound(o => o.Name).Width(40);
                            columns.Bound(o => o.PhoneNumber).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='AddEditCustomerShip(event,#=CustomerID#)'><img src='images/edit.png' alt='edit' /></a> &nbsp; <a role='button' title='Delete' onclick='onDeleteCustomerShip(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(10)
                            .Read(read => read.Action("HierarchyBinding_CustomerShips", "CustomerShips", new { customerID = "#=CustomerID#" }))
                            .Model(model => { model.Id(i => i.CustomerShipID); })
                        )
                        .ToolBar(toolbar =>
                        {
                            toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Ship").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerShip", onclick = "AddEditCustomerShip(null,#=CustomerID#)" });
                        })
                        .Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
                        .Sortable()
                        .ToClientTemplate()

                        )
                </text>
                );

            })
            .ToClientTemplate())
</script>

<script>
    var gridName = "";
    function AddEditCustomerContact(event, CustomerID)
    {
        gridName = "grid_" + CustomerID;
        var window = $('#dlgAddEditCustomerContact').data('kendoWindow');
        if (event != null )
        {
            window.setOptions({ title: "Edit Customer Contact" });
            var dataItem = $("#" + gridName).data('kendoGrid').dataItem($(event.currentTarget).closest("tr"));
            var url = "@Url.Action("AddEditCustomerContact", "CustomerContact")" + "?CustomerContactID=" + dataItem.CustomerContactID + "&CustomerID=" + CustomerID;
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomerContact",
                windowWidth: 660,
                windowHeight: 460,
                url:url
            });
        }
        else
        {
            window.setOptions({ title: "Add New Customer Contact" });
            var url = "@Url.Action("AddEditCustomerContact", "CustomerContact")" + "?CustomerContactID=" + "&CustomerID=" + CustomerID;
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomerContact",
                windowWidth: 660,
                windowHeight: 460,
                url: url
            });
        }
    }

    function onDeleteCustomerContact(event, CustomerID)
    {
        if (confirm('Are you sure you want to delete this Record?'))
        {
            var gridName = "grid_" + CustomerID;
            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("DeleteCustomerContact", "CustomerContact")',
                    success: function (result) {
                        if (result && result.success == true) {
                            $('#' + gridName).data('kendoGrid').dataSource.read();
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {},
                    complete: function (xhr, status) {}
                });
            }
        }
    }

    function AddEditCustomerShip(event, CustomerID)
    {
        gridName = "grid_" + CustomerID;
        var window = $('#dlgAddEditCustomerShip').data('kendoWindow');
        if (event != null )
        {
            window.setOptions({ title: "Edit Customer Ship" });
            var dataItem = $("#" + gridName).data('kendoGrid').dataItem($(event.currentTarget).closest("tr"));
            var url = "@Url.Action("AddEditCustomerShip", "CustomerShips")" + "?CustomerShipID=" + dataItem.CustomerShipID + "&CustomerID=" + CustomerID;
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomerShip",
                windowWidth: 660,
                windowHeight: 460,
                url:url
            });
        }
        else
        {
            window.setOptions({ title: "Add New Customer Ship" });
            var url = "@Url.Action("AddEditCustomerShip", "CustomerShips")" + "?CustomerShipID=" + "&CustomerID=" + CustomerID;
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomerShip",
                windowWidth: 660,
                windowHeight: 460,
                url: url
            });
        }
    }

    function onDeleteCustomerShip(event, CustomerID)
    {
        if (confirm('Are you sure you want to delete this Record?'))
        {
            var gridName = "grid_" + CustomerID;
            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("DeleteCustomerShip", "CustomerShip")',
                    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 AddEditCustomer(e)
    {
        var window = $('#dlgAddEditCustomer').data('kendoWindow');
        if (e != null)
        {
            window.setOptions({ title: "Edit Customer" });
            var dataItem = $("#gridCustomer").data('kendoGrid').dataItem($(e.currentTarget).closest("tr"));
            var url = "@Url.Action("AddEditCustomer", "Customer", new { CustomerID = "value" })".replace("value", dataItem.CustomerID);
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomer",
                windowWidth: 660,
                windowHeight: 370,
                url:url
            });
        }
        else
        {
            window.setOptions({ title: "Add New Customer" });
            var url = "@Url.Action("AddEditCustomer", "Customer", new { CustomerID = "value" })".replace("value", "");
            MvcCommon.Kendo.ShowPartialViewInPopupWindow({
                windowName: "dlgAddEditCustomer",
                windowWidth: 660,
                windowHeight: 370,
                url:url
            });
        }
    }

    function onDeleteCustomer(event)
    {
        if (confirm('Are you sure you want to this Record?'))
        {
            var dataItem = JSON.stringify($("#gridCustomer").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("DeleteCustomer", "Customer")',
                    success: function (result) {
                        if (result && result.success == true) {
                            $('#gridCustomer').data('kendoGrid').dataSource.read();
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {},
                    complete: function (xhr, status) {}
                });
            }
        }
    }
</script>

[Georgi Denchev]

Hi Tuong,

I examined the provided code and there are only 2 items added to the TabStrip, one for the Contacts grid and one for the Shipping Addresses grid.

Perhaps you forgot to include the button?

Best Regards,
Georgi Denchev
Progress Telerik

[TD]

Hi Georgi,

Thanks for the help.  In the grid, I have put the .Toolbar section inside the tab strip.  How do I put a button in the tab strip with the grid?  

TIA,

Tuong

 

.ToolBar(toolbar =>
                    {
                        toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Contact").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerContact", onclick = "AddEditCustomerContact(null,#=CustomerID#)" });
                        //toolbar.Create();
                    })

[Georgi Denchev]

Hi Tuong,

You can add a button to the TabStrip the same way you are adding other items:

items.Add().Text("<a title=\"Add\" onclick='AddEditCustomerContact(null, #=OrderID#)'>Add</a>");

This would create a tab called Add and clicking on it would invoke the AddEditCustomerContact function. You can prevent the default behavior of the TabStrip's select event if you don't want to switch tabs when the button is clicked.

(Html.Kendo().TabStrip()
        .Name("tabstrip_#=Id#")
        .SelectedIndex(0)
        .Events(ev => ev.Select("onTabSelect"))
)

    function onTabSelect(e) {
        let tabItemIndex = $(e.item).index();

        // If the tab with index 1 was clicked prevent the default behavior and execute your custom code.
        if (tabItemIndex === 1) {
            e.preventDefault();
        }
    }

Best Regards,
Georgi Denchev
Progress Telerik

[TD]

Hi Georgi,

Thanks for the update.  I was hoping to have more of a button within the tab strip above the grid.  So the user can add a record to the child table.  The button as a tab may work but my user is looking for a way to have a button within the tab strip.  Can you help me?

Thanks for all the help.

 

[Georgi Denchev]

Hi Tuong,

My apologies for the misunderstanding.

I assume this is the result you are looking for? If that is the case the code snippet that you shared should work. Is there a styling that hides the ToolBar in the child grid which is not included?

I am attaching a sample project that you can examine locally.

Let me know in case I missed something.

Best Regards,
Georgi Denchev
Progress Telerik

[TD]

Hi Georgi,

Thanks for the information.  The code I provide is all that I have.  What kind of styling would hide the button on a grid.

This is what the code generates for me on the UI.  I'm so confused.  Thanks in advance.

 

[Georgi Denchev]

Hello Tuong,

The grid toolbar has classes "k-toolbar" and "k-grid-toolbar" if there is a "display: none;" style applied to either of those classes, the toolbar won't be visible. The ToolBar also won't be visible if there are no buttons present in it. Could you inspect the grid element and see if it has a toolbar? 

Right click on the TabStrip, select Inspect Element, in the DevTools find the element with classes "k-grid k-widget", expand it and see if there is an element for the toolbar.

Could you also try adding the ToolBar button like so:

toolbar.Custom()
    .Name("Custom Create")
    .Text("<span class='k-icon k-i-add'></span>Add New Customer Contact")
    .HtmlAttributes(new { style = "float:right", onclick = "AddEditCustomerContact(null,#=CustomerID#)" });

Let me know if there are any changes.

Best Regards,
Georgi Denchev
Progress Telerik

[TD]

Thanks Georgi.  

I can see the button in the code, but for some reason I'm not able to see the button on the UI.  Can you please help?  Thanks for all your help.

 

<a role="button" class="k-button k-button-icontext k-grid-CustomCreateContact" style="" id="btnAddNewCustomerContact" onclick="AddEditCustomerContact(null,1)" href="#"><span class="k-icon k-i-add"></span>Add New Customer Contact</a>

[Georgi Denchev]

Hello,

Thank you for the provided screenshots.

Could you please open a support ticket and provide a runnable project where the issue is reproduced so we can debug it locally? Alternatively you could also modify the sample project from my previous post and send it back.

This should give us an insight on what the cause of the problem may be.

Best Regards,
Georgi Denchev
Progress Telerik