onchange event of grid inside tabstrip firing multiple times

[JCSCo]

Hello,

I have a kendogrid inside a tabstrip. The primary key of the grid is the value of the tab. When a tab is clicked, the grid data is reloaded with a different primary key value. That part works. On the selectable event of the grid, I create a second grid that gets it's primary key from a field value of the selected row of the first grid. As long as I am on the original tab, all works well. Clicking on a row in the first grid changes the values of the second grid. But when the tab is changed, the first grid continues to work correctly, but the onchange event I use to get the primary key value for the second grid, the event fires multiple times, sending several different values to the second grid, the last one not being the correct one. I am assuming the data from the first tab is still in the page and when the second tab gets clicked it has multiple values for the same field. Is there a way to clear out the data from the first tab when the second  (or third) tab is clicked? by the way, the tabs are dynamically generated when the page is browsed to, there is no way of knowing how many tabs there will be until the data is already loaded.

Here is my code:

<div class="row">
    <div class="col-md-10">
        <h5>Parcels</h5>
        <div class="container">
            <div id="parcelTabStrip">
                <ul>
                    @foreach (ParcelInfo parcel in @Model.ParcelList)
                    {
                        <li>@parcel.property_id</li>
                    }
                </ul>
                @foreach (ParcelInfo parcel in @Model.ParcelList)
                {
                    <div class="row">
                        <div class="col-md-5">
                            <div class="parcelInfoGrid"></div>
                        </div>
                        <div class="col-md-5">
                            <div class="taxDetailGrid"></div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
<br />

<script>
    $(document).ready(function () {
        $("#parcelTabStrip").kendoTabStrip({
            change: onTabChange,
            activate: function (e) {
                bind();
            }
        });
        var tabstrip = $("#parcelTabStrip").kendoTabStrip().data("kendoTabStrip");
        tabstrip.select(tabstrip.tabGroup.children("li:first"));
        tabstrip.tabGroup.on('click', 'li', function (e) {
            tabstrip.reload($(this));
        });

        function onTabChange(arg) {
           
        }

        bind();

        function bind() {
            var tabId = tabstrip.select().text();

            var taxDetailDataSource = new kendo.data.DataSource({
                schema: {
                    type: "json",
                    model: {
                        id: "property_id",
                        fields: {
                            ptr_number: { editable: false, type: "string" },
                            tax_year: { editable: false, type: "number", },
                            property_id: { editable: false, type: "string" },
                            source_code: { editable: false, type: "string" },
                            tax_bill_tax_year: { editable: false, type: "number" },
                            tax_bill_pay_year: { editable: false, type: "number" },
                            included_flag: { editable: false, type: "string" }
                        }
                    }
                },
                transport: {
                    create: {
                        url: "@Url.Action("ParcelInfoUpdate", "Home")",
                        dataType: "json",
                        type: "POST",
                        cache: false,
                        complete: function (e) {
                            $(".parcelInfoGrid").data("kendoGrid").DataSource.read();
                        }
                    },
                    read: {
                        url: ('@(Url.Action("ParcelInfoRead", "Home"))?number=' + tabId),
                        dataType: "json",
                        cache: false
                    },
                    update: {
                        url: "@Url.Action("ParcelInfoUpdate", "Home")",
                        dataType: "json",
                        type: "POST",
                        cache: false,
                        complete: function (e) {
                            $(".parcelInfoGrid").data("kendoGrid").DataSource.read();
                        }
                    },
                    destroy: {
                        url: "@Url.Action("ParcelInfoDelete", "Home")",
                        dataType: "json",
                        type: "POST"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                }
            });

            $(".parcelInfoGrid").kendoGrid({
                dataSource: taxDetailDataSource,
                navigatable: true,
                scrollable: true,
                selectable: "row",
                change: onChange,
                columns: [
                    { field: "included_flag", title: "Included" },
                    { field: "source_code", title: "Source" },
                    { field: "tax_bill_tax_year", title: "Tax Year" },
                    { field: "tax_bill_pay_year", title: "Pay Year" }
                ]
            });
        }

        var lastSelection;

        function onChange(arg) {

            var currentSelection = arg.sender.select().attr("data-uid");
            if (lastSelection && currentSelection != lastSelection) {

                var text = "";
                var grid = this;
                var dataItem = "";
                grid.select().each(function () {
                    dataItem = grid.dataItem($(this));
                    text = dataItem.property_id;
                });
                alert(text);
            }
            lastSelection = currentSelection;

            var taxDetailDataSource = new kendo.data.DataSource({
                schema: {
                    type: "json",
                    model: {
                        id: "property_id",
                        fields: {
                            ptr_number: { editable: false, type: "string" },
                            tax_year: { editable: false, type: "number", },
                            property_id: { editable: false, type: "string" },
                            source_code: { editable: false, type: "string" },
                            tax_bill_tax_year: { editable: false, type: "number" },
                            tax_bill_pay_year: { editable: false, type: "number" },
                            included_flag: { editable: false, type: "string" }
                        }
                    }
                },
                transport: {
                    create: {
                        url: "@Url.Action("ParcelInfoUpdate", "Home")",
                    dataType: "json",
                    type: "POST",
                    cache: false,
                    complete: function (e) {
                        $(".taxDetailGrid").data("kendoGrid").DataSource.read();
                    }
                },
                read: {
                    url: ('@(Url.Action("ParcelInfoRead", "Home"))?number=' + text),
                    dataType: "json",
                    cache: false
                },
                update: {
                    url: "@Url.Action("ParcelInfoUpdate", "Home")",
                dataType: "json",
                type: "POST",
                cache: false,
                complete: function (e) {
                    $(".taxDetailGrid").data("kendoGrid").DataSource.read();
                }
            },
                destroy: {
                url: "@Url.Action("ParcelInfoDelete", "Home")",
                dataType: "json",
            type: "POST"
        },
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            }
        }
    }
        });

        $(".taxDetailGrid").kendoGrid({
            dataSource: taxDetailDataSource,
            navigatable: true,
            scrollable: true,
            columns: [
                { field: "included_flag", title: "Included" },
                { field: "source_code", title: "Source" },
                { field: "tax_bill_tax_year", title: "Tax Year" },
                { field: "tax_bill_pay_year", title: "Pay Year" }
            ]
        });
        }
    });
</script>

[Atanas Korchev]

Hello,

Indeed the tabstrip doesn't remove the content of the hidden tabs when the user changes them. You should make sure you are not initializing the same widget multiple times. For example you can try calling kendo.destroy inside the bind function.

If you need further assistance please attach here a runnable demo which shows the problem. You can use the Kendo UI Dojo to create one.

Regards,
Atanas Korchev
Telerik