CODEWITHSUNDEEP
javascriptcssvue.jskendo-uikendo-grid
M Shahverdi
M Shahverdi

Reputation: 23

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.

Upvotes: 2

Views: 1919

Answers (2)

CMartins
CMartins

Reputation: 3293

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.

Upvotes: 0

Mika Steyer
Mika Steyer

Reputation: 26

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

And use for every style !important.

That should work.

Upvotes: 1

Related Questions