Advanced scripts - buttons in grids toolbars

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.

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

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

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

Method 2

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

Any ideas would be much appreciated.

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

weblike

Hi John,

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

Unfortunately your example doesn't work.. 🙁

johntalbott

Can you attach or send a bsv? I'll take a look.

johntalbott

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

$("#" + parser.m_widgetInfo.wrapperId).find (".k-button").addClass ("custombtn");

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.

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.

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 ?

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