Questions on Kendo UI for Angular Forum

0 answers

155 views

Long Progress Bar Animation Time When Reducing Steps in Stepper

I've got a use case where the number of steps in a vertically oriented stepper are dynamic.

If the number of steps is decently high (like, above 10) and the current step is also high, reducing the number of steps to a small value causes a very long and weird looking animation of the progress bar.

Here is a stackblitz demonstrating the issue

Turning off animations or reducing the time would mitigate this problem, but I think the animations are nice to have, especially when progressing through the stepper in a more traditional fashion.

ProgressBar

Stepper

updated question on 09 Oct 2024

1 answer

307 views

[Solved] Kendo Angular Gantt Chart Installation Issue

Hi,

I have been trying to install gantt chart, version 0.2.0. There are several errors when I import it in app.module.ts. I am attaching screenshot of package.json and the error.

Charts

Gantt

updated answer on 09 Oct 2024

0 answers

79 views

Kendo grid does not maintain `resizable` when using `virtual-scroll` with *ngIf

There is a problem in kendo-grid using `virtual-scroll` that does not accept changing the grid-row dynamically. Problem highlighted in this question:

https://www.telerik.com/forums/is-there-a-way-to-dynamically-set-rowheight-in-a-kendo-grid

The solution was to use *ngIf with true and false, but using resizable, and toogle the `show` property. It doesn't save the previous measurement, and I have to make it manual resizable.

stackblitz:
https://stackblitz.com/edit/angular-fxdtag-rutrah?file=src%2Fapp%2Fapp.component.ts

step 1: change the columns resizable
step 2:change the row heigh (pressing the button)

Grid

asked on 08 Oct 2024

1 answer

1.0K+ views

selectedKeys is not working after update kendo packages

I've prepared kendo grid with multiselection and everything was fine until I updated kendo packages:

Old versions:

"@progress/kendo-angular-buttons": "^5.5.2",
"@progress/kendo-angular-common": "^1.0.0",
"@progress/kendo-angular-dateinputs": "^4.3.2",
"@progress/kendo-angular-dialog": "^4.2.3",
"@progress/kendo-angular-dropdowns": "^5.5.0",
"@progress/kendo-angular-editor": "^1.2.4",
"@progress/kendo-angular-excel-export": "^3.1.5",
"@progress/kendo-angular-grid": "^4.8.4",
"@progress/kendo-angular-inputs": "^6.4.0",
"@progress/kendo-angular-intl": "^2.0.4",
"@progress/kendo-angular-l10n": "^2.0.0",
"@progress/kendo-angular-label": "^2.3.3",
"@progress/kendo-angular-layout": "^4.2.0",
"@progress/kendo-angular-listview": "^0.2.0",
"@progress/kendo-angular-menu": "^2.0.4",
"@progress/kendo-angular-notification": "^2.1.3",
"@progress/kendo-angular-pager": "^1.0.0",
"@progress/kendo-angular-pdf-export": "^2.0.4",
"@progress/kendo-angular-popup": "^3.0.0",
"@progress/kendo-angular-progressbar": "^1.0.0",
"@progress/kendo-angular-toolbar": "^3.2.1",
"@progress/kendo-angular-tooltip": "^3.0.0",
"@progress/kendo-angular-treelist": "^2.0.0",
"@progress/kendo-angular-treeview": "^5.4.2",
"@progress/kendo-angular-upload": "^6.1.0",
"@progress/kendo-data-query": "^1.5.4",
"@progress/kendo-drawing": "^1.5.12",
"@progress/kendo-theme-default": "^4.23.0",
"@progress/kendo-licensing": "^1.2.1",
After update operation:
"@progress/kendo-angular-buttons": "^8.0.0",
"@progress/kendo-angular-common": "^3.1.0",
"@progress/kendo-angular-dateinputs": "^7.0.1",
"@progress/kendo-angular-dialog": "^7.1.2",
"@progress/kendo-angular-dropdowns": "^7.0.2",
"@progress/kendo-angular-editor": "^4.1.3",
"@progress/kendo-angular-excel-export": "^5.0.1",
"@progress/kendo-angular-grid": "^7.2.3",
"@progress/kendo-angular-inputs": "^9.0.3",
"@progress/kendo-angular-intl": "^4.1.0",
"@progress/kendo-angular-l10n": "^4.0.0",
"@progress/kendo-angular-label": "^4.0.0",
"@progress/kendo-angular-layout": "^7.1.0",
"@progress/kendo-angular-listview": "^4.0.0",
"@progress/kendo-angular-menu": "^4.0.0",
"@progress/kendo-angular-notification": "^4.0.0",
"@progress/kendo-angular-pager": "^4.0.1",
"@progress/kendo-angular-pdf-export": "^4.0.0",
"@progress/kendo-angular-popup": "^5.0.0",
"@progress/kendo-angular-progressbar": "^3.0.0",
"@progress/kendo-angular-toolbar": "^6.0.2",
"@progress/kendo-angular-tooltip": "^4.0.1",
"@progress/kendo-angular-treelist": "^5.0.3",
"@progress/kendo-angular-treeview": "^7.1.0",
"@progress/kendo-angular-upload": "^9.0.2",
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.16.3",
"@progress/kendo-theme-default": "^5.5.0",
"@progress/kendo-licensing": "^1.2.2",
My Kendo Grid properties:
  <kendo-grid  
  [selectable]="selectableSettings"
  (selectedKeysChange)="keyChange($event)"
  kendoGridSelectBy="id"
  [selectedKeys]="mySelection"
  >
