diff --git a/ej2-asp-core-mvc/Release-notes/26.2.10.md b/ej2-asp-core-mvc/Release-notes/26.2.10.md new file mode 100644 index 0000000000..c3aa88b6eb --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/26.2.10.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for ##Platform_Name## Weekly Release Release Notes +description: Essential Studio for ##Platform_Name## Weekly Release Release Notes +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## Release Notes + +{% include release-info.html date="August 20, 2024" version="v26.2.10" %} + +{% directory path: _includes/release-notes/v26.2.10 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/headertemplate.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/headertemplate.cs index 62440176fe..17bfdc3653 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/headertemplate.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/headertemplate.cs @@ -1,6 +1,6 @@ public IActionResult Index() { - var Emp = EmployeeDetails.GetAllRecords(); - ViewBag.DataSource = Emp; - return View(); -} \ No newline at end of file + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/razor index dec2bb2f80..7bb1c4d30f 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/razor @@ -1,31 +1,75 @@ -@Html.EJS().Grid("HeaderTemplate").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => { - col.Field("EmployeeID").HeaderTemplate("#employeetemplate").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("FirstName").Width("140").Add(); - col.Field("BirthDate").HeaderTemplate("#datetemplate").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("City").Width("120").Add(); - col.Field("Country").Width("140").Add(); - -}).AllowPaging().Render() - + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("140").HeaderTemplate("#customerTemplate").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").HeaderTemplate("#freightTemplate").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("140").HeaderTemplate("#datetemplate").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); +}).HeaderCellInfo("onHeaderCellInfo").Render() + .e-icon-userlogin::before { + font-family: 'ej2-headertemplate'; + content: "\e702"; + } + + + - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/tagHelper index 37c784bc56..e9b4787a70 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/tagHelper @@ -1,29 +1,72 @@ - + - - - - - + + + + - + .e-icon-userlogin::before { + font-family: 'ej2-headertemplate'; + content: "\e702"; + } + - + + + - \ No newline at end of file + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/headertext.cs new file mode 100644 index 0000000000..76029d8c4a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/headertext.cs @@ -0,0 +1,7 @@ +public IActionResult Index() +{ + var Order = InventoryDetails.GetAllRecords(); + ViewBag.DataSource = Order; + ViewBag.dropdownData = new string[] { "Header", "Both" }; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/razor new file mode 100644 index 0000000000..0e2f4d9211 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/razor @@ -0,0 +1,21 @@ +
+ + + @Html.EJS().DropDownList("Wrap").Index(0).Width("180px").DataSource(@ViewBag.dropdownData).Change("valueChange").Render() + +
+@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).AllowTextWrap().Columns(col => +{ + col.Field("Inventor").HeaderText("Inventor Name").Width("130").Add(); + col.Field("NumberOfPatentFamilies").HeaderText("Number of Patent Families").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Country").HeaderText("Country").Width("100").Add(); + col.Field("Active").HeaderText("Active").Width("100").Add(); + col.Field("Mainfieldsofinvention").HeaderText("Main Fields Of Invention").Width("150").Add(); +}).TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Header); }).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/tagHelper new file mode 100644 index 0000000000..19581f9017 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/tagHelper @@ -0,0 +1,23 @@ +
+ + + + +
+ + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/columntext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/columntext.cs new file mode 100644 index 0000000000..17bfdc3653 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/columntext.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/razor new file mode 100644 index 0000000000..a0ac706b5a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/razor @@ -0,0 +1,28 @@ +
+ @Html.EJS().Button("buttons").Content("Change Header Text").Render() +
+@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); +}).Render() + + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/tagHelper new file mode 100644 index 0000000000..7b1c05d438 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/tagHelper @@ -0,0 +1,30 @@ +
+ + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/headertext.cs new file mode 100644 index 0000000000..17bfdc3653 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/headertext.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/razor new file mode 100644 index 0000000000..a3132d9992 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/razor @@ -0,0 +1,34 @@ +
+ @Html.EJS().Button("small").Content("Change height 20px").Render() + @Html.EJS().Button("medium").Content("Default height 42px").Render() + @Html.EJS().Button("big").Content("Change height 60px").Render() +
+
+ @Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => + { + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); + }).Render() + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/tagHelper new file mode 100644 index 0000000000..fd78af6c13 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/tagHelper @@ -0,0 +1,36 @@ +
+ + + +
+
+ + + + + + + + + +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/columntext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/columntext.cs new file mode 100644 index 0000000000..0899739419 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/columntext.cs @@ -0,0 +1,7 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + ViewBag.dropdownData = new string[] { "OrderID", "CustomerID", "Freight", "OrderDate","ShipCountry" }; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/razor new file mode 100644 index 0000000000..e7b051dd1b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/razor @@ -0,0 +1,34 @@ +
+ + + @Html.EJS().DropDownList("dropdown").Index(0).Width("180px").DataSource(@ViewBag.dropdownData).Render() + +
+
+ + @Html.EJS().TextBox("textbox").Placeholder("Enter new header text").Width("220px").Render() + @Html.EJS().Button("buttons").Content("Change").Render() +
+ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); +}).AllowPaging().Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/tagHelper new file mode 100644 index 0000000000..549f988332 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/tagHelper @@ -0,0 +1,37 @@ +
+ + + + +
+
+ + + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/headertext.cs new file mode 100644 index 0000000000..17bfdc3653 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/headertext.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/razor new file mode 100644 index 0000000000..38c07e16df --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/razor @@ -0,0 +1,23 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).CustomAttributes(new { @class = "orientationcss" }).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCity").HeaderText("Ship City").Width("120").Add(); +}).Created("setHeaderHeight").Render() + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/tagHelper new file mode 100644 index 0000000000..64393d4224 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/tagHelper @@ -0,0 +1,24 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/headertext.cs new file mode 100644 index 0000000000..17bfdc3653 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/headertext.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/razor new file mode 100644 index 0000000000..479fc970ea --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/razor @@ -0,0 +1,21 @@ +@Html.EJS().Button("button").Content("Refresh Header").Render() +
+ + @Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => + { + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); + }).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/tagHelper new file mode 100644 index 0000000000..5cbcac8b10 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/tagHelper @@ -0,0 +1,21 @@ + +
+ + + + + + + + + +
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/razor new file mode 100644 index 0000000000..d8388dd5e0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/razor @@ -0,0 +1,58 @@ + + +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").HeaderTemplate("#orderIDTemplate").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.HeaderText("Order Details").HeaderTemplate("#orderDetailsTemplate").Columns(new List() { new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate",HeaderTemplate= "#datetemplate", Width = "135", HeaderText = "Order Date",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right,Format="yMd", MinWidth="10" }, + new Syncfusion.EJ2.Grids.GridColumn { Field = "Freight", Width = "130", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, HeaderText = "Freight($)", Format="C2", MinWidth="10"} }).Add(); + col.HeaderText("Shipped Details").HeaderTemplate("#shipDetailsTemplate").Columns(new List() { new Syncfusion.EJ2.Grids.GridColumn { Field = "ShippedDate", Width = "140", HeaderText = "Shipped Date", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, Format = "yMd", MinWidth="10" }, + new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCountry", Width = "145", HeaderText = "Ship Country", MinWidth="10", EditType="dropdownedit" } }).Add(); +}).HeaderCellInfo("onHeaderCellInfo").Render() + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/stackedHeader.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/stackedHeader.cs new file mode 100644 index 0000000000..7bee9f9efa --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/stackedHeader.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource= orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/tagHelper new file mode 100644 index 0000000000..3707b4fad0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/tagHelper @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/headertext.cs new file mode 100644 index 0000000000..f9f98c90cb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/headertext.cs @@ -0,0 +1,7 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + ViewBag.dropdownData = new string[] { "Left", "Right", "Center", "Justify"}; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/razor new file mode 100644 index 0000000000..a345da7aab --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/razor @@ -0,0 +1,23 @@ +
+ + + @Html.EJS().DropDownList("dropdown").Width("180px").Index(0).DataSource(@ViewBag.dropdownData).Change("changeAlignment").Render() + +
+@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("140").Format("yMd").Add(); +}).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/tagHelper new file mode 100644 index 0000000000..63a11919e3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/tagHelper @@ -0,0 +1,23 @@ +
+ + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/headertext.cs new file mode 100644 index 0000000000..17bfdc3653 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/headertext.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/razor new file mode 100644 index 0000000000..5e2c9dc15e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/razor @@ -0,0 +1,27 @@ +@Html.EJS().Tooltip("tooltip").Target(".e-headertext").Position(Syncfusion.EJ2.Popups.Position.TopCenter).ContentTemplate(@
+ @Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => + { + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipName").HeaderText("Ship Name").Width("120").Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); + }).Render() +).BeforeRender("beforeRender").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/tagHelper new file mode 100644 index 0000000000..e33d9e32a7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/tagHelper @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/headertext.cs new file mode 100644 index 0000000000..17bfdc3653 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/headertext.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/razor new file mode 100644 index 0000000000..c6087aa71e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/razor @@ -0,0 +1,14 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); +}).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/tagHelper new file mode 100644 index 0000000000..391599e9ae --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/tagHelper @@ -0,0 +1,15 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/headertext.cs new file mode 100644 index 0000000000..17bfdc3653 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/headertext.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/razor new file mode 100644 index 0000000000..a172ab0eb0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/razor @@ -0,0 +1,21 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); +}).HeaderCellInfo("onHeaderCellInfo").Render() + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/tagHelper new file mode 100644 index 0000000000..bdaf4acf36 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/tagHelper @@ -0,0 +1,21 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/headertext.cs new file mode 100644 index 0000000000..17bfdc3653 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/headertext.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/razor new file mode 100644 index 0000000000..ba416163c1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/razor @@ -0,0 +1,24 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); +}).DataBound("dataBound").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/tagHelper new file mode 100644 index 0000000000..76a5b36f05 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/tagHelper @@ -0,0 +1,23 @@ + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/headertext.cs new file mode 100644 index 0000000000..17bfdc3653 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/headertext.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var orders = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = orders; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/razor new file mode 100644 index 0000000000..2c5c622ba3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/razor @@ -0,0 +1,18 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").CustomAttributes(new { @class = "customcss" }).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").CustomAttributes(new { @class = "customcss" }).Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").CustomAttributes(new { @class = "customcss" }).Width("120").Add(); +}).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/tagHelper new file mode 100644 index 0000000000..51b2f29bf5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/tagHelper @@ -0,0 +1,18 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/headertext.cs index 62440176fe..27e57a554b 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/headertext.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/headertext.cs @@ -1,6 +1,7 @@ public IActionResult Index() { - var Emp = EmployeeDetails.GetAllRecords(); - ViewBag.DataSource = Emp; + var Order = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = Order; return View(); -} \ No newline at end of file +} + diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/razor index e8f5740e7a..e6287cd6f6 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/razor @@ -1,9 +1,7 @@ -@Html.EJS().Grid("HeaderText").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => +@Html.EJS().Grid("HeaderText").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => { - col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("FirstName").HeaderText("First Name").Width("140").Add(); - col.Field("BirthDate").HeaderText("Birth Date").Format("yMd").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("City").Width("120").Add(); - col.Field("Country").HeaderText("Country").Width("140").Add(); - -}).AllowPaging().Render() \ No newline at end of file + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add(); + col.Field("Freight").HeaderText("Freight").Format("yMd").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); +}).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/tagHelper index a243b9f449..b38e02948b 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/tagHelper @@ -1,9 +1,8 @@ - - - - - + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/current-page/current-page.cs b/ej2-asp-core-mvc/code-snippet/grid/print/current-page/current-page.cs index 4019df2042..02cee14e8e 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/current-page/current-page.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/print/current-page/current-page.cs @@ -1,5 +1,7 @@ public IActionResult Index() { - ViewBag.DataSource = OrderDetails.GetAllRecords(); + ViewBag.DataSource = OrdersDetails.GetAllRecords(); + ViewBag.dropdownData = new string[] { "AllPages", "CurrentPage" }; + return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/current-page/razor b/ej2-asp-core-mvc/code-snippet/grid/print/current-page/razor index 608ab99ccb..b1029cf6a4 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/current-page/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/print/current-page/razor @@ -1,9 +1,22 @@ -@Html.EJS().Grid("Print").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +
+ + + @Html.EJS().DropDownList("dropdown").Index(0).DataSource(@ViewBag.dropdownData).Change("change").Render() + +
+ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => { col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add(); col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); -}).AllowPaging().Toolbar(new List() { "Print" }).PrintMode(Syncfusion.EJ2.Grids.PrintMode.CurrentPage).Render() \ No newline at end of file +}).AllowPaging().PageSettings(page => { page.PageSize(6); }).Toolbar(new List() { "Print" }).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/current-page/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/current-page/tagHelper index d3044d29ab..2199136bf4 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/current-page/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/print/current-page/tagHelper @@ -1,8 +1,23 @@ - +
+ + + + +
+ + + - - + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/external-btn.cs b/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/external-btn.cs index 4019df2042..47e5e3b61d 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/external-btn.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/external-btn.cs @@ -1,5 +1,5 @@ public IActionResult Index() { - ViewBag.DataSource = OrderDetails.GetAllRecords(); + ViewBag.DataSource = OrdersDetails.GetAllRecords(); return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/razor b/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/razor index b7230490fd..b638a92107 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/razor @@ -1,5 +1,6 @@ -@Html.EJS().Button("printbtn").Content("Print").IsPrimary(true).Render() - +
+ @Html.EJS().Button("printbtn").Content("Print").IsPrimary(true).Render() +
@Html.EJS().Grid("Print").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => { col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/tagHelper index 5eacdac9cf..56842ed7a9 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/tagHelper @@ -1,10 +1,13 @@ - +
+ +
- - + + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/hierarchyprint.cs b/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/hierarchyprint.cs index f205693de8..f1bf5a0437 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/hierarchyprint.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/hierarchyprint.cs @@ -3,5 +3,7 @@ public IActionResult Index() ViewBag.DataSource = OrdersDetails.GetAllRecords();; ViewBag.EmpDataSource = EmployeeView.GetAllRecords(); ViewBag.CustomerDataSource = Customer.GetAllRecords(); + ViewBag.dropdownData = new string[] { "Expanded", "All", "None" }; + return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/razor b/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/razor index 1d5072cb01..802089591f 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/razor @@ -5,6 +5,7 @@ { new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Ship Country", Width="90" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipAddress", HeaderText="ShipAddress", Width="90" }, } }; @@ -21,11 +22,23 @@ }; } -@Html.EJS().Grid("HierarchyPrint").DataSource((IEnumerable)ViewBag.EmpDataSource).HierarchyPrintMode(Syncfusion.EJ2.Grids.HierarchyGridPrintMode.All).Columns(col => -{ - col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("FirstName").HeaderText("Name").Width("125").Add(); - col.Field("Country").HeaderText("Country").Width("180").Add(); - col.Field("City").HeaderText("City").Width("135").Add(); +
+ + + @Html.EJS().DropDownList("dropdown").Index(0).DataSource(@ViewBag.dropdownData).Change("onModeChange").Render() + +
+ @Html.EJS().Grid("HierarchyPrint").DataSource((IEnumerable)ViewBag.EmpDataSource).Columns(col => + { + col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("FirstName").HeaderText("Name").Width("125").Add(); + col.Field("Country").HeaderText("Country").Width("180").Add(); + col.Field("City").HeaderText("City").Width("135").Add(); -}).AllowSorting().Toolbar(new List() { "Print"}).ChildGrid(ChildGrid).Render() + }).Toolbar(new List() { "Print" }).ChildGrid(ChildGrid).Render() + diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/tagHelper index 50a70db576..003d4c9362 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/tagHelper @@ -1,35 +1,51 @@ - @{ - var SecondChildGrid = new Syncfusion.EJ2.Grids.Grid() - { - DataSource = (IEnumerable)ViewBag.CustomerDataSource, - QueryString = "CustomerID", - Columns = new List { + +@{ + var SecondChildGrid = new Syncfusion.EJ2.Grids.Grid() + { + DataSource = (IEnumerable)ViewBag.CustomerDataSource, + QueryString = "CustomerID", + Columns = new List { new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Country", Width="90" }, - } - }; - } + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipAddress", HeaderText="Ship Address", Width="90" }, + + } + }; +} - @{ - var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { - DataSource = (IEnumerable)ViewBag.DataSource, - QueryString = "EmployeeID", - Columns = new List { +@{ + var ChildGrid = new Syncfusion.EJ2.Grids.Grid() + { + DataSource = (IEnumerable)ViewBag.DataSource, + QueryString = "EmployeeID", + Columns = new List { new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", 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="ShipName", HeaderText="Ship Name", Width="150" }, new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" }, - }, - ChildGrid = SecondChildGrid - }; - } + }, + ChildGrid = SecondChildGrid + }; +} - +
+ + + + +
+ - + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs index f650c2d757..35e0c7fa1c 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs @@ -1,5 +1,6 @@ public IActionResult Index() { - ViewBag.dataSource = OrderDetails.GetAllRecords(); + ViewBag.DataSource = OrdersDetails.GetAllRecords(); + ViewBag.EmployeeData =Employees.GetAllRecords(); return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor index 50964a633d..3846fca91b 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor @@ -1,36 +1,42 @@
Master Grid - @Html.EJS().Grid("masterGrid").DataSource((IEnumerable)ViewBag.dataSource).Width("auto").SelectedRowIndex(0).Columns(col => - { - col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Add(); - col.Field("OrderID").HeaderText("OrderID").Add(); - col.Field("CustomerID").HeaderText("FirstName").Add(); - }).RowSelected("selected").BeforePrint("beforePrint").Toolbar(new List() { "Print" }).Render() + @Html.EJS().Grid("masterGrid").DataSource((IEnumerable)ViewBag.EmployeeData).SelectedRowIndex(1).Columns(col => +{ + col.Field("ContactName").HeaderText("Customer Name").Width(150).Add(); + col.Field("CompanyName").HeaderText("CompanyName").Width(150).Add(); + col.Field("Address").HeaderText("Address").Width(150).Add(); + col.Field("Country").HeaderText("Country").Width(130).Add(); + +}).RowSelected("rowSelected").BeforePrint("beforePrint").Toolbar(new List() { "Print" }).Render() -

Showing orders of Customer:

+

Showing orders of Customer:

- @Html.EJS().Grid("detailGrid").DataSource((IEnumerable)ViewBag.dataSource1).Columns(col => - { - col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Add(); - col.Field("ShipCountry").HeaderText("ShipCountry").Add(); - col.Field("ShipName").HeaderText("ShipName").Add(); - }).Render() +@Html.EJS().Grid("childGrid").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipName").HeaderText("Ship Name").Width("120").Add(); + col.Field("ShipAddress").HeaderText("Ship Address").Width("150").Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); + + +}).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper index 6b00303b69..4a36a45612 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper @@ -1,40 +1,43 @@ @using System.Text.Json;
- + - - - + + + +
-

Showing orders of Customer:

-
- - - - - - - -
+

Showing orders of Customer:

+ + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/print.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/print.cs new file mode 100644 index 0000000000..47e5e3b61d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/print.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrdersDetails.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/razor new file mode 100644 index 0000000000..958b1ad0b7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/razor @@ -0,0 +1,42 @@ +
+ @Html.EJS().Button("print").CssClass("e-danger").Content("Print").Render() +
+@Html.EJS().Grid("HierarchyPrint").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + +}).AllowPaging().PageSettings(page => { page.PageSize(10); }).PrintMode(Syncfusion.EJ2.Grids.PrintMode.CurrentPage).ActionComplete("actionComplete").DataBound("dataBound").BeforePrint("beforePrint").Render() + +@Html.EJS().Chart("chart").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(1).XName("OrderDate") + .YName("Freight").ColumnWidth(0.4).Marker(mr => mr.Visible(true)).Add(); + +}).PrimaryXAxis(px =>px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime) +.LabelFormat("MMMd")).PrimaryYAxis(py =>py.LabelFormat("{value}")).Title("Order Data").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/tagHelper new file mode 100644 index 0000000000..b91d952122 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/tagHelper @@ -0,0 +1,55 @@ +
+ +
+ + + + + + + + + + +

