Blue Opal theme problem in grid

13 posts, 1 answers
  1. David
    David avatar
    18 posts
    Member since:
    Jun 2015

    Posted 27 Jul 2015 Link to this post

    Hi, I am using Kendo for ASP.Net MVC version 2015.2.264 using the Blue Opal theme.  I have a grid defined with 

     .Selectable(Sub(s) s.Mode(GridSelectionMode.Multiple))

    and editing defined as 

    .Editable(Sub(e) e.Mode(Kendo.Mvc.UI.GridEditMode.InCell))

     

    When I edit a text cell in the grid, the cell foreground colour is white as is the cell background colour resulting in not being able to see the cell contents.

    Is this an oversight?  How should I resolve this (without applying my own css style if possible)?

    I have attached a picture which shows this.

  2. David
    David avatar
    18 posts
    Member since:
    Jun 2015

    Posted 27 Jul 2015 Link to this post

    I have done a workaround by adding the following css to the page, but ideally this would just work straight out the box!

        <style>
            td.k-edit-cell {
                /* need to override kendo theme colour as it is white on white! */
                color:#36558e;
            }
        </style>​

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 29 Jul 2015 Link to this post

    Hi David,

    I tried to reproduce the illustrated issue but to no avail (short screencast capture). Could you please check your application - maybe there are some custom CSS rules which override the default Kendo UI styles?

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. David
    David avatar
    18 posts
    Member since:
    Jun 2015

    Posted 29 Jul 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana 

    It seems to be a conflict with the bootstrap stylesheet.  If I remove the link to bootstrap.min.css the blue opal style is applied correctly to the active edit cell, but when the bootstrap.min.css stylesheet is included it does not work.

    I was under the impression that the Telerik styles were meant to work in tandem with the bootstrap styles?  According to your documentation here: http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap   "While these files will ensure that Kendo UI looks a lot like Bootstrap, it is not mandatory to use them. The default Kendo UI common.css and any other theme will style the widgets differently, but they will continue to function properly."

    It appears that this is not strictly true with the Blue Opal theme in the Kendo grid.

     

     

  6. David
    David avatar
    18 posts
    Member since:
    Jun 2015

    Posted 31 Jul 2015 in reply to Iliana Nikolova Link to this post

    Any further information Iliana ?
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 31 Jul 2015 Link to this post

    Hi David, 

    I tested Kendo UI Grid with Bootstrap and BlueOpal theme, however I am not able to reproduce the issue (dojo example). Is it possible to provide an isolated runnable example / live URL which demonstrates the problem - this way I would be able to check what exactly is going wrong and provide concrete recommendations? Thank you in advance for your cooperation and time. 

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. David
    David avatar
    18 posts
    Member since:
    Jun 2015

    Posted 31 Jul 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana

    I have attached a small sample project which illustrates the behaviour.

    Regards

    David

  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 04 Aug 2015 Link to this post

    Hi David,

    Thank you for the runnable example. Kendo UI Grid for ASP.NET MVC relies on the ASP.NET MVC editor templates for creating the editing UI (documentation link), however in the provided project editor templates are not defined. Hence the inputs do not have the corresponding Kendo UI classes which is why they are not correctly styled. In the current situation I would suggest two options: 
    - Define editor templates;
    - Use additional CSS to style the edited cell:
    .k-grid .k-edit-cell {
        color: #003f59;   
    }

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. David
    David avatar
    18 posts
    Member since:
    Jun 2015

    Posted 04 Aug 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana

    Why would I need to define an editor template for a simple text column?  

    Regards

    David

  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 06 Aug 2015 Link to this post

    Hi David,

    The editor template will generate the corresponding Kendo UI classes which are used for styling. 

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. David
    David avatar
    18 posts
    Member since:
    Jun 2015

    Posted 06 Aug 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana

    That seems a little OTT to me.  I would presume that the default editors for basic types would not need to explicitly have an editor template defined, and would automatically adjust to the kendo theme being used, AND work alongside bootstrap.  That doesn't seem like an unreasonable expectation.

    Why does the kendo theme work perfectly well for grid cells that do not have editor templates defined when not used alongside bootstrap?

    You are basically saying that if I want to use Kendo alongside bootstrap have to do additional coding which is really ​NOT ideal and seems to defeat the object of ​purchasing a control suite like Kendo UI in the first place - then I may as well build the CSS myself.  

    Regards

    David

  13. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 10 Aug 2015 Link to this post

    Hi David,

    Why does the kendo theme work perfectly well for grid cells that do not have editor templates defined when not used alongside bootstrap?

    As I mentioned, Kendo UI Grid for ASP.NET MVC editing UI relies on editor templates. These editor templates will generate the corresponding Kendo UI classes which are used for styling. For example when editing a grid cell the font color is set to input.k-textbox. However when an editor template is not defined .k-textbox class is missing. Bootstrap on the other hand, sets color: inherit; (which is white in the current situation) to the input elements. Therefore to get the expected result you should use one of the suggestions from my third post. 

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  14. David
    David avatar
    18 posts
    Member since:
    Jun 2015

    Posted 10 Aug 2015 in reply to Iliana Nikolova Link to this post

    Thanks Iliana,

    I get the point that the .k-textbox class is missing.  My point is that Telerik claim that your control suite works with bootstrap out of the box, but that is evidently not true as you have to explicitly code additional styles or add additional configuration to the widget.  Whatever the kendo class is that is assigned to the TD cell when no editor template is defined should handle the bootstrap environment automatically in my opinion.  Anyone can say their control suite works automatically with bootstrap if the rider is that "as long as you code appropriate additional css to handle it".

    Anyhow, that is just my 2 cents worth.  Thanks for taking the time out to answer my post!

    David

Back to Top
UI for ASP.NET MVC is VS 2017 Ready