So right now I have a grid that uses detailTemplate to load a detail tabbed view.  I want to have each tab display its own grid.  The first tab works perfectly, but I can't seem to get the second tab to do anything at all.  Right now I am trying to keep it simple be having the second tab display the same results set from the first tab.  I have two identical JSON objects I am using to load both tabs.  I figured testing a second tab would be easy by re-using what I did in the first, just to use as a proof-of-concept.  Am I initializing this wrong?  Can I only have one grid in a tabbed grid detail template?  I'm guessing I am missing something critical in how detailTemplates can be used.

Thanks for any help!

<!--Consumer Grid-->
<div id="consumerGridContainer" style="height: 100%; width: 100%; margin-top: 2.5em;">
    <span id="consumerGridToolbar" data-for="consumerGrid"></span>
    <div id="consumerGrid" style="height: 100%; width: 100%" class="demo-section" name="consumerGrid"></div>
</div>
<script type="text/x-kendo-template" id="template">
<div class="tabstrip">
    <ul>
        <li class="k-state-active">
            Accounts
        </li>
        <li class="k-state-active">
            Relations
        </li>
    </ul>
    <div>
        <div class="Accounts"></div>
    </div>
    <div>
        <div class="Relations"></div>
    </div>
</div>
</script>
<script>
var initGrid = function () {
    //initialize consumer grid
    dataSource = new kendo.data.DataSource({
        data: JSON.parse(xmlGroups),
        autoSync: true,
        schema: {
            model: {
                id: "ID",
                fields: {
                    Checked: { type: "check" },
                    ID: { type: "string" },
                    GroupID: { type: "string" },
                    Group_Name: { type: "string" },
                    Consumer_Name: { type: "string" },
                    Group_Status: { type: "string" },
                    Consumer_Status: { type: "string" },
                    Client_Type: { type: "string" },
                }
            }
        },
        pageSize: 50
    });
    grid = $("#consumerGrid").kendoGrid({
        dataSource: dataSource,
        pageable: {
            sortable: true,
            buttonCount: 5,
            pageSize: 50
        },
        height: "55em",
        selectable: "row",
        scrollable: true,
        sortable: true,
        navigatable: true,
        reorderable: true,
        filterable: true,
        columnMenu: true,
        resizable: true,
        groupable: {
            messages: {
                empty: "Drag and drop column headers here to group consumers."
            }
        },
        columns: [
            {
                field: "ID",
                width: 1
            }, {
                field: "Checked",
                title: "",
                width: 75,
                template: function (data) {
                    return '<input type="checkbox" ' + ' data-name="' + data.ID + '"' + '/>';
                }
            }, {
                field: "Group_Name",
                title: "Group Name"
            }, {
                field: "Consumer_Name",
                title: "Consumer Name"
            }, {
                field: "Group_Status",
                title: "Group Status"
            }, {
                field: "Consumer_Status",
                title: "Consumer Status"
            }, {
                field: "Client_Type",
                title: "Consumer Type"
            }
        ],
        detailTemplate: kendo.template($("#template").html()),
        detailInit: initGridDetail,
        dataBinding: function (e) {
            //store the uids of selected rows
            $("#consumerGrid input:checked").each(function () {
                uIds.push($(this).parent().parent().data("uid"));
            });
        },
        dataBound: function (e) {
            if (uIds.length != 0) {
                for (var i = 0; i < uIds.length; i++) {
                    var curr_uid = uIds[i];
                    this.tbody.find("tr[data-uid='" + curr_uid + "']").find("td input[type=checkbox]").attr("checked", "checked");
                }
            }
        },
    });
}
function initGridDetail (e) {
            {
                //get calling grid's data
                var detailRow = e.detailRow;
                //create tabstrip with animation
                detailRow.find(".tabstrip").kendoTabStrip({
                    animation: {
                        open: { effects: "fadeIn" }
                    }
                });
                //find class Accounts in template
                detailRow.find(".Accounts").kendoGrid({
                    dataSource: {
                        data: JSON.parse(xmlAccounts),
                        autoSync: true,
                        schema: {
                            model: {
                                id: "External_ID",
                                fields: {
                                    External_ID: { type: "string" },
                                    Policy_Number: { type: "string" },
                                    Account_Name: { type: "string" },
                                    Account_Type: { type: "string" },
                                    Tax_Type: { type: "string" },
                                    Issue_Date: { type: "string" },
                                    Issue_Age: { type: "string" },
                                    Discipline: { type: "string" },
                                }
                            }
                        },
                        pageSize: 5,
                        filter: { field: "External_ID", operator: "eq", value: e.data.ID }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                        { field: "Policy_Number", title: "Policy" },
                        { field: "Account_Name", title: "Account Name"},
                        { field: "Account_Type", title: "Account Type" },
                        { field: "Issue_Date", title: "Issue Date" }
                    ]
                });

                //find class Accounts in template
                detailRow.find(".Relations").kendoGrid({
                    dataSource: {
                        data: JSON.parse(xmlAccounts2),
                        autoSync: true,
                        schema: {
                            model: {
                                id: "External_ID",
                                fields: {
                                    External_ID: { type: "string" },
                                    Policy_Number: { type: "string" },
                                    Account_Name: { type: "string" },
                                    Account_Type: { type: "string" },
                                    Tax_Type: { type: "string" },
                                    Issue_Date: { type: "string" },
                                    Issue_Age: { type: "string" },
                                    Discipline: { type: "string" },
                                }
                            }
                        },
                        pageSize: 5,
                        filter: { field: "External_ID", operator: "eq", value: e.data.ID }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                        { field: "Policy_Number", title: "Policy" },
                        { field: "Account_Name", title: "Account Name" },
                        { field: "Account_Type", title: "Account Type" },
                        { field: "Issue_Date", title: "Issue Date" }
                    ]
                });

            }
        }
