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

Chip methods

Thread ID:

Created:

Updated:

Platform:

Replies:

151145 Feb 1,2020 07:02 AM UTC Sep 28,2020 10:59 AM UTC Blazor 8
loading
Tags: Chips
ebi torabi
Asked On February 1, 2020 07:02 AM UTC


 
Hi .Unfortunately, I couldn't find any documentation for the chips
How to use the following methods and properties

   EjsChipList chip;
    ChipModel chips = new ChipModel();


        chip.GetSelectedChips();
        chip.Select();
        chip.Remove();
        chip.SelectedChips
        chips.Value 

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On February 3, 2020 10:48 AM UTC

Hi Ebi, 
 
Greetings from Syncfusion support. 
 
We have looked into your query on EJS Chips component. We will consider updating Blazor Chips documentation to cover the properties and methods in the Chips component. 
 
GetSelectedChips() - This method returns the selected chips data. 
 
SelectedChips - This property returns the selected chips indices or Value attribute. 
 
Select - Use this method to select a chip item. 
 
Remove - Use this method to remove a chip item. 
 
 
We have prepared a simple in which we have used your requested properties to update the Chips component, dynamically. 
 
async public void onClick() 
    { 
        // this method returns the selected chips data 
        var selectedChipsData = await this.chipObj.GetSelectedChips(); 
        // this property returns the selected chips indices 
        var selectedItems = this.chipObj.SelectedChips; 
        // use this method to select a chip item 
        this.chipObj.Select(new int[] { 2 }); 
        // use this method to remove a chip item 
        this.chipObj.Remove(this.chipObj.SelectedChips); 
    } 
 
 
We have attached a sample with above code for your reference. 
 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


ebi torabi
Replied On February 3, 2020 11:55 AM UTC

Hi. Excuse me.
I meant how to use the information we fetch with the GetSelectedChips () method.
How to get indexes, values, texts ... from this method?

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On February 4, 2020 09:05 AM UTC

Hi Ebi, 
 
Using the GetSelectedChips() method, we can get the selected Chip’s data like their respective indices, text, value, enabled state, guid. With the data returned from the GetSelectedChips property you can customize each Chip from the Chips (ChipList) component.  
 
For example, from the sample which attached the GetSelectedChips() returns the following data about the selected chips from the Chips. Using this data you can customize the Chips component. 
 
selectedChipsData 
{{ 
  "texts": [ 
    "Extra Small", 
    "Large" 
  ], 
  "Indexes": [ 
    0, 
    3 
  ], 
  "data": [ 
    { 
      "enabled": true, 
      "text": "Extra Small", 
      "value": "zero", 
      "guid": 53724 
    }, 
    { 
      "enabled": true, 
      "text": "Large", 
      "value": "three", 
      "guid": 51220 
    } 
  ], 
  "elements": [ 
    {}, 
    {} 
  ] 
}} 
    ChildrenTokens: Count = 4 
    Count: 4 
    First: {"texts": [ 
  "Extra Small", 
  "Large" 
]} 
    HasValues: true 
    Last: {"elements": [ 
  {}, 
  {} 
]} 
    Next: null 
    Parent: null 
    Path: "" 
    Previous: null 
    Root: {{ 
  "texts": [ 
    "Extra Small", 
    "Large" 
  ], 
  "Indexes": [ 
    0, 
    3 
  ], 
  "data": [ 
    { 
      "enabled": true, 
      "text": "Extra Small", 
      "value": "zero", 
      "guid": 53724 
    }, 
    { 
      "enabled": true, 
      "text": "Large", 
      "value": "three", 
      "guid": 51220 
    } 
  ], 
  "elements": [ 
    {}, 
    {} 
  ] 
}} 
 
 
 
Please, let us know if you have any concerns. 
 
Regards, 
Shameer Ali Baig S. 


ebi torabi
Replied On February 4, 2020 12:41 PM UTC

آه Shameer Ali Baig S.
Thank you very much for your comments.
 If possible, please give an example

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On February 5, 2020 10:47 AM UTC

Hi Ebi, 
 
We have checked your reported query to get the selectedChip() value. GetSelectedChip() method returns the object. You can deserialize the object and used based on your requirement.  
 
Refer the below code snippet to get the SelectedChip value 

  async public void onToggleClick() 
    { 
        Temp account = JsonConvert.DeserializeObject<Temp>((await chip.GetSelectedChips()).ToString()); 
        // Selected text value 
        string selectedChipText = account.text; 
        // Selected index value 
        int index = account.index; 
        // Selected chip value inside the data. 
        string data_value = account.data.value; 
    } 
public class Temp 
    { 
        public string text { get; set; } 
        public string value { get; set; } 
        public int index { get; set; } 
        public Temp data { get; set; } 
    } 

For your reference, we have prepared a simple sample. Refer the sample link below. 
 
Please let us know, if you need any further assistance on this. 
Regards,  
Shameer Ali Baig S. 


Dionisio Luis
Replied On September 27, 2020 10:37 AM UTC

For WASM Chips, getting multi chips seems impossible ? 
Json string seems not working correctly ?

Can you give an example where you use the latest Syncfusion release and also multi selected chips ? using the method GetSelectedChips() ?

Dionisio Luis
Replied On September 28, 2020 10:07 AM UTC

For WASM Chips, getting multi chips seems impossible ? 
Json string seems not working correctly ?

Can you give an example where you use the latest Syncfusion release and also multi selected chips ? using the method GetSelectedChips() ?


Working code for who having issues deserializing the  chip list ....

  var teste0 = await this.ChipListItems.GetSelectedChips();
            //Console.WriteLine(teste0.ToString().Replace("\n", "").Replace("\r", ""));
            ChipModelDeserialize teste1 = JsonConvert.DeserializeObject<ChipModelDeserialize>(teste0.ToString().Replace("\n","").Replace("\r",""));
            foreach (Datum item in teste1.data)
            {
                Console.WriteLine($"item:{item.text}-{item.value}");
            }




//Model

    public class Datum
    {
        [JsonProperty("text")]
        public string text { get; set; }

        [JsonProperty("value")]
        public string value { get; set; }

        [JsonProperty("guid")]
        public int guid { get; set; }
    }
    public class Element
    {
    }
    [JsonObject(MemberSerialization = MemberSerialization.OptIn)]
    public class ChipModelDeserialize
    {

        [JsonProperty("texts")]
        public IList<string> texts { get; set; }

        [JsonProperty("Indexes")]
        public IList<int> Indexes { get; set; }

        [JsonProperty("data")]
        public IList<Datum> data { get; set; }

        [JsonProperty("elements")]
        public IList<Element> elements { get; set; }
    }

Sowmiya Padmanaban [Syncfusion]
Replied On September 28, 2020 10:59 AM UTC

Hi Dionisio,  
  
Based on your last update, we found that your probelm has been resolved. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.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