Enable/Disable items

[sateesh kumar]

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) {

 $("#list").ejListView({

                dataSource: e.result,

                fieldSettings: { "text": "Name", "id": "Id", "checked": "true", "deactive": "true", "disableItem": "true" },

                option: { "enableAjax": "false" }

                })

}

Thanks for the advance

[Silambarasan I]

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.

 

• checkAllItem() – Check all the items in the ListView control.

 

• unCheckAllItem() – Un check all items in the ListView control.

 

• 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("Artwork").Checked(true).HtmlAttributes(dataHtmlAttribute); 

    items.Add().Text("Abstract"); 

    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"); 

    items.Add().Text("Children"); 

}).ClientSideEvents(evt => evt.Create("onCompleteLoad")) 

 

<script> 

    function onCompleteLoad() { 

        var obj = $("#checklist").ejListView("instance"); 

        //obj.checkAllItem(); 

        //obj.option("checkedIndices", [2, 3]); 

        obj.disableItem(0) 

        obj.disableItem(1) 

        obj.enableItem(0); 

        obj.enableItem(1); 

    }; 

</script> 

 

 

Could you please check the above solution and get back to us if you need further assistance on this? 

 

Regards, 

Silambarasan 

[sateesh kumar]

Hi,

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) {

 $("#list").ejListView({

                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) {

 $("#list").ejListView({

                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 ) {

                obj.enableItem(y);}

            else {

                obj.disableItem(y);}

        } 

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

[Deepa Loganathan]

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 }); 

    $("[data-preventselection*=true]").addClass("e-disable"); 

   

  }); 

 

 

We have depicted it in the below sample. Please check it.  

 

Sample: https://jsplayground.syncfusion.com/mwah01pg  

 

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.  

 

Sample: https://stackblitz.com/edit/zftgga?file=datasource.ts  

 

Please check and let us know if you have any further queries or concerns.  

 

Regards,  

Deepa L.