Selectable and Edit Inline strange font display

[Michel]

When using a grid with selectable and edit inline, if you select a row and edit the selected line, the

font inside cell is white so the text is not visible at all.

Any workaround ?

Is there a way to change the width of the cell border when in editing inline mode. It is a bit thick by default.

Best regards

[Viktor Tachev]

Hello Michel,

I tried to replicate the behavior you describe in the Inline Editing example, however, I was not able to. Would you send us a runnable sample or a dojo demo where the issue is replicated? This will enable us to examine the behavior locally and look for its cause.


Regards,
Viktor Tachev
Telerik by Progress

[Michel]

Hi Viktor,

Just create a New telerik Project using UI for ASP.NET Core R1 2017 using the VS2017 wizard and choose "GRID AND MENU"

In the Home\Index.cshtml,

add Edit command 

    "columns.Command(command=>command.Edit())"

add ".Selectable()" to the grid.

Run the app, select a row and click edit. Look at the Order ID cell and at Freight Cell, the content is not visible (to visualize the content you have to select the content (dble click in the cell) and you can see there are some value in blue color)

Best regards.

 

[Viktor Tachev]

Hi Michel,

Thank you for describing the steps to replicate the behavior. 

In the example the editors for OrderID and Freight fields are standard HTML input elements. Thus, the styles for them are not modified.

In order to see the text in the editors you can specify the DataType annotation to the respective fields in the Model.

public class OrderViewModel
{
    [DataType("Number")]
    public int OrderID
    {
        get;
        set;
    }

    [DataType("Number")]
    public decimal? Freight
    {
        get;
        set;
    }

    [Required]
    public DateTime? OrderDate
    {
        get;
        set;
    }

    public string ShipCity
    {
        get;
        set;
    }

    public string ShipName
    {
        get;
        set;
    }
}

This way the editor located in the EditorTemplates folder will be used for editing. If you would like more information on using editor templates you will find the article below interesting:

• http://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates

Alternatively, if you would like to use the HTML input elements as editors you can add the following CSS in order to modify the color of their text:

.k-state-selected input {
    color: initial;
}

Regards,
Viktor Tachev
Telerik by Progress

[Tech]

I am seeing this issue return in version 2020.2.513 with the default css.  If I turn on selectable, when I select the range font color changes to white, which by itself is okay since the background of the cells changes to orange.  When I select the range, the font and background return to normal.  However, when I click in a cell to edit it, the font color changes to white which is now a problem because the background during editing is also white.

I was able to workaround this by changing the color attribute from #000 to #ffffff for the below css class

.k-draghandle.k-state-selected:hover,.k-ghost-splitbar-horizontal,.k-ghost-splitbar-vertical,.k-list>.k-state-highlight,.k-list>.k-state-selected,.k-marquee-color,.k-panel>.k-state-selected,.k-scheduler .k-today.k-state-selected,.k-state-selected,.k-state-selected:link,.k-state-selected:visited{color:

[Viktor Tachev]

Hello,

 

Would you send us a sample where the described behavior is replicated? This will enable us to look into it and look for what is causing the issue.

 

Regards,
Viktor Tachev
Progress Telerik