how to get selection from checklist

[Alex]

Hi!

How can i get selection from checklist control? I'm trying 'selectedId' and 'selectedData', but there is no data(there is a flush array)

Thx!

[Karthick T]

Hi Alex, 

 

Thanks for contacting Syncfusion Support. 

 

We can achieve your requirement using getSelectedItems method. Refer to our online documentation from here for more information about the API. 

 

The getSelectedItems method is used to get selected list item’s data, HTML element, text and number of selected items. 

 

Below tables represents the values returned by the getSelectedItems method. 

 

SelectedItem – An Interface used when checkbox is disabled. 

SelectedCollection – An Interface used when checkbox is enabled. 

 

SelectedItem: 

 

Return Values	Return Type	Description
data	Object | string[]	It denotes the Selected Item dataSource JSON object.  Here We can retire id, text etc.
Item	HTMLElement | Element	It denotes the Selected Item list element.
text	string	It denotes the Selected Item text.

 

SelectedCollection: 

 

Return Values	Return Type	Description
Data	Object | Object[] | string[]	It denotes the Selected Item dataSource JSON object or object collection.  Here We can retire id, text etc.
Item	HTMLElement | Element[] | HTMLCollection	It denotes the Selected Item list element or element collection.
text	string | string[]	It denotes the Selected Item text data or collection.

 

Code Snippet 

 

    

   // Accessing selected item from listview object using getSelectedItems method 

    var values = listObj.getSelectedItems(); 

     

    // Accessing selected values text 

    var textValues = values.text; 

    document.getElementsByClassName(‘text’)[0].textContent = ''; 

    for (var i = 0; i < length; i++) { 

      document.getElementsByClassName(‘text’)[0].textContent += textValues[i] + ', '; 

    } 

    // Selected Elements count 

    document.getElementsByClassName(‘count’)[0].textContent = values.item.length; 

 

 

We have prepared sample for your reference. Please refer to the plunker sample from here. 

 

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

 

Thanks, 

Karthick T 

[Aaron Knipe]

Is there a way to get the selected values during a post without using javascript like a number of the other controls (dropdownlist for example)?

[Kanagambigai Murugan]

Hi Aaron, 

Thanks for the update. 

There is no direct way to get the selected list item during the form post since our ListView control is not a form control. However you can assign the selected list item values to the hidden input during the form post using the following code snippet.  

[Code Snippet]  

  

[Lists.cshtml]  

  

 Here we get and update the selected items in textbox, which is retrieved back in controller through name attribute of textbox element.  

  

  

<form asp-controller="MyList" method="post"> 

    <ejs-listview id="list" dataSource="@ViewBag.dataSource" showCheckBox="true" showHeader="true" headerTitle="Types Of Art"></ejs-listview> 

    <br /> 

    <label for="art">Type of art you are in to: </label> 

    <input  id="art" type="hidden" name="art" /> 

    <br /> 

    <input type="submit" id="button" value="Submit" formaction="GetValues" /> 

 

</form> 

 

<h2 style="color:crimson; background-color:darksalmon; padding:10px;"> 

    @ViewBag.Result 

</h2> 

 

<script> 

 

    document.getElementById('button').addEventListener('click', function () { 

        // Obtaining Listview Instance 

        var listviewInstance = document.getElementById('list').ej2_instances[0]; 

        var texts = ""; 

 

        for (var i = 0; i < listviewInstance.getSelectedItems().text.length; i++) { 

            // Assigning each value selected in the listview 

            texts = texts + listviewInstance.getSelectedItems().text[i] + ", "; 

        } 

 

        // Removes extra comma 

        texts = texts.replace(/(^,)|(, $)/g, ""); 

 

        // Assigning listview value to text box 

        var textbox = document.getElementById('art'); 

        textbox.value = texts; 

 

    }) 

 

</script> 

  

  

  

[MyListController.cs]  

  

// GET: /<controller>/ 

        public IActionResult Lists() 

        { 

            //define the array of JSON 

            List<object> data = new List<object>(); 

            data.Add(new { text = "Artwork", id = "01" }); 

            data.Add(new { text = "Abstract", id = "02" }); 

            data.Add(new { text = "Modern Painting", id = "03" }); 

            data.Add(new { text = "Oil Painting", id = "04" }); 

 

            ViewBag.dataSource = data; 

            return View(); 

        } 

 

        [HttpPost] 

        public IActionResult GetValues() 

        { 

            string value  = HttpContext.Request.Form["art"]; 

            ViewBag.Result = value; 

            return View("Values"); 

        } 

    } 

  

Note: To view the demo List.cshtml file type in URL ‘http://localhost:[Your Port]/MyList/Lists’  

  

For your convenience, we have prepared a sample using our ListView control in forms which will submit the checked values from the ListView to another page.  

  

Sample: https:// www.syncfusion.com/downloads/support/forum/136915/ze/ListViewDemo207512527 

 

Please check the above sample and let s know whether your requirement has fulfilled or not.  

 

 

Regards, 

Kanagambigai M.