Adding Index="0" property upon an event

[Junaid]

Good day,

Is it possible to add Index="0" to dropdown upon a particular event or a condition? 

I have a foreign key column in the grid whose editable type is dropdown edit. Now I have added the EditParams feature to this column and I am selecting the first option in dropdown as default.

Is there a way where this ShipNameEditParams feature or Index=0 property is activated on some condition? Like, if the DataSource list has one item, then Index=0 should be enforced, otherwise not. 

Thanks in advance.

Junaid

[Junaid]

Code of both Grid Column and EditParam:

 <GridColumn Field=@nameof(Order.ProjectId) AllowFiltering="false" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Center" DataSource="@projectsDataSource" Edit="@ShipNameEditParams" ForeignKeyField="Id" ForeignKeyValue="Name"></GridColumn>

            public object ShipNameEditParams = new

            {@@params = new EjsDropDownList<ProjectVM>() { Index = 0 }

        };

Regards.

[Renjith Singh Rajendran]

Hi Junaid, 

Thanks for contacting Syncfusion support. 

We suggest you to use the “Cell Edit template feature” of Grid for the “Foreign Key Column”. We have prepared a sample based on this requirement, please download the sample from the link below, 

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

 

Please use the code below, 

 

<EjsGrid DataSource="@Orders" ModelType="@Model" Toolbar=@ToolbarItems> 

    ... 

   <GridColumns> 

        ... 

        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" DataSource="@Employees" Width="150"> 

            <EditTemplate> 

                <EjsDropDownList TValue="string" ID="EmployeeID" Index="0" DataSource="@Employees"> 

                    <DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings> 

                </EjsDropDownList> 

            </EditTemplate> 

        </GridColumn> 

        ... 

   </GridColumns> 

</EjsGrid> 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Junaid]

Sir,

Thanks for your reply. I understand the cell edit template. But I want to add Index=0 upon some condition/event e.g. RowSelected event of grid. Or foexample, I have a variable. If the value of variable is 10 then I want index=0 to be applied to the dropdown else index=0 should not be applied. Kindly help.

Regards.

Junaid

[Renjith Singh Rajendran]

Hi Junaid, 

We suggest you to bind a variable for the “Index” property of DropDownList, and in the “RowSelected” event handler change the value for the variable based on the selected row index. Please use the code below, 

 

<EjsGrid DataSource="@Orders" ModelType="@Model" Toolbar=@ToolbarItems> 

    <GridEvents RowSelected="RowSelected" TValue="Order"></GridEvents> 

   <GridColumns> 

        ... 

        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" DataSource="@Employees" Width="150"> 

            <EditTemplate> 

                <EjsDropDownList TValue="string" ID="EmployeeID" Index="@DropDownIndex" DataSource="@Employees"> 

                    <DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings> 

                </EjsDropDownList> 

            </EditTemplate> 

        </GridColumn> 

        ... 

   </GridColumns> 

</EjsGrid> 

 

@code{ 

    public int? DropDownIndex; 

    ... 

    public void RowSelected(RowSelectEventArgs<Order> args) 

    { 

        if(args.RowIndex == 2) 

        { 

            DropDownIndex = 0;   //If and only if selected RowIndex is 2, the Index value will be 0, else it will be based on the selected RowIndex 

        } 

        else 

        { 

            DropDownIndex = Convert.ToInt32(args.RowIndex);  

        } 

    } 

    ... 

} 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Junaid]

Good day,

Thank you so much. It works. The value (19017-100) is selected at Index=0 as I wanted. B

But the Header Text is not rendered for this column (a). 

and when I open a record from this grid in edit mode I do not get the value for this column from the selected row (b). 

The reason for the above behavior is that the index of drop down is being manipulated through a variable and the index is dependent on this variable's value. But in editing a record, exact values and text for the edited row should be rendered in the dropdown. How can that be achieved?

Is it possible that Index, the property itself, is added or removed on some instance?

Regards.

Junaid

[Renjith Singh Rajendran]

Hi Junaid, 

Thanks for your update. 

Query 1 : But the Header Text is not rendered for this column (a). 

For an template way of editing in Grid, the particular column’s cell will be rendered in the edit form based on the provided template. As there is only the DropDownList in the template(provided in our previous codes), the header text is not displayed. Whatever available in template will only be displayed. So we suggest you to add the label tag and apply styles to align the tag to display the header text based on your requirement. We are attaching the sample for your convenience, please downdload the sample form the link below, 

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

