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

Get the values selected and assing to a query

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

     





8 Replies

SP Sureshkumar P Syncfusion Team 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
 



EM Emilio 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)?



SP Sureshkumar P Syncfusion Team 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 



EM Emilio October 15, 2019 08:19 PM UTC

Great! Thank you.


NP Narayanasamy Panneer Selvam Syncfusion Team 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.
 



LR Luis Roberto June 8, 2021 06:56 PM UTC

Hi Guys the examples you provided in this Thread work great, in one example you get the name and in the other you get the code

I would like to know if is there a way to Get both values, the code and the name, at the same time.

I have a multiselect and when I click on the button I want to add the code and the name to a grid.

Is this possible to get both values at the same time ?

Thanks


LR Luis Roberto June 8, 2021 07:36 PM UTC

Hi Guys, I foud a solution, I get the values using var Values = MultiSelect.Value; and the texts just like you suggested var Texts= MultiSelect.Text.Split(',');  and then I iterate through the two arrays.

Thanks


PM Ponmani Murugaiyan Syncfusion Team June 9, 2021 07:33 AM UTC

Hi Luis, 

Thanks for the update. We are glad to know that you have found the solution for the reported query.  

Regards, 
Ponmani M 


Loader.
Live Chat Icon For mobile
Up arrow icon