Questions on Kendo UI for Angular Forum

1 answer

25 views

How can I use a kendo-dropdownlist inside an ngbDropdown

I'm implementing a search form using an ngbDropdown and the form contains a kendo-dropdownlist (to select what object type they want to search)

Unfortunately, when I select an option from the dropdown list, the menu closes. "autoClose" set to "false" works, but gives unwanted behaviour (in that the form itself almost never goes away). Worse, "autoClose" set to "outside" makes no difference.

Is there something I'm doing wrong?

Just to give an idea of what I'm doing, this is the beginning of the code (using Kendo 17.3.12):

<div ngbDropdown [autoClose]="'outside'" #searchMenu="ngbDropdown">
  <div id="searchMenuInner" ngbDropdownToggle>
    <span class="fa-solid fa-magnifying-glass"></span>
  </div>
  <div ngbDropdownMenu aria-labelledby="searchMenuInner">
    <div ngbDropdownItem>
      <div class="menu-header">Search</div>
      <div class="menu-item">
        <kendo-dropdownlist #searchType [data]="searchableItems"

DropDownList

answered on 04 Apr 2025

1 answer

31 views

Expanding/Collapsing issue on Treelist component

Hello,

We encountered a problem inside our app while using the kendo-treelist component.

As shown in the video attached, we use a template to edit the values in the tree, which is either kendo-dropdownlist or kendo-numerictextbox. At the press of the kendo-icon-wrapper, which contains that arrow SVG icon (for increasing/decreasing the value or selecting from the dropdown), the whole row will either collapse or expand depending on the current state that it has.

From debugging, we believe that because the same SVG icon has been used, it might trigger the collapsing/expanding.

After adding a kendo-icon-wrapper component inside that cell, we could observe the same behaviour when pressing next to the 'test' text.

We are looking for a solution to this problem.

Thank you in advance.

DropDownList

NumericTextBox

TreeList

answered on 28 Mar 2025

0 answers

42 views

Filter with dropdownlist of objects not displaying chosen option

I used this page https://www.telerik.com/kendo-angular-ui/components/filter/expression-value-template as a reference to get a filter working on my application. We have a list of objects that have a name and id, used as the the text and value of the drop down. Selecting an option sets the filter option correctly and filters the list, but the drop down list does not show that any options have been selected. Is this just an issue with object dropdownlists on filters?

I couldn't get stackblitz to work, but here's an example that produces the issue.

import { Component } from '@angular/core';
import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
import { FilterModule } from '@progress/kendo-angular-filter';
import {
  CompositeFilterDescriptor,
  FilterDescriptor,
} from '@progress/kendo-data-query';
@Component({
  selector: 'app-filter-test',
  standalone: true,
  imports: [FilterModule, DropDownListModule],
  template: `
<kendo-filter #filter [value]="filterDescriptor" (valueChange)="onFilterChange($event)">
<kendo-filter-field field="partnerId" title="Partner" editor="string" [operators]="['eq', 'neq']">
    <ng-template kendoFilterValueEditorTemplate let-currentItem>
        <kendo-dropdownlist
            [data]="businessNames"
            (valueChange)="editorValueChange($event, currentItem, filter.value)"
            textField="name"
            valueField="id"></kendo-dropdownlist>
    </ng-template>
</kendo-filter-field>
</kendo-filter>
`,
})
export class FilterTestComponent {
  private _businessEntities: { id: number; name: string }[] = [
    { id: 1, name: 'Test' },
  ];
  public filterDescriptor: CompositeFilterDescriptor = {
    logic: 'and',
    filters: [],
  };
  public get businessNames(): { id: number; name: string }[] {
    return this._businessEntities;
  }
  constructor() {}
  public onFilterChange(value: CompositeFilterDescriptor): void {
    this.filterDescriptor = value;
  }
  public editorValueChange(
    value: any,
    currentItem: FilterDescriptor,
    filterValue: CompositeFilterDescriptor
  ): void {
    currentItem.value = value.id;
    this.onFilterChange(filterValue);
  }
}

Data Query

DropDownList

Filter

asked on 21 Jan 2025

1 answer

37 views

The data-query groupBy sort "dir" is being ignored and is always in descending order

I have a flat list of objects that I am grouping for a dropdown list. The issue is that no matter what, the order of the groups is always in descending order, even if I provide the "dir" sort descriptor. Please see the following code

//Group departments by user departments and other for easier access on UI
this.departments.forEach(department => {
  department["subCategory"] = this.isMyDept(department.id) ? "My Departments": "Others";
});
this.departmentGrouping = groupBy(this.departments, [
  { field: "subCategory", dir: "asc" },
]) as GroupResult[];

<kendo-dropdownlist
            [(ngModel)]="deptID"
            [data]="departmentGrouping"
            [filterable]="true"
            [showStickyHeader]="false"
            textField="name"
            valueField="id"
            [valuePrimitive]="true"
          >
</kendo-dropdownlist>

When my dropdown is displayed, the "Others" group is always on top. It doesn't matter if I change the "dir" descriptor to "asc" or "desc" in the groupBy function, nothing changes. How do I sort the group order so I can have "My Departments" as the top group?

Data Query

DropDownList

answered on 13 Jan 2025

1 answer

59 views

