Hi, i'm trying to implement mouse wheel zoom in a scatter chart, but encounter some issues.

I'd like to do the following:

- Zoom in to a fixed max zoom level, can't find support for this in API docs

- Zoom out to the original zoom level, currently it seems to be to be locked to maximum extents based on data points, so if my original max/min are larger than the max/min of the data, I can't return to original view.

Examples:
With data points covering large part of original extents (can zoom out to similar to original view after zooming in): https://dojo.telerik.com/ABayehoT

With data points only in positive quadrant (zoom out only shows small part of original view after zooming in): https://dojo.telerik.com/ABayehoT/2

Hi,

I am having  the following requirement related to the column header menu.

In my grid, when the horizontal scroll bar is visible, the column menu (three dots icon) should be shown in the column headers. The column header menu should have filtering, lock and unlock options.

When the horizontal scroll bar is not visible (in other words when the user is able to see the whole content of the grid without scrolling horizontally), the column header should have the column filter option. There shouldn't be a column menu.

Either of these can be done at the point of grid initialization. But I'm having trouble changing them dynamically. This is needed because we also provide a separate control to show/hide the columns in the grid so the total width of the grid can change based on the total visible column width. 

Is there a way to add/remove the column menu dynamically on the column headers? 

Thanks.

Asela

Hello,

Is it possible to prevent line overlapping on multiple axis chart? On second sample, purple line completely hide blue line, so we have to show markers.

Thank you in advance,

Ruben.

Hi,

I want to use the grid on google maps and I created custom control and when I try to use grid it doesn't work. I also don't get any errors on my console.

Kendo grid doesn't show in #routeGrid

and my script is as follow;

var map = null;
function CenterControl2(controlDiv, map) {

    // Custom Control
    var controlUI = document.createElement('div');
    controlUI.style.marginTop = '15px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    //controlUI.style.backgroundColor = 'white';
    controlUI.className = 'col-xs-12 col-sm-12 col-md-12 col-lg-12';
    controlUI.title = 'Please click to see';
    controlDiv.appendChild(controlUI);

    var controlText = document.createElement('div');
    controlText.innerHTML = '<div id="routeGrid"></div>';
    controlUI.appendChild(controlText);
}

function initialize() {

    if (map == null) {
        var mapTypeIds = [];
        for (var type in google.maps.MapTypeId) {
            mapTypeIds.push(google.maps.MapTypeId[type]);
        }
        mapTypeIds.push("OSM");

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: new google.maps.LatLng(36.1447400, -5.3525700),
            gestureHandling: 'cooperative',
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: false,
            zoomControl: true,
            mapTypeControl: false,
            streetViewControl: false,
            mapTypeControlOptions: {
                mapTypeIds: mapTypeIds
            }
        });


        //Custom Control
        var centerControlDiv = document.createElement('div');
        centerControlDiv.id = 'shipmapdiv';
        var centerControl = new CenterControl2(centerControlDiv, map);
        centerControlDiv.index = 1;
        centerControlDiv.style.zIndex = '3';
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(centerControlDiv);

        var maptiler = new google.maps.ImageMapType({
            getTileUrl: function (coord, zoom) {
                var tilesPerGlobe = 1 << zoom;
                var x = coord.x % tilesPerGlobe;
                if (x < 0) {
                    x = tilesPerGlobe + x;
                }
                // See above example if you need smooth wrapping at 180th meridian
                return "http://tiles.openseamap.org/seamark/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
            },
            tileSize: new google.maps.Size(256, 256),
            name: "OpenStreetMap",
            isPng: true,
            maxZoom: 18,
            opacity: 1
        });

        map.overlayMapTypes.insertAt(0, maptiler);

        google.maps.event.trigger(map, 'resize');
        google.maps.event.addListener(map, 'tilesloaded', function () {
            var mapDiv = document.getElementById("map");
            if (mapDiv.style.visibility != "visible")
                mapDiv.style.visibility = "visible";
        });
    }
}

