Remove query operation button borders

[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");   
   
}

[PointsWell]

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]

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]

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 (5.2 KiB) Viewed 39826 times

See here for how you can do this: viewtopic.php?p=57504#p57504

[syndeo]

Ok thanks for the quick reply. I'll have a look at this.

[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

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]

.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]

Capture.PNG (3.02 KiB) Viewed 39784 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]

Thanks. That makes the row look sleeker.

[hpl123]

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.