Questions on Kendo UI for Angular Forum

1 answer

232 views

Kendo-Angular-Editor: Content projection for custom toolbar

I want to configure a custom button for the editor toolbar as described here https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/ However, the button should not always be there, depending on in which other component the editor is used. So, I wanted to approach the issue by using content projection with ng-content. I implemented the custom button and placed ng-content tag into the kendo-editor definition. However, when I try to project the custom button to the editor it does not work. The button is absent.

Below my editor implementation in an own component "my-editor".

<kendo-editor #editor
              [placeholder]="placeholder"
              [(ngModel)]="content"
              [iframe]="false"
>
  <kendo-toolbar>
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>
    <ng-content></ng-content>             <!-- The place where the custom buttons should be inserted -->
  </kendo-toolbar>
</kendo-editor>

I inject the custom button like that

<my-editor>
  <custom-button></custom-button>
</my-editor>

Button

Editor

ToolBar

updated answer on 09 Jan 2025

1 answer

75 views

Package "@progress/kendo-angular-buttons" was found but does not support schematics

I just did an ng add for kendo-angular-buttons and got this message:

"Package "@progress/kendo-angular-buttons" was found but does not support schematics."

It's not an error, but it is an alarming red color on my Powershell window...

What does this mean and should I worry about it?

Button

answered on 05 Dec 2024

1 answer

40 views

Delete icon in the button slightly displaced to the left..

Hi,

I know this is minor, but it looks like that when using trashIcon from svgIcons as icon within the button, icon is slightly displaced to the left.
Strange enough, all others are centered, only this one is moved slightly to the left.

Before calling me crazy, it wasn't just me noticing it, but also a couple of users. :)

I simply added following into existing icon button example just to make sure it wasn't some broken css in the app:

      <div class="col-xs-12 col-sm-6 col-md-4 example-col">
        <button kendoButton [svgIcon]="svgTrash">Delete</button>
        <button kendoButton [svgIcon]="svgTrash" title="Delete"></button>
      </div>

Cheers :)

Vedad

Button

Icon

answered on 28 Nov 2024

0 answers

41 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

1 answer

157 views

Kendo button theme

I am changing the application theme dynamically on runtime, so when i use kendo button with property "themeColor="primary" , its not taking the dynamic theme colour of the application.

Application theme is default-ocean-blue, but its taking orange colour for button menu.

Button

Styling

answered on 29 May 2024

1 answer

89 views

Multiline button text

Is it possible to create a button with two lines of text?

I have a grid with a column for uniqueIDs. As these are usually 32 chars long I would like to display them over two lines within a button (the button will link to a page that displays a log of the end 2 end processing for that id). I have created a pipe to transform the given uniqueID into two lines of text. My pipe is:

export class HexSplitPipe implements PipeTransform {
  transform(value: string): string {
    // will take given sting and split into two lines
    const length = value.length;
    const halfLength = Math.floor(length / 2);
    // If the length is even, split evenly into two lines
    if (length % 2 === 0) {
      const firstHalf = value.substring(0, halfLength);
      const secondHalf = value.substring(halfLength);
      return `${firstHalf}&#13;&#10${secondHalf}`;
    } else {
      // If the length is odd, add one more character to the first line
      const firstHalf = value.substring(0, halfLength + 1);
      const secondHalf = value.substring(halfLength + 1);
      return `${firstHalf}&#13;&#10${secondHalf}`;
    }
  }
}
My component has the following in the uniqueID grid-column:
<kendo-grid-column field="uniqueID" title="UID" [width]="240">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button kendoButton (click)="btnE2EHistoryClick(dataItem.uniqueID)" 
title="Click to see full processing history">{{dataItem.uniqueID | hexSplit}}</button>
        </ng-template>
</kendo-grid-column>
If my UniqueID = 028F88D7E5D26C5CE063588E680A7E9E
If want to get:
028F88D7E5D26C5C
E063588E680A7E9E
Instead I get: 028F88D7E5D26C5C&#13;&#10;E063588E680A7E9E
 
How can I render the string over two lines in a kendo button
 

Button

answered on 12 Feb 2024

0 answers

49 views

Using a style gets defaulted if you select the color gradient or background

Hello,

I would like to know if this is expected behavior, if I have to possibly adjust my code, or if this is a bug.

The issue is when typing and selecting a font family or size and then selecting the left button of the color gradient or background the style will get reset to the default values for font family and style. Or, maybe this is due to the underlying ProseMirror change in node.

Please see my ScreenPal for demonstration of the issue.

https://somup.com/cZnhrjpi34

Thank you for your help.

updated question on 05 Feb 2024

1 answer

81 views

Passing button text at runtime while adding component at runtime using NgComponentOutlet

Hi,

I am trying to add KendoButton at runtime using NgComponentOutlet. The button rendered successfully but I am not able to set the inner text for it. Any idea how to do that? Here is the code.

Component.html

<ng-container *ngComponentOutlet="currentButton.component; inputs: currentButton.inputs;">  
</ng-container>

Component.ts

  get currentButton(){
    return {
      component: ButtonComponent ,
      inputs: { size: 'large', fillMode: 'solid', themeColor: 'primary',  innerText: 'Click Me' },
      module: ButtonsModule
    }
  }

The above code sets the other inputs properly and it is reflected in the UI component [e.g. themeColor], but not the innerText. Here is the screenshot.

Is there any way to achieve this?

Thank you in advance.

Button

answered on 15 Jan 2024

1 answer

497 views

Hyperlink Inside the Tooltip.

Hello,

I have a button that has a tooltip. I have a requirement to add a hyperlink inside this tooltip. When I hover the the button, this tooltip should appear with a hyperlink inside. I can click on this link to navigate to an external site like https://www.telerik.com/kendo-angular-ui.

Is it possible to have a hyperlink inside a tooltip for Kendo UI for Angular?

Thank you in advance for your help.

Button

General Discussions

Tooltip

answered on 27 Oct 2023

0 answers

704 views

Module not found even when module exists

Greetings

I am using the Kendo buttons and the Kendo utils, among others in our application. Recently, I was updating to later angular versions, namely from v11 to v16, as we have fallen too much behind. The packages for the Angular versions 6-11 do not have problems when building. The above packages, from angular v14-16, both the v8.2.2 and the v13.1.0 for buttons and the utils since the first have the following problem:

When I'm trying to import anything from @progress/kendo-angular-grid/utils and the button.service from @progress\kendo-angular-buttons, the IDE recognizes correctly the folder address and imports everything automatically without problems. When I'm trying to build or serve the application, though, it cannot find the packages under no circumstances. I tried to modify the path in the IDE, prefixed with 'node_modules', no result. I have discarded the node_modules folder and cleared the npm cache many times, again no result. I also uninstalled and reinstalled everything from the kendo libraries and any dependencies, again no result.

I built a new project in angular 16, as well, where the said packages work correctly. I cannot find for any reason which dependencies or anything else is causing the problem, so I'm asking you if you have any idea why. I am attaching below the package.json in a text file to see which other packages we are using and a screenshot of the errors, as well.

Thanks in advance

Button

Grid

asked on 14 Jul 2023