Skip to content

Commit e58c141

Browse files
PrinceOliverPrinceOliver
authored
Merge pull request #4070 from syncfusion-content/EJ2-947971-ug_docs_hotfix
947971: Ug Documentation for asp core and mvc features
2 parents d8a3acd + af686c1 commit e58c141

File tree

15 files changed

+232
-5
lines changed

15 files changed

+232
-5
lines changed

‎ej2-asp-core-mvc/code-snippet/datepicker/input-format/input-format.cs

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using Microsoft.AspNetCore.Mvc;
6+
7+
namespace EJ2CoreSampleBrowser.Controllers
8+
{
9+
public class HomeController : Controller
10+
{
11+
public ActionResult DateRange()
12+
{
13+
ViewBag.value = new DateTime(DateTime.Now.Year,DateTime.Now.Month,14);
14+
return View();
15+
}
16+
}
17+
}

‎ej2-asp-core-mvc/code-snippet/datepicker/input-format/razor

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@Html.EJS().DatePicker("element").Value(ViewBag.value).Format("yyyy-MM-dd").InputFormats(new string[] { "dd/MM/yyyy", "yyyyMMdd" }).Placeholder("Enter date").Render()

‎ej2-asp-core-mvc/code-snippet/datepicker/input-format/tagHelper

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ejs-datepicker id="datepicker" value="@ViewBag.value" format="yyyy-MM-dd" inputFormats="@(new string[] {"dd/MM/yyyy", "yyyyMMdd"})" placeholder="Enter date"></ejs-datepicker>

‎ej2-asp-core-mvc/code-snippet/datetimepicker/input-format/input-format.cs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using Microsoft.AspNetCore.Mvc;
6+
7+
// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
8+
9+
namespace EJ2CoreSampleBrowser.Controllers
10+
{
11+
public partial class HomeController : Controller
12+
{
13+
// GET: /<controller>/
14+
public IActionResult DateTimeFormat()
15+
{
16+
ViewBag.value = new DateTime(DateTime.Now.Year,DateTime.Now.Month,14);
17+
return View();
18+
}
19+
}
20+
}

‎ej2-asp-core-mvc/code-snippet/datetimepicker/input-format/razor

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@Html.EJS().DateTimePicker("element").Value(ViewBag.value).Format("yyyy-MM-dd hh:mm").InputFormats(new string[] { "MM.dd.yyyy hh:mm a", "yyyy-MM-dd HH:mm" }).Placeholder("Enter date and time").Render()

‎ej2-asp-core-mvc/code-snippet/datetimepicker/input-format/tagHelper

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ejs-datetimepicker id="datetimepicker" value="@ViewBag.value" format="yyyy-MM-dd hh:mm" inputFormats="@(new string[] {"MM.dd.yyyy hh:mm a", "yyyy-MM-dd HH:mm"})" placeholder="Enter date and time"></ejs-datetimepicker>

‎ej2-asp-core-mvc/code-snippet/mention/customization/require-leading-space/EmailData.cs

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
6+
namespace WebApplication1.Models
7+
{
8+
public class EmailData
9+
{
10+
public string Name { get; set; }
11+
public string EmailId { get; set; }
12+
public List<EmailData> EmailList()
13+
{
14+
List<EmailData> email = new List<EmailData>()
15+
{
16+
new EmailData { Name = "Selma Rose", EmailId = "selma@gmail.com" },
17+
new EmailData { Name = "Maria", EmailId = "maria@gmail.com" },
18+
new EmailData { Name = "Russo kay", EmailId = "russo@gmail.com" },
19+
new EmailData { Name = "Robert", EmailId = "robert@gmail.com" },
20+
new EmailData { Name = "Garth", EmailId = "garth@gmail.com" }
21+
};
22+
return email;
23+
}
24+
}
25+
}

‎ej2-asp-core-mvc/code-snippet/mention/customization/require-leading-space/razor

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@model List<string>
2+
@{
3+
List<EmailData> data = new EmailData().EmailList();
4+
}
5+
6+
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag user"></div>
7+
8+
@Html.EJS().Mention("Mention-Char-Customize").Target("#mentionElement").DataSource((IEnumerable<object>)data).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Name" }).RequireLeadingSpace(false).Render()
9+
10+
<style>
11+
12+
div#mentionElement[placeholder]:empty:before {
13+
content: attr(placeholder);
14+
}
15+
16+
#mentionElement{
17+
min-height: 100px;
18+
border: 1px solid #D7D7D7;
19+
border-radius: 4px;
20+
padding: 8px;
21+
font-size: 14px;
22+
width: 600px;
23+
}
24+
25+
</style>

