Blue Opal theme problem in grid

[David]

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.

[David]

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>​

[Iliana Dyankova]

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

[David]

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.

 

 

[David]

Any further information Iliana ?

[Iliana Dyankova]

Hi David, 

I tested Kendo UI Grid with Bootstrap and BlueOpal theme, 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

[David]

Hi Iliana

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

Regards

David

[Iliana Dyankova]

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. the inputs do not have the corresponding Kendo UI classes which why they are not correctly styled. In the current 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

[David]

Hi Iliana

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

Regards

David

[Iliana Dyankova]

Hi David,

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

Regards,
Iliana Nikolova
Telerik

[David]

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

[Iliana Dyankova]

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. 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

[David]

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