1

I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..

user2138545
  • 508
  • 1
  • 5
  • 18

2 Answers2

1

I personally have not used kendo grid, but I quickly tried the demo here, and found that it adds "k-state-active" class to the <a> element inside the <th> element.

However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.

So as far as i know, this is NOT possible in pure CSS

You need some javascript. Here is a possible solution using jQuery:

// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
  setTimeout(function() {
    // first make all headers normal, then make the filtered column header italic
    $('th.k-header.k-filterable').css('font-style', 'normal').filter(
      ':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
  }, 100);
})

setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.

My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.

But hopefully this was helpful to you! Let me know if you need any further help.

Community
  • 1
  • 1
haejeong87
  • 847
  • 1
  • 10
  • 20
  • Yaa thank you so much,its working fine in localhost,but it is not applying in the service data why?I debug the solution but i did'nt get any error. – user2138545 Mar 15 '13 at 08:01
  • You mean it works in localhost, but doesn't work in production? Can you share the link to the page that it doesn't work? – haejeong87 Mar 15 '13 at 10:28
  • Have you tried increasing the `setTimeout` delay? Perhaps your dataset is larger on production, and it requires more time to filter. Another options is using `setInterval` instead of `setTimeout`. Try them and let me know. – haejeong87 Mar 17 '13 at 04:43
0

This is possible with one CSS line:

.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}

No need to use java script.

Yustme
  • 6,125
  • 22
  • 75
  • 104
  • Does this actually work? I didn't see any elements with "k-link" class. Where did you see an element with "k-link" class? – haejeong87 May 23 '13 at 01:15
  • Use developers tool to select the grid. Hard to explain where you can see it. You're gonna have to toy around with it. For me this worked in Site.css (mvc project). – Yustme May 23 '13 at 07:25
  • I'm not sure if we're looking at the same thing :P I was testing with one in [ http://demos.kendoui.com/web/grid/filter-menu-customization.html ]. Using jQuery, $('.k-filterable .k-link') did not return anything. But I'm glad that your solution worked for @user2138545 :) – haejeong87 May 23 '13 at 23:25
  • 1
    I did a filter on the City column (shouldn't matter which one) and used the inspect element option in the dev tools of firefox. I did see '.k-filterable' but not '.k-link' in this grid. But i'm sure it was there in my project. I used the same method. The only thing i can come up with why it doesn't show up, is that i have a different kendo/css version :p – Yustme May 25 '13 at 10:11
  • That's certainly possible. Thanks for your reply! – haejeong87 Jun 06 '13 at 01:20