Selectable and Edit Inline strange font display

6 posts, 0 answers
  1. Michel
    Michel avatar
    44 posts
    Member since:
    Sep 2011

    Posted 19 Apr 2017 Link to this post

    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

  2.
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2501 posts

    Posted 19 Apr 2017 Link to this post

    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.
  5. Michel
    Michel avatar
    44 posts
    Member since:
    Sep 2011

    Posted 19 Apr 2017 in reply to Viktor Tachev Link to this post

    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.

     

  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2501 posts

    Posted 21 Apr 2017 Link to this post

    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.
  9. Tech
    Tech avatar
    1 posts
    Member since:
    Nov 2018

    Posted 10 Jun 2020 Link to this post

    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:

  11. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2501 posts

    Posted 11 Jun 2020 Link to this post

    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.
Back to Top