Overall, I have to admit, I'm finding the map component to be severely lacking.  Thus far, following the directions at this Authoring Maps, I've successfully gotten a geoJSON file of the US, with Alaska and Hawaii.  But I hate the placement of the Alaska and Hawaii shapes.  I have found several other sites, offering much better geoJSON files, but not a single one of them has worked in the Kendo Map component. The fact that it's limited to geoJSON means it's only useful for geographical mapping, which really doesn't suite my needs either.  I don't care about roads or streets, I just need a US map, with Alaska & Hawaii within decent spacing of the other states for sales figures,for maps showing active licenses, different categories of client clusterings.  I've seen a lot of different Javascript libraries that allow to use SVG images for the maps, which this component doesn't.  

 

I like how fast it is, I like the API into it, but as far as offering good customizable maps, it's severely lacking.

Hello guys, I was wondering how could I add a new layer to the dinamically. My map contains two layers with opacity 0 and I would like to add a third layer to use it like principal.
My code by the moment is this:

@(Html.Kendo().Map()
            .Name("mapwrapper")
            .Center(0, 0)
            .Zoom(2)
            .MaxZoom(16)
            .MinZoom(6)
            .Controls(controls=> controls.Navigator(false).Zoom(zoom=>zoom.Position(MapControlPosition.TopLeft)))
            .Layers(layers =>
            {
                layers.Add()
                     .Type(MapLayerType.Tile)
                     .UrlTemplateId("http://#= subdomain #.TILE_SERVER_URL.com/GeoTileServer/#= x #/#= y #/#= zoom #")
                     .Subdomains("tile1", "tile2", "tile3").Opacity(0);

                
                layers.Add()
                   .Type(MapLayerType.Bing)
                   .ImagerySet(MapLayersImagerySet.AerialWithLabels)
                   .Key("PUBLIC_API_KEY").Opacity(0);

                layers.Add()
                 .Style(style => style.Fill(fill => fill.Opacity(0.5).Color("#4C8FFD")))
                 .Type(MapLayerType.Shape)
                 .DataSource(dataSource => dataSource.GeoJson());


            })
                .Events(events => events
                    .PanEnd("panEnd")
                    .ZoomStart("clearCanvas")
                    .ZoomEnd("zoomEnd")
                    .Click("onMapClick")
                    .ShapeCreated("onShapeCreated")
            )
        )

