Questions on Kendo UI for jQuery Forum

2 answers

295 views

Telerik Map Marker - Tooltip Refresh data on-hover

We have a Telerik Map object on a view, and the map displays several markers which is working perfectly. Each marker has a tooltip configured to "LoadContentFromAjax", so when the user hovers over the marker (for the first time), the API is queried and the correct data is returned.

The problem is that the Markers Tooltip data is only loaded the first time the user hovers over the icon after the page loads. once that first hover has occurred, the existing data is displayed until the page is reloaded.

I have attempted to refresh the data using the marker tooltips "Show" event, but so far i have had no luck.

This is my onShow event that is called anytime the Marker is hovered over

function tooltip_OnShow(e) {
    console.log(e);
    e.sender.marker.dataItem.refresh();
}

the "e.sender.marker.dataItem.refresh()" just throws an exception. I have tried several different iterations, with no luck so far.

Map

ToolTip

updated answer on 19 Oct 2022

1 answer

166 views

Kml & Kmz support in Kendo Maps

Hi, What about kml/kmz support for Kendo Maps?

Thank's marc.

Map

answered on 19 Oct 2022

2 answers

187 views

[Solved] Kendo Scheduler Agenda - Change event is selecting incorrect event when using group with resources

I had implemented this example: https://dojo.telerik.com/omIxeDUx

When I'm using kendo scheduler with view "Agenda", I need to separate events on same date by group, so I'm using the resources + group option.

With that said, I'm having problem when I need to get the selected event on change event trigger. But for some reason, depending on which event's row you select, the e.events[0] attribute is returning another event, which is not the selected one.

I'm trying to find what I'm doing wrong, the example alerts to window the meetingID of e.events[0] when change event triggers. If you see by the description of event, the ID is different.

Can anyone help me with this problem?

EDIT:

If you are experiencing the same problem, here is a workaround. I'd notice that I can get the selected item by the UID of the selected row, and just ignore the e.events. Here is the following implementation: https://dojo.telerik.com/omIxeDUx/7 (notice that depending on the version you using, the "class" of selected item may be "k-state-selected" instead of "k-selected")

change: function (e) {
    var selected = document.querySelector(".k-scheduler-content tr.k-selected");
    if (selected) {
        var data = $(selected).find("[data-uid]").data();
        var selectedItem = this.dataSource.getByUid(data.uid);
        alert("Kendo event: " + e.events[0].meetingID + "\nSelected event: " + selectedItem.meetingID);
    }
}

Best regards,

Scheduler

answered on 19 Oct 2022

0 answers

275 views

MVVM binding - how to work with multiple binds

I'm specifically working with the scheduler, however I believe this applies to any MVVM items.

When double click an event in the scheduler, my editor template is rendered and Kendo binds this to the event being edited. This happens for "free" as I do not do this. Consider this element:

<div data-container-for="title">
   <input type="text" data-role="textbox" name="title" required="required" data-bind="value:title" />
</div>

The binding to title works perfectly fine and I see my value.

Next, my event has a CategoryId which tags the event and what it is. This is a property I have added. Let me point out that if I replace title above with CategoryId, the integer value of the category displays. So this value is known and part of the bound object. However, I am using a very custom templated dropdown for this.

<div data-container-for="CategoryId">
   <input id="CategoryId" data-bind="value: CategoryId, source: categoriesDataSource" data-role="dropdownlist" data-auto-width="true"
          data-header-template="categorySearchHeaderTemplate" data-template="categorySearchTemplate" data-text-field="Description"
          data-value-field="Id" data-auto-bind="false" />
</div>

Hopefully this makes sense. My categories have an Id and a Description. There is a list of them. The event has a CategoryId which holds the value of what category is selected. However this element has its own datasource! Note the data-bind.

// This datasource is created and then kendo.bind() is called to bind to my dropdown
var categoriesViewModel = kendo.observable({
   categoriesDataSource: new kendo.data.DataSource({
      data: jsonSerializedCategories
   })
});

