Questions on Kendo UI for Angular Forum

0 answers

131 views

Hi, am filter the data in kendo combo box when we click the down button the selected data is populated fine. when we click the up button on first record the focus not goes to combo box and the first record unable to select. please give any suggestion

ComboBox

asked on 25 Jan 2023

1 answer

161 views

Kendo UI Grid - new size option

Upgraded our project to the latest version this morning.

Tried the new size option available for the grid.

This works when using the default fluent theme.

We use a theme customised using the Theme builder and the size option small is not working with the custom theme. I've re-built the theme just now using the updated Theme builder and that still has not worked.

Grid

Styling

answered on 25 Jan 2023

1 answer

1.1K+ views

How to add Seperator In Kendo DropDownList - Angular

Hi,
Currently, I have a kendo dropdown list that looks like this,

I want to add a separator between the last two options (not between all options). Here is my requirement.

I want to know I can do this with angular.

DropDownList

updated answer on 24 Jan 2023

0 answers

167 views

Set position of kendo-menu-item?

I have a kendo-menu in the upper right corner of the window. When the menu items are pulled down, there is an ugly moment where the menu seems to be partially offscreen, the scrollbar appears and then the menu shifts back on screen and the scrollbar disappears. I was wondering if I could fix this by forcing the menu to appear onscreen. I don't see anything in the api to set the initial position.

Menu

asked on 23 Jan 2023

1 answer

238 views

[Solved] Theme Builder export not compatible with Kendo components v11?

Hi,

I am currently trying to upgrade Kendo UI for Angular components to their latest versions (v11.0.0).

For customization, I am using the Theme Builder (https://themebuilderapp.telerik.com). When I export the configured theme, I get some zipped files, one of which is an "index.scss", in which the first line states:

// Compatible with @progress/kendo-theme-default v.5.8.0

But the latest package of "@progress/kendo-theme-default" is version 6.0.3, and the styles generated by the Theme Builder seem not to be compatible with Kendo components v11.

I tried downgrading this package to 5.12.0, but then the file upload component looks broken:

Is this a known issue?

When will the Theme Builder be compatible with the latest Kendo packages?

Thanks in advance,

Felix

Upload

answered on 23 Jan 2023

0 answers

168 views

Is there a way to prepend group headers?

Given multiple groupings, I would like to prepend {groupField: groupValue ->} to each child grouping.

For example:

Group Result:
Supplier ID: 1
Supplier ID: 1 -> Category: Beverages
Supplier ID: 1 -> Category: Beverages -> Name: Chai

How can I retrieve the child group's parent groups, so I can prepend them to the child group's header template?

Thanks!

Grid

asked on 21 Jan 2023

1 answer

722 views

How to make Kendo Angular editor readonly or disabled

Is there a way to make both the toolbar and editor and its content somehow readonly or disabled?

Editor

answered on 19 Jan 2023

0 answers

352 views

Customize Angular Kendo 'multi-select list' with a separate search bar

I am using kendo multi-select control on my angular application. My use case is expecting a search functionality inside the dropdown. Instead of searching over the field, the dropdown should show a search text box to search the items inside the dropdown list. Like in the kendo-dropdown-filtering, but it should be a muti-select ( see the below image.)

I need to filter the multi-select items while typing in the search textbox in the dropdown. This search text box is added by me.

unfortunately, I am not able to achieve this customization. Not able to clickable or type anything on the search textbox.

            <kendo-multiselect
              aria-label="Racial Identities"
              [checkboxes]="{ checkOnClick: true, enabled: true }"
              formControlName="RaceAndEthnicity"
              #multiselect
              [autoClose]="false"
              [fillMode]="formUiStyle.dropDownFillMode"
              [data]="raceAndEthnicityData"
              [textField]="'lovDesc'"
              [valueField]="'lovCode'"
              (valueChange)="RaceAndEthnicityhange($event)"
              [popupSettings]="{
                popupClass: popupClassMultiSelect,
                animate: true
              }"
            >
              <ng-template kendoMultiSelectHeaderTemplate let-dataItem>
                <div class="input-search">
                  <span
                    class="material-icons"
                    aria-label="search racial identity"
                    aria-hidden="true"
                    >search</span
                  >
                  <kendo-floatinglabel text="Search">
                    <!-- Added by me to filter the items on a search textbox. -->
                    <kendo-textbox
                      aria-label="search racial identity"
                      [fillMode]="formUiStyle.inputFillMode"
                      placeholder="Search"
                    >
                    </kendo-textbox>
                  </kendo-floatinglabel>
                </div>
              </ng-template>
              <ng-template kendoMultiSelectItemTemplate let-dataItem>
                <span class="app-checkboxwidtext-wrapper">
                  <input
                    type="checkbox"
                    kendoCheckBox
                    attr.aria-labelledby="{{dataItem.lovDesc}}" 
                    [id]="dataItem.lovDesc"
                  />
                  <label class="k-checkbox-label" [for]="dataItem.lovDesc">{{
                    dataItem.lovDesc
                  }}</label>
                </span>
              </ng-template>
            </kendo-multiselect>

