This is a migrated thread and some comments may be shown as answers.
Selectable and Edit Inline strange font display
5 Answers 4 Views
This is a migrated thread and some comments may be shown as answers.
Michel
Top achievements
Rank 1
Michel asked on 19 Apr 2017, 06:45 AM

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

5 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 19 Apr 2017, 11:59 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Michel
Top achievements
Rank 1
answered on 19 Apr 2017, 03:14 PM

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.

 

0
Viktor Tachev
Telerik team
answered on 21 Apr 2017, 11:09 AM
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:



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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tech
Top achievements
Rank 1
answered on 10 Jun 2020, 04:21 PM

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:

0
Viktor Tachev
Telerik team
answered on 11 Jun 2020, 03:01 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Michel
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Michel
Top achievements
Rank 1
Tech
Top achievements
Rank 1
Share this question
or