documentation(384809):New topics aspcore and mvc platform.

ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/frozen.cs

@@ -0,0 +1,6 @@
+public IActionResult DefaultExporting()
+{
+    var order = OrdersDetails.GetAllRecords();
+    ViewBag.dataSource = order;
+    return View();
+}

ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/razor

@@ -0,0 +1,31 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).FrozenColumns(2).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Edit(new { create = "createDatePicker", read = "readDatePicker", destroy = "destroyDatePicker", write = "writeDatePicker" }).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
+}).AllowPaging().PageSettings(page=>page.PageCount(5)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
+<script>
+    var datePickerObj;
+    var datePickerElement;
+    function createDatePicker() {
+        datePickerElement = document.createElement('input');
+        return datePickerElement;
+    }
+    function readDatePicker() {
+        return datePickerObj.value;
+    }
+    function destroyDatePicker() {
+        datePickerObj.destroy();
+    }
+    function writeDatePicker(args) {
+        var rowData = args.rowData;
+        datePickerObj = new ej.calendars.DatePicker({
+            value: rowData.OrderDate,
+            change: function (e) {
+                rowData.OrderDate = e.value;
+            }
+        });
+        datePickerObj.appendTo(datePickerElement);
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/frozen-datepicker/tagHelper

@@ -0,0 +1,35 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" allowPaging='true' toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })" frozenColumns='2'>
+    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
+    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" width="150" format= "yMd", edit="@(new {create = "createDatePicker", read = "readDatePicker", destroy = "destroyDatePicker", write = "writeDatePicker"})">
+        </e-grid-column>               
+        <e-grid-column field="CustomerID" headerText="CustomerID" width="120"></e-grid-column>               
+        <e-grid-column field="ShipCity" headerText="Ship City"  width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+    var datePickerObj;
+    var datePickerElement;
+    function createDatePicker() {
+        datePickerElement = document.createElement('input');
+        return datePickerElement;
+    }
+    function readDatePicker() {
+        return datePickerObj.value;
+    }
+    function destroyDatePicker() {
+        datePickerObj.destroy();
+    }
+    function writeDatePicker(args) {
+        var rowData = args.rowData;
+        datePickerObj = new ej.calendars.DatePicker({
+            value: rowData.OrderDate,
+            change: function (e) {
+                rowData.OrderDate = e.value;
+            }
+        });
+        datePickerObj.appendTo(datePickerElement);
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/data-binding/custom-headers/custom-headers.cs

@@ -0,0 +1,4 @@
+public IActionResult Index()
+{
+    return View();
+}

ej2-asp-core-mvc/code-snippet/grid/data-binding/custom-headers/razor

@@ -0,0 +1,26 @@
+@Html.EJS().Grid("CustomAdaptor").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("160").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("Freight").HeaderText("Freight").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+
+}).AllowPaging().Created("created").Render()
+
+<script>
+    function created(args) {
+        class CustomAdaptor extends ej.data.WebApiAdaptor {
+            beforeSend(args, xhr, settings) {
+                xhr.withCredentials = true;
+                super.beforeSend(args, xhr, settings);
+                xhr.headers.set('Syncfusion', true); // Assign custom headers here.
+            }
+        }
+        var grid = document.querySelector('#CustomAdaptor').ej2_instances[0];
+        grid.dataSource = new ej.data.DataManager({
+            url: "https://services.syncfusion.com/js/production/api/orders",
+            adaptor: new CustomAdaptor()
+        });
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/data-binding/custom-headers/tagHelper

@@ -0,0 +1,26 @@
+<ejs-grid id="CustomAdaptor" allowPaging="true" created="created">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order Name" width="150" textAlign="Right"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
+        <e-grid-column field="EmployeeID" headerText="Employee Name" width="150" textAlign="Right"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format="C2" width="120" textAlign="Right"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+<script>
+    function created(args) {
+        class CustomAdaptor extends ej.data.WebApiAdaptor {
+            beforeSend(args, xhr, settings) {
+                xhr.withCredentials = true;
+                super.beforeSend(args, xhr, settings);
+                xhr.headers.set('Syncfusion', true); // Assign custom headers here.
+            }
+        }
+        var grid = document.querySelector('#CustomAdaptor').ej2_instances[0];
+        grid.dataSource = new ej.data.DataManager({
+        url: "https://services.syncfusion.com/js/production/api/orders",
+        adaptor: new CustomAdaptor()
+        });
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/excel-export.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    ViewBag.dataSource =  OrdersDetails.GetAllRecords();;
+    ViewBag.employeeDataSource = EmployeeView.GetAllRecords();
+    return View();
+}

ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/razor

@@ -0,0 +1,33 @@
+@{
+    var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable<object>)ViewBag.dataSource,
+       QueryString = "EmployeeID",
+       Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
+       {
+         new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
+         new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
+         new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderDate", HeaderText="Order Date", Width="150", Format="dd-MM-yyyy", Type="date" },
+         new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
+       }
+    };
+ }    
+ @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.employeeDataSource).Height("348px").AllowExcelExport().Columns(col =>
+ {
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("FirstName").HeaderText("First Name").Width("125").Add();
+    col.Field("LastName").HeaderText("Last Name").Width("180").Add();
+    col.Field("City").HeaderText("City").Width("135").Add();
+ }).Toolbar(new List<string>() { "ExcelExport"}).ChildGrid(ChildGrid).ToolbarClick("toolbarClick").ExportDetailDataBound("exportDetailDataBound").Render()
+ <script>
+    function toolbarClick(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        if (args.item.id === 'Grid_excelexport') {
+             var excelExportProperties = {
+                  hierarchyExportMode: "All"
+             };
+         grid.excelExport(excelExportProperties);
+       }
+    }
+    function exportDetailDataBound(args) {
+       args.childGrid.columns[2].format = {type: 'date',format: 'dd\\/MM\\/yyyy'};
+    }
+ </script>

ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/tagHelper

