Get the values selected and assing to a query

[Emilio]

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]

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   

 

Sample:   https://www.syncfusion.com/downloads/support/forum/148281/ze/BlazorApp1-2093687726  

 

Please get back to us if you have further queries.   

 

Regards,
Sureshkumar P 

[Emilio]

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]

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.   

Sample:  https://www.syncfusion.com/downloads/support/forum/148281/ze/BlazorApp1-671873316  

  

Please get back to us if you have further queries.   

Regards,
Sureshkumar P 

[Emilio]

Great! Thank you.

[Narayanasamy Panneer Selvam]

Hi Emilio, 

 

Most welcome. 

 

We are pleased to hear that the reported issue has been resolved.

Regards,
Narayanasamy P. 

[Luis Roberto]

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

[Luis Roberto]

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

[Ponmani Murugaiyan]

Hi Luis, 

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

Regards, 

Ponmani M