Questions on Kendo UI for Angular Forum

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

61 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

164 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

77 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

180 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

71 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

459 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

60 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

72 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

0 answers

82 views

Editable Cell Templates Default Back to Inputs When One Row

Hello,

I have come across an issue that I was able to replicate in a stackblitz. When using dynamic columns to display a Kendo Grid's data, specifically when the grid only contains one row, the editTemplate unexpectedly reverts to a standard input field. This behavior does not occur when the grid has multiple rows.

In my example stackblitz below, I have a dropdownlist as the edit template for the column Product Type. Upon clicking it, (sometimes a double click) it turns into a input.

To repeat:
1) add product type in multi select above grid to display row
2) Click Dropdown
3) Dropdown becomes input

I'd appreciate any help, I've tried a few things like event.preventDefault and other ways to try and stop this behavior, but I cannot figure out a way. Again, it only happens when there is one row.

Thanks in advance!

Kendo UI for Angular Example Application (stackblitz.io)

https://stackblitz.com/edit/angular-ppvmbg?file=src%2Fapp%2Fapp.module.ts

Editor

Grid

asked on 24 Sep 2024