Telerik Forums
Kendo UI for Angular Forum
1 answer
520 views
Is there a way to make both the toolbar and editor and its content somehow readonly or disabled?
Veselin
Telerik team
 answered on 19 Jan 2023
0 answers
223 views
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>

n/a
Top achievements
Rank 1
 asked on 19 Jan 2023
1 answer
135 views

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

 

Hetali
Telerik team
 answered on 19 Jan 2023
0 answers
123 views

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">

              <!--No editable field-->
            </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.
Erik
Top achievements
Rank 1
 asked on 19 Jan 2023
1 answer
154 views

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Index out of range
    â•·
820 │     @return function-exists( $name );
    │             ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  @progress\kendo-theme-material\dist\all.scss 820:13   k-meta-function-exists()
  @progress\kendo-theme-material\dist\all.scss 6489:19  generate-utils()
  @progress\kendo-theme-material\dist\all.scss 6577:1   @import
  src\styles.scss 9:9                                   root stylesheet

 

I get the above output when I upgraded to version 6 of the material theme.  It builds successfully with version 5.x.x

 

Yanmario
Telerik team
 answered on 17 Jan 2023
1 answer
125 views

Can we achieve the same functionalites of date in the kendo chart.

The first pic(Apex chart(pic 1).) is from apex chart in which we can get the data arranged in a proper format,and when the dates increase the apex chart gives all the dates arranging it in proper manner.for example when it has 30 dates for that it gives the dates arranged in 12 colums.

and when click on year it gives 12 months with all the data arranged in proper format of 12 colums(months).

how can I achieve this in kendo chart

 

Slavena
Telerik team
 answered on 17 Jan 2023
3 answers
319 views

Hi, I'm facing with a problem when trying to use DialogService in a module less application with Angular 15

I've created a sample application to ilustrate the problem. Is based on the official documentation located at:

https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-content-template

When I launch the app the button doesn't appear and a console error is thrown about BrowserModule

Here is a screenshot with that error.

Thanks in advance!

 

Pablo
Top achievements
Rank 2
Iron
 answered on 16 Jan 2023
0 answers
85 views

I'm using a Kendo Grid in an Angular template and trying to allow a service in the component to define some css styling but having a problem.


<kendo-grid
*ngIf="canLoad()"
[data]=etc...
[rowClass] = "rowCallback"
>

public canLoad() : boolean
{
  return this.myservice !== undefined;
}

public rowCallback(context: RowClassArgs)
{
  this.myservice.doSomething();
}

I get an error "Cannot read properties of undefined (reading 'doSomething')" ... why do I get an error when the ngIf check has evaluated myservice as being instantiated? How can I get the rowCallback to wait until the service has been instantiated?

... also

I read a previous Telerik forum response where an employee stated

"The rowClass callback function is directly passed as a value to the ngClass directive,

which is then applied on each row." ... so just to see if my problem was a behaviour of Angular itself I

added <div [ngClass]="rowCallback()">testing...</div> and myService was available and the doSomething()

method was called.

John
Top achievements
Rank 1
 updated question on 16 Jan 2023
1 answer
103 views

I am using the kendoGridNoRecordsTemplate and for some reason it is displaying only in one column

 

See below.  How can I correct this

 

 

 

Martin Bechev
Telerik team
 answered on 16 Jan 2023
1 answer
260 views

I need to conditionally hide some of the columns of my kendo-multicolumncombobox based on whether or not the field they are bound too contains a value I know that the kendo-combobox-column has a hidden property but I don't know how to get access to the bound dataItem in order to determine if it has a value.

 

Basically I want to be able to do:

<kendo-combobox-column field="myField" title="cc2" [width]="50" [hidden]="!myField"></kendo-combobox-column>

this throws an error how do I get access to the value of that field for this particular item?

Martin Bechev
Telerik team
 answered on 13 Jan 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?