How to move or remove the filter clear button after making a change to the filter width?

[Chris]

I have a filter in my kendo grid, and I found a way to change the width on the filter, and how to remove the clear button from inside the filter, however now that I have changed the width of my filter, the second clear button (the one on the outside of the filter) is still at the extreme right of the filter and hasn't moved with the new width of the filter.

One of two things that I need to do and can't figure out is

1) Either completely remove that clear button and use the one on the inside of the filter

2) Move the clear button so its beside the filter

if anyone has any idea on how to do either of these then it would be appreciated

I provided a screen shot showing how I changed the width of the filter and you can see that the close button is way over yonder on the right, the code for my grid is below 

$("#grid").kendoGrid({
    columns: [
        {
            field: "name",
            filterable: {
                cell: {
                    showOperators: false,
                    operator: "contains",
                    inputWidth: "50%"
                }
            }
        },
        { field: "age", filterable: false }],
    filterable: { mode: "row" },
    dataSource: [{ name: "Jane", age: 30 }, { name: "John", age: 33 }],
    dataBound: function(e){
    this.element.find(".k-filtercell .k-autocomplete .k-clear-value").remove();
    }
});

 

and I also created a a working grid in the dojo and here is that link here

[Preslav]

Hi Chris,

Both of these behaviors are achievable via CSS.

To move the button to the input remove the inputWidth configuration and add "width: 50%" style to the parent element. For example, the code could look like:

<style>
  .k-filtercell{
    width: 50%
  }
</style>

For a runnable example, check this Dojo: https://dojo.telerik.com/AQAhAz

To remove the clear button, use CSS code similar to:

<style>
  .k-filtercell>span>.k-button{
    display:none
  }
</style>

A runnable example is available here: https://dojo.telerik.com/oVIlIW

I hope the above helps.


Regards,
Preslav
Progress Telerik