MultiSelect

asked on 19 Jan 2023

1 answer

194 views

[Solved] [Calendar] Start day of the week

In Calendar month view, can I adjust the start day of the week?

Setting Saturday as the first day of the week is an example.

https://stackblitz.com/edit/angular-vth9pa?file=src/app/app.component.ts

Calendar

answered on 19 Jan 2023

0 answers

164 views

Nested kendo-grid-column-group incorrect layout

Hello, having an issue after upgrading to Angular 15 (from Angular 6), after update the Grid to angular-kendo-grid 7.4.2, now my Grid layout is wrong on columns with nested kendo-grid-column-group, this is the code for that column:

<kendo-grid-column-group title="Body" [headerStyle]="{'background-color': '#0064A3','color': '#fff','line-height': '1em'}">
<kendo-grid-column-group title="Material" [headerStyle]="{'background-color': '#0899b2','color': '#fff','line-height': '1em'}">

<kendo-grid-column class="text-center" field="bodMatShortDescription" title="ASME" width="300" [headerStyle]="{'background-color': '#0da6c1','color': '#fff','line-height': '1em'}">
<ng-template kendoGridEditTemplate
let-dataItem="dataItem"
let-column="column"
let-formGroup="formGroup">


</ng-template>
</kendo-grid-column>

<kendo-grid-column class="text-center" field="bodMatVMS" title="VMS" width="160" [headerStyle]="{'background-color': '#0da6c1','color': '#fff','line-height': '1em'}">
<ng-template kendoGridCellTemplate let-dataItem>
{{getEchart1051ById(dataItem.bodMatVMS_ID)}}
</ng-template>

<ng-template kendoGridEditTemplate
let-dataItem="dataItem"
let-column="column"
let-formGroup="formGroup">

<kendo-dropdownlist [data]="echart1051Data_Active"
[textField]="'vms'"
[valueField]="'id'"
[valuePrimitive]="true"
[formControl]="formGroup.get('bodMatVMS_ID')">

</kendo-dropdownlist>

</ng-template>
</kendo-grid-column>

<kendo-grid-column class="text-center" field="bodMatMCS" title="MCS" width="160" [headerStyle]="{'background-color': '#0da6c1','color': '#fff','line-height': '1em'}">
<ng-template kendoGridCellTemplate let-dataItem>
{{getEchart1056ById(dataItem.bodMatMCS_ID)}}
</ng-template>

<ng-template kendoGridEditTemplate
let-dataItem="dataItem"
let-column="column"
let-formGroup="formGroup">

<kendo-dropdownlist [data]="echart1056Data_Active"
[textField]="'mcs'"
[valueField]="'id'"
[valuePrimitive]="true"
[formControl]="formGroup.get('bodMatMCS_ID')">

</kendo-dropdownlist>

</ng-template>
</kendo-grid-column>
</kendo-grid-column-group>

</kendo-grid-column-group>

I attached image below, column-group Body should be same length as column Material but is incorrect after the upgrade, any ideas why is happening? Thanks.

Grid

asked on 19 Jan 2023