Advanced scripts - buttons in grids toolbars

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Advanced scripts - buttons in grids toolbars

Post by weblike »

Hi
I'm trying to customize my buttons in grid toolbars to look more fancy.

I'm trying to remove the extra background&border, to remain only the colored bootstrap button.
With "inspect element" from browser I see the .k-button class used and "padding:0px;" does the job.
Image

So in advanced scripts->render script of the grid I have tried these, but no results:

1. Method 1
$("#" + parser.m_gridId).find (".k-button").addClass ("myclass")

In mycss.css i have:
.myclass{
padding:0px;
}

2. Method 2

$("#" + parser.m_gridId).find (".k-button").css ("padding", "0px");

Any ideas would be much appreciated.
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
johntalbott
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Advanced scripts - buttons in grids toolbars

Post by johntalbott »

Your code starts at the element with the m_gridId and is trying to "find" any child element with the class .k-button.

But the toolbar that contains the .k-button class is not a child of the grid element;therefore, it never finds it.

Try using parser.wrapperId instead of parser.m_gridId as your jQuery selector.

Example:
$("#" + parser.wrapperId).find (".k-button").addClass ("myclass");
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Re: Advanced scripts - buttons in grids toolbars

Post by weblike »

Hi John,

thx for your reply.
I have tried to send you a PM message.

Unfortunately your example doesn't work.. :(
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
johntalbott
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Advanced scripts - buttons in grids toolbars

Post by johntalbott »

Can you attach or send a bsv? I'll take a look.
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
johntalbott
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Advanced scripts - buttons in grids toolbars

Post by johntalbott »

I accidentally left out ".m_widgetInfo". It should have been ...

$("#" + parser.m_widgetInfo.wrapperId).find (".k-button").addClass ("custombtn");
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Re: Advanced scripts - buttons in grids toolbars

Post by weblike »

johntalbott wrote:I accidentally left out ".m_widgetInfo". It should have been ...

$("#" + parser.m_widgetInfo.wrapperId).find (".k-button").addClass ("custombtn");
Hi john,
Yes this works, many thx.

Remark: in custom.css to override the k-button settings It must be like this:

.custombtn{
padding: 0px !important;
}
Now I have the fancy/bootstrap buttons that I like, all colors, forms, borders, etc.....sky is the limit :).
Thx again John, you are a valuable jquery user of this forum. :)
Have a great day.
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Advanced scripts - buttons in grids toolbars

Post by Jaymer »

OK, i see the benefit of doing it this way, as opposed to how I'd been modifying the existing styles...
my way, then ALL buttons will change.
This way, you can add that Render Script to an individual widget and make them diff colors. Nice!

OK, so here's one for you.
How can I make a dropdown box show more lines? Mine seem to only show 7 lines.
And or be "tighter" in line spacing?

I haven't had time to try and find the Kendo UI docs to see if its even possible.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Re: Advanced scripts - buttons in grids toolbars

Post by weblike »

Jaymer wrote:OK, i see the benefit of doing it this way, as opposed to how I'd been modifying the existing styles...
my way, then ALL buttons will change.
This way, you can add that Render Script to an individual widget and make them diff colors. Nice!

OK, so here's one for you.
How can I make a dropdown box show more lines? Mine seem to only show 7 lines.
And or be "tighter" in line spacing?

I haven't had time to try and find the Kendo UI docs to see if its even possible.
if you want this drop-down in query for operations you have to check the "Create menu buttons for operations". In this way, your operations will appear in a drop-down list, near to each record line.
Is that you want to achieve ?
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Advanced scripts - buttons in grids toolbars

Post by Jaymer »

No, just a regular dropdown field of a reference object.
Select a Item To Order, for example.
Would like to see a lot more choices than 7
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Post Reply