var rg = null;
rg = $("#routeList").kendoGrid({
    dataSource: {
        //data: [{ r_Id: null, PortName: null, Type: null, Distance: null, SecaDistance: null, SeaTime: null, PortTime: null, ManoTime: null, OrderNo: 0, Port: { PortName :null} }],
        type: "json",
        change: function (e) {
            if (e.items.length > 0) {
                if (e.action == "remove") {
                    PortRemove(e.items[0]);
                }
                else if (e.action == "itemchange") {
                    if (e.field == "port") {
                        var message = e.items[0].PortName;
                        if (e.items[0].port != undefined) {
                            e.items[0].PortName = e.items[0].port.PortName;
                            e.items[0].isSECA = e.items[0].port.isSECA;
                            var myLatLng = { lat: e.items[0].port.LatDec, lng: e.items[0].port.LonDec };
                            if (e.items[0].marker != null)
                                e.items[0].marker.setMap(null);

                            var marker = new google.maps.Marker({
                                position: myLatLng,
                                map: map,
                                title: e.items[0].port.PortName,
                                portInfo: e.items[0]
                            });
                            PortAdd(marker);
                        }
                    }
                }
            }
        },
        schema: {
            data: "data",
            model: {
                fields: {
                    r_Id: { type: "number" },
                    PortName: { type: "string" },
                    isSECA: { type: "boolean" },
                    Type: { type: "string" },
                    Distance: { type: "number", editable: false },
                    SecaDistance: { type: "number" },
                    Speed: { type: "number" },
                    SeaTime: { type: "number", editable: false },
                    PortTime: { type: "number" },
                    ManoTime: { type: "number" },
                    OrderNo: { type: "number", editable: true }
                }
            }
        },
        pageSize: 10

    },
    height: 350,
    selectable: "row",
    toolbar: ["create", "save"],
    groupable: false,
    sortable: true,
    //change: onChange,
    edit: onLegAdd,
    remove: onLegRemove,
    editable: { createAt: "bottom", mode: "inline" },
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [{
        field: "r_Id",
        hidden: true
    },
    {
        command: ["edit", "destroy"], title: "&nbsp;", width: "180px", locked: true, lockable: false
    },
    {
        field: "port",
        title: "Port",
        editor: PortDropdown,
        template: '#:PortName #',
        // template: "#= (data.description ? data.description.name : '') #",
        width: 210,
        hidden: false,

    },

    {
        field: "Type",
        width: 120,
        title: "Type",
        defaultValue: "Load",
        editor: TypeDropdown
    },
    {
        //field: "IsSECA",
        width: 100,
        title: "SECA?",
        //defaultValue: false,
        template: '<input type="checkbox" #= isSECA ? \'checked="checked"\' : "" # class="chkbx" />'
    },
    {
        field: "Speed",
        width: 100,
        title: "Speed"
    },
    {
        field: "Distance",
        width: 120,
        title: "Distance"
    },
    {
        field: "SecaDistance",
        width: 120,
        title: "SECA Distance"

    },
    {
        field: "SeaTime",
        width: 120,
        title: "Sea Time"
    },
    {
        field: "PortTime",
        width: 120,
        title: "Port Time"
    },
    {
        field: "ManoTime",
        width: 120,
        title: "Mano. Time"
    },
    {
        field: "OrderNo",
        width: 120,
        title: "No",
        hidden: true
    }]
});

Hello,

The page https://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions states that Kendo UI 2018.3 is compatible with jquery 3.3.1. At the same time jquery-migrate still reports compatibility warnings. For example, run this dojo: https://dojo.telerik.com/ADAYuqom You will see following warnings in the browser's console:

• JQMIGRATE: jQuery.expr[':'] is deprecated; use jQuery.expr.pseudos
• JQMIGRATE: jQuery.expr.filters is deprecated; use jQuery.expr.pseudos
• JQMIGRATE: jQuery.event.props.concat() is deprecated and removed
• JQMIGRATE: jQuery.fn.click() event shorthand is deprecated

You might get additional warnings from specific components (e.g. when you open kendo datepicker)

What does it mean when you wrote that "Kendo UI 2018.3 is compatible with jquery 3.3.1"? Is it fully tested and can be used in production?

I configured a filterable table, and when exporting it to PDF, I want to hide the filter icons (k-grid-filter).

I tried to set them to display none, but they get hidden also in the grid on the webpage, not on the pdf. I want to hide them on the PDF only

I have the following schema for my TreeView:

And here is the TreeView definition:

How do I set the title attribute (i.e. tool tip text) on each tree node so it has the value of the description field?

I've done it with the Kendo MVC using LinkHtmlAttributes. Is there something similar in Kendo UI for jQuery?

Thanks, Gregg

Hello. 

I am trying to figure out how can i hide AllDaySlot, but still see events in the main part.

I've checked https://www.telerik.com/forums/=-24-hour-events-treated-as-all-day topic and any related topics but found no solution.

I can see working example, but for AJAX here: https://demos.telerik.com/aspnet-ajax/scheduler/examples/day-week-multi-day-views/defaultcs.aspx , but i had no luck to find out why and how is it done.

This functionality is required by my client and it's critical.

Looking forward for your answers.

Thank you.