‎ej2-asp-core-mvc/code-snippet/mention/customization/require-leading-space/require-leading-space.cs

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using Microsoft.AspNetCore.Mvc;
6+
using WebApplication1.Models;
7+
8+
namespace WebApplication1.Controllers
9+
{
10+
public class MentionController : Controller
11+
{
12+
public ActionResult Index()
13+
{
14+
return View();
15+
}
16+
}
17+
}

‎ej2-asp-core-mvc/code-snippet/mention/customization/require-leading-space/tagHelper

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@{
2+
List<EmailData> data = new EmailData().EmailList();
3+
}
4+
5+
<div id="mentionElement" placeholder = "Type @@ and tag user"></div>
6+
<ejs-mention id="comments" dataSource="@data" target="#mentionElement" requireLeadingSpace="false" >
7+
<e-mention-fields text="Name"></e-mention-fields>
8+
</ejs-mention>
9+
10+
<style>
11+
12+
div#mentionElement[placeholder]:empty:before {
13+
content: attr(placeholder);
14+
}
15+
16+
#mentionElement{
17+
min-height: 100px;
18+
border: 1px solid #D7D7D7;
19+
border-radius: 4px;
20+
padding: 8px;
21+
font-size: 14px;
22+
width: 600px;
23+
}
24+
25+
</style>

