'How to override Kendo grid CSS

I have following grid in vue.js. I wanna to change the grid header background and text color and hide the scrollbar according to these links:

https://docs.telerik.com/kendo-ui/knowledge-base/hide-scrollbar-when-not-needed

https://www.telerik.com/forums/styling-the-k-grid-header-(mvc)

But my custom css does'nt apply to grid header and content. How do I change default kendo grid css?

<template>
    <div id="kgrid">
          <kendo-datasource ref="datasource1"
                            :transport-read-url="url + 'mylist/all'"
                            :page-size="'10'"
                            :schema-data="'data'"
                            :schema-total="'total'"
                            :transport-read-type="'POST'"
                            :transport-read-data-type="'json'"
                            :transport-read-content-type="'application/json'"
                            :transport-parameter-map="parameterMap"
                            :request-start="onBeforeSend"
                            :error="onError"
                            :server-paging="true"
                            :server-filtering="true">
          </kendo-datasource>
          <kendo-grid
                      :height="400"
                      :data-source-ref="'datasource1'"
                      :data-items="data"
          >
            <kendo-grid-column :field="'text'"
                               title="text">
            </kendo-grid-column>
          </kendo-grid>
        </div>
</template>
<script>
import {Grid, GridColumn} from '@progress/kendo-grid-vue-wrapper';
import {KendoDataSource} from '@progress/kendo-datasource-vue-wrapper';
export default {
  components: {
    'kendo-grid': Grid,
    'kendo-grid-column': GridColumn,
    'kendo-datasource': KendoDataSource
  },
}
</script>
<style scoped>
#kgrid .no-scrollbar .k-grid-header
{
    padding: 0 !important;
}

#kgrid .no-scrollbar .k-grid-content
{
    overflow-y: visible;
}
#kgrid .k-grid-header .k-header
{
    background-color: black;
    color: white
}
</style>

That's solved by removing "scoped" from style tag and adding "!important" to every style and removing ".no-scrollbar" class.

javascriptcssvue.jskendo-uikendo-grid


Solution 1:[1]

put these styles in your global styles or remove the scoped from your style tag.

And use for every style !important.

That should work.

Solution 2:[2]

Use the theme builder at Progess website and choose only the grid component. when you're done download the files and copy them to you're styles folder.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mika Steyer
Solution 2 CMartins

Related Questions