Questions on Kendo UI for jQuery Forum

1 answer

448 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

181 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

414 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

1 answer

646 views

kendo datetimepicker is displaying behind dialog

I am using the kendo-ui(2021.2.511) datetimepicker control in my Vuejs 2.x application.

The datetimepicker controls works when used on a page.

But when I use the datetimepicker in a v-dialog, and click the datetimepicker, the control displays behind the dialog for a moment then closes.

Has anyone seen this behavior? Is there a setting or work around to make the datetimepicker work correctly when used in a v-dialog?

DatePicker

answered on 14 Jun 2021

1 answer

203 views

How to achieve 5 digit decimal precision in Currency type column?

In my Application there is column of Currency type. Ex: If there is some value $230.344 coming from database it is displaying as $230.34. When I am entering 230.34 in is equal to filter, it is not filtering this value. No value is displayed.

How can I filter the displayed value in currency column

Filter

Grid

answered on 14 Jun 2021

0 answers

136 views

Sorting child items in each parent item A-Z

Hey all I am trying to find the correct way to order/sort my child names in order from A-Z.

Currently my treeview looks like this:

And this is how I would like to sort it:

The data is coming in via JSON like so (using the above example):

[{
        "Name": "AU",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Gitlab",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "B",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "GitHubCommits",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "GitHub",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Re",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Ir",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Ru",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "LoveA",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "LoveH",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    },.........
]

Note that the JSON above does not come in any type of order. The Category names themselves are in order by me doing this:

dataSource: {
   data: resultData,
   schema: {
       model: {
          children: 'items'
       },
       parse: (data) => {
          let newData = [];

           //Re-order catagory names A-Z
           data.sort((a, b) => (a.Category > b.Category) ? 1 : -1);
....

The rest of the above code looks like this::

           data.forEach(item => {
              let parent = newData.find(parentItem => parentItem.text === item.Category);

              if (!parent) {
                 //The beginning of the tree category
                 parent = {
                     id: 2,
                     text: item.Category,
                     expanded: true,
                     items: [],
                     imageUrl: "" + item.Icon + ""
                 };

                 newData.push(parent);
              }

              parent.items.push({
                 //Each "child" under the above category
                 id: 3,
                 text: item.Name,
                 imageUrl: "" + item.Icon + ""
              });
           });

           return [{
              id: 1,
              text: 'Categories',
              expanded: true,
              items: newData
           }];
       }
   }
 }
});

How would I, using the code above, sort also the child items under each category name?

I've tried already adding this to the code:

sort: {
   field: "Name", 
   dir: "asc"}

But that does not seem to do anything?

Data Source

Sortable

TreeView

updated question on 10 Jun 2021

0 answers

238 views

Reg: Filter options in KendoGrid header template as drop-down list

Hi Team,

Need clarity about Kendo Grid - Header template is DropDown List.

I have more than one column in Grid datasource which contains 10 rows of records. Applied filterable true for each and every column. I selected the first column filtered with some value. Which is showing 5 rows. Selected some other row which is not filtered the values from the 5 rows. Showing the filtered results from the 10 rows.

But I need to show the results from 5 rows. How can I achieve it?

Please help me with this issue. I need your response.

Kindly check and let me know as soon as possible.

Checkbox

DropDownList

Grid

asked on 09 Jun 2021

1 answer

135 views

Batch [save changes] error in recent spreadsheet version

After multiple selection in Excel or Spreadsheet and copying
If you paste and save, only one cell is saved.
This is wrong.

All saved in previous versions. (2021.1.119 ver)

Test it at the url below.

https://dojo.telerik.com/@kjvjung/uyaZeJuZ

How can I batch save?

Thank you.

Spreadsheet

answered on 09 Jun 2021

1 answer

888 views

Updating a Kendo grid loses focus in components in other windows

Hello,

I have a dashborard including widgets built with IFrame. I have a widget that contains a Kendo grid with a number of data.