When using Kendo Angular inputs, how do I get the ngModel value to populate the fields?

Hello. I'm not using a kendo form here, so that may well be my issue. I have constructed a kendo-dialog window to add or edit an object using kendo inputs--primarily text boxes with a couple of dropdowns and a checkbox. When editing I want the fields to display the current variable value. I'm binding with [(ngModel)]. The problem is that when I open an edit window, those values don't display until I click on each field (bring them into focus). Is there a way to get these to display? Thanks.

answered on 02 Jan 2025

0 answers

120 views

How to change the caret icon in DropDownList, ComboBox, NumericTextBox?

Is it possible to customize the black triangular "caret-down" icon used in the DropdownList and similar components (like ComboBox)?

I’d also like to know how to replace the "caret-up" and "caret-down" icons in the NumericTextBox.

Our apps use Font Awesome icons consistently, and I’m trying to replace these default icons with Font Awesome equivalents, but I haven’t been able to figure out how to do this. Could you provide guidance or examples?

DropDownList

Icon

asked on 22 Nov 2024

0 answers

39 views

How to select user from kendo dropdown then click kendo button do add row to Database table and displayed with kendo grid passing JSON to ajax function

//Controller
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([DataSourceRequest] DataSourceRequest request, Model x)
{
    if (x!= null && ModelState.IsValid)
    {
        DataLayer.Create();
    }
 
    return Json(new[] { x }.ToDataSourceResult(request, ModelState)); 
}
//DAL
internal static Model Create()
{
    int iRows = 0;
    Guid guid = Guid.NewGuid(); (why is guid repeated twice?)
 
    string query = @"INSERT INTO Table2" +
                    "([Column1], [Column2], [Column3], [Column4], 
                      [Column5], [Column6], [Column7], [Column8],
                      [Column9], [Column10], [Column11], [Column12], [Column13] ) " +
" VALUES " + "(@Column1," + ConfigurationManager.AppSettings["Column2"] + ", ' ', GETDATE(), 
0 ,@Column6,1,@Column8,@Column9,@BEGDATE, @END_DATE,@Column12, @Column13)";
 
    using (IDbConnection _db = OpenConnection())
    {
        iRows = _db.Execute(query);
    }
 
    if (iRows > 0)
    {
        string query2 = @"SELECT * FROM Table2 WHERE PrimaryID2 = ";
 
        using (IDbConnection _db = OpenConnection())
        {
            return _db.Query<Model>(query2, new { PrimaryID2 = guid.ToString() }).FirstOrDefault();
        }
    }
    else
    {
        return null;
    }
}
//MODEL has all the properties (Column1,2, etc)
//VIEW/AJAX
   <div class="col">
    @(Html.Kendo().Button()
    .Name("create")
    .Content("Add new row")
    .HtmlAttributes(new { type = "button",  = "btn btn-primary" })
    .Events(ev => ev.Click("create")))
   </div>
 
   <div class="col">
    .DropDownListFor(a => a.model.primarykey1,     (IEnumerable<SelectListItem>)ViewBag.dropdownlist, "-- Select id1--", new {  @class= "form-control",  @id = "id1" })
  </div>
</div>`
for my AJAX
 
function create(items) {
 
  var selectedResident = $("#primaryid1").val();
 
$.ajax({
  url: "/user/Create",
  type: "POST",
  data: { grid: items },
  traditional: true, // add this
  success: function (result) {
  $('#grid').data('kendoGrid').dataSource.read();
  $('#grid').data('kendoGrid').refresh();
  },
  error:
    function (response) {
    alert("Error: " + response);
    }
 
    });
}

updated question on 08 Oct 2024

2 answers

183 views

Strange characters in different Kendo objects

We are noticing these characters "â€<" showing up intermittently after updating our kendo-angular dependencies to 15.5.0.
It's not an issue we are able to reproduce every day, and sometimes reloading will fix it, but it will appear at the beginning of kendo window headers, and options in kendo dropdowns. We have not changed anything about our code, nor are we using any special characters ourselves in these locations.

Our angular version is 17.3.12

Is this a known issue? What would the fix be?

Thanks.

answered on 02 Oct 2024

1 answer

48 views

Treelist Angular

I have a kendo-treelist in Angular

Edit mode has only Number, Text or boolean,

 <kendo-treelist-column field="Enhed" title="Enhed"  editor="text" 
    [style]="{'text-align': 'left','min-width':'100px','padding': '0px'}"
      [headerStyle]="{'text-align': 'left'}">
       <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="Enhed">
        <span *ngIf="!kendotreelist.isEditingCell()">{{dataItem.Enhed}}</span>
        <select *ngIf="kendotreelist.isEditingCell()" type="text" [(ngModel)]="dataItem.Enhed" >
          <option *ngFor="let enhed of enheder" [value]="enhed">{{enhed}}</option>
        </select>
      </ng-template> 
    </kendo-treelist-column>

I need to make it custom select instead.

Is there any one who knows how?

DropDownList

TreeList

answered on 24 Sep 2024

1 answer

538 views

How to change the selected item's background in the popup of a dropdownlist?

Right now, the selected item's background is orange in the popup that's shown when we click on the drop down list, but I want to change it to blue, for instance. What is the style that I can apply. I have tried using css classes, popupsettings, etc. but to no avail.

For instance,