or
<div id="grid"></div><script type="text/x-kendo-template" id="tab_frs"><div class="tabstrip"><ul><li class="k-state-active">Ville</li><li>Détail Pays</li></ul><div><div class="frs"></div></div><div><div class='frs-details'><ul><li><label>Libelle:</label>#= libelle #</li><li><label>Code:</label>#= code #</li></ul></div></div></div></script><script>$(document).ready(function() {var element = $("#grid").kendoGrid({dataSource: {pageSize:6,height: 450,sortable: true,pageable: true,selectable: "row",resizable: true,filterable: true,serverPaging: true,type: "json",transport: {read:{url: "fic.php?fic=pays",dataType: "json", },update: {url: "fic.php?fic=up_pays",type: "POST"},create: {url: "fic.php?fic=add_pays",type: "PUT"}, destroy: { url: "fic.php?fic=des_pays", dataType: "json", Type: "POST" },},parameterMap: function(options, operation) {if (operation !== "read" && options.models) {return {models: kendo.stringify(options.models)};}},error: function(e) {alert(e.responseText);},schema: {model: {id: "IDpays",fields: {IDpays: { editable: false, nullable: true },libelle: { validation: { required: true } },code: { validation: { required: false} }}}}},detailTemplate: kendo.template($("#tab_frs").html()),detailInit: detailInit,dataBound: function() {this.expandRow(this.tbody.find("tr.k-master-row").first());},toolbar: ["create"],columns: [{title: "ID", field: "IDpays" },{ field: "libelle" },{ field: "code" },{ command: ["edit", "destroy"], title: " ", width: "210px" }],editable: "popup"});});function detailInit(e) {var detailRow = e.detailRow;detailRow.find(".tabstrip").kendoTabStrip({animation: {open: { effects: "fadeIn" }}});detailRow.find(".frs").kendoGrid({dataSource: {type: "json",transport: {read: "fic.php?fic=ville"},pageSize:6,filter: { field: "IDpays", operator: "eq", value: e.data.IDpays }},scrollable: false,sortable: true,pageable: true,selectable: "row",resizable: true,change: function() {document.getElementById("A1").value=this.dataItem(this.select()).IDContact;},columns: [{ field: "IDville",title:"ID", width: 70 },{ field: "libelle", width: 100 },]});}</script>treeview.append({ text: "new item text" }, $(e.node))var treeview = null$(document).ready(function() { treeview = $("#tree").kendoTreeView({ select: onItemSelected, dataSource: [{text: "A"},{text: "B"},{text: "C"},{text: "D"}] }).data("kendoTreeView"); function onItemSelected(e) { for (var ictr = 0; ictr < 5; ictr++) { treeview.append({ text: e.node.innerText + "-" + ictr}, $(e.node)) } }});<script type="text/javascript"> $(document).ready(function () { setTimeout(function () { // Initialize the chart with a delay to make sure // the initial animation is visible createChart(); $("#example").bind("kendo:skinChange", function (e) { createChart(); }); }, 400); }); function createChart() { $("#chart").kendoChart({ theme: $(document).data("kendoSkin") || "black", dataSource: { schema: { data: "d", model: { fields: { location: { type: "string" }, amount: { type: "number" } } } }, transport: { read: { type: "POST", url: "../WebServices/DashboardService.asmx/YTDRevenueByLocation?format=json", contentType: "application/json; charset=utf-8", data: {}, dataType: "json" } }, error: function (e) { alert("Error fetching data from server"); }, change: function (e) { //alert(data); }, requestStart: function (e) { // alert("Request Start"); } }, title: { text: "YTD Revenue By Location" }, legend: { position: "bottom" }, seriesDefaults: { type: "column" }, series: [ { name: "Totals", field: "amount" } ], categoryAxis: { field: "location", labels: { rotation: -90 } }, valueAxis: { labels: { format: "${0}" }, majorUnit: 2000 }, tooltip: { visible: true, format: "${0}" }, dataBound: function onDataBound(e) { alert("Data is bound"); } }); } </script>