Loading Kendo JS on the client side proves to be rather time-consuming

Working on my project, I have encountered a problem with the kendo ui scheduler where the downloading of the kendo js and css files on the client side is causing slowness on our website. To address this issue, we are attempting to download the kendo js and css files only when the scheduler calendar page is loaded. However, we are facing difficulties in adding the dependency "kendo.directive." Can anyone suggest how to add this dependency or provide an alternative solution to reduce the delay?

Below is the code snippet for reference:

myApp.requires.push('kendo.directives');

myApp.controller('CalenderController',['$scope', '$http', 'StatsService', function ($scope, $http, StatsService) {
    var self=this;

    $scope.schedulerOptions = {
        date: new Date(),
        startTime: new Date(),
        showWorkHours: true,
        height: 600,
        views: [
            "day",
            {type: "week", selected: true},

        ],
        editable: {
            destroy: false,
            create: false,
            template: $("#editor").html()
        },
        timezone: "GMT",
        dataSource: {
            batch: true,
            transport: {
                read: function (options) {
                    url = '/consultants/applications/interviews';
                    $http.get(url).success(function (data, status, headers, config) {
                        options.success(data.result);
                    }).error(function (data, status, headers, config) {
                        options.error(data);
                    });
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "interviewId",
                    fields: {
                        taskId: {from: "id", type: "number", editable: false},
                        candidateName: {from: "candidateName" , editable: false},
                        title: {from: "title", defaultValue: "No title" , editable: false},
                        companyName: {from: "companyName" , editable: false},
                        start: {type: "date", from: "interviewTiming", editable: false},
                        end: {type: "date", from: "interviewEndTiming" , editable: false},
                        candidateEmail: {from: "candidateEmail" , editable: false},
                        candidateMobile: {from: "candidateMobile" , editable: false}
                    }
                }
            }
        }
    };
}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to alter the div post user authentication

I'm in the process of developing a website with a single-page application setup. I'm utilizing Node.js for the backend and Angular for the frontend. The challenge I'm facing is displaying a specific div when a user is not logged in, and swit ...

When using Javascript's querySelector, often times it returns null

Here is the HTML code I am working with: <button class="pop-btn"> Pop </button> While I was able to style this button using CSS, I encountered a problem when trying to select it in Javascript: const Population_div_Button=document. ...

Unable to retrieve value - angularJS

An AngularJS application has been developed to dynamically display specific values in an HTML table. The table consists of six columns, where three (Work Name, Team Name, Place Name) are fixed statically, and the remaining three columns (Service One, Servi ...

An error has occurred: When trying to access a property that does not exist on an undefined object. Utilize AngularJS to retrieve a value from an input

HTML Code <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Ionic Sample ToDoListApp</title> <link href="//code.i ...

What could be the reason for the emptiness of my AngularJS scope object?

The code snippet in my controller looks like this: app.controller("weeklyLogViewer", function ($scope, $http){ $scope.allLogs = {}; $http({ method: 'POST', url: '../Utilities/WeeklyLog.php', data: $scope.dateSelected, ...

Variations in CSS display across various browsers

I'm currently facing an issue while learning web development. The expected result only appears when I preview my website on an old version of Internet Explorer, but it doesn't show up correctly when opened on Firefox or Chrome. The code I have i ...

Is it possible to rearrange column order in Bootstrap 4x according to different viewport sizes?

One of the great things about Bootstrap is its ability to rearrange columns regardless of the HTML structure. However, I am looking to have a different order of elements when the viewport size is smaller (e.g., Mobile). The current HTML structure looks li ...

Embedding individual files as components

I am contemplating the possibility of migrating an AngularJS (1.x) webapp to vue.js. This application features numerous "widgets" on its main page <script optimize-inline src="data/widgets/solargraph/solargraph.js"></script> <script optimi ...

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

Description While navigating on mobile browsers, I'm facing a challenge with keeping an element centered as I scroll due to the browser window minimizing. I've experimented with different solutions such as utilizing the react-scroll library and ...

ngClick being assessed against the scope rather than the isolated scope

I'm encountering an issue with a directive that initially seemed simple to create. It appears that my problem is related to the scope in which an expression is being evaluated. For a demo, you can check out this plunker. The JavaScript code I have i ...

Resolving Uncaught TypeError in React when trying to read properties of undefined (specifically 'map')

As a newcomer to React and API usage, I am facing difficulty resolving the error below. My goal is to showcase a carousel of images using React.js but encountered this issue: Error message: Popular.jsx:26 Uncaught TypeError: Cannot read properties of unde ...

Unable to hide the mobile menu button

I am currently working on a fun website project . I am facing an issue with the mobile menu button not disappearing using display:none in Safari on my iPhone when in landscape mode, even though it works fine in Chrome. My goal is to make the #menu-button ...

Align the center of a grid div that does not contain any items

Below are the code snippets provided: .grades_dashboard_m {} .three_separation { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 60px; } .grades_dashboard_box { height: 130px; width: 160px; background-color: #00 ...

bottom of the page contains the solution

I am currently working on creating a print stylesheet for my website. On each page, there is a footer that needs to be positioned at the bottom of the printed page, but only if there is a spacing of 30pt between the main content and the footer. In cases wh ...

Having trouble with the focusout() function not registering on the search box?

When using the focusout function, I encountered an issue where clicking on a title in the search results would prevent redirecting to the title page. Although the function worked properly when closing the search results by clicking on a different element o ...

dynamic color-changing feature on the menu

I have a navigation bar on my website with a set of sub-menus that appear when hovered over. I want to make the navigation bar change color dynamically each time it is hovered over. Additionally, I would like to add a range of colors to choose from. For ...

What is the best way to use scrollIntoView() to display an additional item at the top or bottom of the visible area

When implementing scrollIntoView() with navigation buttons (up and down), I aim to display two items at a time to signal to the user that there are more items to navigate. However, the first and last items should retain their default behavior so the user u ...

Images of equal height without compromising the resolution

How can I create responsive images with the same height inside a DIV tag, with a specified height of 200px? Any assistance would be greatly appreciated. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="desc ...

Need Some Help Reversing the Direction of This CSS Mount Animation?

Exploring this fiddle, I encountered a small div showcasing an opacity animation. The animation smoothly executes when the state transitions to true upon mounting the component, causing the div to fade in beautifully. However, I faced a challenge as the an ...

"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

After relying solely on "pre-made" components like Mui or TailWind, I decided to create a component using only CSS and maybe JavaScript. However, I encountered some difficulties when attempting to position a div inside an image using relative and absolute ...