CODEWITHSUNDEEP
angularkendo-ui
sfaust
sfaust

Reputation: 2363

Kendo for Angular - Layout Controls not working

I'm pretty new to Angular and Kendo UI so I'm sure I'm doing something wrong but I can't figure out what. I created a test project and would like to lay out a basic shell using some Kendo layout components. I imported the package

I added the package using ng add @progress/kendo-angular-layout and it ran through and said it worked. I get the right suggestions for Kendo layout components in my IDE (Webstorm) but when it runs I get no layout components. Here is my code in the app.component.html file:

<!--The content below is only a placeholder and can be replaced.-->
<kendo-splitter orientation="horizontal" style="height: 200px">
  <kendo-splitter-pane [collapsible]="true" size="20%"><div class="pane-content"><p>left pane</p></div></kendo-splitter-pane>
  <kendo-splitter-pane><div class="pane-content"><p>Right Pane</p></div></kendo-splitter-pane>
</kendo-splitter>
<kendo-panelbar>
  <kendo-panelbar-item [title]="'test title'"></kendo-panelbar-item>
</kendo-panelbar>
<div>

</div>
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

The bottom part is just the default Angular boilerplate that I haven't removed yet but leaving it in just in case it has some effect for some reason.

The only css I have so far is this in the app component:

.pane-content{
  padding: 0 10px;
}

and this in the main app styles.css file (I did import the font from Google fonts in the index.html):

/* You can add global styles to this file, and also import other style files */
body {
  font-family: 'Martel Sans', sans-serif;
}

Here is what I see running on Chrome:

Incorrect Layout

It's layout out like it doesn't use the Kendo controls at all... I also tried this with the treeview control and it worked just fine based on their examples, but this one doesn't seem to be for some reason. Anyone know why?

--EDIT--

After the comment below I imported into app.module.ts. Here is the code in that file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {LayoutModule, PanelBarModule, SplitterModule} from '@progress/kendo-angular-layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LayoutModule,
    BrowserAnimationsModule,
    LayoutModule,
    SplitterModule,
    PanelBarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

That changed the layout only in that I now see 'test title' instead of 'Untitled'. Closer but still missing something...

Upvotes: 2

Views: 1706

Answers (2)

Alex Williams
Alex Williams

Reputation: 21

In my previous experience with Kendo, you might also need to import a css theme into your application. Without it, kendo won't style the components the way their website examples do.

Following their StackBlitz example, I see they link to a stylesheet on the index.html file. When I remove the line below, the splitter component looks similar to your edit. Give it a shot.

    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />

You can try running your code or viewing the sample above by clicking the "Open in StackBlitz" link found.

Upvotes: 2

Lazy Coder
Lazy Coder

Reputation: 1217

Make sure that you are importing the appropriate modules in your app.module.ts file...

...    
imports: [
    BrowserModule,
    LayoutModule,
    BrowserAnimationsModule,
    LayoutModule,
    SplitterModule,
    PanelBarModule
  ],
...

Upvotes: 1

Related Questions