890804: Disabled Items Documentation

ej2-asp-core-mvc/auto-complete/disabled-items.md

@@ -0,0 +1,59 @@
+---
+layout: post
+title: Disabled Items in ##Platform_Name## AutoComplete Control | Syncfusion
+description: Learn here all about Disabled Items in Syncfusion ##Platform_Name## AutoComplete control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Disabled Items
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+
+# Disabled Items in ##Platform_Name## AutoComplete Control
+
+The AutoComplete provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [disabled](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_EJ2_DropDowns_AutoCompleteFieldSettings_Disabled) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `fields.disabled` property.
+
+In the following sample, State are grouped according on its category using `disabled` field.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/autocomplete/disabled-items/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+public class DisableStatusData
+{
+    public string Status { get; set; }
+    public bool State { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/autocomplete/disabled-items/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="DisabledItem.cs" %}
+{% include code-snippet/autocomplete/disabled-items/disabled-items.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Disable Item Method
+
+The disableItem method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the [dataSource](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.AutoComplete.html#Syncfusion_EJ2_DropDowns_AutoComplete_DataSource), when the item is disabled using this method. If the selected item is disabled dynamically, then the selection will be cleared.
+
+| Parameter | Type | Description |
+|------|------|------|
+| itemHTMLLIElement |  <code>HTMLLIElement</code> |  It accepts the HTML Li element of the item to be removed.  |
+| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | It accepts the string, number, boolean and object type value of the item to be removed. |
+| itemIndex | <code>number</code> | It accepts the index of the item to be removed. |
+
+## Enabled
+
+If you want to disabled the overall component to set the [enabled](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.AutoComplete.html#Syncfusion_EJ2_DropDowns_AutoComplete_Enabled) property to false.
+
+{% [Disabled AutoComplete Component](./images/autocomplete-disable.png)" %}

ej2-asp-core-mvc/code-snippet/autocomplete/disabled-items/DisableStatusData.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace WebApplication1.Models
+{
+    public class DisableStatusData
+    {
+        public string Status { get; set; }
+        public bool State { get; set; }
+        public List<DisableStatusData> StatusDataList()
+        {
+            List<DisableStatusData> status = new List<DisableStatusData>();
+            status.Add(new DisableStatusData() { Status = "Open", State= false });
+            status.Add(new DisableStatusData() { Status = "Waiting for Customer", State= false });
+            status.Add(new DisableStatusData() { Status = "On Hold", State= true });
+            status.Add(new DisableStatusData() { Status = "Follow-up", State= false });
+            status.Add(new DisableStatusData() { Status = "Closed", State= true });
+            status.Add(new DisableStatusData() { Status = "Solved", State= false });
+            status.Add(new DisableStatusData() { Status = "Feature Request", State= false });
+
+            return status;
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/autocomplete/disabled-items/disabled-items.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using WebApplication1.Models;
+
+namespace WebApplication1.Controllers
+{
+    public class AutoCompleteController : Controller
+    {
+       public ActionResult Index()
+        {
+            ViewBag.data = new DisableStatusData().StatusDataList();
+            return View();
+        }     
+    }
+}

ej2-asp-core-mvc/code-snippet/autocomplete/disabled-items/razor

@@ -0,0 +1 @@
+@Html.EJS().AutoComplete("Status").Placeholder("Select Status").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).Fields(new Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings { Value = "Status", Disabled = "State" }).Render()

ej2-asp-core-mvc/code-snippet/autocomplete/disabled-items/tagHelper

@@ -0,0 +1,17 @@
+@{
+    List<DisableStatusData> status = new List<DisableStatusData>();
+            status.Add(new DisableStatusData() { Status = "Open", State= false });
+            status.Add(new DisableStatusData() { Status = "Waiting for Customer", State= false });
+            status.Add(new DisableStatusData() { Status = "On Hold", State= true });
+            status.Add(new DisableStatusData() { Status = "Follow-up", State= false });
+            status.Add(new DisableStatusData() { Status = "Closed", State= true });
+            status.Add(new DisableStatusData() { Status = "Solved", State= false });
+            status.Add(new DisableStatusData() { Status = "Feature Request", State= false });    
+}
+<div id='groupList' class='col-lg-6' style='padding-top:15px'>
+    <div class='content'>
+        <ejs-autocomplete id="status" placeholder="Select Status" popupHeight="200px" dataSource="@status">
+            <e-autocomplete-fields value="Status" disabled="State" ></e-autocomplete-fields>
+        </ejs-autocomplete>
+    </div>
+</div>

ej2-asp-core-mvc/code-snippet/combobox/disabled-items/DisableStatusData.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace WebApplication1.Models
+{
+    public class DisableStatusData
+    {
+        public string Status { get; set; }
+        public bool State { get; set; }
+        public List<DisableStatusData> StatusDataList()
+        {
+            List<DisableStatusData> status = new List<DisableStatusData>();
+            status.Add(new DisableStatusData() { Status = "Open", State= false });
+            status.Add(new DisableStatusData() { Status = "Waiting for Customer", State= false });
+            status.Add(new DisableStatusData() { Status = "On Hold", State= true });
+            status.Add(new DisableStatusData() { Status = "Follow-up", State= false });
+            status.Add(new DisableStatusData() { Status = "Closed", State= true });
+            status.Add(new DisableStatusData() { Status = "Solved", State= false });
+            status.Add(new DisableStatusData() { Status = "Feature Request", State= false });
+
+            return status;
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/combobox/disabled-items/disabled-items.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using WebApplication1.Models;
+
+namespace WebApplication1.Controllers
+{
+    public class ComboBoxController : Controller
+    {
+       public ActionResult Index()
+        {
+            ViewBag.data = new DisableStatusData().StatusDataList();
+            return View();
+        }     
+    }
+}

ej2-asp-core-mvc/code-snippet/combobox/disabled-items/razor

@@ -0,0 +1 @@
+@Html.EJS().ComboBox("Status").Placeholder("Select Status").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).Fields(new Syncfusion.EJ2.DropDowns.ComboBoxFieldSettings { Value = "Status", Disabled = "State" }).Render()

ej2-asp-core-mvc/code-snippet/combobox/disabled-items/tagHelper

@@ -0,0 +1,17 @@
+@{
+    List<DisableStatusData> status = new List<DisableStatusData>();
+            status.Add(new DisableStatusData() { Status = "Open", State= false });
+            status.Add(new DisableStatusData() { Status = "Waiting for Customer", State= false });
+            status.Add(new DisableStatusData() { Status = "On Hold", State= true });
+            status.Add(new DisableStatusData() { Status = "Follow-up", State= false });
+            status.Add(new DisableStatusData() { Status = "Closed", State= true });
+            status.Add(new DisableStatusData() { Status = "Solved", State= false });
+            status.Add(new DisableStatusData() { Status = "Feature Request", State= false });    
+}
+<div id='groupList' class='col-lg-6' style='padding-top:15px'>
+    <div class='content'>
+        <ejs-combobox id="status" placeholder="Select Status" popupHeight="200px" dataSource="@status">
+            <e-combobox-fields value="Status" disabled="State" ></e-combobox-fields>
+        </ejs-combobox>
+    </div>
+</div>

ej2-asp-core-mvc/code-snippet/dropdownlist/disabled-items/DisableStatusData.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace WebApplication1.Models
+{
+    public class DisableStatusData
+    {
+        public string Status { get; set; }
+        public bool State { get; set; }
+        public List<DisableStatusData> StatusDataList()
+        {
+            List<DisableStatusData> status = new List<DisableStatusData>();
+            status.Add(new DisableStatusData() { Status = "Open", State= false });
+            status.Add(new DisableStatusData() { Status = "Waiting for Customer", State= false });
+            status.Add(new DisableStatusData() { Status = "On Hold", State= true });
+            status.Add(new DisableStatusData() { Status = "Follow-up", State= false });
+            status.Add(new DisableStatusData() { Status = "Closed", State= true });
+            status.Add(new DisableStatusData() { Status = "Solved", State= false });
+            status.Add(new DisableStatusData() { Status = "Feature Request", State= false });
+
+            return status;
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/dropdownlist/disabled-items/disabled-items.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using WebApplication1.Models;
+
+namespace WebApplication1.Controllers
+{
+    public class DropDownListController : Controller
+    {
+       public ActionResult Index()
+        {
+            ViewBag.data = new DisableStatusData().StatusDataList();
+            return View();
+        }     
+    }
+}

ej2-asp-core-mvc/code-snippet/dropdownlist/disabled-items/razor

@@ -0,0 +1 @@
+@Html.EJS().DropDownList("Status").Placeholder("Select Status").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Value = "Status", Disabled = "State" }).Render()

ej2-asp-core-mvc/code-snippet/dropdownlist/disabled-items/tagHelper

@@ -0,0 +1,17 @@
+@{
+    List<DisableStatusData> status = new List<DisableStatusData>();
+            status.Add(new DisableStatusData() { Status = "Open", State= false });
+            status.Add(new DisableStatusData() { Status = "Waiting for Customer", State= false });
+            status.Add(new DisableStatusData() { Status = "On Hold", State= true });
+            status.Add(new DisableStatusData() { Status = "Follow-up", State= false });
+            status.Add(new DisableStatusData() { Status = "Closed", State= true });
+            status.Add(new DisableStatusData() { Status = "Solved", State= false });
+            status.Add(new DisableStatusData() { Status = "Feature Request", State= false });    
+}
+<div id='groupList' class='col-lg-6' style='padding-top:15px'>
+    <div class='content'>
+        <ejs-dropdownlist id="status" placeholder="Select Status" popupHeight="200px" dataSource="@status">
+            <e-dropdownlist-fields value="Status" disabled="State" ></e-dropdownlist-fields>
+        </ejs-dropdownlist>
+    </div>
+</div>

ej2-asp-core-mvc/code-snippet/multiselect/disabled-items/Tag.cs

@@ -0,0 +1,29 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace WebApplication1.Models
+{
+    public class Tag
+    {
+        public string Text { get; set; }
+        public bool State { get; set; }
+        public List<Tag> TagDataList()
+        {
+            List<Tag> tag = new List<Tag>();
+            tag.Add(new Tag() { Text = "Add to KB", State= false });
+            tag.Add(new Tag() { Text = "Crisis", State= false });
+            tag.Add(new Tag() { Text = "Enhancement", State= true });
+            tag.Add(new Tag() { Text = "Presale", State= false });
+            tag.Add(new Tag() { Text = "Needs Approval", State= false });
+            tag.Add(new Tag() { Text = "Approved", State= true });
+            tag.Add(new Tag() { Text = "Internal Issue", State= true });
+            tag.Add(new Tag() { Text = "Breaking Issue", State= false });
+            tag.Add(new Tag() { Text = "New Feature", State= true });
+            tag.Add(new Tag() { Text = "New Component", State= false });
+            tag.Add(new Tag() { Text = "Mobile Issue", State= false });
+            return tag;
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/multiselect/disabled-items/disabled-items.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using WebApplication1.Models;
+
+namespace WebApplication1.Controllers
+{
+    public class MultiSelectController : Controller
+    {
+       public ActionResult Index()
+        {
+            ViewBag.data = new Tag().TagDataList();
+            return View();
+        }     
+    }
+}

ej2-asp-core-mvc/code-snippet/multiselect/disabled-items/razor

@@ -0,0 +1 @@
+@Html.EJS().MultiSelect("Tag").Placeholder("Select Tags").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).Fields(new Syncfusion.EJ2.DropDowns.MultiSelectFieldSettings { Value = "Text", Disabled = "State" }).Render()

ej2-asp-core-mvc/code-snippet/multiselect/disabled-items/tagHelper

@@ -0,0 +1,21 @@
+@{
+    List<Tag> tag = new List<Tag>();
+        tag.Add(new Tag() { Text = "Add to KB", State= false });
+        tag.Add(new Tag() { Text = "Crisis", State= false });
+        tag.Add(new Tag() { Text = "Enhancement", State= true });
+        tag.Add(new Tag() { Text = "Presale", State= false });
+        tag.Add(new Tag() { Text = "Needs Approval", State= false });
+        tag.Add(new Tag() { Text = "Approved", State= true });
+        tag.Add(new Tag() { Text = "Internal Issue", State= true });
+        tag.Add(new Tag() { Text = "Breaking Issue", State= false });
+        tag.Add(new Tag() { Text = "New Feature", State= true });
+        tag.Add(new Tag() { Text = "New Component", State= false });
+        tag.Add(new Tag() { Text = "Mobile Issue", State= false });    
+}
+<div id='groupList' class='col-lg-6' style='padding-top:15px'>
+    <div class='content'>
+        <ejs-multiselect id="tags" placeholder="Select Tags" popupHeight="200px" dataSource="@tag">
+            <e-multiselect-fields value="Text" disabled="State" ></e-multiselect-fields>
+        </ejs-multiselect>
+    </div>
+</div>