</script>

In the old telerik:RadScheduler control you could use insertAppointment() to dynamically insert a new appointment without any interaction from the user.

In the Kendo Scheduler, there is a method called 'addEvent' but it pops up the editing dialogue.
Is there a way to add a new event without going through the dance of the edit popup?

My first thought was to hack the 'OnEdit' event to look for some magic property on my new event and cancel the popup and just call save. Unfortunatly this doesn't seem to be a viable option as e.preventDefault() doesn't seem to work when used in an edit event handler.

any thoughts?

Dear sir,
              is it possible to add some extra field to scheduler which i need to inserted in the database 

i.e 
taskId
title
start
end
startTimezone
endTimezone
description
recurrenceId
recurrenceRule
recurrenceException
ownerId
isAllDay

other than above fields

i need to insert 

Attendies,
Type,
Deadline/Duration,
Priority,
Label As

etc


is it possible to insert it to database via scheduler  and  as well as i need to edit those fields in scheduler 
and how to insert those datas and save to DB and how to edit those datas
please give me the sample for above thread

thanks & regards
-santhosh

Hello there,

I'm trying to refactor the UX of my App.

I want to remove the footer (with 2 buttons) and instead let the user swipe right or left to display not a menu but an entire page, like if there was 3 completely different pages on the app that the user can access by simply swiping left or right.

As my two pages wrapped into the drawer contain a simple list, it should work fine (I think) but my problem is that I can't swipe back to the main page when I put the drawer with a width of 100% since the menu button will be outside the current view and there is no way to go back to the main page.

How can I fix this ? or is there a better way to do it ?

Many Thanks

Attached is a screen shot of what happen when I put the drawer with to 100%. I can't go back to the main page.

Hello,

 I'm having trouble finding a solution that allows me to retrieve a node within a treeview that ignores the case type.

 The code below works if the correct case is supplied.

  var ds = treeview.dataSource;
  var node = ds.get(path[0]);

Is there a simple way to ignore the case on the data source?

Regards

Paul

I've been trying to use chart and sparkline.

I have a few questions:
1) I've read in the forum that there should be no difference between the two except visual differences (http://www.telerik.com/forums/sparkline-vs-chart-efficiency-).
This doesn't seem to be the case: http://plnkr.co/edit/12gvS94rPTrR7t35wCCH?p=preview
I've created a chart (http://plnkr.co/edit/12gvS94rPTrR7t35wCCH?p=preview) and then a sparkLine (http://plnkr.co/edit/6LRb16QIgUuoWAbxLuyq?p=preview) with the same configuration (same datasource and same options file) and it gives an error when creating the sparkline but not when creating the chart.
2) How can I get the "sparkLine" effect in a "chart", or if it's easier, how to make the "sparkLine" look as good as a chart?
3) I've read these posts:
http://www.telerik.com/forums/get-chart-coordinates-for-mouse-position
http://www.telerik.com/forums/mouse-position---data---position-are-not-the-same-values
They show how to get mouse position in Silverlight and WPF.
How can I get the mouse coordinates using javascript/jQuery? 

Thanks

 

Lets say I have a listview, and I wish to dynamically add a row to by inserting an <li> to the existing list <ul> using JavaScript.  The new row will not have the styling to mimic the mobile application, it looks like a plain <li> stuck in the middle of the list.

I understand why this problem happens, because the CSS classes are dynamically added to the plain HTML when the page loads.  But, is there a way to tell Kendo UI Mobile's JavaScript to "re-parse" the HTML to style up any dynamic additions to the HTML?

Thanks.

Hi,

I have a grid which is bound to client side data. I use pagesize and virtual scrolling to help with performance as I am using a kendo sparkline in each row (not shown in demo).  I am seeing an issue with the aggregate values I have in the footer, this is using the built in #=sum# template. when the grid first binds the aggregates are correct, but as you scroll down to the next page the aggregates change to only represent that page of data. If you then sort it refreshes back to the full amount of data.  Here is a plunker showing the symptom:

http://plnkr.co/edit/THTGzE?p=preview

Hi,
I've a grid with detail template (another grid), all of them were defined in declarative manner, the detail grid have some columns, one of them have a defined template, but the problem is the scope of this template.

If I intended to use the column 'field' attribute, it keep always undefined, and from some inspections, I knew that it always see the parent grid row, not the detail one.

See this jsfiddle

Hi

I have a problem with Kendo Scheduler in IE8. The problem also appears on your demo site - http://demos.telerik.com/kendo-ui/web/scheduler/events.html
When selecting a cell, it is selected, the color changes. When I want to select another one, I have to click two times - once to deselect actual selection and once to select another cell. 
For now I only found this problem on IE8.

Regards
Pawel