Grid is coming up fine. the detail page , when I attempt to expand... fails:

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        height: 400,
        columns: [
            { field: "org_name" },
            { command: ["edit"], width: 180 }
        ],
        toolbar: ["create", "excel"],
        dataSource: {
            type: "aspnetmvc-ajax",
            transport: {
                read: {
                    url: "ef_org_Read"
                },
                create: {
                    url: "ef_org_Create"
                },
                update: {
                    url: "ef_org_Update"
                }
            },
            schema: {
                data: "Data",
                model: {
                    id: "org_id",
                    fields: {
                        org_id: { type: "number" },
                        org_name: { type: "string" }
                    }
                }
            },
            serverPaging: true,
            serverSorting: true,
            serverSorting: true,
        },
        columnMenu: true,
        editable: "popup",
        pageable: true,
        detailInit: detailInit,
        dataBound: function () {
            this.collapseRow(this.tbody.find("tr.k-master-row").first());
        },
        navigatable: true,
        selectable: "single row",
        sortable: {
            mode: "single"
        },
        filterable: true,
        scrollable: true
    })

    function detailInit(e) {
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
                type: "aspnetmvc-ajax",
                transport: {
                    read: "/admin/ef_sites_Read"
                },
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                pageSize: 10,
                filter: { field: "org_id", operator: "eq", value: e.data.org_id }
            },
            scrollable: false,
            sortable: true,
            pageable: true,
            columns: [
                { field: "Name", width: "110px" },
            ]
        });
    }
   
</script>

Hi, 

I want to create multiple zoom shortcuts for my kendo chart stock. ex: 3 months,6 months, 1 year and all.

Basically, when a user click on the zoom button "3 months", the navigator must cover only three months and the chart must display only three months of data. When "all" is clicked on , the navigator must cover all the available time and the chart must display all data.

Basically the behavior that I want is shown in this link  : behavior wanted

Is there a way to do that using the kendo stock chart ?

Hi-

I'm trying to create master-details grid with Add, edit and delete functionality in both, In details grid i have two columns "Name" (Drop Down) and "Value" (Run time Control). When i will select name than value control should get created in value column as per type mention in Data. So for example if select XXX name and it's type is Date then Date control should be created in value column, if i select other name "ZZZZ" and it's type is list then drop down control should be created in value column at run time. I have 5 types as of now to create run time value control (String, date, Numeric, currency and Drop Down). Along with this i should be able to add, edit and delete master/detail rows.

Any help with code sample in achieving this is deeply appreciated. Below my Master/Detail data where Attributes will get bind to detail section and type will let know which control to create run time.

var Data = [
    {
        "LR_Name": 'Long Term',
        "LRVR_Opt_To_Decline": 'Y',
        "LRVR_Required": 'Y',
        "LPVR_Active": 'Y',
        "Attributes": {
            "Attribute": [
                {
                    "Name": "ABR Duration",
                    "Value": "2",
                    "Type": 'list'

                },
                {
                    
                    "Name": "EBR Duration",
                    "Value": "2",
                    "Type": 'Number'
                    
                }
            ]

        }
    },
    {
        "LR_Rider_Name": 'LTCR',
        "LRVR_Opt_To_Decline": 'Y',
        "LRVR_Required": 'N',
        "LPVR_Active": 'N',
        "Attributes": {
            "Attribute": [
                {
                    "Name": "LTCR Supp Date",
                    "Value": "01-01-2018",
                    "Type": 'date'

                },
                {
                    
                    "Name": "LTCR Supp Amount",
                    "Value": "2500",
                    "Type": 'Currency'
                }
            ]

        }
    },
    {
        "LR_Rider_Name": 'Extended Benefit',
        "LRVR_Opt_To_Decline": 'Y',
        "LRVR_Required": 'N',
        "LPVR_Active": 'N',
        "Attributes": {
            "Attribute": [
                {
                   
                    "Name": "Benefit Type",
                    "Value": "5% Simple",
                    "Type": 'String'

                },
                {
                    
                    "Name": "Benefit",
                    "Value": "10% Simple",
                    "Type": 'String'
                }
            ]

        }
    }
];

Is there a way I can have detail template kind of view on treelist as we have for Grid in the following link.

    https://dojo.telerik.com/uqULUsIk

I need to have detail template for every leaf node of the treeList.

It can be any other component as well as long as it gives the similar look (View occupying 100% width below a leaf element)

Please let me know if there is anyway to achieve this in KendoUI for jQuery.

     Hi,

I'm using Kendo DataSource with templates.But also I've to using Kendo.Tooltip with this Itemtemplate.

I'm wondering if i have any chance to get data without givin a div or any html tag as a data attirbutes from my ItemTemplate to myTooltip template?

Normally you can set data tag with any html tag like this

<div class="col1" data-HistoryType="#:HistoryType#"></div>

and reach data in tooltip like #=target.data('HistoryType')# 

But my problem is a have many data to need to pass tooltip like that.

Here is my code example,

How can I make the grid save when the enter key is pressed? I have tried binding the keycode in the edit handler and that doesn't work.

I have added a kendoNumericTextBox editor for the cell and binded the change event and keydown event to the input. When I edit a cell and then press enter, the keydown event will been fired but the oldValue and newValue are always the same. It seems like the data source for the grid has been changed. 

My code as below:

var dataSource = new kendo.data.TreeListDataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/EmployeeDirectory",
            dataType: "jsonp"
        }
     }
});

We have a defined url here so the data is requested from this single URL and stored.

In my use-case, I need to make 3 sequential server calls before I get the actual data.

That is why I need to intercept the read  function of transport where I can make all the necessary backend calls and combine the results to move forward.

Hi, 

I am creating a detail grid inside a parent grid using kendo UI grid's detail-init property. The Detail grid uses share the same column names of that parent.

On initial load, the detail grid columns widths are same as the parent grid's. When i resize the parent grid column, the  detail grid's column width is not changing accordingly.

How do i set the  detail grid's column width to match of the parent grid column on resize?

So I'm trying this software out as an alternative to Google GeoCharts. I'm ultimately going to be creating an interactive choropleth, but right now I'm just seeing if this will work in Angular 6. I did the npm install, and then in my component I import * as kendo from "@telerik/kendo-intl". (Note that it would be great if you guys supported something other than AngularJS.) 

OnInit I'm calling the function below, but all I get is an error that 'Property 'kendoMap' does not exist on type 'JQuery<HTMLElement>'.

Do I need to actually download the Kendo for jQuery and include everything in my project for this to work? I assumed the npm install would have what I needed.

Anyway, appreciate the help.

createMap() {
    $("#map").kendoMap({
      center: [30.268107, -97.744821],
      zoom: 3,
      layers: [
        {
          type: "tile",
          urlTemplate:
            "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
          subdomains: ["a", "b", "c"],
          attribution:
            "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
        }
      ],
      markers: [
        {
          location: [30.268107, -97.744821],
          shape: "pinTarget",
          tooltip: {
            content: "Austin, TX"
          }
        }
      ]
    });
  }