For some applications, the fully-featured ribbon bar might be too overloaded with features or the ribbon concept is not required in a project. Programmatically, all ribbon tabs, groups and buttons can be removed or modified. But this sample shows how remove the ribbon bar completely and to implement your own, custom button bar with simple toggle buttons.

ASP.NET MVC: Implementing a simplistic, custom button bar

The whole implementation is done using pure HTML, CSS and JavaScript. The following HTML represents the custom ribbon bar:

Loading...

The following JavaScript code is used to attach a click event to the Bold button. Using a command, the TXTextControl.InputFormatProperty.Bold is set on Text Control.

Loading...

In order to update the state of the button based on the current input position, the inputFormatReceived event is used. This event is triggered, if the format at the current position has been changed (or the input position has been changed to another position with a different format):

Loading...

In the event handler itself, the returned id defines the input format property. Using a switch statement, all different cases are handled. If the text at the current input position is formatted with bold, the value paramater is true and the button status is updated accordingly:

Loading...

Download the sample from GitHub and test it on your own.

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on github.com/TextControl.

Please fork and contribute.

Requirements for This Sample

  • Visual Studio 2015 or better
  • TX Text Control .NET Server for ASP.NET (trial sufficient)