The Kendo Grid is refusing to show up within the popup window

  • I am new to using Angular 2 and Kendo UI.
  • Currently, I am attempting to include a grid inside my pop-up window.
  • While I have successfully displayed the pop-up, adding the grid has proven challenging.
  • The grid is not appearing as expected in the pop-up window.
  • Could anyone offer guidance on how to resolve this issue?
  • Upon checking the console, I did not come across any error messages.
  • I am working on implementing the pop-up display using Kendo UI. You can view an example at this link.

  • To see a sample code that works, visit this JSFiddle link

  • Below, I have provided related code snippets. Due to space constraints, you can find the complete code in this JSFiddle: here

    <div class="waterPaperDocInfo">                 
            <span class="fa fa-file-text-o"></span>
            <span class="cat" (click)="cloud();">&nbsp;{{hat.paper}} paper</span> | Last Modified: {{hat.finger}} &nbsp;&nbsp;<span class="fa fa-clock-o">9:00 am</span>
    </div>

    <div id="win1" style="display:none">
        <p>First Window</p>
        <button type="button" id="open2">Open second Window</button>
            <input type="file" name="batchFile" id="batchFile" title="Select file" />
        <div id="grid"></div>

    </div>


$("#grid").kendoGrid({
        selectable: "multiple cell",
        allowCopy: true,
        columns: [
            { field: "productName" },
            { field: "category" }
        ],
        dataSource: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
        ]
    });

}
javascripthtmlcssangularkendo-ui

Answer №1

  1. For those incorporating Kendo UI with Angular2, refer to the Kendo UI for Angular 2 web guide for component instructions here
  2. To add a component in Angular 2, ensure dependencies are checked in system.config.js. If not available, download it using npm first. Then, add the module in app/ng.module.ts and utilize it in app.component.ts

  3. If you prefer an mvvm approach (Angular2), see this. The one currently used is more jquery-ish. It's unclear if Kendo prefers this method since it's not mentioned in the documentation.

  4. Personal opinion: avoid posting excessive code as it may deter readers like myself who are lazy to go through lengthy scripts

Make sure to check the line on ng.module.ts where grid, button, and dialog are imported and added to @NgModule

import { GridModule } from '@progress/kendo-angular-grid';
import { DialogModule } from '@progress/kendo-angular-dialog'
import { ButtonsModule } from '@progress/kendo-angular-buttons';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, GridModule, DialogModule, ButtonsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

You can then use it like so:

<kendo-dialog title="Kendo Dialog">
     <kendo-grid [data]="gridData">
         //your code goes here
     </kendo-grid>
</kendo-dialog>

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

Event cancellation received from IncomingMessage

I have a simple express server running on Node with versions 4.13.3 and 4.2.3, respectively. //initialization code app.put('/', function(req, res) { req.on('close', function() { console.log('closed'); }); req.on( ...

javascriptnode.jsexpressstream

Firebase ref.on('value') will repeatedly trigger, even if no changes have occurred

