Syncfusion .NET MAUI DataForm (SfDataForm) is a versatile component that allows you to easily create data entry forms in your .NET MAUI applications. SfDataForm allows us to enter a time value in a specific format. In this article, we will discuss how to change the time format of the time editor by using the Format property. Initiate the GenerateDataFormItem event handler to the OnGenerateDataFormItem event. C#: dataForm.GenerateDataFormItem += OnGenerateDataFormItem; Using the OnGenerateDataFormItem event, set the Format property to a custom format string that specifies the desired time format by checking that the item is the DataFormTimeItem. C#: private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e) { if (e.DataFormItem!= null) { if (e.DataFormItem.FieldName == "EventTime" && e.DataFormItem is DataFormTimeItem timeItem) { timeItem.Format = "HH:mm"; } } } Note:The default value is "hh:mm tt". View the sample on GitHub Output: Conclusion: I hope you enjoyed learning how to change the time format of the time editor in the .NET MAUI DataForm (SfDataForm). You can refer to our .NET MAUI DataForm’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI DataForm documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI DataForm and other .NET MAUI components. If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In the Syncfusion .NET MAUI Calendar control, you can change the month header format by setting the TextFormat property of the CalendarMonthHeaderView of the SfCalendar, as specified in the following code sample. XAML <calendar:SfCalendar x:Name="calendar"> <calendar:SfCalendar.MonthView> <calendar:CalendarMonthView> <calendar:CalendarMonthView.HeaderView> <calendar:CalendarMonthHeaderView TextFormat="dddd" /> </calendar:CalendarMonthView.HeaderView> </calendar:CalendarMonthView> </calendar:SfCalendar.MonthView> </calendar:SfCalendar> View sample on GitHub Output Conclusion Hope you enjoyed learning about how to change the month header format in the .NET MAUI Calendar (SfCalendar). You can refer to our .NET MAUI Calendar’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Calendar documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Calendar and other .NET MAUI components. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
By default, Grid shows the standard formats (ex: ‘yMd’) in edit state of a column. Incase of custom formats, it will show only in display. To show the custom formats in edit state, you can use the ‘edit.params’ property of Grid columns. This is demonstrated in the below sample code in which the custom format is provided to the DateTimePicker editor component, by setting the ‘format’ property through ‘edit.params’. CSHTML @{ var editParams = new { @params = new { format = "hh:mm a" } }; } <ejs-grid id="Grid" dataSource="@ViewBag.data" allowPaging="true" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings> <e-grid-columns> <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> <e-grid-column field="CustomerID" headerText="Customer ID" width="175" ></e-grid-column> <e-grid-column field="OrderDate" allowEditing="false" headerText="Order Date" editType="datetimepickeredit" edit="editParams" Format="hh:mm a" width="130"></e-grid-column> <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column> </e-grid-columns> </ejs-grid> OutPut Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/customFormat-1225644421
Syncfusion ReportDesigner allows you customize the chart report item axis labels using the Format property. This section explains how to set the format for coordinate-based chart types like Column, Bar, Area, Line, and Range through the report property grid. Create a new report and add an embedded data source and dataset. Draw a chart report item. In the report design view, select the chart report item. Assign data to the chart using the Properties dialog. Add data fields to the chart series, category, and values, and then Click OK. Select the x-axis/y-axis (category/value) property. The selected axis property is displayed in the properties grid. In the Labels section, set a static value or expression for the Format property. Here, “#$” has been assigned. Repeat the step_6 to set a format for the chart category axis. In the Labels section, for the Format property, set “#%” or select an expression to provide the dynamic value. Preview the report to view the chart report item with formatted label value. Chart Format: Download the chart format report from here.
By default in SfImageEditor, the image will be saved in original image size and “.jpg” format. We can also able to change the image size and image format while saving the image. Step 1: Create SfImageEditor sample with all necessary assemblies. Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it. https://help.syncfusion.com/xamarin/sfimageeditor/getting-started Step 2: Set width and height manually and change the image saving format while Saving the image using pop-ups Please refer the following code snippet to set image size and change image format while saving. C# private void Ok_Clicked(object sender, EventArgs e) { ... Size size = new Size(width, height); if(SaveFormat.SelectedIndex == 0) Editor.Save(".jpg", size); else if (SaveFormat.SelectedIndex == 1) Editor.Save(".png", size); else if (SaveFormat.SelectedIndex == 2) Editor.Save(".bmp", size); } In the below code snippet, calculated width and height while respecting aspect ratio and created picker for changing the image format and passed into save method. C# private void WidthValue_TextChanged(object sender, TextChangedEventArgs e) { heightValue.TextChanged -= HeightValue_TextChanged; Int32.TryParse(widthValue.Text, out width); int adjustedHeight = width * originalHeight / originalWidth; heightValue.Text = adjustedHeight.ToString(); heightValue.TextChanged += HeightValue_TextChanged; } private void HeightValue_TextChanged(object sender, TextChangedEventArgs e) { widthValue.TextChanged -= WidthValue_TextChanged; Int32.TryParse(heightValue.Text, out height); int adjustedWidth = height * originalWidth / originalHeight; widthValue.Text = adjustedWidth.ToString(); widthValue.TextChanged += WidthValue_TextChanged; } private void Ok_Clicked(object sender, EventArgs e) { popup.IsVisible = false; grid.IsVisible = false; Int32.TryParse(widthValue.Text, out width); Int32.TryParse(heightValue.Text, out height); Size size = new Size(width, height); if(SaveFormat.SelectedIndex==0) Editor.Save(".jpg", size); else if (SaveFormat.SelectedIndex == 1) Editor.Save(".png", size); else if (SaveFormat.SelectedIndex == 2) Editor.Save(".bmp", size); } Screen Shot: Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageEditor_GettingStarted-86887888.zip
In JavaScript Tree Grid we can customize column with different data formats like Currency, Date, Numeric and Percentage by using “format” property of “columns”. The below code example explains about how to format the columns in Tree Grid. <div id="TreeGridContainer" style="height:400px;width:100%"></div> <script type="text/javascript"> $(function () { $("#TreeGridContainer").ejTreeGrid({ // columns: [ { field: "Number", format: "{0:n2}", editParams: { decimalPlaces: 3, incrementStep: 0.01 }, editType: ej.TreeGrid.EditingType.Numeric, }, { field: "Currency", format: "{0:c2}", editParams: { decimalPlaces: 2, incrementStep: 0.01 }, editType: ej.TreeGrid.EditingType.Numeric }, { field: "Percentage", format: "{0:P0}", editParams: { decimalPlaces: 2, incrementStep: 0.1 }, editType: ej.TreeGrid.EditingType.Numeric }, ], }) }); </script> Screen shot: Sample link: A Sample to format the cell values of Tree Grid columns is available in the below link SampleConclusionI hope you enjoyed learning on how to format the cell values in JavaScript TreeGrid.You can refer to our JavaScript Tree Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript TreeGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This documentation explains about how to set different currency format for grid columns and its summary value. Solution: By default, the format property formats the value based on culture set to the Grid. For currency formats, currency depends upon the culture and hence by default we cannot show different currencies for multiple columns in same grid with a culture set. You can use following solution to show different currency formats for multiple column. We can achieve this requirement by using queryCellInfo and load event of the grid. In queryCellInfo event we have changed the format of the particular column values by using ej.format method. We have created the helper functions in Grid load event and used that helper functions in the Grid summaryTemplate to change the format of the summaryValues. Note: We need to refer the respective culture script files to the sample to get the respective format. HTML JS 1. Render the Grid control with the querCellInfo event and load event. Razor Controller ASPX Controller Core Controller QueryCellInfo event 2. Changing the format of the grid column values Load event 3. Creating the helper functions Templates 4. Using the created helper functions in summary template. Angular We have used same queryCellInfo event to change the particular column values format in angular. But in summaryValue, we have used angular custom pipes in ng-template to achieve this requirement. 1. Render the Grid control with the querCellInfo event. Typescript QueryCellInfo event 2. Changing the format of the grid column values. Angular custom pipes 3. Creating the angular custom pipe. Angular template 4. using the created custom pipe in ng-template. The following screenshot describes the above behavior:
We can customize the color of line if it is end with specific character. It can be achieved by setting the lexem in custom config file. Lexem It contains rules for parsing the text. There are two attributes to specify the format of the lexem. Type: Type is used for standard predefined types of the lexems. FormatName: The FormatName is used only when Type is Custom. Here we have highlighted the line if end with “!” character. The following code demonstrates the same. XML <!-- Configuaration --> <ConfigLanguage name="new" CaseInsensitive="true"> <formats> <!-- Highlight color --> <format name="String" Font="Courier New, 13pt, style=Bold" FontColor="Green" /> </formats> <extensions> <extension>new</extension> </extensions> <lexems> <!-- Set the Required Highlight format --> <lexem BeginBlock="[A-z\s]+\!" IsBeginRegex="true" Type="String"/> </lexems> <splits> <split IsRegex="true">[A-z\s]+\!</split> </splits> </ConfigLanguage> C# //Define config file path private string configPath = Path.GetDirectoryName(Application.ExecutablePath) + "\\..\\..\\Config.xml"; public Form1() { InitializeComponent(); editControl1.Text = "Hello World!" + Environment.NewLine + "Welcome" + Environment.NewLine + "Have a Good Day!"; // External configuration file. this.editControl1.Configurator.Open(configPath); // Apply the configuration defined in the configuration file. this.editControl1.ApplyConfiguration("new"); } Screenshot Sample: SyntaxEditorSample
EditControl consider the Format based on Start and End text of lexem. It separates the codes by space. Nested lexem format color can be applied using its SubLexem property. Here we have considered the [::] as parent lexem and [:] as sub-lexem. The following code demonstrates the same. Code Example: [Xaml] <syncfusion:FormatsCollection x:Key="formats"> <!—Set Format Color --> <syncfusion:EditFormats Foreground="Red" FormatName="FieldsFormat"/> <syncfusion:EditFormats Foreground="Yellow" FormatName="StringFormat"/> </syncfusion:FormatsCollection> <!--Field Syntax--> <syncfusion:Lexem IsMultiline="False" ContainsEndText="False" ParentLexemType="Literals" StartText="::" EndText="::" LexemType="Literals" FormatName="FieldsFormat" /> <syncfusion:Lexem IsMultiline="False" ContainsEndText="False" ParentLexemType="Literals" StartText=":" EndText=":" LexemType="Literals" FormatName="StringFormat" /> <!—For nested lexem--> <syncfusion:Lexem ContainsEndText="True" IsMultiline="True" StartText="::" IsRegex="true" EndText="::" LexemType="Literals" FormatName="FieldsFormat"> <syncfusion:Lexem.SubLexems> <syncfusion:LexemCollection> <syncfusion:Lexem ContainsEndText="False" IsMultiline="False" StartText=":" IsRegex="True" LexemType="Literals" FormatName="StringFormat" /> </syncfusion:LexemCollection> </syncfusion:Lexem.SubLexems> </syncfusion:Lexem> Screenshot Sample: EditControlSample
Syncfusion Excel (XlsIO) library is a .NET Excel library used to create, read, and edit Excel documents. Using this library, you can format Excel negative numbers in brackets without having negative sign and dollar sign. Rather than having negative numbers with a minus sign in front of them, some people prefer to put negative numbers in brackets. If you work with a lot of numbers in Excel, it’s a good practice to highlight negative numbers in red. This makes it easier to read the data. In order to format Excel negative numbers in brackets without having negative sign and dollar sign and also to format in red color, follow the below steps and use custom NumberFormatting. Steps to format Excel negative numbers in brackets without having negative sign and dollar sign programmatically: Step 1: Create a new C# console application project. Create a new C# console application Step 2: Install the Syncfusion.XlsIO.WinForms NuGet package as reference to your .NET Framework applications from NuGet.org. Install NuGet package Step 3: Include the following namespace in the Program.cs file. C# using Syncfusion.XlsIO; VB.NET Imports Syncfusion.XlsIO Step 4: Use the following code snippet to format Excel negative numbers in brackets without having negative sign and dollar sign. C# //Initialize ExcelEngine. using (ExcelEngine excelEngine = new ExcelEngine()) { //Initialize Application. IApplication app = excelEngine.Excel; //Set default version to Excel 2016. app.DefaultVersion = ExcelVersion.Excel2016; //Create a new workbook. IWorkbook workbook = app.Workbooks.Create(1); //Accessing first worksheet in the workbook. IWorksheet sheet = workbook.Worksheets[0]; sheet.Range["C6"].Number = -100.000000; sheet.Range["B6"].Text = "\"$\"#,##0_);[RED]\\(#,##0.00)"; sheet.Range["C6"].NumberFormat = "\"$\"#,##0_);[RED]\\(#,##0.00)"; //Save the workbook. workbook.SaveAs("Output.xlsx"); } VB.NET 'Initialize ExcelEngine. Using excelEngine As ExcelEngine = New ExcelEngine 'Initialize Application. Dim app As IApplication = excelEngine.Excel 'Set default version to Excel 2016. app.DefaultVersion = ExcelVersion.Excel2013 'Create a new workbook. Dim workbook As IWorkbook = app.Workbooks.Create(1) 'Accessing first worksheet in the workbook. Dim worksheet As IWorksheet = workbook.Worksheets(0) sheet.Range["C6"].Number = -100.000000 sheet.Range["B6"].Text = "\"$\"#,##0_);[RED]\\(#,##0.00)" sheet.Range["C6"].NumberFormat = "\"$\"#,##0_);[RED]\\(#,##0.00)" 'Save the workbook. workbook.SaveAs("Output.xlsx") End Using A complete working example to format Excel negative numbers in brackets without having negative sign and dollar sign can be downloaded from Format Excel Negative Numbers.zip By executing the program, you will get the output Excel file as shown below. Output Excel document NumberFormat property helps to control the appearance of cell values especially numbers in an Excel document. Excel recognizes the numbers in various formats like: Number Currency Percentage DateTime Accounting Scientific Fraction and Text Take a moment to peruse the documentation, where you can find basic worksheet data manipulation options along with features like Conditional Formatting, worksheet calculations through Formulas, adding Charts in worksheet or workbook, organizing and analyzing data through Tables and Pivot Tables, appending multiple records to worksheet using Template Markers, and most importantly PDF and Image conversions etc., with code examples. Refer here to explore the rich set of Syncfusion Excel (XlsIO) library features. An online sample link to format cell with NumberFormat. Note:Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, include a license key in your projects. Refer the link to learn about generating and registering Syncfusion license key in your application to use the components without trail message.
Syncfusion Excel (XlsIO) library is a .NET Excel library used to create, read, and edit Excel documents. Also, converts Excel documents to PDF files. Using this library, you can format Excel cells with accounting number format. Steps to format Excel cells with accounting number format, programmatically: Step 1: Create a new C# console application project. Create a new C# console application project Step 2: Install the Syncfusion.XlsIO.WinForms NuGet package as reference to your .NET Framework application from NuGet.org. Install NuGet package to the project Step 3: Include the following namespace in Program.cs file. C# using Syncfusion.XlsIO; VB.NET Imports Syncfusion.XlsIO You can set the number format to a cell using the NumberFormat property available under IRange interface. Step 4: Include the following code snippet in main method of Program.cs file to format Excel cells with accounting number format type. C# using (ExcelEngine excelEngine = new ExcelEngine()) { //Instantiate the Excel application object IApplication application = excelEngine.Excel; //Create a new Excel workbook IWorkbook workbook = application.Workbooks.Create(1); //Get the first worksheet in workbook into IWorkbook IWorksheet worksheet = workbook.Worksheets[0]; //Represent the number formt type worksheet.Range["A1"].Text = "Accounting Number Format"; worksheet.Range["A1:C1"].Merge(); worksheet.Range["A1"].CellStyle.Font.Bold = true; //Set the accounting number format to a range of cells worksheet.Range["B3:B5"].NumberFormat = "_(\"$\"* #,##0_);_(\"$\"* (#,##0);_(\"$\"* \"-\"_);_(@_)"; //Assign data in the worksheet worksheet.Range["A3"].Text = "Positve Number"; worksheet.Range["B3"].Number = 5; worksheet.Range["A4"].Text = "Negative Number"; worksheet.Range["B4"].Number = -5; worksheet.Range["A5"].Text = "Zero"; worksheet.Range["B5"].Number = 0; //Autofit the column worksheet.AutofitColumn(1); //Save the Excel document workbook.SaveAs("Output.xlsx"); } VB.NET Using excelEngine As ExcelEngine = New ExcelEngine() 'Instantiate the Excel application object Dim application As IApplication = excelEngine.Excel 'Create a new Excel workbook Dim workbook As IWorkbook = application.Workbooks.Create(1) 'Get the first worksheet in workbook into IWorkbook Dim worksheet As IWorksheet = workbook.Worksheets(0) 'Represent the number format type worksheet.Range("A1").Text = "Accounting Number Format" worksheet.Range("A1:C1").Merge() worksheet.Range("A1").CellStyle.Font.Bold = True 'Set the accounting number format to a range of cells worksheet.Range("B3:E5").NumberFormat = "_(""$""* #,##0_);_(""$""* (#,##0);_(""$""* ""-""_);_(@_)" 'Assign data in the worksheet worksheet.Range("A3").Text = "Positve Number" worksheet.Range("B3").Number = 5 worksheet.Range("A4").Text = "Negative Number" worksheet.Range("B4").Number = -5 worksheet.Range("A5").Text = "Zero" worksheet.Range("B5").Number = 0 'Autofit the column worksheet.AutofitColumn(1) 'Save the Excel document workbook.SaveAs("Output.xlsx") End Using A complete working sample to format Excel cells with accounting number format can be downloaded from Accounting-Format.zip. By executing the program, you will get the output Excel document as follows. Output Excel document Take a moment to peruse the documentation, where you will find other options like row and column style, applying number formats to cells, cell text alignment, merging and unmerging of cells, font, color and border setting, HTML string formatting and Rich-Text formatting with code examples. Click here to explore the rich set of Syncfusion Excel (XlsIO) library features. Note:Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, include a license key in your projects. Refer the link to learn about generating and registering Syncfusion license key in your application to use the components without trail message. ConclusionI hope you enjoyed learning about how to format Excel cells with Accounting number format in C#, VB.NET.You can refer to our WinForms Excel feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinForms Excel example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
