Chip methods

[ebi torabi]

 

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]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151145/ze/Chips_blazor1549005931  

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[ebi torabi]

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]

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]

آه Shameer Ali Baig S.

Thank you very much for your comments.

 If possible, please give an example

[Shameer Ali Baig Sulaiman Ali Baig]

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. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Chips_blazor-1276936834.zip 

 

Please let us know, if you need any further assistance on this. 

Regards,  

Shameer Ali Baig S. 

[Dionisio Luis]

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]

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("", "").Replace("\r", ""));

            ChipModelDeserialize teste1 = JsonConvert.DeserializeObject<ChipModelDeserialize>(teste0.ToString().Replace("","").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]

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