Selectable and Edit Inline strange font display

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

    Posted 19 Apr 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. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1784 posts

    Posted 19 Apr 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.
  3. Michel
    Michel avatar
    44 posts
    Member since:
    Sep 2011

    Posted 19 Apr 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.

     

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1784 posts

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