Telerik Forums
Kendo UI for jQuery Forum
0 answers
160 views

 

Hi, I'm trying to insert a grid in the background of a diagram and have found some suggestions on how to do it, but the problem with these solutions is that when I try to remove a specific element, the other element disappears.

 

Suggested solution: image in Kendo UI for jQuery | Telerik Forums or Untitled | Kendo UI Dojo (telerik.com)

The problem is this insert 

diagram.mainLayer.drawingElement.insertAt(grid, 0)

 As far as I understand, this breaks the sequence and removes the previous element.

 

Does anyone know how to avoid this behavior or another solution to insert grid?

PS: The grid is only needed for positioning.

 

Siarhei
Top achievements
Rank 1
 updated question on 21 Oct 2022
1 answer
136 views
How to change color of selected date on kendo calendar
Nikolay
Telerik team
 updated answer on 20 Oct 2022
2 answers
321 views

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.

Brad
Top achievements
Rank 1
Iron
 updated answer on 19 Oct 2022
1 answer
190 views

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

Thank's  marc.

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 19 Oct 2022
2 answers
210 views

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,

Neli
Telerik team
 answered on 19 Oct 2022
0 answers
316 views

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.

Paul
Top achievements
Rank 1
Iron
Iron
Veteran
 updated question on 17 Oct 2022
0 answers
132 views

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 

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

Merve
Top achievements
Rank 1
Veteran
 asked on 17 Oct 2022
1 answer
175 views

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?

Nikolay
Telerik team
 answered on 17 Oct 2022
9 answers
306 views

I want to add lunar calendar date after all scheduler dates

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

Betina
Top achievements
Rank 1
Iron
 answered on 16 Oct 2022
1 answer
180 views

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?

 

Georgi Denchev
Telerik team
 answered on 14 Oct 2022
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?