This is a migrated thread and some comments may be shown as answers.

Id of node when clicked on tree and pass it as parameter to grid!

2 Answers 512 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Catalin
Top achievements
Rank 1
Catalin asked on 25 Oct 2012, 10:38 AM
How do I get the ID of a node in a Kendo treeview from a  remote JSON and put it as a variable to use in a grid's remote datasource url as parameter?

Here is the code for tree:
<script id="treeview-template" type="text/kendo-ui-template">
            #: item.Name #
        </script>   
         <script>
             var meterid = 1179;
 
             var treeurl = 'treeview_remote_url';
             var datatree = new kendo.data.HierarchicalDataSource({
                 transport: {
                     read: {
                         url: treeurl,
                         dataType: "json",
                         cache: true
                     }
                 },
                 schema:
                                 {
                                     model:
                                     {
                                         children: "Children",
                                         fields:
                                         {
                                             id: { type: "number" },
                                             Name: { type: "string" }
                                         }
                                     }
                                 }
             });
 
             function onSelect(e) {
                 var treeview = $("#treeview").kendoTreeView({
                     select: function () {
                         meterid = ($(this).text());
                     }
                 });
                 $("#grid").data("kendoGrid").dataSource.read();
             }
 
             $(document).ready(function () {
                 $("#treeview").kendoTreeView(
                                 {
                                     template: kendo.template($("#treeview-template").html()),
                                     dataSource: datatree,
                                     dataTextField: "id"
                                 });
 
                 var treeview = $("#treeview"),
                                     kendoTreeView = treeview.data("kendoTreeView");
 
                 treeview.on("click", ".k-in", function (e) {
                     kendoTreeView.toggle($(e.target).closest(".k-item"));
                     onSelect();
                 });
             });

... and here is the code for grid:
<script>
                var dateRegExp = /^\/Date\((.*?)\)\/$/;
                function toDate(value) {
                    var date = dateRegExp.exec(value);
                    return new Date(parseInt(date[1]));
                }
                sourceUrl = "grid_remote_url... &id=" + meterid;
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: sourceUrl
                            },
                            refresh: true,
                            serverSorting: true,
                            scrollable: true
                        },
                        height: '100%',
                        scrollable: {
                            virtual: false
                        },
                        columns: [
                            { field: "data", title: "Date/Time", template: '#= kendo.toString(toDate(data), "dd/MM/yyyy HH:ss")#', width: '10%' },
                            { field: "valoare", title: "Energy (MWh)", template: '#= kendo.toString(valoare, "n5")#' },
                            { field: "valoare", title: "Energy (MWh)", template: '#= kendo.toString(valoare, "n5")#' }
                        ]
                    });
                });
            </script>

Any help will be apreciated. Thanks!

2 Answers, 1 is accepted

Sort by
0
Catalin
Top achievements
Rank 1
answered on 26 Oct 2012, 10:58 AM
Thanks anyway.. I figured out using Keith's and Alex Gyoshev's help from ID field for nodes loaded from data source.

$("#treeview").kendoTreeView({
    template: "#= item.text #<input type='hidden' class='data-id' value='# item.id #' />"
});

and

$(e.node).find('.item-id').val();


What satisfaction comes when you see that you solved a problem that lasted a few days..
0
Princess
Top achievements
Rank 1
answered on 13 Dec 2012, 07:55 AM
@Catalin

Where do you put this: 

$("#treeview").kendoTreeView({
    template: "#= item.text #<input type='hidden' class='data-id' value='# item.id #' />"
});

I tried to put it in the document.ready and this $(e.node).find('.item-id').val();  on the onSelect event of the treeview but the result is undefined.


Tags
TreeView
Asked by
Catalin
Top achievements
Rank 1
Answers by
Catalin
Top achievements
Rank 1
Princess
Top achievements
Rank 1
Share this question
or