@@ -0,0 +1,33 @@
+@{ var ChildGrid = new Syncfusion.EJ2.Grids.Grid() {
+    DataSource = (IEnumerable<object>)ViewBag.DataSource,
+    QueryString = "EmployeeID",
+    Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
+          new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, Width="120" },
+          new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
+          new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderDate", HeaderText="OrderDate", Width="130", Format="dd-MM-yyyy", Type="date" },
+          new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
+  }
+};
+}
+<ejs-grid id="Grid" dataSource="@ViewBag.employeeDataSource" allowExcelExport="true" childGrid="ChildGrid" toolbar="@(new List<string>() {"ExcelExport" })" toolbarClick="toolbarClick" exportDetailDataBound="exportDetailDataBound">
+<e-grid-columns>
+  <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
+  <e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column>
+  <e-grid-column field="LastName" headerText="Last Name" width="170"></e-grid-column>
+  <e-grid-column field="City" headerText="City" width="135"></e-grid-column>
+</e-grid-columns>
+</ejs-grid>
+<script>
+function toolbarClick(args) {
+  var grid = document.getElementById("Grid").ej2_instances[0];
+  if (args.item.id === 'Grid_excelexport') {
+      var excelExportProperties = {
+          hierarchyExportMode: "All"
+      };
+      grid.excelExport(excelExportProperties);
+  }
+}
+function exportDetailDataBound(args) {
+  args.childGrid.columns[2].format = {type: 'date',format: 'dd\\/MM\\/yyyy'};
+}
+</script>

ej2-asp-core-mvc/code-snippet/grid/globalization/two-localization/localization.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var orders = OrderDetails.GetAllRecords();
+    ViewBag.datasource = orders;            
+    return View();
+}

ej2-asp-core-mvc/code-snippet/grid/globalization/two-localization/razor