Please use the code below, 

 

        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" DataSource="@Employees" Width="150"> 

            <EditTemplate> 

                   <label class="e-float-text e-label-top e-edittemplate">Employee Name</label><br> 

                    <EjsDropDownList TValue="string" ID="EmployeeID" Index="@DropDownIndex" DataSource="@Employees"> 

                        <DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings> 

                    </EjsDropDownList> 

               </EditTemplate> 

        </GridColumn> 

Query 2 : But in editing a record, exact values and text for the edited row should be rendered in the dropdown. How can that be achieved? Is it possible that Index, the property itself, is added or removed on some instance? 

We are not certain about your complete requirement. As in your previous update you have asked for suggestion to display value in the dropdown based on the selected row(if selected row is 10, then dropdown index should be 0). We need more details to further proceed on this and provide you a solution as early as possible. 

1. Share the scenarios, in which scenario you want to display the dropdown value based on selected row and in which scenario you want to display the dropdown value based on current edited row.
2. Share a detailed explanation of your complete requirement.

If you want to display the dropdown value based on the current edited row then we suggest you to set the “Value” property of DropDown as like the below code, please use the code below, 

 

        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" DataSource="@Employees" Width="150"> 

            <EditTemplate> 

                @{ 

                    var Order = (context as Order); 

                    <label class="e-float-text e-label-top e-edittemplate">Employee Name</label><br> 

                    <EjsDropDownList ID="EmployeeID" Value="@(Order.EmployeeID)" DataSource="@Employees"> 

                        <DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings> 

                    </EjsDropDownList> 

                } 

            </EditTemplate> 

        </GridColumn> 

We also suggest you to refer the DropDownList component documentation for more details regarding the component. 

Documentation : https://ej2.syncfusion.com/blazor/documentation/dropdownlist/getting-started/?no-cache=1 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Junaid]

Good day,

Thanks for you reply, the use of Value attribute in EjsDropDown solved my problem. I really appreciate your help. 

However, I would bring this to your kind attention that some of the documentation on your tutorials is outdated and irrelevant. That is why I come to the forum. These examples need an update. 

First of all, if EditTemplate tag is not provided with the context as a property inside the EditTemplate tag, there is an error:

To solve it, Context should be made a part of EditTemplate there and then be used inside the @{} section. Like this":

Second, the label tag renders like this in the dialog:

To solve the above problem, I used span tag like this:

It then renders just fine:

Have a good day.

Regards.

Junaid

[Renjith Singh Rajendran]

Hi Junaid, 

Query 1 : First of all, if EditTemplate tag is not provided with the context as a property inside the EditTemplate tag, there is an error: 

If we use the EditTemplate as like in our documentation, then there is no need for using Context property(please refer the sample from our previous update). But, we are able to face this scenario only when we provide the EditTemplate inside another template. If you are using the EditTemplate inside another template(as like the below code), then you must have to set the “Context” property. Thanks for your suggestion, we have logged a documentation task for this. We will document this and it will be refreshed online. 

@*We have provided the EditTemplate inside another template(DetailTemplate). At these cases you must provide Context*@ 

 

<EjsGrid ModelType="@Model" DataSource="@Employees" Height="315px"> 

    <GridTemplates> 

        <DetailTemplate> 

            <EjsGrid DataSource="@Orders" Query="@($"new ej.data.Query().where('EmployeeID', 'equal', {employee.EmployeeID})")"> 

                <GridColumns> 

                    <GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> 

                        <EditTemplate Context="Order"> 

                            @{ 

                                var Order = (context as Order); 

                                <EjsDropDownList HeaderTemplate="EmployeeID" TValue="int?" Value="@(Order.EmployeeID)" DataSource="@Employees"> 

                                    <DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings> 

                                </EjsDropDownList> 

                            } 

                        </EditTemplate> 

                    </GridColumn> 

                    ... 

               </GridColumns> 

            </EjsGrid> 

        </DetailTemplate> 

    </GridTemplates> 

    ... 

</EjsGrid> 

 

Query 2 : Second, the label tag renders like this in the dialog: To solve the above problem, I used span tag like this: It then renders just fine: 

As suggested in our previous update, to display the header text for the edit template cell in Dialog, you have to provide the corresponding label/span, and apply styles accordingly. And we have referred your screenshot, we are glad to see that you have achieved your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Junaid]

Dear,

Thanks for your cooperation and help. Have a good day.

Regards.

Junaid

[Renjith Singh Rajendran]

Hi Junaid, 

Thanks for your update. 

Kindly get back to us if you need any further assistance. 

Regards, 

Renjith Singh Rajendran.