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. Chip methods

Chip methods


 
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 

8 Replies
SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team 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. 


ET ebi torabi 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?

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team 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. 


ET ebi torabi February 4, 2020 12:41 PM UTC

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

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team 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. 


DL Dionisio Luis 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() ?

DL Dionisio Luis replied to Dionisio Luis 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; }
    }

SP Sowmiya Padmanaban Syncfusion Team 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 


Loader.
Up arrow icon