Remove query operation button borders

Contains tips for configurators working with Aware IM
Post Reply
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Remove query operation button borders

Post by hpl123 »

Hi all,
This is already shared somewhere but never can find it (this forum is not friendly when it comes to searching for stuff :() so reposting it here:
Initialisation script of the query:

Code: Select all

config.dataBound = function(e) {
      removeButtonClass(e);
}
function removeButtonClass(e){
   
   let gridId = e.sender.element[0].id;
   let buttons = $("#" + gridId).find("a.k-button");
   $(buttons).removeClass("k-button");   
   
}
Henrik (V8 Developer Ed. - Windows)
PointsWell
Posts: 1457
Joined: Tue Jan 24, 2017 5:51 am
Location: 'Stralya

Re: Remove query operation button borders

Post by PointsWell »

hpl123 wrote:Hi all,
This is already shared somewhere but never can find it (this forum is not friendly when it comes to searching for stuff :() so reposting it here:
Initialisation script of the query:

Code: Select all

config.dataBound = function(e) {
      removeButtonClass(e);
}
function removeButtonClass(e){
   
   let gridId = e.sender.element[0].id;
   let buttons = $("#" + gridId).find("a.k-button");
   $(buttons).removeClass("k-button");   
   
}
Thanks. Was thinking about this last week. Would be good to be able to switch this on/off at the interface level. I suppose you could switch it off globally by modifying your custom CSS file to have borders none !important
syndeo
Posts: 10
Joined: Mon Jun 07, 2021 1:43 am

Re: Remove query operation button borders

Post by syndeo »

Hi hpl123, I am finding that when using this script an inline editing grid loses focus when the record is updated. Are you experiencing this? If so have, you been able find a solution? I am using v8.6
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Remove query operation button borders

Post by hpl123 »

syndeo wrote: Thu Jul 21, 2022 7:16 am Hi hpl123, I am finding that when using this script an inline editing grid loses focus when the record is updated. Are you experiencing this? If so have, you been able find a solution? I am using v8.6
I am not using this together with inline editing anywhere so don´t have a fix for that behavior unfortunately. One thing you could try is instead of going the JS route, you go the CSS route. The JS removes the class .k-button from all buttons in the query and you should be able to manipulate this directly in the CSS i.e make changes to the .k-button classes for the query in question.

You could also do your own HTML operations and is what I usually do nowadays. I add HTML operations with icons etc. in a row:
fptasks.png
fptasks.png (5.2 KiB) Viewed 18472 times
See here for how you can do this: viewtopic.php?p=57504#p57504
Henrik (V8 Developer Ed. - Windows)
syndeo
Posts: 10
Joined: Mon Jun 07, 2021 1:43 am

Re: Remove query operation button borders

Post by syndeo »

Ok thanks for the quick reply. I'll have a look at this.
syndeo
Posts: 10
Joined: Mon Jun 07, 2021 1:43 am

Re: Remove query operation button borders

Post by syndeo »

hpl123 wrote: Thu Jul 21, 2022 11:02 am
syndeo wrote: Thu Jul 21, 2022 7:16 am Hi hpl123, I am finding that when using this script an inline editing grid loses focus when the record is updated. Are you experiencing this? If so have, you been able find a solution? I am using v8.6
I am not using this together with inline editing anywhere so don´t have a fix for that behavior unfortunately. One thing you could try is instead of going the JS route, you go the CSS route. The JS removes the class .k-button from all buttons in the query and you should be able to manipulate this directly in the CSS i.e make changes to the .k-button classes for the query in question.

You could also do your own HTML operations and is what I usually do nowadays. I add HTML operations with icons etc. in a row:
fptasks.png

See here for how you can do this: viewtopic.php?p=57504#p57504
Thanks for your assistance. I was able to create a custom css to get the desired result. No issue with the inline editing either. My original issue was the height of the row being too large with the button. Your original js above solved this issue for me, but then created the inline problem. With your css suggestion i was able to solve it. Thanks for saving lives!

Here is my custom css for others having the same problem. just fyi, i'm using a fa icon for the button image.

.my-customclass, .aw-link.k-button.aw-link-no-text{
height: 1em;
padding: 0em;
margin: 0em;
border: none;
background: none;
color: blue;
}
PointsWell
Posts: 1457
Joined: Tue Jan 24, 2017 5:51 am
Location: 'Stralya

Re: Remove query operation button borders

Post by PointsWell »

syndeo wrote: Wed Jul 27, 2022 1:01 am .my-customclass, .aw-link.k-button.aw-link-no-text{
height: 1em;
padding: 0em;
margin: 0em;
border: none;
background: none;
color: blue;
}
Do you have an image showing your output that you could share?
syndeo
Posts: 10
Joined: Mon Jun 07, 2021 1:43 am

Re: Remove query operation button borders

Post by syndeo »

Capture.PNG
Capture.PNG (3.02 KiB) Viewed 18430 times
I've put the operations on the left. You can see the cog image on the left - that being the operation and attribute being "Sec". My main issue was not the border, but the height of the button, but does look better (IMO) without the border. I removed the background colour as well.
PointsWell
Posts: 1457
Joined: Tue Jan 24, 2017 5:51 am
Location: 'Stralya

Re: Remove query operation button borders

Post by PointsWell »

Thanks. That makes the row look sleeker.
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Remove query operation button borders

Post by hpl123 »

syndeo wrote: Wed Jul 27, 2022 1:01 am
hpl123 wrote: Thu Jul 21, 2022 11:02 am
syndeo wrote: Thu Jul 21, 2022 7:16 am Hi hpl123, I am finding that when using this script an inline editing grid loses focus when the record is updated. Are you experiencing this? If so have, you been able find a solution? I am using v8.6
I am not using this together with inline editing anywhere so don´t have a fix for that behavior unfortunately. One thing you could try is instead of going the JS route, you go the CSS route. The JS removes the class .k-button from all buttons in the query and you should be able to manipulate this directly in the CSS i.e make changes to the .k-button classes for the query in question.

You could also do your own HTML operations and is what I usually do nowadays. I add HTML operations with icons etc. in a row:
fptasks.png

See here for how you can do this: viewtopic.php?p=57504#p57504
Thanks for your assistance. I was able to create a custom css to get the desired result. No issue with the inline editing either. My original issue was the height of the row being too large with the button. Your original js above solved this issue for me, but then created the inline problem. With your css suggestion i was able to solve it. Thanks for saving lives!

Here is my custom css for others having the same problem. just fyi, i'm using a fa icon for the button image.

.my-customclass, .aw-link.k-button.aw-link-no-text{
height: 1em;
padding: 0em;
margin: 0em;
border: none;
background: none;
color: blue;
}
Sure :) and looks good.
Henrik (V8 Developer Ed. - Windows)
Post Reply