Telerik Forums
Kendo UI for jQuery Forum
2 answers
178 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
246 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
102 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
126 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
280 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
145 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
1 answer
906 views

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.

Georgi Denchev
Telerik team
 answered on 13 Oct 2022
1 answer
115 views

Hello all,

 

I have the problem that my custom theme is not transferred to my application.

 

As code I copied the code from the tile layout example (https://demos.telerik.com/kendo-ui/tilelayout/index?_ga=2.175878118.554134959.1665135807-2026844688.1664867263&_gl=1*1inatwj*_ga*MjAyNjg0NDY4OC4xNjY0ODY3MjYz*_ga_9JSNBCSF54*MTY2NTE0Mjk5MS4yLjEuMTY2NTE0NDE5MS4wLjAuMA..) and adapted the linked script-sources to my paths.

After the script-sources i linked the css of my theme: (image0)

 

my theme has the following color scheme: (image1)

 

But now when I launch my application, the TileLayout looks like this: (image2)

 

 

 

When I use F12 to display the properties, for example of the donut chart, I see the following: (image3)

 

i do not understand, where the fill="#ff6800" comes from, since it is not even displayed in the style window of the F12 menu.

I can't get the problem solved, can anyone help me?

 

Georgi Denchev
Telerik team
 answered on 12 Oct 2022
2 answers
197 views

I am using the Scheduler and making a custom edit screen. I am following the example here.

Each scheduled event can have a category. These are selectable via dropdown. Consider the following portion of the template:

<div class="k-edit-label">
   <label for="category">Category</label>
</div>
<div data-container-for="category" class="k-edit-field">
   <!-- HERE IS WHERE THE DROPDOWN IS -->
</div>

In the example linked, a simple <select> element is used. But I am looking to add a real Kendo dropdown, not a basic select. So I defined it as follows:

var categoryEditorDropdown = Html.Kendo().DropDownList()
   .AutoBind(true)
   .BindTo(categories)
   .DataTextField(nameof(Category.Description))
   .DataValueField(nameof(Category.Id))
   .HeaderTemplate("Custom defined template which is why I need this over a select")
   .OptionLabelTemplate("Custom defined template which is why I need this over a select")
   .Name("category")
   .ToClientTemplate();

Back to my editor template, for the commented green line I tried both the following, and both gave template errors:

<div data-container-for="category" class="k-edit-field">
   <!-- Both fail with a template error -->
   @categoryEditorDropdown
   @Html.Raw(categoryEditorDropdown)
</div>

Next, I made a separate script:

<script id="editEventCategoryTemplate" type="text/x-kendo-template">
   // Tried both of these and again both fail when editing the event
   @categoryEditorDropdown
   @Html.Raw(categoryEditorDropdown)
</script>

And I updated the editor to try and use it:

<div data-container-for="category" class="k-edit-field">
   #= kendo.render(kendo.template($("\\#editEventCategoryTemplate").html())) #
</div>

For both tests here the page renders but then throws the same invalid template error when I try to edit an event.

How can I embed templates into each other. I need far more than category here. There are 6 templates in total needed for 6 different fields.

Paul
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 11 Oct 2022
1 answer
117 views

It seems that if you set a data-format (or other options like data-min, data-max) on a datepicker and call kendo.bind then the readonly status is lost.  Is this the expected behavior, as it doesn't seem correct?

See example:

https://dojo.telerik.com/igORIMaX/2

 

Georgi Denchev
Telerik team
 answered on 10 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
MultiColumnComboBox
Dialog
Chat
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?