Telerik Forums
Kendo UI for Angular Forum
4 answers
1.0K+ views

Hi,

I'm trying to display a TreeView inside a div. The intention is that the TreeView can take all the available spaces left besides other controls.

HTML (properties on other controls are omitted):

<div class="container">
    <div class="topbar">
        <div style="padding-top: 1.03125em">
            <kendo-dropdownlist [data]="configs">
            </kendo-dropdownlist>
        </div>
        <div>
            <kendo-textbox-container>
                <input kendoTextBox>
            </kendo-textbox-container>
        </div>
    </div>
    <div class="maincontent">
        <div>
            <kendo-treeview [nodes]="data" textField="text" kendoTreeViewExpandable kendoTreeViewSelectable
                kendoTreeViewHierarchyBinding childrenField="items">
            </kendo-treeview>
        </div>
        <div>
            <kendo-grid [data]="dwgs" class="view-container"></kendo-grid>
        </div>
    </div>
</div>

 

CSS:

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
 
.topbar {
  display: flex;
}
 
.topbar > div {
  flex: 1;
}
 
.maincontent {
  display: flex;
  flex: 1;
}
 
.maincontent > div {
  flex: 1;
  padding: 0.5em 0;
}
 
.view-container {
  height: 100%;
}

 

The problem is when tree node is expanded, when the total height exceeds the available heights, it seems the <ul> DOM inside kendo-treeview will extends the height of kendo-treeview and so does the div wrapping it. As a result the scroll bar of the outer most div (class="container") is enabled, instead of the scroll bar of kendo-treeview itself. This leads to that the whole section to be scrolled but not tree view only. I've tried many css settings but failed to restrict the scroll bar to be inside tree view only. The scroll bar of the tree view will be shown only when the height of the kendo-treeview is set fixed as px, which I don't want to since I prefer it to be self-adjusted.

So how should I make the tree view scroll bar to work instead of triggering the scroll bar of the outer most div?

Thanks in advance.

Randy
Top achievements
Rank 1
Veteran
 answered on 29 Apr 2020
7 answers
3.4K+ views

Hi I am trying to implement server-side filtering and sorting using the DataSourceRequest object as a parameter in a WebApi operation. 

I ran across the following article: 

https://www.telerik.com/kendo-angular-ui/components/dataquery/mvc-integration/

This seems to be using ASP.NET Core MVC controllers instead of WebApi, so my question is this the preferred method?

Our company is on .NET Core so it is not a problem but I would like to follow best practices so if anyone can provide an answer to the question above it would be greatly appreciated. 

samer
Top achievements
Rank 1
 answered on 28 Apr 2020
1 answer
186 views

Hi, 

I'm trying to get group footer rows to display while using virtual scrolling. They display just fine without virtual scrolling, but once I enable it, they are nowhere to be found.

I've been trying different combinations for the past few hours, trying to figure this out with no luck.Here is a simplified example: https://stackblitz.com/edit/angular-9f2v8c

The example has virtual scrolling enabled. As a result, the footer aggregate rows are not displayed. If you remove line 9, you'll see the footers appear. How can I get the footer rows to display with virtual scrolling enabled?

Thanks

Jim

Svet
Telerik team
 answered on 28 Apr 2020
8 answers
892 views

Couple of questions.

1. for some reason the kendo-window appears next to the button. How do you centered the kendo-window (like the kendo-dialogue).

2. How to maximized the kendo-window (cover the entire screen, I'm not asking how to expand the kendo-window content) on load?

 

 

Thanks,

Bryian Tan

n/a
Top achievements
Rank 1
 answered on 28 Apr 2020
1 answer
282 views

I am using kendo-editor in a component.  On loading the component (ngOnInit()), I am using Reactive Forms (this.form.setValue()) to bind a value to the editor control.  However, this triggers the undo stack so that the undo button on the control is enabled.  Pressing the undo button clears out the editor value (since it was set in ngOnInit().  

Is there any way to clear the undo stack after I set the initial value in the editor/form so that I am unable to Undo the initial change (which isn't really a change)?

 

Martin Bechev
Telerik team
 answered on 28 Apr 2020
3 answers
588 views

How to display % symbol for the value which was assigned from back end.

 

  { field: "CompletePer", title: "% Complete", headerAttributes: { title: '% Complete"' }, width: 80 }

 

for example CompletePer is 85 it should be 85%

i tried with template but its giving decimal values 85.00% Expected out is 85%

Hetali
Telerik team
 answered on 27 Apr 2020
1 answer
142 views
Is there any way to dynamically create kendo chart control using angular typescript
Svet
Telerik team
 answered on 27 Apr 2020
4 answers
201 views

Hi 

I am using kendo scatter chart with 4 quardant . is there any way by which we can  change the intersection from (0,0) to user provided value

 

Thanks,

Sam

Svet
Telerik team
 answered on 27 Apr 2020
5 answers
1.0K+ views

I have two questions. If a column shows icons like countries flags and I want to filter that column on a specific country is it possible for the filter to present a list of available countries and their flags? 

Second question is about the the same column. Let's say I want to sort that column not on a country name but rather on some business logic or on another column's data. Can you explain what a basic approach might be?

 

Thanks

Svet
Telerik team
 answered on 27 Apr 2020
1 answer
114 views


Hıw can i show the events in scheduler in different colours accoring to type? I didn't find it in documentation.
Martin Bechev
Telerik team
 answered on 27 Apr 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?