This drop down works perfectly fine for templates and for the elements in it. See screenshot below. But the value binding does not work. This is obviously because I had to set my own datasource on it. The value is not found in that datasource; it's in the one Kendo generated and applied to the popup. What is the proper way to set this up? The value is in one datasource and the elements here are in the other one I created.

MVVM

Templates

updated question on 17 Oct 2022

0 answers

113 views

Kendo Grid Large Parameters Value

Hy This code is part of my grid.

    grid._parameterMap = function (data, type) {

        if (type !== "read" && data.models)
            return { models: kendo.stringify(data.models) };

        var warehouseCodeList = [];


        var selectedWarehouse_OnPhysicalCountDefinition = '';

        $.each(KendoData('mltWarehouse_OnPhysicalCountDefinition').dataItems(), function (index, value) {
            selectedWarehouse_OnPhysicalCountDefinition += value.WarehouseCode + ',';
        });


        selectedWarehouse_OnPhysicalCountDefinition = selectedWarehouse_OnPhysicalCountDefinition.slice(0, -1);


        debugger;

        var parameters = {
            warehouseCodeList: selectedWarehouse_OnPhysicalCountDefinition,
            periodDateString: $('#dpcPeriodDate_OnPhysicalCountDefinition').val(),
            Page: data.page,
            PageSize: data.pageSize
        }

        return kendo.data.transports["odata"].parameterMap(parameters, type);
    };

And parameters value is

Page: 1
PageSize: 50
periodDateString: "17/10/2022"
warehouseCodeList: "480176,480172,480003,480166,480109,480025,480090,480089,480002,480088,
480061,480101,480016,480009,480095,480008,480094,480093,480006,480092,480005,480091,480004,
480117,480033,480114,480060,480113,480163,480030,480059,2011,480157,480028,480045,480048,
480039,480029,480120,480046,480156,480049,480072,480063,480062,48006100,480071,480070,480069,
480068,480067,480066,480065,480064,480077,480076,480085,480084,480082,480078,480073,480075,480079,
480074,480083,480127,480128,480057,480129,480058,480081,480080,480141,480132,480131,480130,480140,
480138,480137,480136,480135,480134,480133,480146,480145,480154,480153,480151,480147,480142,480144,
480148,480143,480152,480139,480150,480149,480106,480126,480055,480165,480167,480100,480123,480053,
480096,480168,480162,480159,480158,480038,480102,480017,480013,480122,480047,480116,480032,480034,
480107,480040,480118,480098,480051,480110,480026,480111,480027,480108,480103,480115,480031,480035,
480087,480086,480036,480119,480112,480010,480097,480155,480124,480054,480019,480099,480104,480171,
480164,480041,480042,480121,480043,480044,480014,480052,480170,480037,480050,480012,480105,480169,
480161,480174,480173"

You can see that my data and that large data not going my controller becouse of that large warehouseCodeList.

