Questions on Kendo UI for jQuery Forum

2 answers

21 views

When I go to dojo.telerik.com, I get a loading image that is showing forever and the actual playground is never getting loaded.

Has dojo been retired?

UPDATE

I tried again after a few hours but after a long time of loading panel , the playground in dojo loaded. But, now there is no button to login. So my question now is if I can get all my snippets from dojo?

Menu

answered on 14 Aug 2025

0 answers

15 views

Array of arrays.

Hi everyone,

I'm not very familiar with Kendo.

This is my first time using an array of arrays. I expected all the Arrays in the Array to be DataSource structures.

Instead, I had to write something like this:

var selected = new kendo.data.DataSource();

for ( var font of AP.page.selectedFonts ) {
    var newRow = {
        id: font.id,
        font: font.font,
        // I thought this array was automatically converted to a DataSource.
        items: new kendo.data.DataSource( { data: font.items } ) 
    };

    selected.add( newRow );
}

viewModel.set( "selectedFonts", selected );

Is this the correct approach?

Many thanks

Data Source

updated question on 13 Aug 2025

3 answers

25 views

render bar chart with rounded corner at right.

i am trying to render my chart with rounded corner at the side. but cant seems to get it to work.

dojo link

Expected result

Charts

answered on 12 Aug 2025

1 answer

20 views

Correct Usage of kendoToggleButton

So I wanted to know if there was an easier way to find the current state of the toggle button. I used a global variable defined in the scope of the .js file I am using.

var isSelected = false.

Then for extra safety and really embarrassingly enough we just kind of blindly follow this pattern, we put this variable in a kendo.observable:

function initControls() {
//More initialization stuff before...
    _view = kendo.observable({

        intervalList: _intervalList,
        layoutDataList: _layoutDataList,
          noCustoms: _noCustoms,
        isSelected: _isSelected, //<--------[ADDED]
   })
)
//More initialization code after

}

then in the initialization:

    //Percent button:
    $("#my-toggle-btn").kendoToggleButton({
        icon: "null", // using Font Awesome for an icon.
        enable: true,
        selected: false,
        togglable: true,
        click: function () {
            // on the click change current state of the percentSelected:
            _view.set("isSelected", !_view.get("isSelected"));
            let perSelected = _view.get("isSelected");
            console.log("percentSelected toggled to: " + perSelected);
            if (perSelected) {
                console.log("...button should be BLUE.");
            } else {
                console.log("...button should be GREY.");
            }
        }

    });

And then depending on the Boolean value of the _view observable isSelected it controls whether a mathematical operation is a regular number or a percentage of the number being operated on (multiply, add, subtract):

    var number = $("#numberInput").data("kendoNumericTextBox").value();
    // Detect if percentage toggle is active -- GREY not selected and BLUE == selected.
    var isPercent = _view.get("isSelected");

    //... later in the code this is evaluated like:

    //If the percent toggle button in true/BLUE then convert.
     //Ergo...modify to make the number in the input a percent value 30 is percent then it needs to be converted to .30.
                    var modifier = isPercent ? val * (number / 100) : number;//ternary operator.

    // then later in the code the percentage value or the non-percentage value is inserted into a simple 
    // mathematical formula that loops through an array of numeric values...

My question is ... is there a more direct way to capturing the current state of the button?. I tried selected and selected and my understanding is it doesn't capture the current state (true or false of the button)...so after that I hacked it like this.Maybe this is NOT a good use for the toggle button.(?)..but damn it I wanted a toggle button.

Again the toggle button in question simple allows the user to convert an numeric input to a percentage value of a number operated on (add, subtract, multiply)... ergo secondary color = BLUE, then number is a percent, if its the initial or color = GRAY then the number is just it's face value. I couldn't capture any examples of a real use case. I later found the onToggle event handler and yeah you can read the current value thorugh that...but thought it was overkill...still I am confused on how to use it to flag options...or correct usage.

ToggleButton

answered on 05 Aug 2025

1 answer

15 views

How do I style the autocomplete list items if they keep disappearing

Normally just select the item in the browser inspector, and style, but the second I tap ANYWHERE the autocomplete items disappear. Is there some way to persist them just for styling?

AutoComplete

answered on 31 Jul 2025

1 answer

13 views

One Upload, Multiple Uses

I have a kendo upload on my page where users can upload multiple files. It is NOT set to batch mode, so each file is uploaded individually. I need to use the same upload and the same set of files on two different endpoints. For the first endpoint, I need to upload only the first file. For the second endpoint, I need to upload every file (including the first one). I have two separate buttons that will trigger these. There is also some custom data that I need to include from other controls on the page (like a name, address, etc). How would I accomplish this?

