1. Home
  2. Forum
  3. Angular
  4. Button group in toolbar

Button group in toolbar

Hi,

is it possible to add button groups to the toolbar? And making them behave as when one is clicked it is highlited and the rest are not?

Something like this:



I'm trying with this template, but this creates an unique button:

<script id="ButtonGroup" type="text/x-jsrender">
        <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
            <mat-button-toggle value="bold">Bold</mat-button-toggle>
            <mat-button-toggle value="italic">Italic</mat-button-toggle>
            <mat-button-toggle value="underline">Underline</mat-button-toggle>
        </mat-button-toggle-group>
    </script>

Any idea?

Thank you.




7 Replies
JR John Rajaram Syncfusion Team August 28, 2018 09:16 AM UTC

Hi Oscar, 
Thank you for contacting Syncfusion support. 
We have analyzed your requirement and screenshot and we can achieve your requirement with ejGroupButton control and Gantt custom toolbar Template support with some work around. Please refer the below code snippet.  
<script id="customButtons" type="text/x-jsrender"> 
         <div id="groupButton" style="width:350px"></div> 
  </script> 
 
<ej-gantt id="resourceGantt" 
          [dataSource]="resourceGanttData" 
          (create)="create($event)"   
          [toolbarSettings]="toolbarSettings"   
          //.. 
    > 
</ej-gantt> 
 
[TS] 
  constructor() { 
      this.toolbarSettings = { 
            showToolbar: true, 
            customToolbarItems: [{ 
                templateID: "#customButtons", 
             }], 
        } 
        //.. 
         } 
      
create(sender) { 
      $("#groupButton").ejGroupButton({ 
            groupButtonMode: "radiobutton", 
            dataSource: [ 
                { text: "Bold", contentType: "textonly" }, 
                { text: "Italic", contentType: "textonly" }, 
                { text: "UnderLine", contentType: "textonly" }, 
            ], 
            select: function (args) { 
                if (args.index == 0) { 
                    console.log("Bold button gets clicked") 
                } 
                else if (args.index == 1) 
                    console.log("Italic button gets clicked") 
                else 
                    console.log("UnderLine button gets clicked")            }, 
            width: "300px", 
            showRoundedCorner: true 
        }); 
    } 
We have prepared the sample for your reference please find the sample link below 
Please find more details about the ejGroupButton feature here. 
Please let us know if you require further assistance on this. 
Regards, 
John R 


OB oscar bartolome August 31, 2018 12:51 PM UTC

Ok, that is what I'm looking for.
One more thing, how can I switch off the shadow around the group button when hovering it? I'm talking about this:



I want the shadow to dissapear, but not the color change of the individual button.

Thanks.

JR John Rajaram Syncfusion Team September 3, 2018 10:07 AM UTC

Hi Oscar, 
We have analyzed your requirement and screenshot. We can achieve your requirement by customizing the custom toolbar with CSS property. Please refer the below code snippet 
<style> 
     .e-horizontal #resourceGantt_customButtons { 
            background:none !important; 
        }  
</style> 
Also, In Gantt we can remove the mouse hover highlighting for all the toolbar items by customizing the toolbar with CSS property. Please refer the below code snippet 
<style> 
     .e-horizontal .e-tooltxt { 
            background:none !important; 
        } 
</style> 
We have prepared the sample for your reference, please find the sample link below 
Please let us know if you require further assistance on this. 
Regards, 
John R 


OB oscar bartolome September 3, 2018 10:24 AM UTC

Ok. Using the code provided the behaviour is like this:

- The buttons at normal state:



- The buttons when hovering:



It is like the buttons becomes transparent when hovering. Is it possible to do it without losing the grey color of the GroupButton?

Other question. How can I change the width of the buttons inside the buttongroup? If I reduce it using the width property of the GroupButton, it reduces the general width of the group, but it cuts the righter button instead of re-dimensioning each button. 

Like this:



Any idea? 

Thanks.

JR John Rajaram Syncfusion Team September 4, 2018 11:19 AM UTC

Hi Oscar, 
Please find the below details. 
Query1: How can I change the width of the buttons inside the buttongroup? If I reduce it using the width property of the GroupButton, it reduces the general width of the group, but it cuts the righter button instead of re-dimensioning each button.  
Answer:  
We can set the width of individual buttons within the groupbutton control by using the htmlAttribute option with the datasource to add a CSS class to each button and override the width CSS property of the buttons using the class as shown in the below code snippet. 
[TS] 
create(sender) { 
      $("#groupButton").ejGroupButton({ 
           groupButtonMode: "radiobutton", 
          dataSource: [ 
              { text: "Bold", contentType: "textonly", htmlAttribute: { class: "bold" } }, 
              { text: "Italic", contentType: "textonly", htmlAttribute: { class: "italic" } }, 
              { text: "UnderLine", contentType: "textonly", htmlAttribute: { class: "underline" } }, 
          ],   
            select: function (args) { 
                
                if (args.index == 0) { 
                    console.log("Bold button gets clicked") 
                } 
                else if (args.index == 1) 
                    console.log("Italic button gets clicked") 
                else 
                    console.log("UnderLine button gets clicked") 
            }, 
            width: "180px", height: 40, 
            showRoundedCorner: true 
        }); 
    } 
 
  [HTML] 
<style> 
     .bold.e-grp-btn-item .e-btn-content {  
       width: 30px !important;  
     }  
  
     .italic.e-grp-btn-item .e-btn-content {  
       width: 30px !important;  
     }  
  
     .underline.e-grp-btn-item .e-btn-content {  
    width: 90px !important;  
  }  
        
</style> 
 
Note: Please note that the width of the groupbutton component must be set with a predefined width based on the total width of the individual buttons to set individual width for each button. 
We have prepared the sample for your reference, please find the sample from below link 
 
Query2: It is like the buttons becomes transparent when hovering. Is it possible to do it without losing the grey color of the GroupButton? 
Answer:  
We request you to ensure the ID of the custom template is matched with the below CSS class. Please refer the below code snippet. 
[TS] 
constructor() { 
     this.toolbarSettings = { 
            showToolbar: true, 
            customToolbarItems: [{ 
                templateID: "#customButtons", 
            }, 
            ] 
       } 
       //.. 
     } 
[Index] 
  <script id="customButtons" type="text/x-jsrender"> 
         <div id="groupButton"></div> 
  </script> 
 
<style> 
  .e-horizontal #resourceGantt_customButtons { 
            background:none !important; 
        } 
</style> 
If the issue still persists in your sample please let us know. 
Regards, 
John R 


OB oscar bartolome September 4, 2018 01:57 PM UTC

Hi,

I have tried with:

//Background-color of the toolbar:

.c-class1.e-gantt .e-toolbar {
background-color: #138c7f;
}

//Background-color of the groupbuttos of the toolbar:

.e-horizontal .e-tooltxt {
background:none !important;
}

And the groupbuttons become transparent and the background-color of the toolbar appear.

Try an example with the color of the toolbar diferent than the groupbuttons one, please.

Thanks

JR John Rajaram Syncfusion Team September 5, 2018 09:47 AM UTC

Hi Oscar, 
We have checked your code snippets. We suggest you to set any specific background color for group button in your application to overcome the reported issue. Please refer the following code snippet. 
[HTML] 
<style>     
#resourceGantt_customButtons #groupButton{ 
          background-color:#fcfcfc !important; 
      } 
</style> 
We have also prepared the sample for your reference, please find the sample from below link 
If the issue still persists in your sample, please let us know. 
Regards, 
John R 


Loader.
Up arrow icon