Telerik Forums
Kendo UI for Angular Forum
1 answer
2.2K+ views

Hi,

I read about the formatPlaceholder option in the docs, but I can't find any options, whether we can set this value to null or an empty string. Currently my column filter is configured like this:


<kendo-grid-column field="year" title="Év" format="yyyy">
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-date-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter"
          activeView="decade"
          bottomView="decade"
          format="yyyy"
          [formatPlaceholder]="{
            year: '',
            month: '',
            day: '',
            hour: '',
            minute: '',
            second: ''
          }"
        >
        </kendo-grid-date-filter-cell>
      </ng-template>
    </kendo-grid-column>

As you see, I tried to set the placeholder to nothing, but no success, I get this:

How can I get rid of the 'year' text?

Thanks.

Hetali
Telerik team
 answered on 14 Oct 2021
5 answers
1.1K+ views
Hi

Im trying to limit my numeric filter row column to allow just values from 0-1000, but am having trouble finding an exact sample.

I was following the NumericFilterMenuComponent link, https://www.telerik.com/kendo-angular-ui/components/grid/api/NumericFilterMenuComponent/

I tried the code below but an unable to get the the spinner on the filter to show.  Can you provide a sample please?  Is there another way besides using the kendo-numerictextbox control?

    <kendo-grid-column field="UnitPrice" title="Unit Price Custom Filter" width="200">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
        <kendo-grid-numeric-filter-menu
            [column]="column"
            [filter]="filter"
            [filterService]="filterService"
            >
            <kendo-numerictextbox
                [max]="1000"
                [min]="0"
                [spinners]="true"
                [value]="numericValue"
                (valueChange)="numericChange($event)">
            </kendo-numerictextbox>

        </kendo-grid-numeric-filter-menu>
        </ng-template>
    </kendo-grid-column>

Thanks
Aravind
Top achievements
Rank 1
Iron
 answered on 14 Oct 2021
1 answer
106 views

Hi Team,

We have one requirement, where we want to implement the Kendo UI grid within the tab strip. In our example it may be possible that one tab strip has multiple sub tab strip and each tab strip have a Kendo UI grid as shown in the screenshot below:


We have already implement above exmpale in Javascript/JQuery we want to implement the same example in AngularJS but we have been unable to implement it. Can you please guide us to implement above example in AngularJS.

Thanks.!

Georgi Denchev
Telerik team
 answered on 14 Oct 2021
1 answer
85 views

First question: Is it possible to create in Kendo (for angular) in the editor a footer and a header?  If yes how to do that?
Second question:  If we export from the editor the layout is changed? Any ideas how to use a4 format?

Thank you!

Martin Bechev
Telerik team
 updated answer on 13 Oct 2021
3 answers
1.2K+ views

Hi Team,

Please check following link

https://stackblitz.com/edit/angular-7buwuy?file=app/app.component.ts

I have added 2 buttons
one button Save as PDF
another one is Direct Printer
Direct Print giving me expected result which is not giving by kendo-pdf-export

1. Auto Print will not work with Google Chrome that is clear
2. Most importantly Image not exporting in PDF when I'm using the google chrome browser same is working with Firefox! why?

What is the issue?

Regards,

Srinivas


Martin Bechev
Telerik team
 answered on 13 Oct 2021
1 answer
243 views
Stack Bar chart displays series names in reverse order in shared tool tip. How to add a pipe.
Trapti
Top achievements
Rank 1
Iron
 answered on 13 Oct 2021
1 answer
292 views

Right now I created a separate grid but I would like to have the list of attachments part of the file upload control if possible. How do I iterate through a collection and bind the filename, download link, remove etc..  inside the upload control ? 

 

the way I do it now is simply

<div>
        <ul>
            <li *ngFor=" let a of attachments">
                {{a.name}}
                <button type="button" (click)="download(a)">download</button>
                <button type="button" (click)="deleteAttachment(a)">delete</button>
            </li>
        </ul>
    </div>

 

Slavena
Telerik team
 answered on 12 Oct 2021
1 answer
938 views

Hi,

I have a grid with this config:

<kendo-grid
    [kendoGridBinding]="gridData.data"
    [filterable]="true"
    (add)="addHandler()"
  >

In this grid I have a checkbox column:


<kendo-grid-column field="defaultLang" title="Alapértelmezett">
      <ng-template kendoGridCellTemplate let-dataItem>
        <div style="text-align: center">
          <input type="checkbox" disabled [checked]="dataItem.defaultLang" />
        </div>
      </ng-template>
    </kendo-grid-column>