Then in the document ready by javascript I add the third layer like this:

 $(document).ready(function () {
 var shapes22 = {
                        type: "tile",
                        urlTemplate : "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
                        subdomains : [ "a", "b", "c" ],
                        attribution : "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." + "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>"
                    }

        $("#mapwrapper").data('kendoMap').layers.push(shapes22);
         $("#mapwrapper").data('kendoMap').options.layers.push(shapes22);

        var layers = $(".k-layer");
        layers[2].style.opacity = 1;
}

The object looks good but the map never start downloading the tiles, so like the first two layers have an opacity=0 and the third never download the tiles I get a blank map.

Any solution with this.
Thanks a lot.

I am using Kendo UI v2015.1.408 and I am unable to export in IE11.
It  gives "couldn't be downloaded." error

PS : : I can't move to the latest version of kendo now as we are on the verge of release.

Thanks.

Hello,

 

We have list of flat POJO objects, where objects are dynamic, we don’t know their list of fields/properties at design time. In Silverlight version of telerik Pivot grid we were able to populate list of fields and provide list of objects so that users can create columns, rows and measures at run time.Is this approach feasible with Kendo UI Pivot? Or do we have to define model and cube with dimensions and measures in advance? An example would be very useful.

 

Thank you, Sergey

Hi!

In my timeline, I am currently overriding the Event Template. Based on my model's data, I am trying to add an indicator of an event at a particular time. 

For example

 

12:00             13:00

[           *           ]

 

Are there any features of the Event Templates that will allow me to achieve this?

 

Thanks

 

Chuck

Hi,

I'm trying to have a stacked chart using JSON like data or remote data. 

using the data below I was able to get exactly the chart I wanted dojo Code here

    var data = [
    {"Name":1,"Year":2011,"Expense":200.00, "color":"grey"},
    {"Name":1,"Year":2012,"Expense":274.91,"color":"grey"},
    {"Name":5,"Year":2011,"Expense":100.00, "color":"red"},
    {"Name":5,"Year":2012,"Expense":315.84, "color":"red"},
    {"Name":3,"Year":2011,"Expense":325.84,"color":"orange"}
];

But when I added other rows to this data, the result is not what I was expecting. dojo code here

     var data = [
    {"Name":1,"Year":2011,"Expense":200.00, "color":"grey"},
{"Name":6,"Year":2010,"Expense":205.00 ,"color":"yellow"},
    {"Name":1,"Year":2012,"Expense":274.91,"color":"grey"},
    {"Name":5,"Year":2011,"Expense":100.00 ,"color":"red"},
    {"Name":5,"Year":2012,"Expense":315.84, "color":"red"},
    {"Name":3,"Year":2011,"Expense":325.84 , "color":"orange"},
  {"Name":5,"Year":2013,"Expense":205.00 ,"color":"red"},

What I was expecting is the result of this dojo code

But I was able to do this using this data structure

series: [{
                    name: "name 3",
                    data: [0, 325.4 ,0],
                  color:"orange"
                }, {
                    name: "name 1",
                    data: [0, 200, 274],
                  color:"grey"
                }, {
                    name: "name 5",
                    data: [100, 205, 315.84 ],
                  color:"red"
                },
                  {
                    name: "name 6",
                    data: [205, 0, 0 ],
                    color: "yellow"

                }]

Is there any way to make this work using remote data (Json ) and not  the last data structure that is shown in this post ?

Any help will be appreciated,

Geroj

I am tying to find the values (mostly string) in a Grid (datasource was remotely populated).

The documentation for Grid.change is pretty slim, it does not say what the values of event (e) is, I am assuming, that I have to do a myGrid.select() which will return an array of rows (but the format for the row object is not in the framework). I have used Firebug to look at the object, but this seems a slow path to figure things out. (I.e. I am making a plea for better documentation, to complement the examples).

But for right now, an example of using a Grid (which has selection by multiple rows enabled) and how I find what rows have turned on and which have turned off, and how I get values out of the row (my grid is mostly text), would be very useful.

 

I'm not sure why the menu container is all the way down to the browser bottom.  Did I miss a CSS style sheet?

 

<link rel="stylesheet" href="/Content/Kendo/style.2016.504/kendo.common-fiori.min.css" />
        <link rel="stylesheet" href="/Content/Kendo/style.2016.504/kendo.fiori.min.css"/>
        <link rel="stylesheet" href="/Content/Kendo/style.2016.504/kendo.fiori.mobile.min.css"/>
        <link rel="stylesheet" href="/Content/Kendo/style.2016.504/kendo.mobile.fiori.min.css"/>
        <link rel="stylesheet" href="/Content/Kendo/style.2016.504/kendo.dataviz.fiori.min.css" />

We have a couple Responsive Web Applications (desktop first, responsive to mobile second) that use Kendo UI and either KnockOut or Angular 1.x. We do not use different URL's or serve different pages/content to mobile devices, though the styling and placement of elements is different thanks to CSS Media Queries and some Javascript we've written.

I've seen the demo for the mobile friendly DropDownList and I like the way it works for mobile devices. However, we want to ensure that this version only shows for mobile devices, and not for desktop users. Is there any way to get this kind of behavior?

1) Can we include the mobile stylesheet? Will it apply only to mobile devices?

2) Can we use Kendo UI Mobile in a desktop web app without using kendo.mobile.Application?

3) How do we get Kendo UI Mobile widgets only on mobile devices and have the same widgets show on Desktop in their normal Desktop style/behavior?

 

On the Editor select event I want to move the cursor to the next range depending upon specific criteria. I've seen this link but didnt do what I wanted.

 

Basically I'm using the snippets functionality of Editor control to add MergeFields into the HTML. The snippet looks like this:

 

When a uses selects this MergeField i.e. places the cursor in it I detect it in the select event then I want to programatically move the cursor into the next range (or after the merge span) so that the user cant mess with the merge fields. How do I move cursor to next range or end of MergeField span?

 

The function is below: