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