If I have the focus in a field of a form in a widget other than the one containing the Kendo grid, when refreshing the Kendo grid, the focus is lost and it is the grid that takes over the focus. For example, if I open a drop-down list in a form present in a widget (defined in an Iframe), when the Kendo grid (defined in another widget, therefore another IFrame) updates, the drop-down list where I was closes automatically following the loss of focus. Is this behavior known? How can I prevent an update to the Kendo grid from losing focus in other components?

The grid updates very regularly when new data needs to be added (with a simulator, updates are done approximately every 2 seconds).

When new data comes in I completely replace the list (no differential) and use Util.getGrid (). DataSource.read (); This will call the read () method defined in in the transport option.

const dataSource: DataSource = new DataSource(
                    {
                        autoSync: true,
                        schema: this.$scope.schema,
                        pageSize: this.$scope.pageSize,
                        transport: {
                            read: (datas: kendo.data.DataSourceTransportOptions): void => {

                                    [some code]

                                     datas.success(this.$scope.items);  
                            }
                        },
                        serverFiltering: true,
                        serverSorting: true,
                        serverGrouping: false,
                        serverPaging: true,
                        sort: this.$scope.defaultSort,
                        filter: this.$scope.filters,
                        group: groupList,
                        requestStart: (e: kendo.data.DataSourceRequestStartEvent): void => {
                            setTimeout((e: JQuery): void => {
                                $(".k-loading-image").hide();
                            });
                        }
                    }
                );

I am using Kendo version v2019.3.1023

Thanks

Grid

answered on 08 Jun 2021

0 answers

1.5K+ views

Uncaught Type error: m is not a function

I am working with kendo grids with buttons in each column that display another grid in a modal. The first is using MVC, the modal grid was created dynamically. Each uses kendo dropdownlists to edit cells. The issue occurs like this:

1. A dropdownlist is clicked on in the initial grid,

2. The modal is opened afterward (each row has its own button)

3. A dropdownlist inside the modal's kendo grid is clicked, and nothing happens

Basically, if a dropdown is clicked in grid 1, and then you attempt to click one of the dropdownlists in the modal grid,
this error is thrown:

Uncaught TypeError: m is not a function
at init.editor (kendo.all.min.js:54)
at init.refresh (kendo.all.min.js:54)
at new init (kendo.all.min.js:54)
at HTMLTableCellElement.<anonymous> (kendo.all.min.js:26)
at Function.each (jquery.min.js:2)
at R.fn.init.each (jquery.min.js:2)
at R.fn.init.e.fn.<computed> [as kendoEditable] (kendo.all.min.js:26)
at init.editCell (kendo.all.min.js:59)
at init.tap (kendo.all.min.js:59)
at init.trigger (kendo.all.min.js:25)

This error is vague, and on the surface seems like jQuery scripts may be interfering or out of order. I don't think this is the case
because A) I haven't recieved errors like this before and B) the dropdowns work if the modal is opened without any of the dropdowns in the
other grid being touched. It seems as if when a dropdown is clicked in initial grid, somehow it breaks the dropdown in modal grid. They
do not have the same name.

Any ideas on where this console error comes from?

Here is a snippet of the grid being generated in the modal:

$("#account-tracking-grid").kendoGrid({
columns: [
{
field: "accountName",
title: "Account Name",
editable: function () { return false },
width: "200px",
},
{
field: "accountNumber",
title: "Account Number",
editable: function () { return false },
width: "200px"
},
{
field: "Balance",
title: "Balance",
width: "40px",
template: "<span>#=getIcon(Balance)#</span>",
editor: dropdownlist,
headerTemplate: "<span class='verticalText'>Balance</span>"
}
],
editable: "incell",
edit: function (e) {
var container = e.container;
var dropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList");
if (dropDownList) dropDownList.open();
},
dataSource: {
transport: {
read: "/Account/Tracking?uniqueId=" + document.getElementById('unid').value
}
}
});
}

function dropdownlist(container, options) {
$('<input id="account-dropdownlist"/>')
.appendTo(container)
$("#account-dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: items,
change: onChange,
open: onOpen
});
}

updated question on 07 Jun 2021