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>

Hi,

I can't find how to create a TabStrip dynamically with Kendo UI Mobile. I don't care if I have to create <li> with jQuery and then call kendoMobileTabStrip() :) But even that don't work, I'm not sur this function exists in fact.

Any advice?

I am having trouble figuring out how to format my datasource for a sharepoint 2013 list using it's vanilla web service.  I am simply trying to read, nothing else, but something just isn't clicking correctly.  Here is what I have:

​<script>
var listServiceURL = "http://devsite/_api/web/lists('<List GUID>')/items";

var datasource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: listServiceURL,
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
},
schema: {
data: "d.results",
model: {
id: "ID",
fields: {
ID: { editable: false, nullable: false },
Title: { validation: { required: true } },
}
}
},
pageSize: 20,
});

$(document).ready(function () {
$("[id$=companyGrid]").kendoGrid({
dataSource: datasource
});
});
</script>

If the date for kendoDateTimePicker is changed by typing it in and then the time is changed by using the ‘Clock’ icon, the changed date returns to its original value.

Hi, when a boolean which is required is shown on a Grid and i try to create a new element or update one i get an error:
 "[Column Title] is required"

I must set it true to make it work.

You can reproduce this problem on the demo page http://trykendoui.telerik.com/uwEd when you try to create or update an element with the field Discontinued unchecked.

Thanks.

Hi,

Before updating from 2013 Q3 to 2014 Q1 SP2, I could use a function in series.tooltip.template. This function could return a string with some #: ... # tags. 

Now the returned string (from the fonction) does not have its #: ... # tags replaced. Using series.tooltip.template = "a string with #: templates #" works, but not if it's returned from the function. 

Thanks

Hello,

i build a mobile web using grids adaptive rendering. It works fine.

I also use several listviews to show data from a rest-service.

During loading data from service i use   

      kendo.mobile.application.showLoading();

to tell the user that the app is loading data.

So far so good.

The grid use its own loading animation which is different to the loading animation in the mobile application.
Also the mobile application use different animations for different platforms.

I would have same look an feel in the hole mobile application.

How do i use the animation from the mobile application when the grid is loading data ?

Regards

Jürgen

Hello,
I have simple treeview:

@(Html.Kendo().TreeView().Name("qwerty").BindTo(new List<TreeViewItemModel>()
                             {
                                 new TreeViewItemModel
                                 {
                                     Id ="1",Text = "Test", Enabled = false, Checked = true
                                 }
                             
                             })
                            .Checkboxes(config => config.CheckChildren(true)))

but it seems that Enabled property doesn't work, node is still enabled.
Is there any option to disable node using MVC wrapper?

I'm sorry. My English is not good.

When I press the delete button inside the Grid, the row has deleted, but does not change the original data
Please tell me how to solve this problem

Here is a fiddle:http://jsfiddle.net/64jM3/1/

Source Code:
Html:

JavsScript:

Hi all!

I have some trouble with kendo ui for jsp. Folloved this tutorial from the first part.
Ok, I have a table and data in it. When I try to update some row click button update and have Exception.
I checked in browser what data it send's (Form Data) and found next. But in the example I found enother result. What am I doing wrong?