The GridComboBoxColumn does not have direct support to display default text on it when there is no selected Item in WPF DataGrid (SfDataGrid). You can change the default text using ComboBoxValueConverter and DisplayBinding property of the column. <Window.Resources> <local:ComboBoxValueConverter x:Key="comboBoxValueConverter"/> </Window.Resources><syncfusion:SfDataGrid Name="dataGrid" AutoGenerateColumns="False" AllowEditing="True" ColumnSizer="Auto" ItemsSource="{Binding Employees}"> <syncfusion:SfDataGrid.Columns> <syncfusion:GridTextColumn MappingName="FirstName" HeaderText="First Name" ColumnFilter="DisplayText" /> <syncfusion:GridTextColumn MappingName="LastName" HeaderText="Last Name" /> <syncfusion:GridTextColumn MappingName="ID"/> <syncfusion:GridTextColumn MappingName="Title" /> <syncfusion:GridTextColumn MappingName="Salary" /> <syncfusion:GridComboBoxColumn MappingName="ReportsTo" HeaderText="Reports To" ItemsSource="{Binding Reporters}" DisplayBinding="{Binding Path=ReportsTo, Converter={StaticResource comboBoxValueConverter}}"/> </syncfusion:SfDataGrid.Columns> </syncfusion:SfDataGrid> public class ComboBoxValueConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (string.IsNullOrEmpty(value.ToString())) value = "Select a Value"; return value; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } View Sample in GitHub.
In UWP DataGrid, GridComboBoxColumn does not have direct support to display default text on it when there is no selected Item. You can change default text using ComboBoxValueConverter and DisplayBinding property of the column. <Page.Resources> <local:ComboBoxValueConverter x:Key="comboBoxValueConverter"/> </Page.Resources><syncfusion:SfDataGrid Name="dataGrid" AutoGenerateColumns="False" AllowEditing="True" ColumnSizer="Auto" ItemsSource="{Binding Employees}"> <syncfusion:SfDataGrid.Columns> <syncfusion:GridTextColumn MappingName="FirstName" HeaderText="First Neme" ColumnFilter="DisplayText" /> <syncfusion:GridTextColumn MappingName="LastName" HeaderText="Last Name" /> <syncfusion:GridTextColumn MappingName="ID"/> <syncfusion:GridTextColumn MappingName="Title" /> <syncfusion:GridTextColumn MappingName="Salary" /> <syncfusion:GridComboBoxColumn MappingName="ReportsTo" HeaderText="Reports To" ItemsSource="{Binding Reporters}" DisplayBinding="{Binding Path=ReportsTo, Converter={StaticResource comboBoxValueConverter}}"/> </syncfusion:SfDataGrid.Columns> </syncfusion:SfDataGrid> public class ComboBoxValueConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { if (string.IsNullOrEmpty(value.ToString())) value = "Select a Value"; return value; } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } } View sample in GitHub.ConclusionI hope you enjoyed learning about how to set the default display text for GridComboBox column in UWP DataGrid.You can refer to our UWP DataGrid feature tour page to know about its other groundbreaking feature representations. You can also explore our UWP DataGrid documentation 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!
By default, padding is applied to all the sides of chart to avoid the cropping of axis labels and leaving some space between nearby views and chart. However, it can be removed or changed using the ChartPadding property of Xamarin.Forms Chart. In the following code snippets shows how to customize the chart padding. xaml: <chart:SfChart x:Name="chart" ChartPadding ="5,5,5,5"> ... </chart:SfChart> C#: ... SfChart chart = new SfChart() { ChartPadding = new Thickness(5) }; ... ConclusionI hope you enjoyed learning about how to remove the default padding of Xamarin.Forms Chart.You can refer to our Xamarin.Forms Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.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 knowledge base explains how to set a default value for a field in child grid based on the query string value. Solution: We can achieve this using actionComplete event of ejGrid. By this event we can set the default value to that column for the child Grid. By default, the query string value will be shown as a default value for the newly added record in the child Grid, but if the child Grid dataSource has the foreignKey field for the query string then we suggest you follow the below code examples. 1. The Hierarchy Grid initialization as follows. HTML <div id="Grid"></div> JS <script type="text/javascript"> $(function () { $("#Grid").ejGrid({ dataSource: @Html.Raw(Json.Encode(ViewBag.datasource)), editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, toolbarSettings:{showToolbar: true, toolbarItems:["add","edit","delete","update","cancel"]}, columns: [ { field: "ID", headerText: 'ID', isPrimaryKey: true, width: 75 }, { field: "FirstName", headerText: 'First Name', width: 90 }, { field: "Title", headerText: 'Title', width: 100 }, { field: "City", headerText: 'City', width: 90 }, { field: "Country", headerText: 'Country', width: 110 } ], childGrid: { dataSource: @Html.Raw(Json.Encode(ViewBag.datasource2)), queryString: "ID", foreignKeyField: "InspectorID", editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] }, columns: [ { field: "OrderID", headerText: 'Order ID', isPrimaryKey: true, width: 75 }, { field: "CustomerID", headerText: 'Customer ID', width: 90 }, { field: "InspectorID", headerText: 'Inspector ID', width: 100 }, { field: "ShipCountry", headerText: 'Ship Country', width: 90 }, { field: "ShipAddress", headerText: 'Ship Address', width: 110 } ], actionComplete: "ChildGridActionCompleteEvent", }, }); });</script> MVC @(Html.EJ().Grid<object>("Grid") .Datasource((IEnumerable<object>)ViewBag.datasource) .EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting()) .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Add); items.AddTool(ToolBarItems.Edit); items.AddTool(ToolBarItems.Delete); items.AddTool(ToolBarItems.Update); items.AddTool(ToolBarItems.Cancel); }); }) .Columns(col => { col.Field("ID").HeaderText("ID").IsPrimaryKey(true).Width(75).Add(); col.Field("FirstName").HeaderText("First Name").Width(90).Add(); col.Field("Title").HeaderText("Title").Width(100).Add(); col.Field("City").HeaderText("City").Width(90).Add(); col.Field("Country").HeaderText("Country").Width(110).Add(); }) .ChildGrid(child => { child.Datasource((IEnumerable<object>)ViewBag.datasource2) .QueryString("ID") .ForeignKeyField("InspectorID") .Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(75).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add(); col.Field("InspectorID").HeaderText("Inspector ID").Width(100).Add(); col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add(); col.Field("ShipAddress").HeaderText("Ship Address").Width(110).Add(); }) .EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting()) .ClientSideEvents(events => events.ActionComplete("ChildGridActionCompleteEvent")) .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Add); items.AddTool(ToolBarItems.Edit); items.AddTool(ToolBarItems.Delete); items.AddTool(ToolBarItems.Update); items.AddTool(ToolBarItems.Cancel); }); }); }) ) CORE <ej-grid id="Grid" datasource="ViewBag.datasource"> <e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"add","edit","delete","update","cancel" })></e-toolbar-settings> <e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true"></e-edit-settings> <e-columns> <e-column field="ID" header-text="ID" is-primary-key="true" width="75"></e-column> <e-column field="FirstName" header-text="First Name" width="90"></e-column> <e-column field="Title" header-text="Title" width="100"></e-column> <e-column field="City" header-text="City" width="90"></e-column> <e-column field="Country" header-text="Country" width="110"></e-column> </e-columns> <ej-grid query-string="ID" foreign-key-field="InspectorID" datasource="ViewBag.datasource2" action-complete="ChildGridActionCompleteEvent"> <e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"add","edit","delete","update","cancel" })></e-toolbar-settings> <e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true"></e-edit-settings> <e-columns> <e-column field="OrderID" header-text="Order ID" is-primary-key="true" width="75"></e-column> <e-column field="CustomerID" header-text="Customer ID" width="90"></e-column> <e-column field="InspectorID" header-text="Inspector ID" width="100"></e-column> <e-column field="ShipCountry" header-text="Ship Country" width="90"></e-column> <e-column field="ShipAddress" header-text="Ship Address" width="110"></e-column> </e-columns> </ej-grid> </ej-grid> Angular <ej-grid id="Grid" [dataSource]="gridData" [toolbarSettings]="toolbarItems" [childGrid]="childData" [editSettings]="editSettings"> <e-columns> <e-column field="ID" [isPrimaryKey]="true" headerText="ID" width="75"></e-column> <e-column field="FirstName" headerText="First Name" width="90"></e-column> <e-column field="Title" headerText="Title " width="100"></e-column> <e-column field="City" headerText="City" width="90"></e-column> <e-column field="Country" headerText="Country" width="110"></e-column> </e-columns> </ej-grid> TS export class AppComponent { public editSettings; public toolbarItems; public childData: any; public gridData: any; constructor() { this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true}; this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]}; this.gridData = (window as any).employeeView; this.childData = { dataSource: window.gridData, queryString: "ID", foreignKeyField: "InspectorID", editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, toolbarSettings:{showToolbar: true, toolbarItems:["add","edit","delete","update","cancel"]}, columns: [ { field: "OrderID", isPrimaryKey: true, headerText: 'Order ID', width: 75 }, { field: "CustomerID", headerText: 'Customer ID', width: 90 }, { field: "InspectorID", headerText: 'Inspector ID', width: 100 }, { field: "ShipCountry", headerText: 'Ship Country', width: 90 }, { field: "ShipAddress", headerText: 'Ship Address', width: 110 } ], actionComplete: function(args){ if (args.requestType == "add") { var id = args.target.id + args.model.foreignKeyField; $("#" + id).val(args.model.currentViewData[0][args.model.foreignKeyField]); } } 2. In actionComplete event of child Grid we check the condition with the requestType as add and set the default value to the foreign Key field column using currentviewData of child Grid. <script type="text/javascript"> function ChildGridActionCompleteEvent(args) { if (args.requestType == "add") { var id = args.target.id + args.model.foreignKeyField; $("#" + id).val(args.model.currentViewData[0][args.model.foreignKeyField]); } } </script> Result: Figure 1: At Initial Rendering of Hierarchy Grid. Figure 2: Default value shown in InspectorID column in child Grid. ConclusionI hope you enjoyed learning about how to set a default value for Child Grid new record in JavaScript Grid.You can refer to our JavaScript 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 Grid 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!
