jquery - How to change the filter color in a cell that has been filtered

Question

I have this problem that I cant solve...here is my the grid

$("#grid").kendoGrid({
    dataSource: {
        type: "application/jsonp",
        transport: {
            read: {
                url: "http://" + servername + "/uBillingServices/Administration/Administration.svc/getPriceList",
                dataType: "json",
                //type: "POST",
                data: {
                    ValidFrom: denes
                }
            }
        },
        batch: false,
        schema: {
            model: {
                id: "PriceListType_ID",
                fields: {
                    ID: {
                        type: "number",
                        editable: false,
                        validation: {
                            required: true
                        },
                        nullable: false
                    },
                    PriceListType_ID: {
                        type: "number",
                        editable: false,
                        validation: {
                            required: true
                        },
                        nullable: false
                    },
                    PriceListType_Name: {
                        type: "string",
                        editable: false,
                        validation: {
                            required: true
                        },
                        nullable: false
                    },
                    BillingItem_ID: {
                        type: "number",
                        editable: false,
                        validation: {
                            required: true
                        }
                    },
                    BillingItem_Name: {
                        type: "string",
                        editable: false,
                        validation: {
                            required: true
                        }
                    },
                    FromConsumption: {
                        type: "number",
                        validation: {
                            required: true
                        },
                        editable: true
                    },
                    ValidFrom: {
                        type: "date",
                        validation: {
                            required: true
                        },
                        editable: true
                    },
                    Price: {
                        type: "number",
                        validation: {
                            required: true
                        },
                        editable: true
                    },
                    AllowDelete: {
                        type: "number",
                        validation: {
                            required: true
                        },
                        editable: true
                    }
                }
            }
        },
        pageSize: 10
    },
    //select: function () {$("#grid").style.visibility="visible";},
    change: function(arg) {
        $("#Meni")[0].childNodes[0].style.visibility = "visible";
        Selectedrow = this.select();
        if (this.dataItem(Selectedrow).AllowDelete) {
            $("#Meni")[0].childNodes[1].style.visibility = "visible";
        }
        selectedID = this.dataItem(Selectedrow).ID;
        selectedPriceList = this.dataItem(Selectedrow).PriceListType_Name;
        selectedPriceListID = this.dataItem(Selectedrow).PriceListType_ID;
        selectedBillingItem = this.dataItem(Selectedrow).BillingItem_Name;
        selectedBillingItemID = this.dataItem(Selectedrow).BillingItem_ID;
        selectedFromConsumption = this.dataItem(Selectedrow).FromConsumption;
        var tempselectedValidFrom = this.dataItem(Selectedrow).ValidFrom;
        selectedValidFrom = formatDate(tempselectedValidFrom);
        selectedPrice = this.dataItem(Selectedrow).Price;
        //selectedFilter = this.dataItem(SelectedCell).Filter;
    },
    scrollable: true,
    selectable: true,
    height: 388,
    filterable: true,
    pageable: {
        numeric: true,
        pageSizes: true,
        previousNext: false
        //refresh: true
    },
    columns: [
        {
        field: "PriceListType_Name",
        title: "Price List"},
    {
        field: "BillingItem_Name",
        title: "Billing Item"},
    {
        field: "FromConsumption",
        title: "Consumption"},
    {
        field: "ValidFrom",
        title: "Valid From",
        format: "{0:yyyy-MM-dd}"},
    {
        field: "Price",
        title: "Price",
        format: "{0:c}"}
    ]
}).data("kendoGrid");​

I made it to be filterable and know i want to access the filter so that when I click on the filter and do the filtering , the filter color to change ( or maybe the background of the cell that has been filtered)

I am pretty new at this so I really need your help

Thank you

Answer 1

Try something like this in your CSS file:

 .k-state-active, .k-state-active:hover, .k-active-filter {
 background-color: rgba(0, 133, 255, 0.59) !important;
 }