Request URL: https://zzzz/Inv/yyy/xxxx/?%24inlinecount=allpages&%24format=json&warehouseCodeList=480176%2C480172%2C480003%2C480166%2C480109%2C480025%2C480090%2C480089%2C480002%2C480088%2C480061%2C480101%2C480016%2C480009%2C480095%2C480008%2C480094%2C480093%2C480006%2C480092%2C480005%2C480091%2C480004%2C480117%2C480033%2C480114%2C480060%2C480113%2C480163%2C480030%2C480059%2C2011%2C480157%2C480028%2C480045%2C480048%2C480039%2C480029%2C480120%2C480046%2C480156%2C480049%2C480072%2C480063%2C480062%2C48006100%2C480071%2C480070%2C480069%2C480068%2C480067%2C480066%2C480065%2C480064%2C480077%2C480076%2C480085%2C480084%2C480082%2C480078%2C480073%2C480075%2C480079%2C480074%2C480083%2C480127%2C480128%2C480057%2C480129%2C480058%2C480081%2C480080%2C480141%2C480132%2C480131%2C480130%2C480140%2C480138%2C480137%2C480136%2C480135%2C480134%2C480133%2C480146%2C480145%2C480154%2C480153%2C480151%2C480147%2C480142%2C480144%2C480148%2C480143%2C480152%2C480139%2C480150%2C480149%2C480106%2C480126%2C480055%2C480165%2C480167%2C480100%2C480123%2C480053%2C480096%2C480168%2C480162%2C480159%2C480158%2C480038%2C480102%2C480017%2C480013%2C480122%2C480047%2C480116%2C480032%2C480034%2C480107%2C480040%2C480118%2C480098%2C480051%2C480110%2C480026%2C480111%2C480027%2C480108%2C480103%2C480115%2C480031%2C480035%2C480087%2C480086%2C480036%2C480119%2C480112%2C480010%2C480097%2C480155%2C480124%2C480054%2C480019%2C480099%2C480104%2C480171%2C480164%2C480041%2C480042%2C480121%2C480043%2C480044%2C480014%2C480052%2C480170%2C480037%2C480050%2C480012%2C480105%2C480169%2C480161%2C480174%2C480173&periodDateString=17%2F10%2F2022&Page=1&PageSize=50
Request Method: GET
Status Code: 200 OK
Remote Address: 10.6.243.40:443
Referrer Policy: strict-origin-when-cross-origin
Cache-Control: private
Content-Length: 406
Content-Type: application/json; charset=utf-8
Date: Mon, 17 Oct 2022 11:51:47 GMT
Server: Microsoft-IIS/10.0
Set-Cookie: LanguageValue=tr-TR; path=/
Set-Cookie: LanguageIndex=1; path=/
Vary: Accept-Encoding
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 5.2
X-Powered-By: ASP.NET
Accept: application/json, text/javascript, */*; q=0.01
Accept-Encoding: gzip, deflate, br
Accept-Language: tr-TR,tr;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Cookie: BIGipServerASG-CP20-CORE-TEST2-443-GM.app~ASG-CP20-CORE-TEST2-443-GM_pool=1542653450.47873.0000; _hjSessionUser_744605=eyJpZCI6IjE2NjBiZDJhLWViMGUtNWY5OC04OTkxLTc4ZDM3YTEzOWJkNyIsImNyZWF0ZWQiOjE2NjQ4ODYyMDIzMDIsImV4aXN0aW5nIjp0cnVlfQ==; ASP.NET_SessionId=m3qxmvgkq4ur4tv1dcy5dg24; client_code=9931c35f-d1c6-46fd-a9ef-cced60ff1bd5; access_token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQVRBTEFZIiwiVXNlcklkIjoiNzQ3MSIsIk9yZ2FuaXphdGlvbkNvZGUiOiJBQyIsIkZhY2lsaXR5Q29kZSI6IjQ4IiwiT3JnYW5pemF0aW9uSWQiOiIxIiwiRmFjaWxpdHlJZCI6IjEiLCJUb2tlbkNvZGUiOiJmNWI4MDkzMC0zYjZlLTRhNmItOTIwNC1lMzg2M2M0Njg3OTAiLCJqdGkiOiJlZTQxMzkxYy04OGU1LTQ3OGUtOGIwNi03NjdmYTAxZjVmZjMiLCJhdWQiOlsiNjdEREM3M0MtQjQ4Ni00MTdBLTk1NjMtRDIzRUYxOEMzNkM3IiwiOUE3NzVEODctRkFBMS00QTNCLTlFNDAtMDRCOTcwODUxQzNFIiwiMDg0OEIwQUEtNERFNC00RjU5LTk4OTgtNTZEM0E0QTZCMTVCIiwiOTkyQTY5NzgtQ0U4OS00NkJGLTk4MkEtQzc4MzJGNDk4QkYwIiwiMDc4MEIwQzUtNzBDQi00MzcwLTk2QjktQTk1NzhDOEQ4MDI3IiwiRDFGNkUzOEItQjdGMy00RTk1LTlEMkEtNjA0QjMyRTY3MUMwIiwiMDg0OEIwQUEtNERFNC00RjU5LTk4OTgtNTZEM0E0QTZCMTVBIl0sIm5iZiI6MTY2NjAwNzAxOSwiZXhwIjoxNjY2MDUwMjE5LCJpc3MiOiI2N0REQzczQy1CNDg2LTQxN0EtOTU2My1EMjNFRjE4QzM2QzcifQ.y93UK_lZDXV5nFK71xOvmrcJSHX9oVR3TFJQDcO6x-c; NameSurname=EROL%2BATALAY; themeCp=dark; langCp=tr; langIdCp=1; PersonnelCode=XX9331; FacilityName=Ac%C4%B1badem%20Ata%C5%9Fehir%20Hst.; FacilityId=1; OrganizationName=ACIBADEM; dateTimeFormatCode=tr-TR; LanguageValue=tr-TR; LanguageIndex=1

And Finaly I try the give dataSource remote but not work .But ı can gice that data ın Ajax call.Can you Help me ?

What can I do in this situation?

Data Source

Grid

asked on 17 Oct 2022

1 answer

147 views

[Solved] Kendo Stacked Bar : Using stackValue for totals doesn't display correct amount if value is negative

I have a stacked kendo bar chart defined as follows:

$("#chart").kendoChart({
                title: {
                    text: ""
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bar",
                    stack: true
                },
                series: [{
                    name: "Value1",
                    data: [-40, 32, 34, 36, 45, 33, -34, 83, 36, 37, 44, 37, 35, 36, 46],
                    color: "#f3ac32"
                }, {
                    name: "Value2",
                    data: [19, 25, -21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
                    color: "#b8b8b8"
                }, {
                    name: "Value3",
                    data: [17, 17, 16, -28, 34, 30, 25, 30, -27, -37, 25, 33, 26, 36, 29],
                    color: "#bb6e36",
                  	labels: {
                			template: "#= stackValue #",
                			visible: true
                		},
                }],
                valueAxis: {
                    max: 180,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: true
                    }
                },
                categoryAxis: {
                    categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            });

But the sum displayed at the end of the bar is not correct in the cases where data is negative.

See the output below :

How do I get it to display the correct sum?

Charts

answered on 17 Oct 2022

9 answers

297 views

How to add lunar calendar date in scheduler ?

I want to add lunar calendar date after all scheduler dates

like in month view will add lunar calendar date after scheduer date

Scheduler

answered on 16 Oct 2022

1 answer

165 views

[Solved] How to display treeMap value on the chart along with the name?

I want to be able to display the treemap value on the TreeMap chart.

My TreeMap Definition :

$("#treeMap").kendoTreeMap({
    dataSource: {
        data: [{
            items: [{
                name: "Seg1",
                value: 54
            },
            {
                 name: "Seg2",
                 value: 37
            },
            {
                 name: "Seg3",
                 value: 9
             }]
         }]
     },
     valueField: "value",
     textField: "name",
     colors: [["#FF7700","#FF77FF"]]
});

I want to be able to see the values also in the chart like Seg1 : 54 , Seg2 : 37 , Seg3 : 9 . How do I do that?

Charts

TreeMap

answered on 14 Oct 2022

1 answer

924 views

[Solved] Is there a way to declare a databound function for kendo grid inside an another grid?

I want to resize my grid that inside another grid. These grids are hierarchical. I wrote something for that but this works for second click. The processes I mentioned are seen in the pictures (firstclick, secondclick). the red circle shows extand button.

The js code block I wrote for solution but it does not work properly:

// The code inside the databound function of master grid
    $("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
        if ($(this).hasClass("k-i-expand")) { // if the grid is expand

            // uid of tr element
            var tr_UID = $(this).parents("tr").data("uid");

            // master grid
            var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");

            $(ustGrid.dataSource.data()).each(function (i, item) {
                if (item.uid == tr_UID) {
                    var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
                    var rowCount = altGrid.dataSource.view().length;

                    $("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");

                    $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));

                    $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
                }
            });
        }
    });
    // This code block only works on second clicking the expan button.
    // Does not recognize the second grid when clicked for the firs time
    // Should I use databound for second grid? However I do not know how can I do that.