Button 1: Upload the first file to Endpoint A with extra data Y

Button 2. Upload all of the files to Endpoint B with extra data Z

This is the actual flow

1. Select all files

2. Analyze First File (upload only the first file to the server)

3. Server responds with some info about the file ({ type: "text", "author: "John Smith", creditor: "Wells Fargo", etc }

4. This data is placed in some inputs on the page where the user can change it, for example, the system says the author is John Smith but it is really Jane Doe. In my scenario, all files must use the same data regardless of what files 2 through X may contain, so even if Jack Jackson's name appears in File 2, we are using Jane Doe. This whole process is really just to make it easier when the user fills out the data form so that they just update the stuff that is wrong.

5. After the user approves the data in the inputs, they click a submit button. At this time, all of the files are uploaded along with the edited input data object {type: "text", author: "Jane Doe", creditor: "Wells Fargo", etc }

Example:

Upload:
[ Select Files...]

[ Test First File ]

Fill out the form:
Type: _________
Author: _________
Creditor: _________

Click the button below to upload all files using the data entered in the form.

[ Upload Files ]

Upload

answered on 30 Jul 2025

1 answer

27 views

Using KendoPDFViewer without referencing .mjs files

Hello

We are integrating our Kendo with our Dynamics 365 platform . We cannot upload .mjs files to it since Dynamics only supports plain .js files and as such, we have uploaded both pdf.min.mjs and pdf.worker.min.mjs as regular .js files. When referencing them both in HTML we added the module type.

This is our sample code:

<html>
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="./cc_kendo.common.min.css">
    <link rel="stylesheet" href="./cc_kendo.default-ocean-blue.css">
    <script src="./cc_jquery.3_7_1.js"></script>
    <script src="./cc_kendo.all.min.js"></script>
    <script src="./cc_pdf.min.js" type="module"></script>
    <script src="./cc_pdf.worker.min.js" type="module"></script>
    <script src="./cc_kendo_license.js"></script>

    <script type="module">

        $(function() {
  $("#viewer").kendoPDFViewer({
        pdfjsProcessing: {
                    file: {
                        data: GetBase64()
                    }
                },
        width: "100%",
        height: 1200
    });

    function GetBase64() {
            return "JVBERi0xLjMNCiXi48/TDQoNCjEgMCBvYmoNCjw8DQovVHlwZSAvQ2F0YWxvZw0KL091dGxpbmVzIDIgMCBSDQovUGFnZXMgMyAwIFINCj4+DQplbmRvYmoNCg0KMiAwIG9iag0KPDwNCi9UeXBlIC9PdXRsaW5lcw0KL0NvdW50IDANCj4+DQplbmRvYmoNCg0KMyAwIG9iag0KPDwNCi9UeXBlIC9QYWdlcw0KL0NvdW50IDINCi9LaWRzIFsgNCAwIFIgNiAwIFIgXSANCj4+DQplbmRvYmoNCg0KNCAwIG9iag0KPDwNCi9UeXBlIC9QYWdlDQovUGFyZW50IDMgMCBSDQovUmVzb3VyY2VzIDw8DQovRm9udCA8PA0KL0YxIDkgMCBSIA0KPj4NCi9Qcm9jU2V0IDggMCBSDQo+Pg0KL01lZGlhQm94IFswIDAgNjEyLjAwMDAgNzkyLjAwMDBdDQovQ29udGVudHMgNSAwIFINCj4+DQplbmRvYmoNCg0KNSAwIG9iag0KPDwgL0xlbmd0aCAxMDc0ID4+DQpzdHJlYW0NCjIgSg0KQlQNCjAgMCAwIHJnDQovRjEgMDAyNyBUZg0KNTcuMzc1MCA3MjIuMjgwMCBUZA0KKCBBIFNpbXBsZSBQREYgRmlsZSApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY4OC42MDgwIFRkDQooIFRoaXMgaXMgYSBzbWFsbCBkZW1vbnN0cmF0aW9uIC5wZGYgZmlsZSAtICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNjY0LjcwNDAgVGQNCigganVzdCBmb3IgdXNlIGluIHRoZSBWaXJ0dWFsIE1lY2hhbmljcyB0dXRvcmlhbHMuIE1vcmUgdGV4dC4gQW5kIG1vcmUgKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA2NTIuNzUyMCBUZA0KKCB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDYyOC44NDgwIFRkDQooIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNjE2Ljg5NjAgVGQNCiggdGV4dC4gQW5kIG1vcmUgdGV4dC4gQm9yaW5nLCB6enp6ei4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNjA0Ljk0NDAgVGQNCiggbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDU5Mi45OTIwIFRkDQooIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNTY5LjA4ODAgVGQNCiggQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA1NTcuMTM2MCBUZA0KKCB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBFdmVuIG1vcmUuIENvbnRpbnVlZCBvbiBwYWdlIDIgLi4uKSBUag0KRVQNCmVuZHN0cmVhbQ0KZW5kb2JqDQoNCjYgMCBvYmoNCjw8DQovVHlwZSAvUGFnZQ0KL1BhcmVudCAzIDAgUg0KL1Jlc291cmNlcyA8PA0KL0ZvbnQgPDwNCi9GMSA5IDAgUiANCj4+DQovUHJvY1NldCA4IDAgUg0KPj4NCi9NZWRpYUJveCBbMCAwIDYxMi4wMDAwIDc5Mi4wMDAwXQ0KL0NvbnRlbnRzIDcgMCBSDQo+Pg0KZW5kb2JqDQoNCjcgMCBvYmoNCjw8IC9MZW5ndGggNjc2ID4+DQpzdHJlYW0NCjIgSg0KQlQNCjAgMCAwIHJnDQovRjEgMDAyNyBUZg0KNTcuMzc1MCA3MjIuMjgwMCBUZA0KKCBTaW1wbGUgUERGIEZpbGUgMiApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY4OC42MDgwIFRkDQooIC4uLmNvbnRpbnVlZCBmcm9tIHBhZ2UgMS4gWWV0IG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA2NzYuNjU2MCBUZA0KKCBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY2NC43MDQwIFRkDQooIHRleHQuIE9oLCBob3cgYm9yaW5nIHR5cGluZyB0aGlzIHN0dWZmLiBCdXQgbm90IGFzIGJvcmluZyBhcyB3YXRjaGluZyApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY1Mi43NTIwIFRkDQooIHBhaW50IGRyeS4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA2NDAuODAwMCBUZA0KKCBCb3JpbmcuICBNb3JlLCBhIGxpdHRsZSBtb3JlIHRleHQuIFRoZSBlbmQsIGFuZCBqdXN0IGFzIHdlbGwuICkgVGoNCkVUDQplbmRzdHJlYW0NCmVuZG9iag0KDQo4IDAgb2JqDQpbL1BERiAvVGV4dF0NCmVuZG9iag0KDQo5IDAgb2JqDQo8PA0KL1R5cGUgL0ZvbnQNCi9TdWJ0eXBlIC9UeXBlMQ0KL05hbWUgL0YxDQovQmFzZUZvbnQgL0hlbHZldGljYQ0KL0VuY29kaW5nIC9XaW5BbnNpRW5jb2RpbmcNCj4+DQplbmRvYmoNCg0KMTAgMCBvYmoNCjw8DQovQ3JlYXRvciAoUmF2ZSBcKGh0dHA6Ly93d3cubmV2cm9uYS5jb20vcmF2ZVwpKQ0KL1Byb2R1Y2VyIChOZXZyb25hIERlc2lnbnMpDQovQ3JlYXRpb25EYXRlIChEOjIwMDYwMzAxMDcyODI2KQ0KPj4NCmVuZG9iag0KDQp4cmVmDQowIDExDQowMDAwMDAwMDAwIDY1NTM1IGYNCjAwMDAwMDAwMTkgMDAwMDAgbg0KMDAwMDAwMDA5MyAwMDAwMCBuDQowMDAwMDAwMTQ3IDAwMDAwIG4NCjAwMDAwMDAyMjIgMDAwMDAgbg0KMDAwMDAwMDM5MCAwMDAwMCBuDQowMDAwMDAxNTIyIDAwMDAwIG4NCjAwMDAwMDE2OTAgMDAwMDAgbg0KMDAwMDAwMjQyMyAwMDAwMCBuDQowMDAwMDAyNDU2IDAwMDAwIG4NCjAwMDAwMDI1NzQgMDAwMDAgbg0KDQp0cmFpbGVyDQo8PA0KL1NpemUgMTENCi9Sb290IDEgMCBSDQovSW5mbyAxMCAwIFINCj4+DQoNCnN0YXJ0eHJlZg0KMjcxNA0KJSVFT0YNCg==";
    }
});
      </script>
</head>
<body>
    <div id="viewer"></div>
</body>
</html>

When this page loads it throws an error stating -

Uncaught TypeError: UD is not a function
    at bM (cc_kendo.all.min.js:9:4080756)
    at init._loadPdfJSDocument (cc_kendo.all.min.js:9:4237913)
    at new init (cc_kendo.all.min.js:9:4223589)
    at HTMLDivElement.<anonymous> (cc_kendo.all.min.js:9:46168)
    at Function.each (cc_jquery.3_7_1.js:2:3129)
    at ce.fn.init.each (cc_jquery.3_7_1.js:2:1594)
    at e.fn.<computed> [as kendoPDFViewer] (cc_kendo.all.min.js:9:46144)
    at HTMLDocument.<anonymous> (cc_MyCustomPage.html:17:16)

I also tried adding the module type to my custom script thinking it'd solve the problem and if I remove the type from both pdf files it throws an error stating - PDF.min.js is not loaded correctly

What could be causing this?

Thank you

PDFViewer

answered on 28 Jul 2025

3 answers

34 views

Render chart for 0 value

Hi,

would like to render bar for 0 value.

this is my dojo link that is not working as expected

Charts

answered on 22 Jul 2025

1 answer

23 views

Scale value axis

current chart is looking like this

I want to be able to scale the value axis based on the highest value in the data.

For example, if the highest value is 10,000

The value axis will show 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

The label to display Amount ($k)

Charts

answered on 18 Jul 2025

2 answers

21 views

issue on scheduler timeline view while grouping 2025

<script>


    // Global variables
    var ArrWorkStationProductTaskMappingList = [];
    var ArrTechncinList = [];
    var scheduler;
    var currentEditingEvent = null;
    var localEvents = [];
    var nextId = 1;

    // Sample data for demonstration
    var sampleWorkStationData = [
        { WorkStationID: "WS001", WorkStationName: "Wall 1", ProdCode: "PROD001", TaskID: "T001", TaskName: "Task 1", Duration: 2.5 },
        { WorkStationID: "WS002", WorkStationName: "Wall 2", ProdCode: "PROD002", TaskID: "T002", TaskName: "Task 2", Duration: 3.0 },
        { WorkStationID: "WS003", WorkStationName: "Floor (B)", ProdCode: "PROD003", TaskID: "T003", TaskName: "Task 3", Duration: 1.5 },
         { WorkStationID: "WS004", WorkStationName: "Black Front", ProdCode: "PROD004", TaskID: "T004", TaskName: "Task 4", Duration: 1.5 },
         { WorkStationID: "WS004", WorkStationName: "Floor (Light 1)", ProdCode: "PROD005", TaskID: "T005", TaskName: "Task 5", Duration: 1.5 }

    ];

    var sampleTechnicianData = [
        { TechnicianName: "John Doe", TechnicianUserID: "USER001", TechnicianMail: "john@example.com" },
        { TechnicianName: "Jane Smith", TechnicianUserID: "USER002", TechnicianMail: "jane@example.com" },
        { TechnicianName: "Bob Johnson", TechnicianUserID: "USER003", TechnicianMail: "bob@example.com" }
    ];

    // Initialize sample data
    ArrWorkStationProductTaskMappingList = sampleWorkStationData;
    ArrTechncinList = sampleTechnicianData;

    // Initialize sample events
    localEvents = [
        {
            ScheduleID: 1,
            Status: "Active",
            ScheduleBatchID: "BATCH001",
            ResourceID: "WS001",
            ResourceName: "Wall 1",
            ResourceMappedForID: "T001",
            ResourceMappedForName: "Task 1",
            JobNo: "JOB001",
            ProdCode: "PROD001",
            JobDetailUniqueID: "JD001",
            Prod_Name: "Product 1",
            ScheduleCode: "SCH001",
            FromDate: "2025/7/15",
            ToDate: "2025/7/15",
            FromTime: "09:00",
            ToTime: "11:00",
            title: "Workstation Task - Product 1",
            IsAllDayEvent: false,
            description: "Sample workstation task for Product 1",
            TypeID: 1,
            start: new Date("2025/7/15 09:00"),
            end: new Date("2025/7/15 11:00"),
            resource: "WS001",
            resourceType: 1
        },
        {
            ScheduleID: 2,
            Status: "Active",
            ScheduleBatchID: "BATCH002",
            ResourceID: "USER001",
            ResourceName: "John Doe",
            ResourceMappedForID: "S001",
            ResourceMappedForName: "Sample 1",
            JobNo: "JOB001",
            ProdCode: "PROD001",
            JobDetailUniqueID: "JD002",
            Prod_Name: "Product 1",
            ScheduleCode: "SCH002",
            FromDate: "2025/7/15",
            ToDate: "2025/7/15",
            FromTime: "10:00",
            ToTime: "12:00",
            title: "Technician Task - John Doe",
            IsAllDayEvent: false,
            description: "Sample technician task",
            TypeID: 2,
            start: new Date("2025/7/15 10:00"),
            end: new Date("2025/7/15 12:00"),
            resource: "USER001",
            resourceType: 2
        },
        {
            ScheduleID: 3,
            Status: "Active",
            ScheduleBatchID: "BATCH003",
            ResourceID: "WS002",
            ResourceName: "Wall 2",
            ResourceMappedForID: "T002",
            ResourceMappedForName: "Task 2",
            JobNo: "JOB002",
            ProdCode: "PROD002",
            JobDetailUniqueID: "JD003",
            Prod_Name: "Product 2",
            ScheduleCode: "SCH003",
            FromDate: "2025/7/15",
            ToDate: "2025/7/15",
            FromTime: "13:00",
            ToTime: "15:00",
            title: "Workstation Task - Product 2",
            IsAllDayEvent: false,
            description: "Another workstation task for Product 2",
            TypeID: 1,
            start: new Date("2025/7/15 13:00"),
            end: new Date("2025/7/15 15:00"),
            resource: "WS002",
            resourceType: 1
        }
    ];

    $(document).ready(function () {
        // Initialize controls
        $("#ddlViewType").val($("#hdViewType").val());
        $("#txtProductCodes").val($("#hdcurrentTestCodeToAllocate").val());

        // Initialize scheduler
        initializeScheduler();

        populateResourceDropdown();


        // Event handlers
        $("#btnRefreshScheduler").click(function () {
            $("#hdViewType").val($("#ddlViewType").val());
            $("#hdcurrentTestCodeToAllocate").val($("#txtProductCodes").val());
            refreshScheduler();
        });

        $("#btnSaveSchedule").click(saveScheduleEvent);


    });



    // Add this function to validate and fix event resourceType values
    function validateAndFixEvents() {
        console.log("Validating events...");

        localEvents.forEach(function (event, index) {
            var correctResourceType = null;

            // Check if it's a workstation resource
            var workstationData = getFilteredWorkstationData();
            var isWorkstation = workstationData.some(function (ws) {
                return ws.WorkStationID === event.ResourceID;
            });

            if (isWorkstation) {
                correctResourceType = 1;
            } else {
                // Check if it's a technician resource
                var isTechnician = ArrTechncinList.some(function (tech) {
                    return tech.TechnicianUserID === event.ResourceID;
                });

                if (isTechnician) {
                    correctResourceType = 2;
                }
            }

            if (correctResourceType && event.resourceType !== correctResourceType) {
                console.log("Fixing event " + index + " resourceType from " + event.resourceType + " to " + correctResourceType);
                event.resourceType = correctResourceType;
                event.resource = event.ResourceID; // Make sure resource field matches ResourceID
            }
        });

        console.log("Events after validation:", localEvents);
    }






    function initializeScheduler() {

        validateAndFixEvents();


        var resources = buildResourcesArray();
        var dataSource = buildDataSource();

        if (scheduler && typeof scheduler.destroy === "function") {
            scheduler.destroy();
            $("#scheduler").empty(); // Optional
        }

        scheduler = $("#scheduler").kendoScheduler({
            date: new Date("2025/7/15"),
            startTime: new Date("2025/7/15 08:00"),
            endTime: new Date("2025/7/15 18:00"),
            height: 800,
            eventHeight: 50,
            majorTick: 60,
            views: [
                "day",
                "week",
                "month",
                {
                    type: "timeline",
                    selected: true,
                    startTime: new Date("2025/7/15 08:00"),
                    endTime: new Date("2025/7/15 18:00"),
                    workDayStart: new Date("2025/7/15 08:00"),
                    workDayEnd: new Date("2025/7/15 18:00"),
                    majorTick: 60,
                    minorTickCount: 2,
                    showWorkHours: true
                },
                {
                    type: "timelineWeek",
                    startTime: new Date("2025/7/15 08:00"),
                    endTime: new Date("2025/7/15 18:00"),
                    workDayStart: new Date("2025/7/15 08:00"),
                    workDayEnd: new Date("2025/7/15 18:00"),
                    majorTick: 60,
                    minorTickCount: 2,
                    showWorkHours: true
                }
            ],
            timezone: "Etc/UTC",
            dataSource: dataSource,
            resources: resources,
            group: {
                resources: ["resourceType", "resource"],
                orientation: "vertical"
            },
            /*eventTemplate: $("#event-template").html(),*/
            add: function (e) {
                e.preventDefault();
                openScheduleModal(null, e.event);
            },
            edit: function (e) {
                e.preventDefault();
                openScheduleModal(e.event, null);
            },
            remove: function (e) {
                if (confirm("Are you sure you want to delete this event?")) {
                    console.log("Deleting event:", e.event);
                    // The scheduler will handle the delete automatically
                } else {
                    e.preventDefault();
                }
            },
            dataBound: function (e) {

                // Add tooltips
                $(".k-event").each(function () {
                    var uid = $(this).attr("data-uid");
                    var event = scheduler.dataSource.getByUid(uid);
                    //if (event) {
                    //    $(this).attr("title", buildTooltipContent(event));
                    //}
                });
            }
        }).data("kendoScheduler");
    }



    function buildResourcesArray() {
        var resources = [];
        var viewType = $("#hdViewType").val();

        console.log("Building resources for view type:", viewType);

        // Build the resource type grouping first
        var resourceTypeData = [];

        if (viewType === "B" || viewType === "W") {
            resourceTypeData.push({
                text: "Workstation",
                value: 1,
                color: "#2572c0"
            });
        }

        if (viewType === "B" || viewType === "T") {
            resourceTypeData.push({
                text: "Technician",
                value: 2,
                color: "#f8a398"
            });
        }

        // Add resourceType as the first resource for grouping
        resources.push({
            field: "resourceType",
            name: "resourceType",
            title: "Resource Type",
            dataSource: resourceTypeData
        });

        // Build individual resources with correct resourceType values
        var allResources = [];

        // Add workstations
        if (viewType === "B" || viewType === "W") {
            var workstationData = getFilteredWorkstationData();
            console.log("Adding workstations:", workstationData);

            workstationData.forEach(function (item) {
                allResources.push({
                    text: item.WorkStationName,
                    value: item.WorkStationID,
                    color: "#2572c0",
                    resourceType: 1  // CRITICAL: This must match the resourceType value above
                });
            });
        }

        // Add technicians
        if (viewType === "B" || viewType === "T") {
            console.log("Adding technicians:", ArrTechncinList);

            ArrTechncinList.forEach(function (item) {
                allResources.push({
                    text: item.TechnicianName,
                    value: item.TechnicianUserID,
                    color: "#f8a398",
                    resourceType: 2  // CRITICAL: This must match the resourceType value above
                });
            });
        }

        // Add the individual resources
        resources.push({
            field: "resource",
            name: "resource",
            title: "Resource",
            valuePrimitive: true,
            dataSource: allResources,
            group: "resourceType"  // This tells Kendo to group by resourceType
        });

        console.log("Final resources array:", resources);
        console.log("All individual resources:", allResources);

        return resources;
    }

    function getFilteredWorkstationData() {
        var productCodes = $("#hdcurrentTestCodeToAllocate").val();
        var filteredData = ArrWorkStationProductTaskMappingList;

        if (productCodes && productCodes.trim() !== "") {
            var codes = productCodes.split(',').map(function (code) {
                return code.trim();
            });
            filteredData = ArrWorkStationProductTaskMappingList.filter(function (item) {
                return codes.indexOf(item.ProdCode) !== -1;
            });
        }

        // Get distinct workstations
        var distinctWorkstations = [];
        var seen = {};

        filteredData.forEach(function (item) {
            var key = item.WorkStationID; // + "_" + item.TaskID;
            if (!seen[key]) {
                seen[key] = true;
                distinctWorkstations.push(item);
            }
        });

        return distinctWorkstations;
    }

    function buildDataSource() {
        return new kendo.data.SchedulerDataSource({
            batch: true,
            transport: {
                read: function (options) {
                    try {
                        options.success(localEvents);
                    } catch (error) {
                        console.error('Error reading events:', error);
                        options.error(error);
                    }
                },
                create: function (options) {
                    try {
                        var newEvents = options.data.models || [options.data];

                        newEvents.forEach(function (event) {
                            event.ScheduleID = nextId++;
                            localEvents.push(event);
                        });

                        options.success(newEvents);

                    } catch (error) {
                        console.error('Error creating events:', error);
                        options.error(error);
                    }
                },
                update: function (options) {
                    try {
                        var updatedEvents = options.data.models || [options.data];

                        updatedEvents.forEach(function (updatedEvent) {
                            var index = localEvents.findIndex(function (e) {
                                return e.ScheduleID === updatedEvent.ScheduleID;
                            });

                            if (index !== -1) {
                                localEvents[index] = updatedEvent;
                            }
                        });

                        options.success(updatedEvents);

                    } catch (error) {
                        console.error('Error updating events:', error);
                        options.error(error);
                    }
                },
                destroy: function (options) {
                    try {
                        var deletedEvents = options.data.models || [options.data];

                        deletedEvents.forEach(function (deletedEvent) {
                            var index = localEvents.findIndex(function (e) {
                                return e.ScheduleID === deletedEvent.ScheduleID;
                            });

                            if (index !== -1) {
                                localEvents.splice(index, 1);
                            }
                        });

                        options.success(deletedEvents);

                    } catch (error) {
                        console.error('Error deleting events:', error);
                        options.error(error);
                    }
                }
            },
            schema: {
                model: {
                    id: "ScheduleID",
                    fields: {
                        ScheduleID: { type: "number" },
                        title: { from: "title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", validation: { required: true } },
                        end: { type: "date", validation: { required: true } },
                        resource: { nullable: true },
                        resourceType: { nullable: true },
                        isAllDay: { type: "boolean", from: "IsAllDayEvent", defaultValue: false },
                        description: { type: "string" },
                        Status: { type: "string" },
                        ScheduleBatchID: { type: "string" },
                        ResourceID: { type: "string" },
                        ResourceName: { type: "string" },
                        ResourceMappedForID: { type: "string" },
                        ResourceMappedForName: { type: "string" },
                        JobNo: { type: "string" },
                        ProdCode: { type: "string" },
                        JobDetailUniqueID: { type: "string" },
                        Prod_Name: { type: "string" },
                        ScheduleCode: { type: "string" },
                        FromDate: { type: "string" },
                        ToDate: { type: "string" },
                        FromTime: { type: "string" },
                        ToTime: { type: "string" },
                        TypeID: { type: "number" }
                    }
                }
            }
        });
    }

    function refreshScheduler() {
        initializeScheduler();
        populateResourceDropdown();
    }

    function openScheduleModal(event, newEvent) {
        currentEditingEvent = event;

        // Populate resource dropdown
        populateResourceDropdown();

        if (event) {
            // Edit mode
            $("#modalTitle").text("Edit Schedule Event");
            $("#eventId").val(event.ScheduleID);
            $("#eventTitle").val(event.title);
            $("#eventStart").val(formatDateTimeLocal(event.start));
            $("#eventEnd").val(formatDateTimeLocal(event.end));
            $("#eventResource").val(event.ResourceID);
            $("#eventDescription").val(event.description || "");
            $("#eventTypeId").val(event.TypeID);
            $("#eventResourceId").val(event.ResourceID);
        } else {
            // Add mode
            $("#modalTitle").text("Add Schedule Event");
            $("#eventId").val("");
            $("#eventTitle").val("");
            $("#eventStart").val(formatDateTimeLocal(newEvent.start));
            $("#eventEnd").val(formatDateTimeLocal(newEvent.end));
            $("#eventResource").val("");
            $("#eventDescription").val("");
            $("#eventTypeId").val("");
            $("#eventResourceId").val("");
        }

        $('#scheduleModal').modal('show');
    }



    function populateResourceDropdown() {
        var dropdown = $("#eventResource");
        dropdown.empty();
        dropdown.append('<option value="">Select Resource</option>');

        var resources = buildResourcesArray();
        if (resources.length > 1) {
            var groupedResources = {
                Workstations: [],
                Technicians: []
            };

            resources[1].dataSource.forEach(function (item) {
                if (item.resourceType === 1) {
                    groupedResources.Workstations.push(item);
                } else if (item.resourceType === 2) {
                    groupedResources.Technicians.push(item);
                }
            });

            // Append Workstations
            if (groupedResources.Workstations.length > 0) {
                var wsGroup = $('<optgroup label="Workstations"></optgroup>');
                groupedResources.Workstations.forEach(function (ws) {
                    wsGroup.append('<option value="' + ws.value + '">' + ws.text + '</option>');
                });
                dropdown.append(wsGroup);
            }

            // Append Technicians
            if (groupedResources.Technicians.length > 0) {
                var techGroup = $('<optgroup label="Technicians"></optgroup>');
                groupedResources.Technicians.forEach(function (tech) {
                    techGroup.append('<option value="' + tech.value + '">' + tech.text + '</option>');
                });
                dropdown.append(techGroup);
            }
        }
    }



    function saveScheduleEvent() {
        //if (!$("#scheduleForm")[0].checkValidity()) {
        //    $("#scheduleForm")[0].reportValidity();
        //    return;
        //}

        var startDate = new Date($("#eventStart").val());
        var endDate = new Date($("#eventEnd").val());
        var selectedResource = $("#eventResource").val();

        // Determine TypeID based on selected resource
        var typeId = 1; // default to workstation
        var resourceName = "";
        var resourceMappedForID = "";
        var resourceMappedForName = "";

        // Find the selected resource details
        var resources = buildResourcesArray();
        var resourceData = resources[1].dataSource.find(function (r) { return r.value === selectedResource; });

        if (resourceData) {
            typeId = resourceData.resourceType;
            resourceName = resourceData.text;

            if (typeId === 1) {
                // Workstation
                resourceMappedForID = resourceData.taskId;
                resourceMappedForName = resourceData.taskName;
            } else {
                // Technician
                resourceMappedForID = resourceData.technicianUserId;
                resourceMappedForName = resourceData.text;
            }
        }

        var eventData = {
            ScheduleID: $("#eventId").val() || nextId++,
            Status: "Active",
            ScheduleBatchID: "BATCH" + new Date().getTime(),
            ResourceID: selectedResource,
            ResourceName: resourceName,
            ResourceMappedForID: resourceMappedForID,
            ResourceMappedForName: resourceMappedForName,
            JobNo: $("#hdJobNo").val(),
            ProdCode: $("#hdcurrentTestCodeToAllocate").val().split(',')[0] || "",
            JobDetailUniqueID: $("#hdSelectedJobIDs").val().split(',')[0] || "",
            Prod_Name: "Product Name",
            ScheduleCode: "SCH" + new Date().getTime(),
            FromDate: kendo.toString(startDate, "yyyy/M/d"),
            ToDate: kendo.toString(endDate, "yyyy/M/d"),
            FromTime: kendo.toString(startDate, "HH:mm"),
            ToTime: kendo.toString(endDate, "HH:mm"),
            title: $("#eventTitle").val(),
            IsAllDayEvent: false,
            description: $("#eventDescription").val(),
            TypeID: typeId,
            start: startDate,
            end: endDate,
            resource: selectedResource,
            resourceType: typeId
        };

        if (currentEditingEvent) {
            // Update existing event
            var existingEvent = scheduler.dataSource.get(currentEditingEvent.ScheduleID);
            for (var key in eventData) {
                existingEvent.set(key, eventData[key]);
            }
        } else {
            // Add new event
            scheduler.dataSource.add(eventData);
        }

      
        $('#scheduleModal').modal('hide');
    }

    function formatDateTimeLocal(date) {
        var d = new Date(date);
        var month = ('0' + (d.getMonth() + 1)).slice(-2);
        var day = ('0' + d.getDate()).slice(-2);
        var hours = ('0' + d.getHours()).slice(-2);
        var minutes = ('0' + d.getMinutes()).slice(-2);
        return d.getFullYear() + '-' + month + '-' + day + 'T' + hours + ':' + minutes;
    }



</script>

<input type="hidden" id="hdViewType" value="B" />
<input type="hidden" id="hdcurrentTestCodeToAllocate" value="PROD001,PROD002,PROD003,PROD004,PROD005" />
<input type="hidden" id="hdJobNo" value="JOB001" />
<input type="hidden" id="hdSelectedJobIDs" value="JD001,JD002" />

     <div class="resource-controls">
         <div class="row">
             <div class="col-md-3">
                 <label for="ddlViewType">View Type:</label>
                 <select id="ddlViewType" class="form-control" style="height: 38px;">
                     <option value="B">Both (Workstation & Technician)</option>
                     <option value="W">Workstation Only</option>
                     <option value="T">Technician Only</option>
                 </select>
             </div>
             <div class="col-md-3" style="display:none">
                 <label for="txtProductCodes">Product Codes:</label>
                 <input type="text" id="txtProductCodes" class="form-control" placeholder="PROD001,PROD002,PROD003,PROD004,PROD005" />
             </div>
             <div class="col-md-3">
                 <button id="btnRefreshScheduler" class="btn btn-primary" style="margin-top: 25px;">Refresh Scheduler</button>
             </div>
         </div>
     </div>

     <div class="scheduler-container">
         <div id="scheduler" style="width:100%"></div>
     </div>

hi here i have inserted my code , i have workstation and technician two groups, and i want to show the workstation list under the workstation group and technician list under the techncian group, this works fine when i selecting the viewtype as T ot W but in B i have to give the both list but i mentioned the resourcetype as the list belongs to which group , but still calender is showing both list in both group , i am trying this implementation in 2025 version

anyone please give me the solution for this

Scheduler

answered on 18 Jul 2025