Questions on Kendo UI for Angular Forum

0 answers

39 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

943 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

47 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

108 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

52 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

104 views

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

57 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

2 answers

248 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

0 answers

43 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

1 answer

55 views

Integration example

I have an open source Angular custom scrollbar library. I wanted to add an integration example with Kendo UI Grid at this page https://www.npmjs.com/package/ngx-scrollbar. but when I tried to add to the demo, it looked bad because of the watermark.

In the stackblitz the grid example doesn't show a watermark. I am wondering if there is a way to display the grid example without it for demonstration purpose.

Thanks,

Grid

Licensing

updated question on 25 Sep 2024