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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Get the values selected and assing to a query

Thread ID:

Created:

Updated:

Platform:

Replies:

148281 Oct 13,2019 06:33 PM UTC Oct 16,2019 06:19 AM UTC Blazor 5
loading
Tags: MultiSelect Dropdown
Emilio
Asked On October 14, 2019 07:48 AM UTC

Hi

using 17.3.17


how can I get the values selected in a multiselect dropdown?
with this values how can i build a grid's query value that sends a filter with IN operator to a webapi service?

For example this is what i get in multiselect

         value (CustId)                   text (name)
     ✓       1                          CUSTOMER 1
               2                         CUSTOMER 2
     ✓       3                         CUSTOMER 3
               4                         CUSTOMER 4

Selected values =  1, 3

Grid query = "new ej.data.Query().where('CustId', 'in ', ????)";

odata where filter = $filter=CustId in (1, 3)
or                             $filter=CustIid eq 1 or id eq 3

     





Sureshkumar P [Syncfusion]
Replied On October 14, 2019 01:30 PM UTC

Hi Emilio,   
 
Greetings from Syncfusion support.    
 
Query: “how i can get the values selected in a multiselect dropdown?  
 
We suggest you achieve your requirement using Query property of EjsGrid and generating the filter predicates using the values selected from the MultiSelect. During the initial render we will prevent the Grid from rendering. Once the Query is generated on button click, we will render the grid with updated query.  
 
Refer the below code example.  
 
<EjsMultiSelect @ref="MultiSelect" Placeholder="e.g. Australia" Value="@MultiVal"DataSource="@Country">  
        <MultiSelectFieldSettings Value="Name"></MultiSelectFieldSettings>      
    </EjsMultiSelect>  
<EjsButton OnClick="Filter">Render Grid</EjsButton>  
@if (CanRender)  
{  
<EjsGrid DataSource="@Orders" AllowPaging="true" AllowFiltering="true"Query=@Query>  
    <GridPageSettings PageSize="5"></GridPageSettings>  
.       .          .         .        .           .        .   
</EjsGrid>  
}  
  
>>>>>>>>>>>>>>>>>>>>>>>>>  
  
public void Filter()  
    {  
        var Sel = MultiSelect.Text.Split(',');  
        if (Sel.Length > 1)  
        {  
            for (var I = 0; I < Sel.Length; I++)  
            {  
                if (I == 0) {  
                    Pre = $"new ej.data.Predicate('CustomerID', 'equal','{Sel[I]}')";  
                }  
                else {  
                    Pre = Pre + $".or('CustomerID', 'equal','{Sel[I]}')";  
                }  
            }  
            Query = $"new ej.data.Query().where({Pre})";  
            CanRender = true;  
        }  
        else  
        {  
            Query = $"new ej.data.Query().where('CustomerID', 'equal', '{Sel[0]}')";  
                CanRender = true;  
        }  
            StateHasChanged();  
    }  
   
For your convenience we have prepared a sample which can be downloaded from below link   
 
 
Please get back to us if you have further queries.   
 
Regards,
Sureshkumar P
 


Emilio
Replied On October 14, 2019 06:45 PM UTC

Thank you for the working sample!

But if i change the example to use 2 different fields for value and text

<EjsMultiSelect @ref="MultiSelect" Placeholder="e.g. Australia" Value="@MultiVal"DataSource="@Country">  
        <MultiSelectFieldSettings Value="Code" Text="Name"></MultiSelectFieldSettings>      
    </EjsMultiSelect>


how can i use Multiselect selected values (codes) instead of MultiSelect.Text (names)?


Sureshkumar P [Syncfusion]
Replied On October 15, 2019 06:19 AM UTC

Hi Emilio,   
 
Thank you for your update. 
 
As per your requirement, we have modified the previously updated sample with filter grid content based on multiselect component selected values (codes) instead of Text (names).  
 
Refer to the below code example.  
 
<EjsMultiSelect Placeholder="e.g. Australia" @bind-Value="@MultiVal" DataSource="@Country"> 
        <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>     
    </EjsMultiSelect> 
<EjsButton OnClick="Filter">Render Grid</EjsButton> 
@if (CanRender) 
{ 
<EjsGrid DataSource="@Orders" AllowPaging="true" AllowFiltering="true" Query=@Query> 
    <GridPageSettings PageSize="5"></GridPageSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" 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> 
</EjsGrid> 
} 
 
@code{ 
    public List<Order> Orders { get; set; } 
    public bool CanRender = false; 
    public static string Pre; 
    public string Query; 
    EjsMultiSelect<string> MultiSelect { get; set; } 
    public int?[] MultiVal; 
    public class Countries 
    { 
        public string Name { get; set; } 
        public int Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
{ 
        new Countries() { Name = "ALFKI", Code = 1 }, 
        new Countries() { Name = "ANATR", Code = 2 }, 
        new Countries() { Name = "ANTON", Code = 3 }, 
        new Countries() { Name = "BLONP", Code = 4 }, 
         new Countries() { Name = "BOLID", Code = 5 } 
    }; 
    public void Filter() 
    { 
        int?[] Sel = MultiVal; 
        if (Sel.Count() > 1) 
        { 
            for (var I = 0; I < Sel.Count(); I++) 
            { 
                if (I == 0) { 
                    Pre = $"new ej.data.Predicate('EmployeeID', 'equal',{Sel[I]})"; 
                } 
                else { 
                    Pre = Pre + $".or('EmployeeID', 'equal',{Sel[I]})"; 
                } 
            } 
            Query = $"new ej.data.Query().where({Pre})"; 
            CanRender = true; 
            StateHasChanged(); 
        } 
        else 
        { 
            Query = $"new ej.data.Query().where('EmployeeID', 'equal', {Sel[0]})"; 
            CanRender = true; 
            StateHasChanged(); 
        } 
 
    } 
    // "new ej.data.Predicate('CustomerID', 'equal','ALFKI').or('CustomerID', 'equal','BOLID')"; 
    //public string query = $"new ej.data.Query().where({Pre})"; 
    protected override void OnInitialized() 
    { 
        Orders = Enumerable.Range(1, 75).Select(x => new Order() 
        { 
            OrderID = 1000 + x, 
            EmployeeID = x, 
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], 
            Freight = 2.1 * x, 
            OrderDate = DateTime.Now.AddDays(-x), 
        }).ToList(); 
    } 
 
    public class Order 
    { 
        public int? OrderID { get; set; } 
        public int? EmployeeID { get; set; } 
        public string CustomerID { get; set; } 
        public DateTime? OrderDate { get; set; } 
        public double? Freight { get; set; } 
    } 
} 
   
For your convenience, we have modified the previously updated sample which can be downloaded from below link.   

  
Please get back to us if you have further queries.   

Regards,
Sureshkumar P 


Emilio
Replied On October 15, 2019 08:19 PM UTC

Great! Thank you.

Narayanasamy Panneer Selvam [Syncfusion]
Replied On October 16, 2019 06:19 AM UTC

Hi Emilio, 
 
Most welcome. 
 
We are pleased to hear that the reported issue has been resolved.

Regards,
Narayanasamy P.
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon