kendo-dropdownlist

[Jyothi]

HI,

We upgraded the kendo-dropdown from "@progress/kendo-angular-dropdowns": "5.0.0"  to "@progress/kendo-angular-dropdowns": "7.0.0", After the upgrade we are seeing an empty row in the dropdown. This was not the cse in the previous version.

line.

[Yanmario]

Hi Jyothi,

Indeed this sounds strange and I am not fully sure what could be the cause of not rendering the data inside the specific DropDown component. Could you provide us with the HTML and TypeScript(example dataset would be required) configuration of the component or a runnable example that demonstrates the issue on your side?

That will help me troubleshoot the component configuration and provide further details. Thank you.

Regards,
Yanmario
Progress Telerik

[Jyothi]

The example I am providing is from Telerik web site.
Default Item - DropDownList - Kendo UI for Angular (telerik.com)

The following example demonstrates how to define a defaultItem as a complex value (objects).

I pretty much changed defaultItem to be

 public defaultItem: { text: string, value: number } = { text: '', value: null };

You can see the empty row. We have a common component pretty much that take the input as the dropdown values and a place holder. Some app have place holder defined and others don't.

In the below example the placeholder empty. Hope this helps.

 

The second behavior we see is, if we do have a placeholder value as below, we see an extra row with that placeholder, which was not the case in the previous release>

Here the value defaultIte is

  public defaultItem: { text: string, value: number } = { text: 'Select Item...', value: null };

 

[Yanmario]

Hi Jyothi, 

Thank you for the additional information.

I would need to discuss this behavior with our developers and I will get back to you by next week.

Regards,
Yanmario
Progress Telerik     

[Yanmario]

Hi Jyothi,

The behavior of the defaultItem with complex value is considered a bug and the component should allow null as a value to not render the row. As such the following GitHub issue was opened on this matter:

https://github.com/telerik/kendo-angular/issues/3882

Feel free to subscribe to receive updates on that matter. I also update your Telerik Points for pointing out this behavior to us.

As for the additional row, I wasn't able to find it with the latest version of the component and Kendo Themes:

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

The HTML structure of the component looks correct and there aren't any additional elements that are rendered next to the row:

Let me know if the rendering is different on your side, and a runnable example would be also helpful.

Regards,
Yanmario
Progress Telerik     

[Jyothi]

Hi Yanmario,

For your comment,

"

The HTML structure of the component looks correct and there aren't any additional elements that are rendered next to the row:

Let me know if the rendering is different on your side, and a runnable example would be also helpful."

 

I already provided a runnable example from stack blitz in my previous update. This is again from kendo web site. I hvae sut and paste the same comment here again. Hope this helps.

The second behavior we see is, if we do have a placeholder value as below, we see an extra row with that placeholder, which was not the case in the previous release>

Here the value defaultIte is

  public defaultItem: { text: string, value: number } = { text: 'Select Item...', value: null };

[Yanmario]

Hi Jyothi,

Yes, now I do understand and improvement of the component should be made to accept null values and not render a row in such cases. Currently, the developer can check if the value is null and hide the row with custom CSS until a fix is provided in the logged bug report.

Please let me know if I can provide any further assistance on this matter.

Regards,
Yanmario
Progress Telerik     

[Jyothi]

Hi Yanmario,

 

I was able to hide it by overriding the kendo class. We do nto want to show the empty row or the place holder in the dropdown list.

k-list-item.k-selected, .k-selected.k-list-optionlabel {
    color: #ffffff;
    background-color: #039bc9;
    display: none;
}

Please let us know once the bug is fixed.

[Yanmario]

Hi Jyothi,

I am glad that you were able to hide the empty row with custom CSS applied to the component. The best way to receive updates on the bug report is to subscribe to the GitHub issue:

https://github.com/telerik/kendo-angular/issues/3882

This way you would receive notification from GitHub, which would depend on your notification settings. When a fix is available one of our developers would commend in which version is available.

Regards,
Yanmario
Progress Telerik