‎ej2-asp-core-mvc/datepicker/date-format.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,33 @@ The following example demonstrates the DatePicker with the custom format (`yyyy-
4444
{% endtabs %}
4545
{% endif %}
4646

47+
## Input formats
48+
49+
The [`inputFormats`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Calendars.DatePicker.html#Syncfusion_EJ2_Calendars_DatePicker_InputFormats) property in the DatePicker control allows users to enter dates in various formats, providing flexibility in date entry. This property accepts an array of predefined formats that the control recognizes, enabling users to input dates in different ways while ensuring they are parsed correctly.
50+
51+
When the user types the date in any of the specified input formats, it will be automatically converted to the display format after pressing Enter, the Tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats.
52+
53+
The following example demonstrates the DatePicker with multiple input formats.
54+
55+
{% if page.publishingplatform == "aspnet-core" %}
56+
57+
{% tabs %}
58+
{% highlight cshtml tabtitle="CSHTML" %}
59+
{% include code-snippet/datepicker/input-format/tagHelper %}
60+
{% endhighlight %}
61+
{% highlight c# tabtitle="Date-format.cs" %}
62+
{% include code-snippet/datepicker/input-format/input-format.cs %}
63+
{% endhighlight %}
64+
{% endtabs %}
65+
66+
{% elsif page.publishingplatform == "aspnet-mvc" %}
67+
68+
{% tabs %}
69+
{% highlight razor tabtitle="CSHTML" %}
70+
{% include code-snippet/datepicker/input-format/razor %}
71+
{% endhighlight %}
72+
{% highlight c# tabtitle="Date-format.cs" %}
73+
{% include code-snippet/datepicker/input-format/input-format.cs %}
74+
{% endhighlight %}
75+
{% endtabs %}
76+
{% endif %}

‎ej2-asp-core-mvc/datetimepicker/date-time-format.md

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Date Time Format in ##Platform_Name## Datetimepicker Component
3+
title: Date Time Format in ##Platform_Name## Datetimepicker Component | Syncfusion
44
description: Learn here all about Date Time Format in Syncfusion ##Platform_Name## Datetimepicker component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Date Time Format
@@ -44,3 +44,33 @@ The following example demonstrates the DateTimePicker with the custom format (`y
4444
{% endtabs %}
4545
{% endif %}
4646

47+
## Input formats
48+
49+
The [`inputFormats`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Calendars.DateTimePicker.html#Syncfusion_EJ2_Calendars_DateTimePicker_InputFormats) property in the DatetimePicker control allows users to enter dates and times in various formats, providing flexibility in date and time entry. This property accepts an array of predefined formats that the control recognizes, enabling users to input dates in different ways while ensuring they are parsed correctly.
50+
51+
When the user types the date and time in any of the specified input formats, it will be automatically converted to the display format after pressing Enter, the Tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats.
52+
53+
The following example demonstrates the DateTimePicker with multiple input formats.
54+
55+
{% if page.publishingplatform == "aspnet-core" %}
56+
57+
{% tabs %}
58+
{% highlight cshtml tabtitle="CSHTML" %}
59+
{% include code-snippet/datetimepicker/input-format/tagHelper %}
60+
{% endhighlight %}
61+
{% highlight c# tabtitle="Input-format.cs" %}
62+
{% include code-snippet/datetimepicker/input-format/input-format.cs %}
63+
{% endhighlight %}
64+
{% endtabs %}
65+
66+
{% elsif page.publishingplatform == "aspnet-mvc" %}
67+
68+
{% tabs %}
69+
{% highlight razor tabtitle="CSHTML" %}
70+
{% include code-snippet/datetimepicker/input-format/razor %}
71+
{% endhighlight %}
72+
{% highlight c# tabtitle="Input-format.cs" %}
73+
{% include code-snippet/datetimepicker/input-format/input-format.cs %}
74+
{% endhighlight %}
75+
{% endtabs %}
76+
{% endif %}

‎ej2-asp-core-mvc/mention/EJ2_ASP.MVC/customization.md

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Customization in ASP.NET MVC Mention control | Syncfusion
44
description: Learn here all about customization in Syncfusion ASP.NET MVC Mention control of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Customization
7-
publishingplatform: ejmvc
7+
publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

@@ -59,4 +59,21 @@ By default, the popup list width value is set as `auto`. Depending on the mentio
5959

6060
You can customize the trigger character by using the [MentionChar](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_MentionChar) property in the Mention control. The trigger character triggers the suggestion list to display in the target area.
6161

62-
By default, the [MentionChar](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_MentionChar) is `@`.
62+
By default, the [MentionChar](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_MentionChar) is `@`.
63+
64+
## Leading Space Requirement
65+
66+
The [RequireLeadingSpace](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.dropdowns.mention.html#Syncfusion_EJ2_DropDowns_Mention_RequireLeadingSpace) property in Mention controls whether a space is needed before triggering the Mention suggestion popup.
67+
68+
When set to `false`, the mention can be activated without a preceding space. When set to `true`, a space is required before the mention character to activate suggestions.
69+
70+
{% tabs %}
71+
{% highlight razor tabtitle="CSHTML" %}
72+
{% include code-snippet/mention/customization/require-leading-space/razor %}
73+
{% endhighlight %}
74+
{% highlight c# tabtitle="Data.cs" %}
75+
{% include code-snippet/mention/customization/require-leading-space/EmailData.cs %}
76+
{% endhighlight %}
77+
{% endtabs %}
78+
79+
![ASP.NET MVC Require Leading Space](./images/required_leading_space.gif)

‎ej2-asp-core-mvc/mention/EJ2_ASP.NETCORE/customization.md

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Customization in ASP.NET Core Mention control | Syncfusion
44
description: Learn here all about customization in Syncfusion ASP.NET Core Mention control of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Customization
7-
publishingplatform: aspnet-core
7+
publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

@@ -59,4 +59,21 @@ By default, the popup list width value is set as `auto`. Depending on the mentio
5959

6060
You can customize the trigger character by using the [mentionChar](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_MentionChar) property in the Mention control. The trigger character triggers the suggestion list to display in the target area.
6161

62-
By default, the [mentionChar](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_MentionChar) is `@`.
62+
By default, the [mentionChar](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.Mention.html#Syncfusion_EJ2_DropDowns_Mention_MentionChar) is `@`.
63+
64+
## Leading Space Requirement
65+
66+
The [requireLeadingSpace](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.dropdowns.mention.html#Syncfusion_EJ2_DropDowns_Mention_RequireLeadingSpace) property in Mention controls whether a space is needed before triggering the Mention suggestion popup.
67+
68+
When set to `false`, the mention can be activated without a preceding space. When set to `true`, a space is required before the mention character to activate suggestions.
69+
70+
{% tabs %}
71+
{% highlight cshtml tabtitle="CSHTML" %}
72+
{% include code-snippet/mention/customization/require-leading-space/tagHelper %}
73+
{% endhighlight %}
74+
{% highlight c# tabtitle="Data.cs" %}
75+
{% include code-snippet/mention/customization/require-leading-space/EmailData.cs %}
76+
{% endhighlight %}
77+
{% endtabs %}
78+
79+
![ASP.NET Core Mention Required Leading Space](./images/required_leading_space.gif)

‎ej2-asp-core-mvc/mention/images/required_leading_space.gif

34 KB
Loading

0 commit comments

Comments
 (0)