@@ -0,0 +1,169 @@
+@Html.EJS().Grid("deGrid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>{
+    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowPaging().Locale("fr-FR").Render();
+@Html.EJS().Grid("enGrid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>{
+    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowPaging().Render()
+<script>
+    ej.base.L10n.load({
+        'fr-FR': {
+            'grid': {
+                "EmptyRecord": "Aucun enregistrement à afficher",
+                "True": "vrai",
+                "False": "faux",
+                "InvalidFilterMessage": "Données de filtre non valides",
+                "GroupDropArea": "Faites glisser un en-tête de colonne ici pour regrouper sa colonne",
+                "UnGroup": "Cliquez ici pour dissocier",
+                "GroupDisable": "Le regroupement est désactivé pour cette colonne",
+                "FilterbarTitle": "Cellule de barre de filtre \"s",
+                "EmptyDataSourceError": "DataSource ne doit pas être vide lors du chargement initial car les colonnes sont générées à partir de dataSource dans AutoGenerate Column Grid",
+                "Add": "Ajouter",
+                "Edit": "Éditer",
+                "Cancel": "Annuler",
+                "Update": "Mise à jour",
+                "Delete": "Supprimer",
+                "Print": "Impression",
+                "Pdfexport": "Exportation PDF",
+                "Excelexport": "Exportation Excel",
+                "Wordexport": "Exportation de mots",
+                "Csvexport": "Exportation CSV",
+                "Search": "Chercher",
+                "Columnchooser": "Colonnes",
+                "Save": "sauvegarder",
+                "Item": "article",
+                "Items": "articles",
+                "EditOperationAlert": "Aucun enregistrement sélectionné pour l'opération d'édition",
+                "DeleteOperationAlert": "Aucun enregistrement sélectionné pour l'opération de suppression",
+                "SaveButton": "Sauvegarder",
+                "OKButton": "Ok",
+                "CancelButton": "Annuler",
+                "EditFormTitle": "Les détails de",
+                "AddFormTitle": "Ajouter un nouvel enregistrement",
+                "BatchSaveConfirm": "Voulez-vous vraiment enregistrer les modifications ?",
+                "BatchSaveLostChanges": "Les modifications non enregistrées seront perdues. Es-tu sur de vouloir continuer ?",
+                "ConfirmDelete": "Voulez-vous vraiment supprimer l'enregistrement ?",
+                "CancelEdit": "Voulez-vous vraiment annuler les modifications ?",
+                "ChooseColumns": "Choisissez la colonne",
+                "SearchColumns": "colonnes de recherche",
+                "Matchs": "Aucun résultat",
+                "FilterButton": "Filtrer",
+                "ClearButton": "Effacer",
+                "StartsWith": "Commence par",
+                "EndsWith": "Se termine par",
+                "Contains": "Contient",
+                "Equal": "Égal",
+                "NotEqual": "Différent",
+                "LessThan": "Inférieur",
+                "LessThanOrEqual": "Inférieur ou égal",
+                "GreaterThan": "Supérieur",
+                "GreaterThanOrEqual": "Supérieur ou égal",
+                "ChooseDate": "Choisissez une date",
+                "EnterValue": "Entrez la valeur",
+                "Copy": "Copie",
+                "Group": "Regrouper par cette colonne",
+                "Ungroup": "Dissocier par cette colonne",
+                "autoFitAll": "Ajuster automatiquement toutes les colonnes",
+                "autoFit": "Ajuster automatiquement cette colonne",
+                "Export": "Exportation",
+                "FirstPage": "Première page",
+                "LastPage": "Dernière page",
+                "PreviousPage": "Page précédente",
+                "NextPage": "Page suivante",
+                "SortAscending": "Trier par ordre croissant",
+                "SortDescending": "Trier par ordre décroissant",
+                "EditRecord": "Modifier l'enregistrement",
+                "DeleteRecord": "Supprimer l'enregistrement",
+                "FilterMenu": "Filtre",
+                "SelectAll": "Tout sélectionner",
+                "Blanks": "Blancs",
+                "FilterTrue": "Vrai",
+                "FilterFalse": "Faux",
+                "NoResult": "Aucun résultat",
+                "ClearFilter": "Effacer le filtre",
+                "NumberFilter": "Filtres numériques",
+                "TextFilter": "Filtres de texte",
+                "DateFilter": "Filtres de date",
+                "DateTimeFilter": "Filtres DateTime",
+                "MatchCase": "Cas de correspondance",
+                "Between": "Entre",
+                "CustomFilter": "Filtre personnalisé",
+                "CustomFilterPlaceHolder": "Entrez la valeur",
+                "CustomFilterDatePlaceHolder": "Choisissez une date",
+                "AND": "ET",
+                "OR": "OU",
+                "ShowRowsWhere": "Afficher les lignes où:",
+                "NotStartsWith": "Ne commence pas par",
+                "Like": "Comme",
+                "NotEndsWith": "Ne se termine pas par",
+                "NotContains": "Ne contient pas",
+                "IsNull": "Nul",
+                "NotNull": "Non nul",
+                "IsEmpty": "Vide",
+                "IsNotEmpty": "Pas vide",
+                "AddCurrentSelection": "Ajouter la sélection actuelle au filtre",
+                "UnGroupButton": "Cliquez ici pour dissocier",
+                "AutoFitAll": "Ajuster automatiquement toutes les colonnes",
+                "AutoFit": "Ajuster automatiquement cette colonne",
+                "Clear": "Dégager",
+                "FilterMenuDialogARIA": "Boîte de dialogue du menu Filtre",
+                "ExcelFilterDialogARIA": "Boîte de dialogue de filtre Excel",
+                "DialogEditARIA": "Boîte de dialogue Modifier",
+                "ColumnChooserDialogARIA": "Sélecteur de colonne",
+                "ColumnMenuDialogARIA": "Boîte de dialogue du menu des colonnes",
+                "CustomFilterDialogARIA": "Boîte de dialogue Filtre personnalisé",
+                "SortAtoZ": "Trier de A à Z",
+                "SortZtoA": "Trier de Z à A",
+                "SortByOldest": "Trier par le plus ancien",
+                "SortByNewest": "Trier par Plus récent",
+                "SortSmallestToLargest": "Trier du plus petit au plus grand",
+                "SortLargestToSmallest": "Trier du plus grand au plus petit",
+                "Sort": "Sorte",
+                "FilterDescription": "Appuyez sur Alt Bas pour ouvrir le menu du filtre",
+                "SortDescription": "Appuyez sur Entrée pour trier",
+                "ColumnMenuDescription": "Appuyez sur Alt Bas pour ouvrir le menu des colonnes",
+                "GroupDescription": "Appuyez sur Ctrl espace pour grouper",
+                "ColumnHeader": " en-tête de colonne ",
+                "TemplateCell": " est une cellule modèle",
+                "CommandColumnAria": "est l'en-tête de colonne de la colonne de commande ",
+                "DialogEdit": "Modifier la boîte de dialogue",
+                "ClipBoard": "presse-papiers",
+                "GroupButton": "Bouton de groupe",
+                "UnGroupAria": "bouton dissocier",
+                "GroupSeperator": "Séparateur pour les colonnes groupées",
+                "UnGroupIcon": "dissocier la colonne groupée ",
+                "GroupedSortIcon": "trier la colonne groupée ",
+                "GroupedDrag": "Faites glisser la colonne groupée",
+                "GroupCaption": " est une cellule de légende de groupe",
+                "CheckBoxLabel": "case à cocher",
+                "Expanded": "Étendue",
+                "Collapsed": "S'est effondré"
+            },
+            'pager': {
+                "currentPageInfo": "{0} de {1} pages",
+                "totalItemsInfo": "({0} éléments)",
+                "firstPageTooltip": "Aller à la première page",
+                "lastPageTooltip": "Aller à la dernière page",
+                "nextPageTooltip": "Aller à la page suivante",
+                "previousPageTooltip": "Aller à la page précédente",
+                "nextPagerTooltip": "Aller aux éléments suivants du téléavertisseur",
+                "previousPagerTooltip": "Accéder aux éléments de téléavertisseur précédents",
+                "pagerDropDown": "objets par page",
+                "pagerAllDropDown": "Articles",
+                "All": "Tout",
+                "totalItemInfo": "({0} élément)",
+                "Container": "Conteneur de téléavertisseur",
+                "Information": "Informations sur le téléavertisseur",
+                "ExternalMsg": "Message externe du téléavertisseur",
+                "Page": "Page",
+                "Of": " de ",
+                "Pages": " pages"
+            }
+        }
+    });
+</script>