Before update everything was fine I mean, I had correct objects (ids) into mySelection array number property.
Defined property into component:
    mySelection: number[] = [];
Selectable settings:
        this.selectableSettings = {
          checkboxOnly: true,
          mode: "multiple"
        };
KeyChange method:
    keyChange(e){
        this.closeEditor();
        if(e.length > 0) {
            this.isSelectionDisabled = false;
        } else {
            this.isSelectionDisabled = true;
        }
        this.extractDataItems = [];
        this.extract();
    }
Extract method:
    extract() {
        this.mySelection.forEach(idx => {
            this._subs.add(
                this.timeBookings$.pipe(
                    map(items => items.find(item => item.id === idx)
                )).subscribe(r => {
                    if(this.mySelection.length > 0 && r) {
                        this.extractDataItems.push(r);
                    }
                })
            );
        });
    }
Important!
When I'm selecting some rows - mySelection is always empty.
I know that in keyChange(e) method I can do something like:
this.mySelection = e;
and everything will work as should but why it was working correctly before update and after not?
Parameter of:
keyChange(e) - parameter e has correct value all the time

Grid

MultiSelect

answered on 08 Oct 2024

0 answers

76 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

191 views

FORCE USE FORMAT US FOR SPANISH LOCALE USING ANGULAR?

I have a question on this, i have a service in my application that is switching the language of website (including this

(<CldrIntlService>this.intlService).localeId = language;

Also i have some kendo-numerictextbox in my project that need to be force set to USA currency format always, how can i achieve this.

FormField

NumericTextBox

answered on 07 Oct 2024

0 answers

93 views

How to make the file list appear to the right of to the 'Select' button and dropzone rather than beneath it.

The <ul> containing the list of files by default appears beneath the button and dropzone. How can I move it so it appears to the right instead?

FileSelect

asked on 07 Oct 2024

2 answers

226 views

[Solved] Bug: Unnecessary console warning when sticky grid set with responsive column enabled

I've got a kendo grid with a responsive column set up as described in the docs

I also made a column sticky on the part of the grid that renders when the screen is larger.

I get this console warning because my responsive column does not (and cannot have) an explicit width set:

"Sticky columns feature requires all columns to have set width."

Grid

answered on 04 Oct 2024

0 answers

88 views

Is Kendo grid having legends?

I am using kendo grid to show the data and the data consist of different types of status with colour indication. So i have to show a legend explaining the status colour in the grid.

Do we have an option to show a grid with legend in kendo ?

Grid

updated question on 03 Oct 2024

0 answers

74 views

Can I use a custom TimeSelectorComponent in a DateTimePickerComponent ?

I want to be able to change the logic for handleNow(). This function is a part TimeSelectorComponent which is use in DateTimePickerComponet.

My initial thought was create a component class that extends TimeSelectorComponent and use it like this

<kendo-datetimepicker> 
    <custom-time-selector></custom-time-selector>
</kendo-datetimepicker>

But this doesn't seem to work. Is this even possible ?

DateTimePicker

asked on 01 Oct 2024