Questions on Kendo UI for jQuery Forum

1 answer

143 views

How to show marker multiple times on a recursive map?

Hi,

When the map is zoom out to world map, continents are duplicated on screen (attached). However the marker only display ones and does not replicate itself on the map.

Is there a way to display the marker on duplicated continents? Thanks!

Here's the code that I have:

$("#map").kendoMap({
zoom: 1,
layers: [{
type: "tile",
urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
subdomains: ["a", "b", "c"],
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
}]
});

var map = $("#map").data("kendoMap");
map.markers.add([{ location: [33.7580, -118.2762]}]);

Map

answered on 18 Jun 2021

1 answer

1.1K+ views

FileManager: How to force a full TreeView refresh?

I overwrote the FileManagers MoveCommand to implement my own logic. Afterwards I do call the FileManagers refresh method. Unfortunately, this seems to update only the ListView/GridView, but not the TreeView.

So, when I move a subfolder between two folders, the folder has been moved correctly, the GridView/ListView then refreshes perfectly, but in the TreeView I can still see the subfolder in the old location (source folder). If I click the TreeViews target folder, the moved subfolder occurs. When I click the TreeViews source folder, the subfolder is still there (although it should not).

How can I force the FileManagers TreeView to do a full refresh (and reload all data)?

Thanks for any advice!

Patrick

FileManager

TreeView

updated answer on 17 Jun 2021

0 answers

387 views

Grid columns misaligned after reload

Hi,

I have a strange issue with grid, and it seems it occurred after I upgraded from 2020 R2 to latest kendo ui version.

I have grids implemented on multiple places and I have 2 themes (Kendo Default and custom dark theme build through theme builder).

When I first load (or reload) page with grid with default (light) theme, it renders normally. If I switch to dark theme everything is fine, but if I load or reload the page with the dark theme, header row misaligns columns with the rest of the grid. (see images).

I even partially debugged and it led me to function

