Enable/Disable items

sateesh kumar

Asked On March 20, 2019 08:51 AM UTC

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

Reply | Reply with quote

Silambarasan I [Syncfusion]

Replied On 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.

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

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

Reply | Reply with quote

sateesh kumar

Replied On March 25, 2019 11:52 AM UTC

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

Reply | Reply with quote

Deepa Loganathan [Syncfusion]

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

$("[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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
143434	Mar 20,2019 08:51 AM UTC	Mar 26,2019 05:49 AM UTC	ASP.NET MVC	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US