We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Adding Index="0" property upon an event

Adding Index="0" property upon an event

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

10 Replies
JU Junaid December 1, 2019 10:00 AM UTC

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.

RS Renjith Singh Rajendran Syncfusion Team December 2, 2019 12:09 PM UTC

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, 
 
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. 


JU Junaid December 2, 2019 03:14 PM UTC

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

RS Renjith Singh Rajendran Syncfusion Team December 3, 2019 11:47 AM UTC

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. 


JU Junaid December 3, 2019 03:10 PM UTC

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

RS Renjith Singh Rajendran Syncfusion Team December 4, 2019 12:03 PM UTC

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, 

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. 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


JU Junaid December 4, 2019 04:16 PM UTC

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":