If I want to filter this column I get an error, because the filter mechanism operates on strings. How can I

make this work, that I can filter it with '0', '1', 'true', 'false'?

 

Thanks.

Martin Bechev
Telerik team
 answered on 12 Oct 2021
1 answer
736 views

Hi everyone, I'm currently working on a grid which is dynamically built and I'm experiencing some weird behaviour.

I'll try to do my best to explain it clearly, starting from the code of the grid:

<kendo-grid
        [kendoGridBinding]="kgData"
        [sortable]="true"
        [pageable]="true"
        [pageSize]="5"
        >
        <!-- BUTTONS -->
        <ng-template kendoGridToolbarTemplate>
          <button kendoGridAddCommand>Aggiungi record</button>
          <button class="k-button">
            Salva
          </button>
        </ng-template>
        <!-- HEADERS -->
        <kendo-grid-column *ngFor="let col of columnInfoArray" [field]="col.fieldname" [title]="col.description" [hidden]="col.fieldname === 'id'">
          <ng-template
            kendoGridCellTemplate
            let-dataItem>
              <!--! NUMBER  -->
              <!--
                decimals: do not allow the user to type , and . when focused
                format n0: do not put commas when the input is not focused
              -->
              <kendo-numerictextbox
                *ngIf="col.configtype === 'int'"
                kendoGridFocusable
                [decimals]="0"
                format="n0"
                [value]="dataItem[col.fieldname]"
                (valueChange)="kgUpdateValue(col.fieldname,dataItem,$event)"
                ></kendo-numerictextbox>
              <!--! SELECT  -->
              <!--
                [data]: the array of options, textField and valueField access the properties of the objects contained inside the array
                [value]: gets the default value based on the fieldname and the value
              -->
              <kendo-dropdownlist
                *ngIf="col.configtype === 'combo'"
                kendoGridFocusable
                [data]='kgSelectOptions[col.fieldname]'
                textField='label'
                valueField='value'
                [value]='kgGetDefaultOption(col.fieldname,dataItem[col.fieldname])'
                (valueChange)="kgUpdateValue(col.fieldname,dataItem,$event.value)"
                ></kendo-dropdownlist>
              <!--! CHECKBOX  -->
              <input
                *ngIf="col.configtype === 'bool'"
                kendoGridFocusable
                type="checkbox"
                kendoCheckBox
                (change)="kgUpdateValueEvent(col.fieldname,dataItem,$event)"
                />
              <!--! STRING  -->
              <input
                *ngIf="col.configtype === 'string'"
                kendoGridFocusable
                (change)="kgUpdateValueEvent(col.fieldname,dataItem,$event)"/>
          </ng-template>
        </kendo-grid-column>
      </kendo-grid>


columnInfoArray is an array of objects like this: (of course with different values every time) 

{
idfield: 1,
description: "Widget",
fieldname: "idwidget",
mandatory: true,
actionget: "widget",
configtype: "combo",
deleted: false,
filter: false
}

This tells the code the "type" of input I'm expecting, like a select box, a number, a textarea, a checkbox etc etc.
NOTE: despite I'm talking about inputs, the table isn't inside any form and forms aren't needed to get the job done.
The actionget, when present, is just a string that will be concatenated to a link and it'll get an array of objects that will look like:

{
   label: 'Some text',
   value: 1
}

There are two things that I don't understand
  1. inside the kendo-dropdownlist you can see the function kgGetDefaultOption. Inside this function I have put a console.log of a counter that starts from 0 and gets incresed every time the function is called: my kgData consists of 7 records, and I have two columns with configtype == 'combo'. I was expecting for the counter to be 14, but I get 89 instead. Also, the function is called every time I change page on the pagination bar. Why does that happen?
  2. if I check the checkbox on row 1 of page 1, every checkbox on row1 of other pages is checked as well (I'm providing a GIF that shows what I mean)

 

Unfortunately I can't provide a StackBlitz (the API calls that get the data don't work on it). I hope this is enough for you to help me, else I will provide more info.

PS: even if that esulates from the main question, if you think something can be improved for what I need, let me know! This is the very first time I'm using Kendo grid and to be honest I found the documentation really difficult to understand so I might've missed something.



Martin Bechev
Telerik team
 answered on 12 Oct 2021
1 answer
106 views

Hello,

Is there a way to display a tooltip in the dropdown button dropdown items?

thanks!

B

Hetali
Telerik team
 answered on 11 Oct 2021
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?