TelerikGrid with different data types

[jwalkerSSC]

Hello,

I am trying to create a GRID for Blazor using the TelerikGrid. I get my list of items that can be tricky. We allow the users to setup User Defined field that can be a bit, decimal, date, int or text and give each on a unique name with the order that they should be displayed. i.e.. Amount1 - decimal - 1, Married - bit - 2, Year - date - 3. When I get the data and want to display it in the grid, I only want to allow them to add a value for each one, but the problem is that they can change the order that these come in. Could be Bit, then decimal, etc..

In my app, I have the following code:

<GridLayoutItem Row="24" Column="2" ColumnSpan="3" RowSpan="4">
    <TelerikGrid Data="@PersonUserFieldList" EditMode="@GridEditMode.Incell" Pageable="true" Width="330px"
            OnUpdate="@UpdatePhone" OnEdit="@EditPhone" OnCreate="@CreatePhone" OnCancel="@CancelPhone">
            <GridColumn Width="100px" Field=@nameof(UserDefinedFieldWithValues.column_name) Title="@TelerikMessages.Name">
                <EditorTemplate Context="ctx">
                    @{
                        var a = ctx as UserDefinedFieldWithValues;
                        if (a.DataType == "bit")
                        {
                            <TelerikCheckBox Class="myCheckBox" Enabled="true" Value="@a.BoolValue" />
                        }
                        if (a.DataType == "nvarchar(-1)")
                        {
                            <TelerikTextBox class="myTextBox1" @bind-Value="@a.TextValue"></TelerikTextBox>
                        }
                        if (a.DataType == "datetime")
                        {
                            <TelerikDatePicker Class="myDatePickerSmall" Min="@Min" Max="@Max" Format="d" DebounceDelay="@DebounceDelay"  @bind-Value="@a.DateValue"/>
                        }
                        if (a.DataType == "int")
                        {
                            <TelerikNumericTextBox Arrows="false" @bind-Value="@a.IntValue"/> 
                        }
                        if (a.DataType == "decimal(18,0)")
                        {
                            <TelerikNumericTextBox Arrows="false" @bind-Value="@a.DecimalValue"/> 
                        }
                    }
                </EditorTemplate>
            </GridColumn>
    </TelerikGrid>

    @*<TelerikListView Data="@PersonUserFieldList" Pageable="true" PageSize="5">
        <Template>
            @{
                UserDefinedField currItem = context as UserDefinedField;
                if (currItem.DataType == "bool")
                {
                    <div class="listview-item">                                            
                        <label class="mylabels1">@currItem.column_name</label> 
                        <
                    </div>
                }
            }
        </Template>
    </TelerikListView>*@

</GridLayoutItem>

When I run this, I get the following error:
Microsoft.AspNetCore.Components.Web.ErrorBoundary[0]
System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TelerikGrid`1[[TimeShareWare.Essentials.Shared.UserDefinedFields.UserDefinedFieldWithValues, TimeShareWare.Essentials.Shared, Version=3.0.0.0, Culture=neutral, PublicKeyToken=null]]' does not have a property matching the name 'ChildContent'.

Sample Date:
BoolValue = null;
column_name = "Amount1";
DataType = "decimal(18,0)';
DateValue = null;
DecimalValue = null;
DisplayOrder = 1;
IntValue = null;
TextValue = null;
UserFieldID = 18,
Visible = true;

Any thoughts on how I can get this to work? I want to put it into a grid or maybe a list view because the users can enter as many of these fields as they would like.

[linkdotnet]

Hey @jwalkerSSC

as I am no expert with Telerik, there is a guideline for that: https://www.telerik.com/blogs/unit-testing-blazor-components-bunit-justmock

Did you add Services.AddTelerikBlazor() also in your unit test?

[egil]

hey @jwalkerSSC, im going to convert this to a QA discussion.