Chart

+
+ + + + + + + + + +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-select/print.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/print.cs new file mode 100644 index 0000000000..47e5e3b61d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/print.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrdersDetails.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-select/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/razor new file mode 100644 index 0000000000..f7a7496d08 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/razor @@ -0,0 +1,22 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).BeforePrint("beforePrint").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); + col.Field("ShipCity").HeaderText("Ship City").Width("150").Add(); + col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); + +}).AllowPaging().SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).PageSettings(page => page.PageSize(6)).Toolbar(new List() { "Print" }).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-select/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/tagHelper new file mode 100644 index 0000000000..12f97906c9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/tagHelper @@ -0,0 +1,25 @@ + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-style/print.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/print.cs new file mode 100644 index 0000000000..47e5e3b61d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/print.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrdersDetails.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-style/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/razor new file mode 100644 index 0000000000..196351c334 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/razor @@ -0,0 +1,37 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).BeforePrint("beforePrint").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); + col.Field("ShipCity").HeaderText("Ship City").Width("150").Add(); + col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); + +}).Toolbar(new List() { "Print" }).Render() + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-style/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/tagHelper new file mode 100644 index 0000000000..06179efa8a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/tagHelper @@ -0,0 +1,36 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print/print.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print/print.cs index 4019df2042..47e5e3b61d 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/print/print.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print/print.cs @@ -1,5 +1,5 @@ public IActionResult Index() { - ViewBag.DataSource = OrderDetails.GetAllRecords(); + ViewBag.DataSource = OrdersDetails.GetAllRecords(); return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print/razor index 4cb27541ab..1e350d417c 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/print/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print/razor @@ -3,7 +3,7 @@ col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add(); - col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Freight").HeaderText("Freight").Width("130").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); }).AllowPaging().Toolbar(new List() { "Print" }).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper index 7432d706db..185529820c 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper @@ -1,8 +1,9 @@ - + - - + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor index b381685cd3..2e5368d1f9 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor @@ -1,33 +1,31 @@ -@Html.EJS().Grid("Print").DataSource((IEnumerable)ViewBag.DataSource).ToolbarClick("toolbarClick").PrintComplete("printComplete").Columns(col => +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).ToolbarClick("toolbarClick").PrintComplete("printComplete").Columns(col => { col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer Name").Visible(false).Width("150").Add(); - col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add(); - col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Visible(false).Width("150").Add(); col.Field("ShipCity").HeaderText("Ship City").Width("150").Add(); + col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); -}).AllowPaging().Toolbar(new List() { "Print" }).Render() +}).Toolbar(new List() { "Print" }).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/show-hide.cs b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/show-hide.cs index 4019df2042..48ab9c49b6 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/show-hide.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/show-hide.cs @@ -1,5 +1,5 @@ public IActionResult Index() { - ViewBag.DataSource = OrderDetails.GetAllRecords(); - return View(); + ViewBag.DataSource = OrdersDetails.GetAllRecords(); + return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/tagHelper index f1392949a0..088972d0fe 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/tagHelper @@ -1,4 +1,4 @@ - + @@ -6,27 +6,25 @@ - \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-headers.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-headers.md new file mode 100644 index 0000000000..51b68ea80f --- /dev/null +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-headers.md @@ -0,0 +1,474 @@ +--- +layout: post +title: Headers in ##Platform_Name## Grid Component +description: Learn here all about Headers in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Headers +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Headers in ASP.NET MVC Grid component + +The Syncfusion ASP.NET MVC Grid component provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the grid. + +## Header text + +The `HeaderText` feature proves particularly beneficial when there is a need for more meaningful and descriptive column headers in the Syncfusion ASP.NET MVC Grid component. + +By default, the header text of a column in Grid is displayed from the column's `Field` value. However, you can easily override the default header title and provide a custom header text for the column using the `HeaderText` property. + +To enable the `HeaderText` property, you simply need to define it in the **e-grid-column** element. The following example demonstrates how to enable header text for a Grid column. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Header text](../../images/columns/Column-headertext.png) + +> * If both the `Field` and `HeaderText` are not defined in the column, the column renders with **empty** header text. +> * The `HeaderText` property is optional, and if it is not defined, then the corresponding column's field value is set as header text for that column. +> * You can also use the `HeaderTemplate` property to apply custom HTML content to the header cell. + +## Header template + +The header template feature in the Syncfusion ASP.NET MVC Grid component allows you to create custom header layouts and content, providing enhanced functionality such as sorting or filtering. + +To implement a header template, set the `HeaderTemplate` property within a specific column definition. This allows you to render custom HTML elements or ASP.NET MVC components to the header. + +The following example demonstrate, the custom element is rendered for both **CustomerID**,**Freight** and **OrderDate** column headers. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertemplate/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertemplate.cs" %} +{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Header template](../../images/columns/Column-headertext-headerTemplate.png) + +>* The `HeaderTemplate` property is only applicable to Grid columns that have a header element. +>* You can use any HTML or ASP.NET MVC component in the header template to add additional functionality to the header element. + +## Stacked header + +In Grid, you can group multiple levels of column headers by stacking the Grid columns. This feature allows you to organize the Grid columns in a more structured and understandable way. This can be achieved by setting the [columns->columns](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Columns) property. Within this property, you can define an array of column objects to group together as sub-headers under a main header. You can define the `HeaderText` property of each sub-header column to set the text for that sub-header. + +You can customize the appearance of the stacked header elements by using the `HeaderTemplate` property. This allows you to render custom HTML elements or ASP.NET MVC components to the header. + +Here's an example of how to use stacked headers with a custom `HeaderTemplate` in Syncfusion Grid. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-stacked/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stackedheader.cs" %} +{% include code-snippet/grid/columns/headertext-stacked/stackedHeader.cs %} +{% endhighlight %} +{% endtabs %} + +![Stacked header](../../images/columns/Column-headertext-stacked.png) + +## Align the text of header text + +You can horizontally align the text in column headers of the Grid component using the `HeaderTextAlign` property. By default, the text is aligned to the left, but you can change the alignment by setting the value of the `HeaderTextAlign` property to one of the following options: + +* **Left**: Aligns the text to the left (default). +* **Center**: Aligns the text to the center. +* **Right**: Aligns the text to the right. +* **Justify**: Header text is justified. + +The following example demonstrates how to dynamically change the alignment of the header text based on DropDown change: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-textalign/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-textalign/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Align the text of header text](../../images/columns/Column-headertext-change-alignment.gif) + +>* The `HeaderTextAlign` property only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the [TextAlign](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.TextAlign.html) property. +>* You can also use the `HeaderTextAlign` property with the stacked header feature in Syncfusion Grid. The property will align the header text in the sub-headers as well. + +## Autowrap the header text + +The autowrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the appropriate [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically. + +To enable autowrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowTextWrap) property to **true**. You can also configure the auto wrap mode by setting the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) property. + +Grid provides the below three options for configuring: + +* **Both**: This is the default value for wrapMode. With this option, both the grid header text and content is wrapped. +* **Header**: With this option, only the grid header text is wrapped. +* **Content**: With this option, only the grid content is wrapped. + +>* If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the grid's width. +>* If a column's header text contains no white space, the text may not be wrapped. +>* If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the `HeaderTemplate` and `Template` properties of the column to customize the appearance of the header and cell content. + +The following example demonstrates how to dynamically change the auto-wrap of the header text based on DropDown change. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-autowrap/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-autowrap/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Autowrap the header text](../../images/columns/Column-headertext-wrap-mode.png) + +## Change the height of header + +Changing the height of the header can be useful in cases where the default height is not sufficient to display the header content cell. For example, if you have a header with a lot of text or if you want to add an image to the header, you may need to increase the height of the header to accommodate the content.This can be easily achieved by changing the height of the header using CSS or by dynamically adjusting the height using a methods. + +**Using css** + +You can use CSS to override the default height of the **.e-grid .e-headercell** class to change the height of the header. Here is an example code snippet: + +```css +.e-grid .e-headercell { + height: 130px; +} +``` + +**Using methods** + +To change the height of the header dynamically, you can use the `getHeaderContent` method to get the header content element of the Syncfusion Grid. Then, you can use the **querySelectorAll** method to get all the header cell elements with the class **e-headercell**. Finally, you can loop through each header cell element and set its style property to adjust the height. + +The following example demonstrates how to dynamically change the height of the header based on a Button `click` event. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-change-height/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-change-height/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Change the height of header](../../images/columns/Column-headertext-change-height.gif) + +>* You can also use the `GetHeaderTable` method to get the table element of the header, and then adjust the height. +>* You cannot change the height of row below the default height of 42px using the **e-columnheader** class. + +## Change header text dynamically + +The Syncfusion Grid component provides a way to modify the header text of a corresponding column in real-time based on events or other events. This feature can be useful in various scenarios, such as displaying a custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the Grid provides a more flexible and customizable experience. + +**Using Event** + +To modify the header text of a corresponding column dynamically, you can use the [HeaderCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event provided by the Syncfusion Grid. This event is triggered for each header cell element rendered in the Grid. + +When the `HeaderCellInfo` event is triggered, it provides a **HeaderCellInfoEventArgs** object as a parameter. This object contains the following properties: + +* **cell**: Defines the header cell that is being modified. +* **node**: Defines the DOM element of the header cell that is being modified. + +You can use these properties to access and modify the header text of the corresponding column. Once the header text is modified, you can refresh the Grid to reflect the changes by calling the `refreshHeader` method of the Grid. + +**Using method** + +The Grid component provides several methods that allow you to change the column header text dynamically. Here are some of the methods you can use: + +1. `getColumnByField`: This method takes a field name as a parameter and returns the entire column object that corresponds to that field name, including properties such as headerText, width, and alignment. You can use this method to modify any aspect of the column. + +2. `getColumnHeaderByField`: Retrieves the header element of a column based on its field name. You can modify the **textContent** property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element. + +3. `getColumnIndexByField`: Retrieves the index of a column based on its field name. You can then use the `getColumnByIndex` method to retrieve the column object and modify its `HeaderText` property to change the header text. + +4. `getColumnByUid`: Retrieves the column object based on its unique identifier (UID). You can modify the `HeaderText` property of the column object to change the header text. + +5. `getColumnHeaderByIndex`: Retrieves the header element of a column based on its zero-based index. You can modify the **textContent** property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element. + +6. `getColumnIndexByUid`: Retrieves the index of a column based on its unique identifier (UID). You can then use the `getColumnByIndex` method to retrieve the column object and modify its `HeaderText` property to change the header text. + +7. `getColumnHeaderByUid`: Retrieves the header element of a column based on its unique identifier (UID). You can modify the **textContent** property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element.If you only have an `Template` for the column header, and the column itself is not defined with a `Field` , then you can use the `getColumnHeaderByUid` method to get a reference to the header element and modify its text content to change the header text. + +>* When you change the header text dynamically, you need to **refresh** the Grid to reflect the changes by calling the `refreshHeader` method. +>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated. + +Here is an example of how to change the header text of a column using the `getColumnByField` method: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-change/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Columntext.cs" %} +{% include code-snippet/grid/columns/headertext-change/columntext.cs %} +{% endhighlight %} +{% endtabs %} + +![Change header text dynamically](../../images/columns/Column-headertext-change.png) + + +**Changing the header text of all columns** + +If you want to change the header text of all columns in the grid, you can loop through the Columns collection of the grid and set the `headerText` property for each column. Here is an example: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-change-all/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Columntext.cs" %} +{% include code-snippet/grid/columns/headertext-change-all/columntext.cs %} +{% endhighlight %} +{% endtabs %} + +![Changing the header text of all columns](../../images/columns/Column-headertext-change-all.gif) + +## Change the orientation of header text + +By default, the text in the column headers of the Syncfusion Grid control is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the `CustomAttributes` property of the Grid columns. + +Follow the below steps to change the orientation of the header text in Grid: + +**Step 1**: **Create a CSS class with orientation style for grid header cell** + +To `rotate` the header text, you can create a CSS class with the `transform` property that rotates the header text 90 degrees. This class will be added to the header cell using the `CustomAttributes` property. + +```css +.orientationcss .e-headercelldiv { + transform: rotate(90deg); +} +``` + +**Step 2**: **Add the custom CSS class to the grid column** + +Once you have created the CSS class, you can add it to the particular column by using the `CustomAttributes` property. This property allows you to add any custom attribute to the grid column. + +For example, to add the orientationcss class to the Freight column, you can use the following code: + +```typescript + col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).CustomAttributes(new { @class = "orientationcss" }).Add(); +``` + +**Step 3**: **Resize the header cell height** + +After adding the custom CSS class to a column, you need to resize the header cell height so that the rotated header text is fully visible. You can do this by using the following code: + +```typescript + + function setHeaderHeight(args) { + var textWidth = document.querySelector(".orientationcss > div").scrollWidth; // obtain the width of the headerText content. + var headerCell = document.querySelectorAll(".e-headercell"); + for (var i = 0; i < headerCell.length; i++) { + headerCell.item(i).style.height = textWidth + 'px'; // assign the obtained textWidth as the height of the headerCell. + } + } + +``` + +The following example demonstrates how to change the orientation of the **Freight** column header text to 90 degrees: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-orientation/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-orientation/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Change the orientation of header text](../../images/columns/Column-headertext-orientation.png) + +## Custom tooltip for header + +Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion Grid. This can be useful in situations where there is not enough space to display all of the information related to a column, or when there is additional context that may be helpful. + +To enable custom tooltips for headers, you can use the `BeforeRender` event of the Grid component. This event is triggered for each header cell before it is rendered, allowing you to add a custom tooltip to the header cell using `tooltip` component. + +Here's an example of how to use the `BeforeRender` event to add a custom tooltip to a header cell: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-tooltip/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-tooltip/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Custom tooltip for header](../../images/columns/Column-headertext-tooltip.png) + +> * The [HeaderCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered. + +## Customize header text styles + +Customizing the grid header styles allows you to modify the appearance of the column header in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS, properties, methods, or event support provided by the Syncfusion ASP.NET MVC Grid component. + +### Using CSS + +You can apply styles to the header cells using CSS selectors. The Grid provides a class name for each header cell element, which you can use to apply styles to that specific header cell. The **.e-headercell** class can be used to change the background color and text color of the column header. + +```CSS + .e-grid .e-headercell { + background-color: #a2d6f4; + color:rgb(3, 2, 2); + } +``` +Here's an example that demonstrates how to customize the appearance of a column header in the Grid using **className**. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-using-css/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-using-css/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Display HTML content](../../images/columns/Column-headertext-using-css.png) + +### Using property + +You can customize the appearance of the column headers in Grid using the `CustomAttributes` property. The `CustomAttributes` property takes an object with the name-value pair to customize the CSS properties for grid header cells. You can also set multiple CSS properties to the custom class using the `CustomAttributes` property. + +To customize the header of a column, you can follow the steps below: + +Step 1: Define a CSS class that specifies the styles you want to apply to the header cell of the column. For example, to change the background color and text color of the header cell, define a CSS class like this: + + ```CSS + .e-grid .e-headercell.customcss { + background-color: rgb(43, 205, 226); + color: black; + } + + ``` + +Step 2: Set the **CustomAttributes** property of the desired column to an object that contains the CSS class **customcss**. This CSS class will be applied to the header cell of the specified column in the Grid. + + ```ts + col.Field("Freight").HeaderText("Freight").Width("120").CustomAttributes(new { @class = "customcss" }).Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + ``` + +The following example demonstrates how to customize the appearance of the **OrderID** and **OrderDate** columns using custom attributes. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-using-property/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-using-property/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Using property](../../images/columns/Column-headertext-using-property.png) + +### Using method + +The Syncfusion Grid provides methods to customize the appearance of the grid columns header. + +1. `getColumnHeaderByIndex`: The method is used to customize the appearance of a specific column header in the grid by specifying the index of the column for which you want to customize the header. + +2. `getColumnHeaderByField`: This method is used to retrieve the header element of a specific column by its field name. You can use the retrieved element to customize the appearance of the header element. +3. `getColumnHeaderByUid`: This method is used to retrieve the header element of a specific column by its unique ID. You can use the retrieved element to customize the appearance of the header element. + + 4. `getColumnIndexByField`:This method is used to retrieve the index of a specific column by its field name. You can use the retrieved index to access the header element and customize its appearance. + + 5. `getColumnIndexByUid`: This method is used to retrieve the index of a specific column by its unique ID. You can use the retrieved index to access the header element and customize its appearance. + +Here's an example of how to use these methods to change the style of a specific column header: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-using-method/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-using-method/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Using method](../../images/columns/Column-headertext-using-method.png) + +>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated. + +### Using event + +To customize the appearance of the grid header, you can handle the [HeaderCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header column. + +The following example demonstrates how to add a `HeaderCellInfo` event handler to the grid. In the event handler, checked whether the current header column is **Order Date** field and then applied the appropriate CSS class to the cell based on its value. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-using-event/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-using-event/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Using event](../../images/columns/Column-headertext-using-event.png) + +## How to refresh header + +The refresh header feature in the Syncfusion ASP.NET MVC Grid allows you to update the header section of the grid whenever changes are made to the grid's columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment. + +To use the refresh header feature, you can call the `refreshHeader` method of the Grid component. This method updates the grid header with the latest changes made to the columns. + +The following example demonstrates how to use the `refreshHeader` method to update the grid header: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-refresh/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-refresh/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![How to refresh header](../../images/columns/Column-headertext-refresh-header.png) + +>* The `refreshHeader` method updates only the grid header and not the entire grid. +>* If you want to refresh the entire grid, you can use the `refresh` method instead. + +## How to get header element + +To get the header element in a Syncfusion Grid, you can use one of the following methods: + +1. `getHeaderContent`: This method returns the header div element of the Grid. You can use this method to access the entire header content of the Grid. + + ```ts + var grid = document.getElementById("Grid").ej2_instances[0] + const headerTableElement=grid.getHeaderContent(); + ``` +2. `getHeaderTable`: This method returns the header table element of the Grid. You can use this method to access only the header table of the Grid. + + ```ts + var grid = document.getElementById("Grid").ej2_instances[0] + const headerTableElement = grid.getHeaderTable(); + ``` + +3. `getColumnHeaderByUid`: This method returns the column header element by its unique identifier. + + ```ts + var grid = document.getElementById("Grid").ej2_instances[0] + const columnHeaderElement = grid.getColumnHeaderByUid("e-grid2"); + ``` + +4. `getColumnHeaderByIndex`: This method returns the column header element by its index. + + ```ts + var grid = document.getElementById("Grid").ej2_instances[0] + const columnHeaderElement = grid.getColumnHeaderByIndex(0); + ``` +5. `getColumnHeaderByField`: This method returns the column header element by its field name. + + ```ts + var grid = document.getElementById("Grid").ej2_instances[0] + const columnHeaderElement = grid.getColumnHeaderByField("OrderID"); + ``` + +>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated. \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/headers.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/headers.md deleted file mode 100644 index 6086316eb6..0000000000 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/headers.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -layout: post -title: Headers in ##Platform_Name## Grid Component -description: Learn here all about Headers in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Headers -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Headers - -## Header text - -By default, column header title is displayed from column [`Field`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Field) value. To override the default header title, you have to define the [`HeaderText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) value. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/columns/headertext/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Headertext.cs" %} -{% include code-snippet/grid/columns/headertext/headertext.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/columns/headertext/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Headertext.cs" %} -{% include code-snippet/grid/columns/headertext/headertext.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -N> If both the [`Field`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Field) and [`HeaderText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) are not defined in the column, the column renders with empty header text. - -## Header template - -You can customize the header element by using the [`HeaderTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderTemplate) property. In this demo, the custom element is rendered for both EmployeeID and BirthDate column headers. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/columns/headertemplate/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Headertemplate.cs" %} -{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/columns/headertemplate/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Headertemplate.cs" %} -{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -## Change header text dynamically - -You can change the column [`HeaderText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) dynamically through an external button. - -Follow the given steps to change the header text dynamically: - -**Step 1**: Get the column object corresponding to the field name by using the [`getColumnByField`](https://ej2.syncfusion.com/documentation/api/grid/#getcolumnbyfield) method. Then, change the header text value. - -```typescript -var column = grid.getColumnByField("ShipCity"); // Get column object. -column.headerText = 'Changed Text'; - -``` - -**Step 2**: To reflect the changes in the grid header, invoke the [`refreshHeader`](https://ej2.syncfusion.com/documentation/api/grid/#refreshheader) method. - -```typescript -grid.refreshHeader(); - -``` - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/column-header-text/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Column-header-text.cs" %} -{% include code-snippet/grid/how-to/column-header-text/column-header-text.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/column-header-text/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Column-header-text.cs" %} -{% include code-snippet/grid/how-to/column-header-text/column-header-text.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -## Change the orientation of header Text - -You can change the orientation of the header text by using the [`CustomAttributes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_CustomAttributes) property. - -Ensure the following steps: - -**Step 1**: Create a CSS class with orientation style for the grid header cell. - -```css -.orientationcss .e-headercelldiv { - transform: rotate(90deg); -} - -``` - -**Step 2**: Add the custom CSS class to a particular column by using the [`CustomAttributes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_CustomAttributes) property. - -```typescript - - -``` - -**Step 3**: Resize the header cell height by using the following code. - -```typescript -function setHeaderHeight(args) { - var textWidth = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content. - var headerCell = document.querySelectorAll(".e-headercell"); - for(var i = 0; i < headerCell.length; i++) { - headerCell.item(i).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell. - } -} - -``` - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/orientation/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Orientation.cs" %} -{% include code-snippet/grid/how-to/orientation/orientation.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/orientation/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Orientation.cs" %} -{% include code-snippet/grid/how-to/orientation/orientation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md index 88e4803e8c..f146e2c82b 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md @@ -8,227 +8,182 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Print in ASP.NET MVC Grid component -# Print in ASP.NET MVC Grid Component +The printing feature in Syncfusion Grid allows you to easily generate and print a representation of the grid's content for better offline accessibility and documentation. You can enable this feature using either the grid's toolbar or the programmatically available `print` method. -To print the Grid, use the [`print`](https://ej2.syncfusion.com/documentation/api/grid/#print) method from grid instance. The print option can be displayed on the [`Toolbar`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Toolbar) by adding the **Print** toolbar item. - -{% if page.publishingplatform == "aspnet-core" %} +To add the printing option to the grid's toolbar, simply include the [Toolbar](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Toolbar) property in your grid configuration and add the **Print** as toolbar item. This will allow you to directly initiate the printing process while click on the Print item from the toolbar. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/print/print/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Print.cs" %} -{% include code-snippet/grid/print/print/print.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/print/print/razor %} {% endhighlight %} -{% highlight c# tabtitle="Print.cs" %} +{% highlight c# tabtitle="print.cs" %} {% include code-snippet/grid/print/print/print.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Print](../images/print/print.png) ## Page setup -Some of the print options cannot be configured through JavaScript code. So, you have to customize the layout, paper size, and margin options using the browser page setup dialog. Refer to the following links to know more about the browser page setup: - -* [`Chrome`](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1) -* [`Firefox`](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox) -* [`Safari`](http://www.mintprintables.com/print-tips/adjust-margins-osx/) -* [`IE`](http://www.helpteaching.com/help/print/index.htm) +When printing a webpage, some print options, such as layout, paper size, and margin settings, cannot be configured through JavaScript code. Instead, you need to customize these settings using the browser's page setup dialog. Below are links to the page setup guides for popular web browsers: -## Print using an external button +* [Chrome](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1) +* [Firefox](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox) +* [Safari](http://www.mintprintables.com/print-tips/adjust-margins-osx/) +* [IE](http://www.helpteaching.com/help/print/index.htm) -To print the grid from an external button, invoke the [`print`](https://ej2.syncfusion.com/documentation/api/grid/#print) method. +## Print by external button -{% if page.publishingplatform == "aspnet-core" %} +You can print the grid's content using an external button by utilizing the `print` method. This method allows you to trigger the printing process programmatically. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/print/external-btn/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="External-btn.cs" %} -{% include code-snippet/grid/print/external-btn/external-btn.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/print/external-btn/razor %} {% endhighlight %} {% highlight c# tabtitle="External-btn.cs" %} {% include code-snippet/grid/print/external-btn/external-btn.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - - -## Print the visible page +![Print by external button](../images/print/print-external.png) -By default, the grid prints all the pages. To print the current page alone, set the [`PrintMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_PrintMode) to **CurrentPage**. +## Print visible Page -{% if page.publishingplatform == "aspnet-core" %} +By default, the Syncfusion ASP.NET MVC Grid prints all the pages of the grid. The [PrintMode](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_PrintMode) property within the grid grants you control over the printing process. However, if you want to print only the current visible page, you can achieve this by setting the `PrintMode` property to **CurrentPage**. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/print/current-page/tagHelper %} +{% include code-snippet/grid/print/current-page/razor %} {% endhighlight %} {% highlight c# tabtitle="Current-page.cs" %} {% include code-snippet/grid/print/current-page/current-page.cs %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Print visible Page](../images/print/print-current.png) + +## Print only selected records + +By default, the Syncfusion ASP.NET MVC Grid prints all the data bound to its dataSource. However, there might be cases where you want to print only the selected records from the grid. The ASP.NET MVC Grid provides an option to achieve this by binding to the [BeforePrint](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event, where you can replace the rows of the printing grid with the selected rows. + +Below is an example code that demonstrates how to print only the selected records from the ASP.NET MVC Grid: {% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/print/current-page/razor %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/print/print-select/razor %} {% endhighlight %} -{% highlight c# tabtitle="Current-page.cs" %} -{% include code-snippet/grid/print/current-page/current-page.cs %} +{% highlight c# tabtitle="Print.cs" %} +{% include code-snippet/grid/print/print-select/print.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Print only selected records](../images/print/print-select.png) ## Print the hierarchy grid -By default, the grid will be print the master and expanded child grids alone. you can change the print option by using the [`hierarchyPrintMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HierarchyPrintMode) property. The available options are, +The Syncfusion ASP.NET MVC Grid allows you to print hierarchy grids, which consist of a parent grid and its child grids. By default, when you print a hierarchy grid, it includes the parent grid and expanded child grids only. However, you can customize the print behavior using the [HierarchyPrintMode](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_HierarchyPrintMode) property. -| Mode | Behavior | -|----------|-------------| -| Expanded | Prints the master grid with expanded child grids. | -| All | Prints the master grid with all the child grids. | -| None | Prints the master grid alone. | +The `HierarchyPrintMode` property in the ASP.NET MVC Grid lets you control the printing behavior for hierarchy grids. You can choose from three options: -{% if page.publishingplatform == "aspnet-core" %} +| Mode | Behavior | +| -------- | ------------------------------------------------------------------------------- | +| Expanded | Prints the parent grid with expanded child grids. | +| All | Prints the parent grid with all the child grids, whether expanded or collapsed. | +| None | Prints the parent grid alone. | {% tabs %} -{% highlight c# tabtitle="CSHTML" %} -{% include code-snippet/grid/print/hierarchyprint/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Hierarchyprint.cs" %} -{% include code-snippet/grid/print/hierarchyprint/hierarchyprint.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Hierarchyprint.cs" %} -{% include code-snippet/grid/print/hierarchyprint/hierarchyprint.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} +{% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/grid/print/hierarchyprint/razor %} {% endhighlight %} {% highlight c# tabtitle="Hierarchyprint.cs" %} {% include code-snippet/grid/print/hierarchyprint/hierarchyprint.cs %} {% endhighlight %} -{% highlight c# tabtitle="Hierarchyprint.cs" %} -{% include code-snippet/grid/print/hierarchyprint/hierarchyprint.cs %} -{% endhighlight %} {% endtabs %} -{% endif %} - - -N> By default, the hierarchy grid prints the expanded child grids from the visible page only. Refer [To Print the expanded state grid from all pages](./how-to/#print-the-expanded-state-from-other-pages). +![Print the hierarchy grid](../images/print/print-hierachy.png) ## Print the master detail grid -The Grid has the option to visualize details of a record in another Grid in a master and detailed manner. By default, Grid will print the master grid alone. Instead of this, it is possible to print both the master and detail grids by using the [BeforePrint](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event of the Grid. - -In the following sample, the detail grid is added to the `element` argument of the `BeforePrint` event, resulting in both the master and detail grids being printed on the page. +The Syncfusion ASP.NET MVC Grid provides the option to visualize details of a record in another grid in a master-detail manner. By default, when you print a master-detail grid, only the master grid is included in the print output. However, you can customize the print behavior to include both the master and detail grids using the `BeforePrint` event of the grid. -{% if page.publishingplatform == "aspnet-core" %} +The [BeforePrint](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint)event in the ASP.NET MVC Grid is triggered before the actual printing process begins. You can handle this event to customize the print output. By adding the detail grid to the `element` argument of the `BeforePrint` event, you can ensure that both the master and detail grids are printed on the page. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/print/masterdetailgrid/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Master-Detail.cs" %} -{% include code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/print/masterdetailgrid/razor %} {% endhighlight %} {% highlight c# tabtitle="Master-Detail.cs" %} {% include code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +![Print the master detail grid](../images/print/print-master.png) ## Print large number of columns -By default, the browser uses A4 as page size option to print pages and to adapt the size of the page the browser print preview will auto-hide the overflowed contents. Hence grid with large number of columns will cut off to adapt the print page. - -To show large number of columns when printing, adjust the scale option from print option panel based on your content size. +When printing a grid with a large number of columns, the browser's default page size (usually A4) might not be sufficient to display all the columns properly. As a result, the browser's print preview may automatically hide the overflowed content, leading to a cut-off appearance. -![Scale Option Setting](./images/print-preview.png) +To show a large number of columns when printing, you can adjust the scale option from the print option panel based on your content size. This will allow you to fit the entire grid content within the printable area. -## Show or Hide columns while Printing +![Scale Option Setting](../images/print-preview.png) -You can show a hidden column or hide a visible column while printing the grid using [`ToolbarClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ToolbarClick) and [`PrintComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_PrintComplete) events. +## Show or hide columns while printing -In the [`ToolbarClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ToolbarClick) event, based on **args.item.id** as **grid_print**. We can show or hide columns by setting [`Visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Visible) property of [`Column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) to **true** or **false** respectively. +In the Syncfusion ASP.NET MVC Grid, you have the flexibility to control the visibility of columns during the printing process. You can dynamically show or hide specific columns using the [ToolbarClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ToolbarClick) and [PrintComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_PrintComplete) events while printing. This capability enhances your control over which columns are included in the printed output, allowing you to tailor the printed grid to your specific needs. -In the [`PrintComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_PrintComplete) event, We have reversed the state back to the previous state. +In the `ToolbarClick` event, you can show or hide columns by setting `Column.Visible` property to **true** or **false** respectively. -In the below example, we have **CustomerID** as a hidden column in the grid. While printing, we have changed **CustomerID** to visible column and **ShipCity** as hidden column. +In the `PrintComplete` event, the column visibility state is reset back to its original configuration. -{% if page.publishingplatform == "aspnet-core" %} +Here's a code example that demonstrates how to show a hidden column (CustomerID) and hide a visible column (ShipCity) during printing and then reset their visibility after printing: {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/print/show-hide-columns/tagHelper %} +{% include code-snippet/grid/print/show-hide-columns/razor %} {% endhighlight %} {% highlight c# tabtitle="Show-hide.cs" %} {% include code-snippet/grid/print/show-hide-columns/show-hide.cs %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Show or hide columns while printing](../images/print/print-hide.png) + +## Limitations of printing large data + +Printing a large volume of data all at once in the grid can have certain limitations due to potential browser performance issues. Rendering numerous DOM elements on a single page can lead to browser slowdowns or even hang the browser. The grid offers a solution to manage extensive datasets through virtualization. However, it's important to note that virtualization for both rows and columns is not feasible during the printing process. + +If printing all the data remains a requirement, an alternative approach is recommended. Exporting the grid data to formats like [Excel](https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-export/excel-exporting) or [CSV](https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-export/excel-exporting) or [Pdf](https://ej2.syncfusion.com/aspnetcore/documentation/grid/pdf-export/pdf-export) is advised. This exported data can then be printed using non-web-based applications, mitigating the potential performance challenges associated with printing large datasets directly from the browser. + +## Retain grid styles while printing + +The Syncfusion ASP.NET MVC Grid provides a [BeforePrint](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event that allows you to customize the appearance and styles of the grid before it is sent to the printer. By handling this event, you can ensure that the grid retains its styles and appearance while printing. {% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/print/show-hide-columns/razor %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/print/print-style/razor %} {% endhighlight %} -{% highlight c# tabtitle="Show-hide.cs" %} -{% include code-snippet/grid/print/show-hide-columns/show-hide.cs %} +{% highlight c# tabtitle="print.cs" %} +{% include code-snippet/grid/print/print-style/print.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +![Retain grid styles while printing](../images/print/print-style.png) +## Print grid along with other components -## Limitations of Printing Large Data +To print the Syncfusion ASP.NET MVC Grid along with another component, such as a chart, you can use the [BeforePrint](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event of the grid. In this event, you can clone the content of the other component and append it to the print document. -When grid contains large number of data, printing all the data at once is not a best option for the browser performance. Because to render all the DOM elements in one page will produce performance issues in the browser. It leads to browser slow down or browser hang. Grid have option to handle large number of data by Virtualization. However while printing, it is not possible to use virtualization for rows and columns. +Here is an example of how to print grid along with chart component: -If printing of all the data is still needed, we suggest to Export the grid to **Excel** or **CSV** or **Pdf** and then print it from another non-web based application. - -## See Also +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/print/print-custom/razor %} +{% endhighlight %} +{% highlight c# tabtitle="print.cs" %} +{% include code-snippet/grid/print/print-custom/print.cs %} +{% endhighlight %} +{% endtabs %} -* [How to Print the expanded state grid from all pages](./how-to/print-the-expanded-state-from-other-pages) -* [How to print the Grid using external button in ASP.NET MVC Grid](https://www.syncfusion.com/forums/136763/how-to-print-the-grid-using-external-button-in-asp-net-mvc-grid) -* [How to print the custom report in ASP.NET MVC Grid](https://www.syncfusion.com/forums/141249/how-to-print-the-custom-report-in-asp-net-mvc-grid) \ No newline at end of file +![Print grid along with other components](../images/print/print-custom.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-headers.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-headers.md new file mode 100644 index 0000000000..ada4100eae --- /dev/null +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-headers.md @@ -0,0 +1,476 @@ +--- +layout: post +title: Headers in ##Platform_Name## Grid Component +description: Learn here all about Headers in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Headers +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Headers in ASP.NET Core Grid component + +The Syncfusion ASP.NET Core Grid component provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the grid. + +## Header text + +The `headerText` feature proves particularly beneficial when there is a need for more meaningful and descriptive column headers in the Syncfusion ASP.NET Core Grid component. + +By default, the header text of a column in Grid is displayed from the column's `field` value. However, you can easily override the default header title and provide a custom header text for the column using the `headerText` property. + +To enable the `headerText` property, you simply need to define it in the **e-grid-column** element. The following example demonstrates how to enable header text for a Grid column. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Header text](../../images/columns/Column-headertext.png) + +> * If both the `field` and `headerText` are not defined in the column, the column renders with **empty** header text. +> * The `headerText` property is optional, and if it is not defined, then the corresponding column's field value is set as header text for that column. +> * You can also use the `headerTemplate` property to apply custom HTML content to the header cell. + +## Header template + +The header template feature in the Syncfusion ASP.NET Core Grid component allows you to create custom header layouts and content, providing enhanced functionality such as sorting or filtering. + +To implement a header template, set the `headerTemplate` property within a specific column definition. This allows you to render custom HTML elements or ASP.NET Core components to the header. + +The following example demonstrate, the custom element is rendered for both **CustomerID**,**Freight** and **OrderDate** column headers. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertemplate/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertemplate.cs" %} +{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %} +{% endhighlight %} +{% endtabs %} + +![Header template](../../images/columns/Column-headertext-headerTemplate.png) + +>* The `headerTemplate` property is only applicable to Grid columns that have a header element. +>* You can use any HTML or ASP.NET Core component in the header template to add additional functionality to the header element. + +## Stacked header + +In Grid, you can group multiple levels of column headers by stacking the Grid columns. This feature allows you to organize the Grid columns in a more structured and understandable way. This can be achieved by setting the [columns->columns](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Columns) property. Within this property, you can define an array of column objects to group together as sub-headers under a main header. You can define the `headerText` property of each sub-header column to set the text for that sub-header. + +You can customize the appearance of the stacked header elements by using the `headerTemplate` property. This allows you to render custom HTML elements or ASP.NET Core components to the header. + +Here's an example of how to use stacked headers with a custom `headerTemplate` in Syncfusion Grid. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-stacked/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stackedheader.cs" %} +{% include code-snippet/grid/columns/headertext-stacked/stackedHeader.cs %} +{% endhighlight %} +{% endtabs %} + +![Stacked header](../../images/columns/Column-headertext-stacked.png) + +## Align the text of header text + +You can horizontally align the text in column headers of the Grid component using the `headerTextAlign` property. By default, the text is aligned to the left, but you can change the alignment by setting the value of the `headerTextAlign` property to one of the following options: + +* **Left**: Aligns the text to the left (default). +* **Center**: Aligns the text to the center. +* **Right**: Aligns the text to the right. +* **Justify**: Header text is justified. + +The following example demonstrates how to dynamically change the alignment of the header text based on DropDown change: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-textalign/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-textalign/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Align the text of header text](../../images/columns/Column-headertext-change-alignment.gif) + +>* The `headerTextAlign` property only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the [textAlign](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.TextAlign.html) property. +>* You can also use the `headerTextAlign` property with the stacked header feature in Syncfusion Grid. The property will align the header text in the sub-headers as well. + +## Autowrap the header text + +The autowrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the appropriate [width](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically. + +To enable autowrap, set the `allowTextWrap` property to **true**. You can also configure the auto wrap mode by setting the [textWrapSettings.wrapMode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) property. + +Grid provides the below three options for configuring: + +* **Both**: This is the default value for wrapMode. With this option, both the grid header text and content is wrapped. +* **Header**: With this option, only the grid header text is wrapped. +* **Content**: With this option, only the grid content is wrapped. + +>* If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the grid's width. +>* If a column's header text contains no white space, the text may not be wrapped. +>* If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the `headerTemplate` and `template` properties of the column to customize the appearance of the header and cell content. + +The following example demonstrates how to dynamically change the auto-wrap of the header text based on DropDown change. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-autowrap/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-autowrap/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Autowrap the header text](../../images/columns/Column-headertext-wrap-mode.png) + + +## Change the height of header + +Changing the height of the header can be useful in cases where the default height is not sufficient to display the header content cell. For example, if you have a header with a lot of text or if you want to add an image to the header, you may need to increase the height of the header to accommodate the content.This can be easily achieved by changing the height of the header using CSS or by dynamically adjusting the height using a methods. + +**Using css** + +You can use CSS to override the default height of the **.e-grid .e-headercell** class to change the height of the header. Here is an example code snippet: + +```css +.e-grid .e-headercell { + height: 130px; +} +``` + +**Using methods** + +To change the height of the header dynamically, you can use the `getHeaderContent` method to get the header content element of the Syncfusion Grid. Then, you can use the **querySelectorAll** method to get all the header cell elements with the class **e-headercell**. Finally, you can loop through each header cell element and set its style property to adjust the height. + +The following example demonstrates how to dynamically change the height of the header based on a Button `click` event. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-change-height/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-change-height/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Change the height of header](../../images/columns/Column-headertext-change-height.gif) + +>* You can also use the `getHeaderTable` method to get the table element of the header, and then adjust the height. +>* You cannot change the height of row below the default height of 42px using the **e-columnheader** class. + +## Change header text dynamically + +The Syncfusion Grid component provides a way to modify the header text of a corresponding column in real-time based on events or other events. This feature can be useful in various scenarios, such as displaying a custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the Grid provides a more flexible and customizable experience. + +**Using Event** + +To modify the header text of a corresponding column dynamically, you can use the [headerCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event provided by the Syncfusion Grid. This event is triggered for each header cell element rendered in the Grid. + +When the `HeaderCellInfo` event is triggered, it provides a **HeaderCellInfoEventArgs** object as a parameter. This object contains the following properties: + +* **cell**: Defines the header cell that is being modified. +* **node**: Defines the DOM element of the header cell that is being modified. + +You can use these properties to access and modify the header text of the corresponding column. Once the header text is modified, you can refresh the Grid to reflect the changes by calling the `refreshHeader` method of the Grid. + +**Using method** + +The Grid component provides several methods that allow you to change the column header text dynamically. Here are some of the methods you can use: + +1. `getColumnByField`: This method takes a field name as a parameter and returns the entire column object that corresponds to that field name, including properties such as headerText, width, and alignment. You can use this method to modify any aspect of the column. + +2. `getColumnHeaderByField`: Retrieves the header element of a column based on its field name. You can modify the **textContent** property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element. + +3. `getColumnIndexByField`: Retrieves the index of a column based on its field name. You can then use the `getColumnByIndex` method to retrieve the column object and modify its `headerText` property to change the header text. + +4. `getColumnByUid`: Retrieves the column object based on its unique identifier (UID). You can modify the `headerText` property of the column object to change the header text. + +5. `getColumnHeaderByIndex`: Retrieves the header element of a column based on its zero-based index. You can modify the **textContent** property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element. + +6. `getColumnIndexByUid`: Retrieves the index of a column based on its unique identifier (UID). You can then use the `getColumnByIndex` method to retrieve the column object and modify its `headerText` property to change the header text. + +7. `getColumnHeaderByUid`: Retrieves the header element of a column based on its unique identifier (UID). You can modify the **textContent** property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element.If you only have an `template` for the column header, and the column itself is not defined with a `field` , then you can use the `getColumnHeaderByUid` method to get a reference to the header element and modify its text content to change the header text. + +>* When you change the header text dynamically, you need to **refresh** the Grid to reflect the changes by calling the `refreshHeader` method. +>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated. + +Here is an example of how to change the header text of a column using the `getColumnByField` method: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-change/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Columntext.cs" %} +{% include code-snippet/grid/columns/headertext-change/columntext.cs %} +{% endhighlight %} +{% endtabs %} + +![Change header text dynamically](../../images/columns/Column-headertext-change.png) + +**Changing the header text of all columns** + +If you want to change the header text of all columns in the grid, you can loop through the Columns collection of the grid and set the `headerText` property for each column. Here is an example: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-change-all/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Columntext.cs" %} +{% include code-snippet/grid/columns/headertext-change-all/columntext.cs %} +{% endhighlight %} +{% endtabs %} + +![Changing the header text of all columns](../../images/columns/Column-headertext-change-all.gif) + +## Change the orientation of header text + +By default, the text in the column headers of the Syncfusion Grid control is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the `customAttributes` property of the Grid columns. + +Follow the below steps to change the orientation of the header text in Grid: + +**Step 1**: **Create a CSS class with orientation style for grid header cell** + +To `rotate` the header text, you can create a CSS class with the `transform` property that rotates the header text 90 degrees. This class will be added to the header cell using the `customAttributes` property. + +```css +.orientationcss .e-headercelldiv { + transform: rotate(90deg); +} +``` + +**Step 2**: **Add the custom CSS class to the grid column** + +Once you have created the CSS class, you can add it to the particular column by using the `customAttributes` property. This property allows you to add any custom attribute to the grid column. + +For example, to add the orientationcss class to the Freight column, you can use the following code: + +```typescript + +``` + +**Step 3**: **Resize the header cell height** + +After adding the custom CSS class to a column, you need to resize the header cell height so that the rotated header text is fully visible. You can do this by using the following code: + +```typescript + + function setHeaderHeight(args) { + var textWidth = document.querySelector(".orientationcss > div").scrollWidth; // obtain the width of the headerText content. + var headerCell = document.querySelectorAll(".e-headercell"); + for (var i = 0; i < headerCell.length; i++) { + headerCell.item(i).style.height = textWidth + 'px'; // assign the obtained textWidth as the height of the headerCell. + } + } + +``` + +The following example demonstrates how to change the orientation of the **Freight** column header text to 90 degrees: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-orientation/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-orientation/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Change the orientation of header text](../../images/columns/Column-headertext-orientation.png) + + +## Custom tooltip for header + +Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion Grid. This can be useful in situations where there is not enough space to display all of the information related to a column, or when there is additional context that may be helpful. + +To enable custom tooltips for headers, you can use the `BeforeRender` event of the Grid component. This event is triggered for each header cell before it is rendered, allowing you to add a custom tooltip to the header cell using `tooltip` component. + +Here's an example of how to use the `BeforeRender` event to add a custom tooltip to a header cell: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-tooltip/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-tooltip/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Custom tooltip for header](../../images/columns/Column-headertext-tooltip.png) + +> * The [headerCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered. + +## Customize header text styles + +Customizing the grid header styles allows you to modify the appearance of the column header in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS, properties, methods, or event support provided by the Syncfusion ASP.NET Core Grid component. + +### Using CSS + +You can apply styles to the header cells using CSS selectors. The Grid provides a class name for each header cell element, which you can use to apply styles to that specific header cell. The **.e-headercell** class can be used to change the background color and text color of the column header. + +```CSS + .e-grid .e-headercell { + background-color: #a2d6f4; + color:rgb(3, 2, 2); + } +``` +Here's an example that demonstrates how to customize the appearance of a column header in the Grid using **className**. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-using-css/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-using-css/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Display HTML content](../../images/columns/Column-headertext-using-css.png) + +### Using property + +You can customize the appearance of the column headers in Grid using the `customAttributes` property. The `customAttributes` property takes an object with the name-value pair to customize the CSS properties for grid header cells. You can also set multiple CSS properties to the custom class using the `customAttributes` property. + +To customize the header of a column, you can follow the steps below: + +Step 1: Define a CSS class that specifies the styles you want to apply to the header cell of the column. For example, to change the background color and text color of the header cell, define a CSS class like this: + + ```CSS + .e-grid .e-headercell.customcss { + background-color: rgb(43, 205, 226); + color: black; + } + + ``` + +Step 2: Set the **customAttributes** property of the desired column to an object that contains the CSS class **customcss**. This CSS class will be applied to the header cell of the specified column in the Grid. + + ```ts + + ``` + +The following example demonstrates how to customize the appearance of the **OrderID** and **OrderDate** columns using custom attributes. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-using-property/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-using-property/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Using property](../../images/columns/Column-headertext-using-property.png) + +### Using method + +The Syncfusion Grid provides methods to customize the appearance of the grid columns header. + +1. `getColumnHeaderByIndex`: The method is used to customize the appearance of a specific column header in the grid by specifying the index of the column for which you want to customize the header. + +2. `getColumnHeaderByField`: This method is used to retrieve the header element of a specific column by its field name. You can use the retrieved element to customize the appearance of the header element. +3. `getColumnHeaderByUid`: This method is used to retrieve the header element of a specific column by its unique ID. You can use the retrieved element to customize the appearance of the header element. + + 4. `getColumnIndexByField`:This method is used to retrieve the index of a specific column by its field name. You can use the retrieved index to access the header element and customize its appearance. + + 5. `getColumnIndexByUid`: This method is used to retrieve the index of a specific column by its unique ID. You can use the retrieved index to access the header element and customize its appearance. + +Here's an example of how to use these methods to change the style of a specific column header: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-using-method/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-using-method/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Using method](../../images/columns/Column-headertext-using-method.png) + +>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated. + +### Using event + +To customize the appearance of the grid header, you can handle the [headerCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header column. + +The following example demonstrates how to add a `headerCellInfo` event handler to the grid. In the event handler, checked whether the current header column is **Order Date** field and then applied the appropriate CSS class to the cell based on its value. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-using-event/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-using-event/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![Using event](../../images/columns/Column-headertext-using-event.png) + +## How to refresh header + +The refresh header feature in the Syncfusion ASP.NET Core Grid allows you to update the header section of the grid whenever changes are made to the grid's columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment. + +To use the refresh header feature, you can call the `refreshHeader` method of the Grid component. This method updates the grid header with the latest changes made to the columns. + +The following example demonstrates how to use the `refreshHeader` method to update the grid header: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/headertext-refresh/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Headertext.cs" %} +{% include code-snippet/grid/columns/headertext-refresh/headertext.cs %} +{% endhighlight %} +{% endtabs %} + +![How to refresh header](../../images/columns/Column-headertext-refresh-header.png) + +>* The `refreshHeader` method updates only the grid header and not the entire grid. +>* If you want to refresh the entire grid, you can use the `refresh` method instead. + +## How to get header element + +To get the header element in a Syncfusion Grid, you can use one of the following methods: + +1. `getHeaderContent`: This method returns the header div element of the Grid. You can use this method to access the entire header content of the Grid. + + ```ts + var grid = document.getElementById("Grid").ej2_instances[0] + const headerTableElement=grid.getHeaderContent(); + ``` +2. `getHeaderTable`: This method returns the header table element of the Grid. You can use this method to access only the header table of the Grid. + + ```ts + var grid = document.getElementById("Grid").ej2_instances[0] + const headerTableElement = grid.getHeaderTable(); + ``` + +3. `getColumnHeaderByUid`: This method returns the column header element by its unique identifier. + + ```ts + var grid = document.getElementById("Grid").ej2_instances[0] + const columnHeaderElement = grid.getColumnHeaderByUid("e-grid2"); + ``` + +4. `getColumnHeaderByIndex`: This method returns the column header element by its index. + + ```ts + var grid = document.getElementById("Grid").ej2_instances[0] + const columnHeaderElement = grid.getColumnHeaderByIndex(0); + ``` +5. `getColumnHeaderByField`: This method returns the column header element by its field name. + + ```ts + var grid = document.getElementById("Grid").ej2_instances[0] + const columnHeaderElement = grid.getColumnHeaderByField("OrderID"); + ``` + +>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated. \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/headers.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/headers.md deleted file mode 100644 index db7d58c763..0000000000 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/headers.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -layout: post -title: Headers in ##Platform_Name## Grid Component -description: Learn here all about Headers in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Headers -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Headers - -## Header text - -By default, column header title is displayed from column [`field`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Field) value. To override the default header title, you have to define the **headerText** value in the [`headerText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) property of **e-grid-column** tag helper. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/columns/headertext/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Headertext.cs" %} -{% include code-snippet/grid/columns/headertext/headertext.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/columns/headertext/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Headertext.cs" %} -{% include code-snippet/grid/columns/headertext/headertext.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -N> * If both the [`field`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Field) and [`headerText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) are not defined in the column, the column renders with “empty” header text. - -## Header template - -You can customize the header element by using the [`headerTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderTemplate) property of **e-grid-column** tag helper. In this demo, the custom element is rendered for both EmployeeID and BirthDate column headers. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/columns/headertemplate/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Headertemplate.cs" %} -{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/columns/headertemplate/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Headertemplate.cs" %} -{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - -## Change header text dynamically - -You can change the column [`headerText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) dynamically through an external button. - -Follow the given steps to change the header text dynamically: - -**Step 1**: - -Get the column object corresponding to the field name by using the **getColumnByField** method. -Then, change the header text value. - -```typescript -var column = grid.getColumnByField("ShipCity"); // Get column object. -column.headerText = 'Changed Text'; - -``` - -**Step 2**: - -To reflect the changes in the grid header, invoke the **refreshHeader** method. - -```typescript -grid.refreshHeader(); - -``` - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/column-header-text/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Column-header-text.cs" %} -{% include code-snippet/grid/how-to/column-header-text/column-header-text.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/column-header-text/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Column-header-text.cs" %} -{% include code-snippet/grid/how-to/column-header-text/column-header-text.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -## Change the orientation of header text - -You can change the orientation of the header text by using the [`customAttributes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_CustomAttributes) property. - -Ensure the following steps: - -**Step 1**: - -Create a CSS class with orientation style for the grid header cell. - -```css -.orientationcss .e-headercelldiv { - transform: rotate(90deg); -} - -``` - -**Step 2**: - -Add the custom CSS class to a particular column by using the [`customAttributes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_CustomAttributes) property. - -```typescript - - -``` - -**Step 3**: - -Resize the header cell height by using the following code. - -```typescript -function setHeaderHeight(args) { - var textWidth = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content. - var headerCell = document.querySelectorAll(".e-headercell"); - for(var i = 0; i < headerCell.length; i++) { - headerCell.item(i).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell. - } -} - -``` - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/orientation/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Orientation.cs" %} -{% include code-snippet/grid/how-to/orientation/orientation.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/orientation/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Orientation.cs" %} -{% include code-snippet/grid/how-to/orientation/orientation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md index 7131e9627f..a273ce4b1e 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md @@ -8,50 +8,35 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Print in ASP.NET Core Grid component -# Print in ASP.NET Core Grid Component +The printing feature in Syncfusion Grid allows you to easily generate and print a representation of the grid's content for better offline accessibility and documentation. You can enable this feature using either the grid's toolbar or the programmatically available `print` method. -To print the Grid, use the **print** method from grid instance. The print option can be displayed on the [`toolbar`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Toolbar) by adding the **Print** toolbar item. - -{% if page.publishingplatform == "aspnet-core" %} +To add the printing option to the grid's toolbar, simply include the [toolbar](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Toolbar) property in your grid configuration and add the **Print** as toolbar item. This will allow you to directly initiate the printing process while click on the Print item from the toolbar. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/grid/print/print/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Print.cs" %} -{% include code-snippet/grid/print/print/print.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/print/print/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Print.cs" %} +{% highlight c# tabtitle="print.cs" %} {% include code-snippet/grid/print/print/print.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Print](../images/print/print.png) ## Page setup -Some of the print options cannot be configured through JavaScript code. So, you have to customize the layout, paper size, and margin options using the browser page setup dialog. Refer to the following links to know more about the browser page setup: - -* [`Chrome`](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1) -* [`Firefox`](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox) -* [`Safari`](http://www.mintprintables.com/print-tips/adjust-margins-osx/) -* [`IE`](http://www.helpteaching.com/help/print/index.htm) +When printing a webpage, some print options, such as layout, paper size, and margin settings, cannot be configured through JavaScript code. Instead, you need to customize these settings using the browser's page setup dialog. Below are links to the page setup guides for popular web browsers: -## Print using an external button +* [Chrome](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1) +* [Firefox](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox) +* [Safari](http://www.mintprintables.com/print-tips/adjust-margins-osx/) +* [IE](http://www.helpteaching.com/help/print/index.htm) -To print the grid from an external button, invoke the **print** method. +## Print by external button -{% if page.publishingplatform == "aspnet-core" %} +You can print the grid's content using an external button by utilizing the `print` method. This method allows you to trigger the printing process programmatically. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -62,25 +47,11 @@ To print the grid from an external button, invoke the **print** method. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/print/external-btn/razor %} -{% endhighlight %} -{% highlight c# tabtitle="External-btn.cs" %} -{% include code-snippet/grid/print/external-btn/external-btn.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - +![Print by external button](../images/print/print-external.png) +## Print visible Page -## Print the visible page - -By default, the grid prints all the pages. To print the current page alone, set the [`PrintMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_PrintMode) to **CurrentPage**. - -{% if page.publishingplatform == "aspnet-core" %} +By default, the Syncfusion ASP.NET Core Grid prints all the pages of the grid. The [printMode](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_PrintMode) property within the grid grants you control over the printing process. However, if you want to print only the current visible page, you can achieve this by setting the `printMode` property to **CurrentPage**. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -91,31 +62,36 @@ By default, the grid prints all the pages. To print the current page alone, set {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Print visible Page](../images/print/print-current.png) + +## Print only selected records + +By default, the Syncfusion ASP.NET Core Grid prints all the data bound to its dataSource. However, there might be cases where you want to print only the selected records from the grid. The ASP.NET Core Grid provides an option to achieve this by binding to the [beforePrint](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event, where you can replace the rows of the printing grid with the selected rows. + +Below is an example code that demonstrates how to print only the selected records from the ASP.NET Core Grid: {% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/print/current-page/razor %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/print/print-select/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Current-page.cs" %} -{% include code-snippet/grid/print/current-page/current-page.cs %} +{% highlight c# tabtitle="Print.cs" %} +{% include code-snippet/grid/print/print-select/print.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Print only selected records](../images/print/print-select.png) ## Print the hierarchy grid -By default, the grid will be print the master and expanded child grids alone. you can change the print option by using the [`hierarchyPrintMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HierarchyPrintMode) property. The available options are, +The Syncfusion ASP.NET Core Grid allows you to print hierarchy grids, which consist of a parent grid and its child grids. By default, when you print a hierarchy grid, it includes the parent grid and expanded child grids only. However, you can customize the print behavior using the [hierarchyPrintMode](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_HierarchyPrintMode) property. -| Mode | Behavior | -|----------|-------------| -| Expanded | Prints the master grid with expanded child grids. | -| All | Prints the master grid with all the child grids. | -| None | Prints the master grid alone. | +The `hierarchyPrintMode` property in the ASP.NET Core Grid lets you control the printing behavior for hierarchy grids. You can choose from three options: -{% if page.publishingplatform == "aspnet-core" %} +| Mode | Behavior | +| -------- | ------------------------------------------------------------------------------- | +| Expanded | Prints the parent grid with expanded child grids. | +| All | Prints the parent grid with all the child grids, whether expanded or collapsed. | +| None | Prints the parent grid alone. | {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -126,29 +102,13 @@ By default, the grid will be print the master and expanded child grids alone. yo {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/print/hierarchyprint/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Hierarchyprint.cs" %} -{% include code-snippet/grid/print/hierarchyprint/hierarchyprint.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -N> By default, the hierarchy grid prints the expanded child grids from the visible page only. Refer [To Print the expanded state grid from all pages](./how-to/print-the-expanded-state-from-other-pages) +![Print the hierarchy grid](../images/print/print-hierachy.png) ## Print the master detail grid -The Grid has the option to visualize details of a record in another Grid in a master and detailed manner. By default, Grid will print the master grid alone. Instead of this, it is possible to print both the master and detail grids by using the [beforePrint](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event of the Grid. +The Syncfusion ASP.NET Core Grid provides the option to visualize details of a record in another grid in a master-detail manner. By default, when you print a master-detail grid, only the master grid is included in the print output. However, you can customize the print behavior to include both the master and detail grids using the `beforePrint` event of the grid. -In the following sample, the detail grid is added to the `element` argument of the `beforePrint` event, resulting in both the master and detail grids being printed on the page. - -{% if page.publishingplatform == "aspnet-core" %} +The [beforePrint](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event in the ASP.NET Core Grid is triggered before the actual printing process begins. You can handle this event to customize the print output. By adding the detail grid to the `element` argument of the `beforePrint` event, you can ensure that both the master and detail grids are printed on the page. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -159,37 +119,25 @@ In the following sample, the detail grid is added to the `element` argument of t {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/print/masterdetailgrid/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Master-Detail.cs" %} -{% include code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} +![Print the master detail grid](../images/print/print-master.png) ## Print large number of columns -By default, the browser uses A4 as page size option to print pages and to adapt the size of the page the browser print preview will auto-hide the overflowed contents. Hence grid with large number of columns will cut off to adapt the print page. +When printing a grid with a large number of columns, the browser's default page size (usually A4) might not be sufficient to display all the columns properly. As a result, the browser's print preview may automatically hide the overflowed content, leading to a cut-off appearance. -To show large number of columns when printing, adjust the scale option from print option panel based on your content size. +To show a large number of columns when printing, you can adjust the scale option from the print option panel based on your content size. This will allow you to fit the entire grid content within the printable area. -![Scale Option Setting](./images/print-preview.png) +![Scale Option Setting](../images/print-preview.png) -## Show or Hide columns while Printing +## Show or hide columns while printing -You can show a hidden column or hide a visible column while printing the grid using [`toolbarClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ToolbarClick) and [`printComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_PrintComplete) events. +In the Syncfusion ASP.NET Core Grid, you have the flexibility to control the visibility of columns during the printing process. You can dynamically show or hide specific columns using the [toolbarClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ToolbarClick) and [printComplete](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_PrintComplete) events while printing. This capability enhances your control over which columns are included in the printed output, allowing you to tailor the printed grid to your specific needs. -In [`toolbarClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ToolbarClick) event, based on **args.item.id** as **grid_print**. We can show or hide columns by setting [`visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Visible) property of **e-grid-column** to **true** or **false** respectively. +In the `toolbarClick` event, you can show or hide columns by setting `column.visible` property to **true** or **false** respectively. -In [`printComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_PrintComplete) event, We have reversed the state back to the previous state. +In the `printComplete` event, the column visibility state is reset back to its original configuration. -In the below example, we have **CustomerID** as a hidden column in the grid. While printing, we have changed **CustomerID** to visible column and **ShipCity** as hidden column. - -{% if page.publishingplatform == "aspnet-core" %} +Here's a code example that demonstrates how to show a hidden column (CustomerID) and hide a visible column (ShipCity) during printing and then reset their visibility after printing: {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -200,26 +148,42 @@ In the below example, we have **CustomerID** as a hidden column in the grid. Whi {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Show or hide columns while printing](../images/print/print-hide.png) + +## Limitations of printing large data + +Printing a large volume of data all at once in the grid can have certain limitations due to potential browser performance issues. Rendering numerous DOM elements on a single page can lead to browser slowdowns or even hang the browser. The grid offers a solution to manage extensive datasets through virtualization. However, it's important to note that virtualization for both rows and columns is not feasible during the printing process. + +If printing all the data remains a requirement, an alternative approach is recommended. Exporting the grid data to formats like [Excel](https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-export/excel-exporting) or [CSV](https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-export/excel-exporting) or [Pdf](https://ej2.syncfusion.com/aspnetcore/documentation/grid/pdf-export/pdf-export) is advised. This exported data can then be printed using non-web-based applications, mitigating the potential performance challenges associated with printing large datasets directly from the browser. + +## Retain grid styles while printing + +The Syncfusion ASP.NET Core Grid provides a [beforePrint](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event that allows you to customize the appearance and styles of the grid before it is sent to the printer. By handling this event, you can ensure that the grid retains its styles and appearance while printing. {% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/print/show-hide-columns/razor %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/print/print-style/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Show-hide.cs" %} -{% include code-snippet/grid/print/show-hide-columns/show-hide.cs %} +{% highlight c# tabtitle="print.cs" %} +{% include code-snippet/grid/print/print-style/print.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Retain grid styles while printing](../images/print/print-style.png) -## Limitations of Printing Large Data +## Print grid along with other components -When grid contains large number of data, printing all the data at once is not a best option for the browser performance. Because to render all the DOM elements in one page will produce performance issues in the browser. It leads to browser slow down or browser hang. Grid have option to handle large number of data by Virtualization. However while printing, it is not possible to use virtualization for rows and columns. +To print the Syncfusion ASP.NET Core Grid along with another component, such as a chart, you can use the [beforePrint](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event of the grid. In this event, you can clone the content of the other component and append it to the print document. -If printing of all the data is still needed, we suggest to Export the grid to **Excel** or **CSV** or **Pdf** and then print it from another non-web based application. +Here is an example of how to print grid along with chart component: -## See Also +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/print/print-custom/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="print.cs" %} +{% include code-snippet/grid/print/print-custom/print.cs %} +{% endhighlight %} +{% endtabs %} -* [How to Print the expanded state grid from all pages](./how-to/print-the-expanded-state-from-other-pages) +![Print grid along with other components](../images/print/print-custom.png) diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-alignment.gif b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-alignment.gif new file mode 100644 index 0000000000..e7c5666b98 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-alignment.gif differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-all.gif b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-all.gif new file mode 100644 index 0000000000..607f8e23b1 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-all.gif differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-height.gif b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-height.gif new file mode 100644 index 0000000000..050fd9cacc Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-height.gif differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change.png new file mode 100644 index 0000000000..e064471c5d Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-headerTemplate.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-headerTemplate.png new file mode 100644 index 0000000000..019b52f744 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-headerTemplate.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-orientation.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-orientation.png new file mode 100644 index 0000000000..5600e31717 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-orientation.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-refresh-header.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-refresh-header.png new file mode 100644 index 0000000000..63a4dff356 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-refresh-header.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-stacked.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-stacked.png new file mode 100644 index 0000000000..2c47e3c009 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-stacked.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-tooltip.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-tooltip.png new file mode 100644 index 0000000000..50518780df Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-tooltip.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-css.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-css.png new file mode 100644 index 0000000000..dbaccc92c1 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-css.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-event.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-event.png new file mode 100644 index 0000000000..b293db57e2 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-event.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-method.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-method.png new file mode 100644 index 0000000000..0ed60f7287 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-method.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-property.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-property.png new file mode 100644 index 0000000000..d4827aceef Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-property.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-wrap-mode.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-wrap-mode.png new file mode 100644 index 0000000000..9cb20faf9d Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-wrap-mode.png differ diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext.png new file mode 100644 index 0000000000..7486c63f81 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext.png differ diff --git a/ej2-asp-core-mvc/grid/images/print/print-current.png b/ej2-asp-core-mvc/grid/images/print/print-current.png new file mode 100644 index 0000000000..1cc7f12905 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-current.png differ diff --git a/ej2-asp-core-mvc/grid/images/print/print-custom.png b/ej2-asp-core-mvc/grid/images/print/print-custom.png new file mode 100644 index 0000000000..6c5f9d59a5 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-custom.png differ diff --git a/ej2-asp-core-mvc/grid/images/print/print-external.png b/ej2-asp-core-mvc/grid/images/print/print-external.png new file mode 100644 index 0000000000..2bf6f02f50 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-external.png differ diff --git a/ej2-asp-core-mvc/grid/images/print/print-hide.png b/ej2-asp-core-mvc/grid/images/print/print-hide.png new file mode 100644 index 0000000000..360e3a801a Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-hide.png differ diff --git a/ej2-asp-core-mvc/grid/images/print/print-hierachy.png b/ej2-asp-core-mvc/grid/images/print/print-hierachy.png new file mode 100644 index 0000000000..af1ee3e927 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-hierachy.png differ diff --git a/ej2-asp-core-mvc/grid/images/print/print-master.png b/ej2-asp-core-mvc/grid/images/print/print-master.png new file mode 100644 index 0000000000..597d52939c Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-master.png differ diff --git a/ej2-asp-core-mvc/grid/images/print/print-preview.png b/ej2-asp-core-mvc/grid/images/print/print-preview.png new file mode 100644 index 0000000000..832b421681 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-preview.png differ diff --git a/ej2-asp-core-mvc/grid/images/print/print-select.png b/ej2-asp-core-mvc/grid/images/print/print-select.png new file mode 100644 index 0000000000..4f8ec6e2c7 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-select.png differ diff --git a/ej2-asp-core-mvc/grid/images/print/print-style.png b/ej2-asp-core-mvc/grid/images/print/print-style.png new file mode 100644 index 0000000000..9ed9f18402 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-style.png differ diff --git a/ej2-asp-core-mvc/grid/images/print/print.png b/ej2-asp-core-mvc/grid/images/print/print.png new file mode 100644 index 0000000000..b00e9cfd5e Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print.png differ diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 439dbfa4cf..91a7869e91 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -3021,7 +3021,7 @@
  • Release Notes -