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

Guide to leveraging clsx within nested components in React

I am currently using clsx within a React application and encountering an issue with how to utilize it when dealing with mappings and nested components. For instance: return ( <div> <button onClick={doSomething}>{isOpened ? <Component ...

The input box refuses to accept any typed characters

I encountered a strange issue where the input box in the HTML was not allowing me to type anything. const para = document.createElement('p') const innerCard = document.getElementsByClassName('attach') for(let i = 0; i < innerCard.l ...

ng-deep is causing changes in sibling components

Facing a challenge with Angular Material Design as I discovered the need to utilize ng-deep to customize the styling of an accordion. The issue is that when I use this method, it affects another accordion in a different section which is undesirable. Is th ...

The disappearing background of a div is causing a ripple effect on the other divs layered on top of the

I'm facing an issue with my main div that has a background image filling the screen. While I've managed to make the image change constantly, the problem arises when the divs on top of the background div also fade out, making the whole page go bla ...

Top method for combining several external JavaScript libraries into a single one using webpack

Recently, I was diving into the world of webpack tutorial and it struck me that in order to combine everything into one module, scripts need to use require('./xyz'). Until now, I've always written individual scripts and loaded them in HTML u ...

Locate the parent element using a unique child element, then interact with a different child element

Can you help me come up with the correct xpath selector for this specific element? The element only has a unique href. Is it possible to locate the element by searching for the text iphone X within the href="#">iphone X and also checking for its paren ...

CSS3 variables causing issues

I want to streamline my CSS file by setting up generic variables that can be used throughout to ensure consistency and organization. For example: @shadow: 6px 6px 10px rgba(0,0,0,0.2); .shadow { box-shadow: @shadow inset; } However, when I try to a ...

"Exploring the process of integrating angular-xeditable into a MeanJS project

I recently attempted to install angular-xeditable from the link provided, but encountered issues while trying to reference the JavaScript files in layout.html after downloading it with bower. According to the documentation, these files should be added auto ...

Enhance your loader functionality by dynamically updating ng-repeat using ng-if

To better illustrate my issue, here is a link to the fiddle I created: https://jsfiddle.net/860Ltbva/5/ The goal is to show a loading message while the ng-repeat loop is still loading and hide it once all elements have been loaded. I referenced this help ...

What is the process of combining two identical objects in Angular JS?

Is it possible to merge and sort two objects in Angular JS that have the same fields, notifications.fb and notifications.tw, based on their time field? ...

Class for making elements draggable using jQuery UI

Is it possible to use jQueryui's draggable/droppable combo and add a class to the dragged item when dropped into a specific container, rather than adding a class to the container itself? I've tried adding a class to the container, but that is not ...

Hover Effect for Bootstrap Gallery

I've created a hover effect for my gallery that is embedded in a Bootstrap Grid. Although the hover effect itself works fine, on some screen sizes, the overlay ends up covering the gallery images. Does anyone have any ideas, solutions, or hints to so ...

Combining rows and columns in Flexbox design

https://i.stack.imgur.com/tDLii.png I'm able to easily create this layout using the float property, but I'm having some difficulties achieving the same with flexbox. CSS: .a { background: red; float: left; width: 30%; ...

Testing the Angular service call in a unit test using karma and jasmine

I encountered an error stating service undefined when attempting to run a unit test for a service call in my application. Despite spending considerable time trying to pinpoint the issue, I have been unsuccessful in isolating its origin. Any assistance in r ...

How can I prevent media controls from appearing in fullscreen mode on Microsoft Edge using CSS?

My video code allows for switching the video into fullscreen mode using custom controls. Here's how it looks: fullScreenButton.addEventListener("click", function() { if (video.requestFullscreen) { video.videoContainer.r ...

Equalizing the width of the border to match the width of the text

After designing a menu using a website builder with custom CSS, I found that the HTML code generated automatically by the builder needed some tweaking. Upon inspecting the code, I discovered the following structure: <div class="elementor-container elem ...

Starting an AngularJS module without an HTML page may seem like a daunting task,

I am currently developing a browser extension project using AngularJS. Within the background.js file (which contains the code that runs in the background), I have created a module with a run block. var myExtensionModule = angular.module('myExtension ...

Tips for altering the color of spans that share a common top position without affecting the surrounding sibling elements above or below

Is there a way to change the color of spans with the same top position, excluding sibling elements above or below, in a paragraph made up of spans? I've been working on how to change the color of the line of span tags that contain another span with t ...

Issue with jQuery .css() function malfunction in Internet Explorer

While trying to enhance my website, I experimented with the Add class method $("select[name='" + ABC+ i + "']").addClass('addBorder'); To my disappointment, it worked smoothly in Chrome, FF, and Safari but failed in IE. So I decided ...

Bootstrap glyphicon not in sync with input field alignment

Having an issue with aligning the upper border of a search input field when using Angular with Bootstrap and adding a glyphicon next to it. div.input-group(ng-show='feeds.length > 0') span.input-group-addon.glyphicon.glyphicon-search in ...