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

Enable/Disable items

Hi Team,

Am using Lisv view  and assign the data source in java script.
in java script am trying for, list items should be checked and disable.

i need to enable/ disable the total list items and particular item also.

Here is my code,

@Html.EJ().ListView("list").ShowHeader(true).HeaderTitle("Meida").EnableCheckMark(true).ClientSideEvents(e => e.MouseUp("btnState"))

  promise.done(function (e) {
                dataSource: e.result,
                fieldSettings: { "text": "Name", "id": "Id", "checked": "true", "deactive": "true", "disableItem": "true" },
                option: { "enableAjax": "false" }

Thanks for the advance

3 Replies

SI Silambarasan I Syncfusion Team March 21, 2019 10:49 AM UTC

Hi Sai, 
Thank you for contacting Syncfusion support. 
We have looked into your query with EJ ListView. We suggest you to check out the below properties available in the ListView to achieve your requirement of enable/disable li elements and check/ uncheck items in the ListView. 
  • checkedIndices - Set the index values to be selected on initial loading. This works only when enableCheckMark is set true.
  • checkItem() – check specific item in the ListView control.
  • unCheckItem() – un check specific item from the ListView control.
Please refer the below code sample that demonstrate your requirement. You can also disable items on initialization by adding class e-disable to any dataSource object as depicted in the below code sample. 
@{IDictionary<string, object> datepickerHtmlAttribute = new Dictionary<string, object>(); 
    dataHtmlAttribute.Add("class", "e-disable"); 
@Html.EJ().ListView("checklist").ShowHeader(false).EnableCheckMark(true).Items(items => 
    items.Add().Text("2 Acrylic Mediums").Checked(true).HtmlAttributes(datepickerHtmlAttribute); 
    items.Add().Text("Creative Acrylic"); 
    items.Add().Text("Modern Painting"); 
    items.Add().Text("Canvas Art"); 
    items.Add().Text("Black white"); 
}).ClientSideEvents(evt => evt.Create("onCompleteLoad")) 
    function onCompleteLoad() { 
        var obj = $("#checklist").ejListView("instance"); 
        //obj.option("checkedIndices", [2, 3]); 
Could you please check the above solution and get back to us if you need further assistance on this? 

SK sateesh kumar March 25, 2019 11:52 AM UTC


i was used disableItem true while assigning data source, why its not working.

@Html.EJ().ListView("list").ShowHeader(true).HeaderTitle("Meida").EnableCheckMark(true).ClientSideEvents(e => e.MouseUp("btnState"))

  promise.done(function (e) {
                dataSource: e.result,
                fieldSettings: { "text": "Name", "id": "Id", "checked": "true", "deactive": "true","disableItem": "true"
                option: { "enableAjax": "false" }

now my script after adding one for loop enable/disable
 promise.done(function (e) {
                dataSource: e.result,
                fieldSettings: { "text": "Name", "id": "Id", "checked": "true", "deactive": "true", "disableItem": "true" },
                option: { "enableAjax": "false" }

var ltype = //get result from other source false or true 

        var obj= $("#ist").ejListView("instance"); 
        for (var y = 0; y < obj.model.dataSource.length; y++) {

            if (ltype ) {
            else {

am able enable/disable listitems now with looping.
let me know ,is there any option to avoid the looping.
i want to enable all  or disable all with single condition. 

Thanks for the advance

DL Deepa Loganathan Syncfusion Team March 26, 2019 05:49 AM UTC

Hi Sai,  
Instead of disabling the items, you could prevent the selection of items by using preventSelection API.  However, if you wish to disable the items, you would need to add “e-disable” class to the list items.  
Please find the code snippet for your reference.  
window.dbitem = 
    [{ text: "Discover Music" , preventSelection: true, attributes :[{"name": "class", value: "e-disable"}]}, 
      { text: "Sales and Events" }, 
      { text: "Categories" , preventSelection: true}, 
      { text: "MP3 Albums" }, 
      {text: "More in Music" }]; 
  $(function () { 
    $("#defaultlistbox").ejListView({showHeader: true, headerTitle: "Favorite", width:400, dataSource: dbitem, enableGroupList: false }); 
We have depicted it in the below sample. Please check it.  
We would like to let you know that we have developed a whole new set of next generation controls (EJ2) that is improvised in performance, made more modular with a lot more improvisations when compared to EJ1. We kindly suggest you look at our next generation controls.  
Also, your requirement could be easily achieved in EJ2 Listview by simply setting the attributes in Listitems.  
For your reference, we have prepared a sample with EJ2 Listview.  
Please check and let us know if you have any further queries or concerns.  
Deepa L. 

Live Chat Icon For mobile
Up arrow icon