How To

28 Mar 2018 / 6 minutes to read

Get the selected values on post back.

Single selection

Enable the property PersistSelection in order to use selection in ListView. Then use the getActiveItemText method take the selected active text through javascript and then pass it to the controller via AJAX.

  • html
  • @Html.EJ().ListView("localListView").Width(400).DataSource((IEnumerable<CarsList>)ViewBag.datasource).FieldSettings(sf => sf.Text("text")).PersistSelection(true)
    
      @Html.EJ().Button("button").ShowRoundedCorner(true).Text("Submit").ClientSideEvents(e => e.Click("click"))
     
     
    <script> 
    function click(args) { 
      var text = $("#localListView").ejListView("getActiveItemText");      
          $.ajax({ 
                    type: "POST", 
                    data: { value: text },
                    url: "/ListView/Features", 
                    success: function (result) {  
                        alert(result); 
                    } 
                }); 
     
            }    
        
              
           </script>
  • c#
  • [HttpPost] 
            public ActionResult Features(string value)
            { 
                string val = value; 
                return Json(val, JsonRequestBehavior.AllowGet); 
            }

    Multiple selection

    Multiple items can be selected by using EnableCheckMark property. Hence we need to use the getCheckedItemsText method to take all the checked items and then pass it to the controller using javascript AJAX.

  • html
  • @Html.EJ().ListView("localListView").Width(400).DataSource((IEnumerable<CarsList>)ViewBag.datasource).EnableCheckMark(true).FieldSettings(sf => sf.Text("text"))
    
    @Html.EJ().Button("button").ShowRoundedCorner(true).Text("Submit").ClientSideEvents(e => e.Click("click"))
     
    <script> 
     
            function click1(args) { 
                  var text = $("#localListView").ejListView("getCheckedItemsText"); 
                $.ajax({ 
                    type: "POST", 
                     data: { value: text },
                    url: "/ListView/Features", 
                    success: function (result) {  
                        alert(result); 
                    } 
                }); 
     
            } 
     
        </script>
  • c#
  • [HttpPost]
             public ActionResult Features(object value)  
             {
                 object val = value;
                 return Json(val, JsonRequestBehavior.AllowGet);
             }

    Render ListView from Code behind

    ListView can be rendered from the code behind by initializing the required properties in controller and passing those properties via ViewData or Model to the client side

    The following code illustrates the initialization of ListView properties in the controller.

  • c#
  • //Namespace to get the JavaScript (ListView) component properties
    using Syncfusion.JavaScript.Models;
    
    namespace MvcApplication.Controllers
    {
        public class ListViewController: Controller
        {
    
            public ActionResult ListviewFeatures()
            {
    
                  //Initializing the Listbox model
    
              ListViewProperties ListviewObj = new ListViewProperties();
    
    
                //Initializing the data as items and other properties 
    
                ListViewProperties ListviewObj = new ListViewProperties();
                ListviewObj.ShowHeader = false;
                ListviewObj.Width = 200;
                List<ListViewItem> obj = new List<ListViewItem>();
                obj.Add(new ListViewItem() { Text = "Home" });
                obj.Add(new ListViewItem() { Text = "Profile" });
                obj.Add(new ListViewItem() { Text = "Photos" });
                obj.Add(new ListViewItem() { Text = "Location" });
    
                ListviewObj.Items = obj;
                ListviewObj.EnableCheckMark = true;
    
                //Passing Listview properties using the ViewData
    
                ViewData["ListModel"] = ListObj;
    
                return View();
            }
        }
    }

    Binding the ListView properties passed via ViewData from the controller in the client side as below.

  • cshtml
  • @{
        Html.EJ().ListView("Listview", (Syncfusion.JavaScript.Models.ListViewProperties)ViewData["ListViewModel"]).Render();
    }