My current setup involves using an event listener to monitor changes in my real-time database. const [chats, setChats] = useState({}); const ref = db.ref(`users/${sender}/chat/`); ref.on('value', (snapshot) => { const data = snapshot ...

javascriptreactjsfirebasefirebase-realtime-database

What could be causing the cyclic dependency problem after upgrading to Angular 9?

I am experiencing an issue with a specific file containing the following code: import { Injectable } from '@angular/core'; import { I18n } from '@ngx-translate/i18n-polyfill'; import { isNumber } from 'lodash'; import { Confir ...

angulartypescriptangular-clikarma-webpack

HTML Error: The result is unspecified

I have written a function that is supposed to return 105; 6.5 and 110; 4.5, but instead it returns undefined: undefinedundefined: undefined. Can someone please advise me on what changes I need to make to get the correct results? I have heard about asynchro ...

javascripthtmlmongodbmeteorundefined

Hiding a related field using a designated delimiter can be achieved with JavaScript

I am looking to create a function that hides the corresponding textarea field of a dropdown. This functionality will be utilized in multiple instances, hence the need for it to be within a function. <div id="formElement1" class="field"> <labe ...

javascriptjqueryhtml

Angular 10: A Guide to Utilizing RouterModule

I'm working on enhancing one of my components by adding a button that will navigate the page to a different component : <input type="button" value="Shops List" [routerLink]="['shops-list']" class="btn&qu ...

angular

Using CSS :active can prevent the click event from firing

I've designed a navigation menu that triggers a jquery dialog box to open when a link is clicked. My CSS styling for the links includes: .navigationLinkButton:active { background:rgb(200,200,200); } To attach the dialog box, I simply use: $("#l ...

jquerycsseventsjquery-ui

Include a new row in the form that contains textareas using PHP

I'm trying to add a new row to my form, but I'm facing challenges. When I click the add button, nothing happens. If I change the tag to , then I am able to add a row, but it looks messy and doesn't seem correct to me. Here is my JavaScript ...

javascriptphphtmlformsrow

Bring in a collection of classes of various types from one TypeScript file to another

In my code file exampleA.ts, I define an object as follows: import { ExampleClass } from 'example.ts'; export const dynamicImportations = { ExampleClass }; Later, in another file named exampleB.ts, I import an array that includes class types and ...

javascripttypescript

What is the best way to dynamically generate and update the content of a select input in an Angular form using reactive programming techniques?

I have successfully developed an Angular reactive form that includes a select field populated dynamically with values retrieved from an API call. In addition, I have managed to patch the form fields with the necessary data. My current challenge is to dyn ...

angulartypescriptangular-reactive-formsform-control

Using jQuery Mobile alongside two distinct versions of jQuery

My current task involves inserting both jQuery and custom JavaScript into the DOM of an existing page. The jQuery is inserted right before my script, where I utilize window['my$'] = jQuery.noConflict(true);. This approach worked smoothly after ...

javascriptjqueryjquery-mobileconflicting-libraries

AngularJS Custom Navigation based on User Roles

I am currently developing a small web application using angular. My goal is to implement role-based navigation in the app. However, I am facing an issue where the isAdmin function does not seem to be getting called on page load, resulting in only the foo a ...

javascriptangularjs

What is the best way to identify identical companies, consolidate them into a single entity, and combine their weights for a more

I've been experimenting with various methods such as filter, reduce, and includes, but I'm struggling to grasp the concept of how to solve this. Here is an array of objects that I have: [ { name: 'GrapeCo', weight: 0.15 }, { name: ...

javascriptnode.js

What is the best way to apply an outer border to a table using CKEDITOR?

Is there a way to only add an outer border to an HTML table in CKEDITOR? I've attempted to remove the inner borders using the advanced options in CKEDITOR, but it doesn't seem to be working. <table border="1" cellpadding="1" cellspacing="1" ...

htmlcss

Utilizing Dojo widgets in Xpages

I'm having trouble applying CSS to certain dojo elements within my Xpage. Here is the CSS style sheet I am using: .formFields { color: rgb(5, 56, 107); font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: nor ...

cssxpagesxpages-extlib

Utilize JavaScript to load images at random within a Qualtrics loop and merge block

I'm currently putting together a survey on qualtrics using a block with loop and merge functionality. I've encountered an issue where, after the first iteration, the images I'm loading through javascript start disappearing. Although I can br ...

javascriptqualtrics

`@keyup.enter event listener will only be triggered upon pressing the Enter key if the focus is on

My login button only seems to work when I press the tab button after entering my email and password. I would like it to work whenever I press the enter key while on the Login page of this VueJS application. This is the HTML template: <template> ...

javascriptvue.jsenter

Execute location.replace when the "control" key is pressed

document.addEventListener('keydown', (event) => { var name = event.key; var code = event.code; if (name === 'Control') { location.replace(classroom.google.com) } if (event.ctrlKey) { alert(`Combinatio ...

javascripthtmlcss

ways to establish pathways for a function within express

My controller, var express = require('express'); var router = express.Router(); var mysql = require('mysql'); var connection = mysql.createConnection({ // connectionLimit : 100, //important host: 'localhost', user ...

javascriptnode.jsexpress

When async/await is employed, the execution does not follow a specific order

I'm curious about the execution of async/await in JavaScript. Here are some example codes: async function firstMethod(){ new Promise((resolve, reject)) => { setTimeout(() => { resolve("test1"); }, 3000); }); } async ...

javascriptnode.jsasync-awaitpromise