support.scrollbar = function (refresh) {

where support._scrollbar variable is sometimes 0 and sometimes 10 (for the same grid and same data). (it looks to me that sometimes it doesn't take scrollbar into a count when calculating headers). What is also interesting if I try to resize any header column everything snaps back as it should be.

Unfortunately, there is no way I can build replica of everything in dojo, so I would appreciate even vague pointing where to look further.

Thank you very much and regards,

Vedad

Grid

updated question on 17 Jun 2021

1 answer

161 views

Treelist Multicolumn headers locked columns

I am using a treelist with multicolumn headers and I have the left side of the treelist locked with the right side columns scrollable horizontally... In my overall layout I have a left hand menu that expands/collapses.. The treelist loads/appears fine but when I collapse the left nav an issue appears where the headers and exterior of the treelist expands as it should but when scrolling the columns the right side keeps the original size which makes it appear that they are cutoff.. screenshot attached ... should i be calling some type of resize/reinitialize when collapsing/expanding the menu?

TreeList

answered on 17 Jun 2021

1 answer

114 views

datasource override sort parameter name

Hi I have a remote server api that expects the sort params to be "sortBy" (name of field to sort), and "sort" (direction).

How can I change the kendo ui datasource transport read event to send these instead of the default "sort" object.

the below does not work, because Sort is getting overwritten by the underlying kendo code:

data: function (e) {
                        
                        if (e.sort) {
                            var r = { sortBy: e.sort[0].field, sort: e.sort[0].dir };
                            
                            console.log(r);
                            return r;
                        }
                        else return "";
                        
                    }

Data Source

answered on 16 Jun 2021

0 answers

53 views

TreeList Export to PDF button is in rendered PDF

You can look at the kendo demo itself, click "Export to PDF", and you'll see the button. It's not this way in the Kendo Grid though.

Thanks,

Chris

TreeList

asked on 15 Jun 2021

2 answers

8.7K+ views

Getting checkbox value from grid column

I have a grid that has 2 checkboxes in it. Before I send the data to the controller I am looping through the rows to get certain values. I have no issues getting the grid data source and iterating through the rows. I am however running into an issue finding out if the checkboxes are checked or not.

Grid

$("#multipleUploadDetailGrid").kendoGrid({
     dataSource: {
         //data: self.MultipleUploadDetails,
         schema: {
             model: {
                 id: "Id",
                 fields: {
                     DocumentType: { editable: true, field: "DocumentType" },
                     FileName: { editable: false, type: "string" },
                     FileSize: { editable: false, type: "string" },
                     IsConf: { editable: true, type: "boolean" },
                     IsTs: { editable: true, type: "boolean" },
                 }
             }
         }
     },
     pageable: false,
     selectable: false,
     refresh: false,
     editable: true,
     resizable: true,
     reorderable: true,
     noRecords: { template: "<div class='k-grid-norecords-template' style='margin:0 auto;position:static;'>No Files Uploaded</div>" },
     sortable: {
         mode: "multiple",
         allowUnsort: true
     },
     columns: [
         { field: "FileName", title: "Name", width: 150, sortable: true },
         { field: "FileSize", title: "Size", width: 150, sortable: true },
         { field: "DocumentType", title: "Document Type", width: 225, editor: docTypeDropDownEditor, template: "#if (!!data.DocumentType){#<span>#:oir.Utilities.checkNull(DocumentType.Name)#</span>#}else{#<span>No Doc Type</span>#}#"},
         {
             field: "IsConf", title: "Confidential",
             template: "<input name='IsConf' type='checkbox' />", width: 40, sortable: true, headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center;" }
         },
         { field: "IsTs", title: "Trade Secret", template: "<input name='IsTs' type='checkbox' />", width: 40, sortable: true, headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center;" } },
     ],
 });

Code to iterate through datasource.

        var grid = $("#multipleUploadDetailGrid").data("kendoGrid");
        var ds = grid.dataSource.view();
        var dslength = ds.length;
        
        if (dslength > 0) {
            for (var i = 0; i < dslength; i++) {
                var currRow = ds[i];
                //trying to get checkbox value here.
             }
        }

Checkbox

Grid

answered on 15 Jun 2021

1 answer

427 views

MVC Map link multiple markers with arrow line.

Hi,

I am using Kendo MVC Map to display transaction data. With the reference of https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/link-marker-to-location, I am able to draw a path between markers, but I want to show an arrow on the path of map. Below is the code I am using to display map,

<div id="transactionMap">
    @(Html.Kendo().Map()
.Name("map")
.Center(43.76398900, -79.54862200)
.Zoom(15)
.Layers(layers =>
{
    layers.Add()
        .Type(MapLayerType.Tile)
        .UrlTemplate("https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
        .Subdomains("a", "b", "c")
        .Attribution("&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>." +
                     "Tiles courtesy of <a href='https://www.opencyclemap.org/'>Andy Allan</a>")
        .ZIndex(0);

    layers.Add()
        .Style(style => style.Fill(fill => fill.Opacity(0.2)))
        .Type(MapLayerType.Shape)
        .ZIndex(1);

    layers.Add()
        .Type(MapLayerType.Marker)
        .DataSource(dataSource => dataSource
              .Read(read => read.Action("Transaction_Read", "TestReports").Data("TripLogMarkerParam").Type(HttpVerbs.Get))
        )
        .LocationField("LatLng")
        .TitleField("Name")
        
        .ZIndex(2);


})
.Events(e=>e.Reset("onResetMap")   
       ))
</div>

<script src="@Url.Content("~/Content/dataviz/map/js/chroma.min.js")"></script>
<script>
    var geom = kendo.geometry;
    var draw = kendo.drawing;
            
    function TripLogMarkerParam() {

        return {
            tripId: @ViewBag.tripId,
            fromTripLogId: @ViewBag.fromTripLogId,
            toTripLogId: @ViewBag.ToTripLogId
        };

    }

    function onResetMap(e) {
        var map = e.sender;
        var markers = map.layers[2].items;

        for (var i = 0; i < markers.length - 1; i++) {

            linkMarker(map, markers[i], markers[i + 1]);
        }

    }

   
    function linkMarker(map, marker, nextMarker) {
        var dataFrom = map.locationToView(marker.location());
        var nextDataFrom = map.locationToView(nextMarker.location());

        var shapeLayer = map.layers[1];
        var line = new kendo.dataviz.drawing.Path({
            stroke: {
                color: "#FF0000",
                width: 2,
                lineCap: "round"
            }
            
        });
        line.moveTo(dataFrom).lineTo(nextDataFrom);          
        shapeLayer.surface.draw(line);
    }
</script>

Map

answered on 14 Jun 2021

1 answer

161 views

Shared datasource between Grid and map components

Is it possible to synchronize Map and Grid components with a shared datasource ? and have you an example somewhere ?

Regards

Data Source

Grid

Map

answered on 14 Jun 2021

1 answer

339 views

FileManager Prevent Copy on Drag and Drop

Is there a way to remove copy and only confirm Move when dragging and dropping a file?

I tried manipulating options.messages.dialogs.moveConfirm to show only move, but I still have a small button for Copy

filemanager.options.messages.dialogs.moveConfirm.content = '<p style="text-align: center;">Do you want to move file?</p>';
filemanager.options.messages.dialogs.moveConfirm.okText = '';

Drag and Drop

FileManager

answered on 14 Jun 2021