we having issues regarding implementation of hierarchy grid have experienced difficulties replicating functionality our custom data source illustrated below:
var datasource1 = [
{ id: “1” , firstname: “john”, lastname: “smith”, title: “mr”},
{ id: “2” , firstname: “jane”, lastname: “doe”, title: “miss”},
{ id: “3” , firstname: “bruce”, lastname: “wayne”, title: “mr”} ];
var datasource2 = [
{ id: “1” , data1: “1001”, data2: “2900”, data3 “y”},
{ id: “2” , data1: “1002”, data2: “2901”, data3 “y”},
{ id: “3” , data1: “1003”, data2: “2902”, data3 “n”} ];
we require assistance following questions:-
how create detailed link based upon id i.e. when client click on tab button display data source id 1?
+--------------+---+------+-------+----+ | | 1 | john | smith | mr | +--------------+---+------+-------+----+ | detailed tab | 1 | 1001 | 2900 | y | +--------------+---+------+-------+----+ can advised how can achieved local data source , developing in html java scripts.
please find below our example code trying filter work
<!doctype html> <html> <head> <title>detail template</title> <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet"> <link href="../../../styles/kendo.common.min.css" rel="stylesheet"> <link href="../../../styles/kendo.default.min.css" rel="stylesheet"> <script src="../../../js/jquery.min.js"></script> <script src="../../../js/kendo.web.min.js"></script> <script src="../../content/shared/js/console.js"></script> <script> </script> </head> <body> <script type="text/x-kendo-template" id="template"> <div class="tabstrip"> <ul> <li class="k-state-active"> orders </li> </ul> <div> <div class="orders"></div> </div> </div> </script> <div id="grid1"></div> <script> var datasource1 = [ { id: "1" ,fristname: "jhon", lastname: "smith", title: "mr"}, { id: "2" ,fristname: "jane", lastname: "doe", title: "miss"}, { id: "3" ,fristname: "bruce", lastname: "wayne", title: "mr"}, ]; var datasource2 = [ { id: "1" , data1: "1001", data2: "2900", data3: "y"}, { id: "2" , data1: "1002", data2: "2901", data3: "y"}, { id: "3" , data1: "1003", data2: "2902", data3: "n"}, ]; $("#grid1").kendogrid({ datasource: datasource1, detailinit: detailinit, detailtemplate: kendo.template($("#template").html()), toolbar: ["save", "cancel"], columns: [ { field:"id",title:"id" }, { field:"fristname",title:"fristname" }, { field:"lastname",title:"lastname" }, { field:"title",title:"title" }, ], editable : true, }); function detailinit(e) { var detailrow = e.detailrow; detailrow.find(".tabstrip").kendotabstrip({ animation: { open: { effects: "fadein" } } }); detailrow.find(".orders").kendogrid({ datasource: datasource2, filter: { field: "id", operator: "eq", value: e.data.id }, scrollable: false, sortable: true, pageable: true, columns: [ { field:"id",title:"id" }, { field:"data1",title:"data1" }, { field:"data2",title:"data2" }, { field:"data3",title:"data3" }, ], editable : true, }); } </script> </body> </html> thanks,
you need place 2 kendo grids achieve this,parent grid , child grid.
first grid (parent grid)
@(html.kendo().grid<xyz.models.viewmodels.abcmodel>() .name("parentgrid") .columns(columns => { columns.bound(e => e.a).title("abc").width(30); columns.bound(e => e.b).title("efg").width(30).headerhtmlattributes(new { style = "background-color:#996666;" }); columns.bound(e => e.c).title("ijk").width(30).headerhtmlattributes(new { style = "background-color:#996666;" }); columns.bound(e => e.d).title("mno").width(30).headerhtmlattributes(new { style = "background-color:#996666;" }); columns.bound(e => e.e).title("xyz.").width(30).headerhtmlattributes(new { style = "background-color:#996666;" }); }) //.scrollable() .detailtemplateid("template") .htmlattributes(new { style = "height:100%; background-color: #fcfedf;" }) .htmlattributes(new { @class = "tablemain" }) .datasource(datasource => datasource .ajax() // .pagesize(6) .read(read => read.action("hierarchybinding_abc", "profit")) ) .events(events => events.databound("databound")) //.columnmenu() // .scrollable() //.sortable() //.pageable() ) second grid (child grid).as can see child grid takes "#=cid" function "hierarchybinding_xyz"
<script id="template" type="text/kendo-tmpl"> @(html.kendo().grid<abc.models.viewmodels.abcmodel>() .name("grid_#=cid#") .columns(columns => { columns.bound(e => e.a).title("123").width(30); columns.bound(e => e.b).title("456").format("{0:n3}").width(30); columns.bound(e => e.c).title("789").format("{0:n3}").width(30); columns.bound(e => e.d).title("101").format("{0:n3}").width(30); columns.bound(e => e.e).title("112").format("{0:n3}").width(30); }) .datasource(datasource => datasource .ajax() // .pagesize(5) .read(read => read.action("hierarchybinding_xyz", "profit", new { cid = "#=cid#" })) ) .totemplate() ) </script> extra code added :-
<script> function databound() { var grid = this; $(".k-hierarchy-cell").css({ width: 8 }); $(".k-hierarchy-col").css({ width: 8 }); } </script> <style> .k-grid tbody .k-grid .k-grid-header { display: none; } hope helps you.good luck :)
Comments
Post a Comment