Provide display values on form initial load

[Cory Prause]

In a form using dropdown lists, is there a way to provide them with an initial display value so the dropdown list doesn't have to hit the database before it is opened?

And similarly, is there a way to do that for the grid using the GridForeignColumn?

[Sureshkumar P]

HI Cory, 

Query 1: is there a way to provide them with an initial display value so the dropdown list doesn't have to hit the database before it is opened? 

We can preselect the dropdownlist component before open the popup. Please find the code example below. 

<EditForm Model="@model"> 

    <DataAnnotationsValidator /> 

    <h5>TextBox : @model.Name</h5> 

     <SfDropDownList TValue="string" CssClass="form-control-sm" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@model.Name" DataSource="@Country"> 

    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 

</SfDropDownList> 

    <ValidationMessage For="() => model.Name" /> 

    <SfButton CssClass="e-small e-info" Type="submit" Content="Submit"></SfButton> 

</EditForm> 

 

@code { 

    public class CountriesModel 

    { 

        [Required] 

        public string Name { get; set; } = "CA"; 

    } 

    public CountriesModel model = new CountriesModel();  

 

    public class Countries 

    { 

        public string Name { get; set; } 

 

        public string Code { get; set; } 

    } 

 

    List<Countries> Country = new List<Countries> 

{ 

        new Countries() { Name = "Australia", Code = "AU" }, 

        new Countries() { Name = "Bermuda", Code = "BM" }, 

        new Countries() { Name = "Canada", Code = "CA" }, 

        new Countries() { Name = "Cameroon", Code = "CM" }, 

    }; 

 } 

 

Query 2: And similarly, is there a way to do that for the grid using the GridForeignColumn?  

We checked your query and we suspect that you want to set the initial default value to Grid column/ foreign key column while adding the record. You can achieve your requirement by using DefaultValue property. Find the below documentation and code snippets for your reference. 

https://blazor.syncfusion.com/documentation/datagrid/editing#default-column-values-on-adding-new-record   

 

  

<SfGrid DataSource="@Orders" Height="315" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel","Update" })">  

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>  

    <GridColumns>  

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true"TextAlign="TextAlign.Right" Width="120"></GridColumn>  

        <GridForeignColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName"  

                           DefaultValue="@(2)" ForeignDataSource="@Employees" Width="150"></GridForeignColumn>  

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date"TextAlign="TextAlign.Right" Width="130"></GridColumn>  

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right"Width="120"></GridColumn>  

    </GridColumns>  

</SfGrid>  

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-69951475   

 

Regards, 

Sureshkumar P 

[Cory Prause]

Hi,

An example of what I am trying to do on the form, is set a display text on the dropdown without the dropdown having to hit the database, i.e. my form data will include all dropdown initial display values as well as the ids so that the dropdowns don't have to perform a database call until they are opened.

e.g.

Form data includes the following:

{
"Title": "FormTitle",
"LookupId": 1,
"LookupValue": "Test value"
}

and the dropdown data could be:

{

"id": 1,
"Text": "Test value"
}

I want to display the "LookupValue" from the form data in the dropdown

Our database does soft deletes and so the value does not exist in the dropdown data but does exist in the returned form data, therefore we need to use the form data to initialise the dropdown display (it does not exist in the dropdown data anymore). When the selected dropdown value is inactive or deleted, it can still display on the form until someone tries to change it then they have to select another record when the dropdown fetches the new set of available records. In that case Form data includes the following:

{
"Title": "FormTitle",
"LookupId": 1,
"LookupValue": "Removed Test value"
}

and the dropdown data could be:

{

"id": 2,
"Text": "Active row"
}

[Sureshkumar P]

Hi Cory, 

 

When set the preselect value into our dropdown list component that hit the data source property which is the default behavior of our component. If you override this behavior, we suggest you can restrict the server call using actionbegin event and using open event you can manually call the server call to load the data source again.  

 

Regards, 

Sureshkumar P