diff --git a/aspnet-core/Chart/Axis.md b/aspnet-core/Chart/Axis.md index 48d09822..81042318 100644 --- a/aspnet-core/Chart/Axis.md +++ b/aspnet-core/Chart/Axis.md @@ -1,13 +1,13 @@ --- layout: post title: Chart Axis |Chart | ASP.NET CORE | Syncfusion -description: How to customize the grid lines, tick lines, labels and title of chart axis +description: Learn here about Axis support in Syncfusion Essential ASP.NET Core Chart control, its elements, and more. platform: aspnet-core control: Chart documentation: ug --- -# Axis +# Axis in Essential ASP.NET Core Chart Charts typically have two axes, namely vertical (y) axis and horizontal (x) axis that are used to measure and categorize data. @@ -33,7 +33,7 @@ Category axis displays the text labels instead of numbers. To use the categorica {% endhighlight %} -![](Axis_images/axis_img1.png) +![Category Axis in ASP.NET Core Chart](Axis_images/axis_img1.png) ### Place labels on ticks @@ -52,7 +52,7 @@ Labels in the category axis can be placed on ticks by setting the **LabelPlaceme {% endhighlight %} -![](Axis_images/axis_img2.png) +![Place Labels in ASP.NET Core Chart](Axis_images/axis_img2.png) ### Display labels after a fixed interval @@ -72,7 +72,7 @@ To display the labels after a fixed interval n, set the **Interval** property of {% endhighlight %} -![](Axis_images/axis_img3.png) +![Display Labels in ASP.NET Core Chart](Axis_images/axis_img3.png) ### Indexed Category Axis @@ -100,11 +100,11 @@ Category axis can also plot points based on index value of data points. Index ba {% endhighlight %} -![](Axis_images/axis_img50.png) +![Indexed Category Axis in ASP.NET Core Chart](Axis_images/axis_img50.png) **While Category axis IsIndexed value false** -![](Axis_images/axis_img51.png) +![Indexed Value in ASP.NET Core Chart](Axis_images/axis_img51.png) ## Numeric Axis @@ -121,7 +121,7 @@ Numeric axis supports numerical scale, and displays numbers as labels. To use nu {% endhighlight %} -![](Axis_images/axis_img4.png) +![Numeric Axis in ASP.NET Core Chart](Axis_images/axis_img4.png) ### Customize numeric range @@ -136,7 +136,7 @@ To customize the range of an axis, use the **Range** property. By using this, yo {% endhighlight %} -![](Axis_images/axis_img5.png) +![Customize Numeric Range in ASP.NET Core Chart](Axis_images/axis_img5.png) #### Customizing numeric interval @@ -151,7 +151,7 @@ Axis interval can be customized by using the **Interval** property of the axis r {% endhighlight %} -![](Axis_images/axis_img6.png) +![Customizing Numeric Interval in ASP.NET Core Chart](Axis_images/axis_img6.png) ### Apply padding to the range @@ -175,7 +175,7 @@ When the value of RangePadding property is **None**, padding can not be applied {% endhighlight %} -![](Axis_images/axis_img7.png) +![Apply Padding to the Range in ASP.NET Core Chart](Axis_images/axis_img7.png) #### Round @@ -192,12 +192,12 @@ When the value of RangePadding property is **Round**, the axis range will be rou **Chart before rounding axis range** -![](Axis_images/axis_img8.png) +![Before Rounding Axis Range in ASP.NET Core Chart](Axis_images/axis_img8.png) **Chart after rounding axis range** -![](Axis_images/axis_img9.png) +![After Rounding Axis Range in ASP.NET Core Chart](Axis_images/axis_img9.png) **Additional** @@ -212,7 +212,7 @@ When the value of RangePadding property is **Additional**, the axis range will b {% endhighlight %} -![](Axis_images/axis_img10.png) +![Additional in ASP.NET Core Chart](Axis_images/axis_img10.png) **Normal** @@ -227,7 +227,7 @@ When the value of the RangePadding property is **Normal**, the padding will be a {% endhighlight %} -![](Axis_images/axis_img11.png) +![Normal Range Padding in ASP.NET Core Chart](Axis_images/axis_img11.png) ### Customizing the starting range of the axis @@ -242,7 +242,7 @@ By default, the Y axis value will be calculated from 0 for column, bar, stacking {% endhighlight %} -![](Axis_images/axis_img66.png) +![Customizing Range Axis in ASP.NET Core Chart](Axis_images/axis_img66.png) ## DateTime Axis @@ -259,7 +259,7 @@ Date time axis supports date time scale, and displays the date time values as ax {% endhighlight %} -![](Axis_images/axis_img12.png) +![Date Time Axis in ASP.NET Core Chart](Axis_images/axis_img12.png) ### Customizing date time range @@ -274,7 +274,7 @@ Axis range can be customized by using the Range property. By using this, you can {% endhighlight %} -![](Axis_images/axis_img13.png) +![Customizing Date Time Range in ASP.NET Core Chart](Axis_images/axis_img13.png) ### Date time intervals @@ -301,7 +301,7 @@ Essential chart supports the following types of interval for date time axis: {% endhighlight %} -![](Axis_images/axis_img14.png) +![Date Time Intervals in ASP.NET Core Chart](Axis_images/axis_img14.png) ### Apply padding to the range @@ -323,7 +323,7 @@ When the value of the RangePadding property is **None**, padding will be applied {% endhighlight %} -![](Axis_images/axis_img15.png) +![Apply Padding to Range in ASP.NET Core Chart](Axis_images/axis_img15.png) **Round** @@ -340,12 +340,12 @@ When the value of RangePadding property is **Round**, the axis range will be rou **Chart before rounding axis range** -![](Axis_images/axis_img16.png) +![Before Rounding Axis Range in ASP.NET Core Chart](Axis_images/axis_img16.png) **Chart after rounding axis range** -![](Axis_images/axis_img17.png) +![After Rounding Axis Range in ASP.NET Core Chart](Axis_images/axis_img17.png) **Additional** @@ -360,7 +360,7 @@ When the value of the RangePadding property is **Additional**, the range will be {% endhighlight %} -![](Axis_images/axis_img18.png) +![Range Padding in ASP.NET Core Chart](Axis_images/axis_img18.png) ## DateTime Category Axis @@ -377,7 +377,7 @@ DateTime category axis takes date time value as input, but behaves like category {% endhighlight %} -![](Axis_images/axis_img63.png) +![DateTime Category Axis in ASP.NET Core Chart](Axis_images/axis_img63.png) ### Customizing DateTime Category range @@ -394,7 +394,7 @@ Axis range can be customized by using the **range** property. By using this, you {% endhighlight %} -![](Axis_images/axis_img64.png) +![Customizing Date Time Category Range in ASP.NET Core Chart](Axis_images/axis_img64.png) ### DateTime category intervals @@ -421,7 +421,7 @@ Essential Chart supports the following types of interval for date time category {% endhighlight %} -![](Axis_images/axis_img65.png) +![Date Time Category Intervals in ASP.NET Core Chart](Axis_images/axis_img65.png) ## Logarithmic Axis @@ -437,7 +437,7 @@ Logarithmic axis supports logarithmic scale, and it is used in visualizing when {% endhighlight %} -![](Axis_images/axis_img19.png) +![Logarithmic Axis in ASP.NET Core Chart](Axis_images/axis_img19.png) ### Customize logarithmic range @@ -453,7 +453,7 @@ Logarithmic range can be customized by using the **Range** property. By using th {% endhighlight %} -![](Axis_images/axis_img20.png) +![Customize Logarithmic Range in ASP.NET Core Chart](Axis_images/axis_img20.png) ### Logarithmic base @@ -470,7 +470,7 @@ Logarithmic base can be customized by using the **LogBase** property of the axis {% endhighlight %} -![](Axis_images/axis_img21.png) +![Logarithmic Base in ASP.NET Core Chart](Axis_images/axis_img21.png) ### Logarithmic interval @@ -487,7 +487,7 @@ Logarithmic axis interval can be customized by using the Interval property of th {% endhighlight %} -![](Axis_images/axis_img22.png) +![Logarithmic Interval in ASP.NET Core Chart](Axis_images/axis_img22.png) ## Label Format @@ -506,7 +506,7 @@ Numeric labels can be formatted by using the **LabelFormat** property. Numeric v {% endhighlight %} -![](Axis_images/axis_img23.png) +![Format Numeric Labels in ASP.NET Core Chart](Axis_images/axis_img23.png) The following table describes the result of some commonly used label formats on numeric values. @@ -583,7 +583,7 @@ Date time labels can be formatted by using the **LabelFormat** property of the a {% endhighlight %} -![](Axis_images/axis_img24.png) +![Format Date Time Values in ASP.NET Core Chart](Axis_images/axis_img24.png) The following table describes the result some common date time formats to the labelFormat property. @@ -647,7 +647,7 @@ Prefix and suffix can be added to the category labels by using the **LabelFormat {% endhighlight %} -![](Axis_images/axis_img25.png) +![Custom Labels Format in ASP.NET Core Chart](Axis_images/axis_img25.png) ## Common axis features @@ -668,7 +668,7 @@ Axis can be positioned anywhere in the chart area by using the **CrossesAt** pro {% endhighlight %} -![](Axis_images/axis_img52.png) +![Axis Crossing in ASP.NET Core Chart](Axis_images/axis_img52.png) #### Crossing a specific Axis @@ -685,7 +685,7 @@ The **CrossesInAxis** property takes axis name as input and determines the axis {% endhighlight %} -![](Axis_images/axis_img53.png) +![Crossing A Specific Axis in ASP.NET Core Chart](Axis_images/axis_img53.png) Axis will be placed in the opposite side if value of **CrossesAt** property is greater than the maximum value of crossing axis (axis name provided through **CrossesInAxis** property or primary Y axis for horizontal axis). @@ -699,7 +699,7 @@ Axis will be placed in the opposite side if value of **CrossesAt** property is g {% endhighlight %} -![](Axis_images/axis_img54.png) +![Crosses Axis in ASP.NET Core Chart](Axis_images/axis_img54.png) #### Positioning the axis elements while crossing @@ -716,7 +716,7 @@ The `ShowNextToAxisLine` property is used for controlling the axis elements move The axis is placed at the crossing value without the axis elements -![](Axis_images/axis_img67.png) +![Positioning the Axis Elements in ASP.NET Core Chart](Axis_images/axis_img67.png) ### Axis Visibility @@ -733,7 +733,7 @@ Axis visibility can be controlled by using the **Visible** property of the axis. {% endhighlight %} -![](Axis_images/axis_img26.png) +![Axis Visibility in ASP.NET Core Chart](Axis_images/axis_img26.png) ### Axis title @@ -754,7 +754,7 @@ The **Title** property in the axis provides options to customize the text and fo {% endhighlight %} -![](Axis_images/axis_img27.png) +![Axis Title in ASP.NET Core Chart](Axis_images/axis_img27.png) You can modify the position of the axis title either inside or outside the chart area by using the **Position** property. By default, it will be placed outside the chart area. In addition, you can also change the alignment of the title to near, far, or center by using **Alignment** property. By using **Offset** property, you can change the position with respect to pixels. @@ -769,7 +769,7 @@ You can modify the position of the axis title either inside or outside the chart {% endhighlight %} -![](Axis_images/axis_img62.png) +![Axis Title Position in ASP.NET Core Chart](Axis_images/axis_img62.png) ### Label customization @@ -787,7 +787,7 @@ The **Font** property of the axis provides options to customize the FontFamily, {% endhighlight %} -![](Axis_images/axis_img28.png) +![Labels Customization in ASP.NET Core Chart](Axis_images/axis_img28.png) ### Label and tick positioning @@ -805,7 +805,7 @@ Axis labels and ticks can be positioned inside or outside the chart area by usin {% endhighlight %} -![](Axis_images/axis_img29.png) +![Label and Tick Positioning in ASP.NET Core Chart](Axis_images/axis_img29.png) ### Edge labels placement @@ -825,12 +825,12 @@ Labels with long text at the edges of an axis may appear partially outside the c **Chart before setting edge label placement to X-axis** -![](Axis_images/axis_img30.png) +![Edge Labels Placement in ASP.NET Core Chart](Axis_images/axis_img30.png) **Chart after setting edge label placement to X-axis** -![](Axis_images/axis_img31.png) +![After Setting Edge Label Placement in ASP.NET Core Chart](Axis_images/axis_img31.png) ### Grid lines customization @@ -850,7 +850,7 @@ The **MajorGridLines** and **MinorGridLines** properties in the axis are used to {% endhighlight %} -![](Axis_images/axis_img32.png) +![Grid Lines Customization in ASP.NET Core Chart](Axis_images/axis_img32.png) ### Tick lines customization @@ -870,7 +870,7 @@ The **MajorTickLines** and **MinorTickLines** properties in the axis are used to {% endhighlight %} -![](Axis_images/axis_img33.png) +![Tick Lines Customization in ASP.NET Core Chart](Axis_images/axis_img33.png) ### Inversing axis @@ -890,12 +890,12 @@ Axis can be inversed by using the **IsInversed** property of the axis. The defau **Chart before inversing the axes** -![](Axis_images/axis_img34.png) +![Befoere Inversing Axis in ASP.NET Core Chart](Axis_images/axis_img34.png) **Chart after inversing the axes** -![](Axis_images/axis_img35.png) +![After Inversing Axis in ASP.NET Core Chart](Axis_images/axis_img35.png) ### Place axes at the opposite side @@ -915,12 +915,12 @@ The **OpposedPosition** property of axis can be used to place the axis at the op **Chart with X and Y axes at normal position** -![](Axis_images/axis_img36.png) +![XY Axis at Normal Position in ASP.NET Core Chart](Axis_images/axis_img36.png) **Chart with Y-axis at opposed position** -![](Axis_images/axis_img37.png) +![Y Axis at Opposed Position in ASP.NET Core Chart](Axis_images/axis_img37.png) ### Maximum number of labels per 100 pixels @@ -940,18 +940,18 @@ Maximum of 3 labels are displayed for each 100 pixels in the axis, by default. T **Chart before setting maximum labels per 100 pixels** -![](Axis_images/axis_img38.png) +![Before Setting Maximum Labels in ASP.NET Core Chart](Axis_images/axis_img38.png) **Chart after setting maximum labels one per 100 pixels** -![](Axis_images/axis_img39.png) +![After Setting Maximum Labels in ASP.NET Core Chart](Axis_images/axis_img39.png) ## Multiple Axis Multiple axes can be used in the chart, and chart area can be split into multiple panes to draw multiple series with multiple axes. -![](Axis_images/axis_img40.png) +![Multiple Axis in ASP.NET Core Chart](Axis_images/axis_img40.png) An additional horizontal or vertical axis can be added to the chart by adding an axis instance to the **Axes** collection. You can associate it to a series by specifying name of the axis to the **XAxisName** or **YAxisName** property of the series. @@ -972,7 +972,7 @@ An additional horizontal or vertical axis can be added to the chart by adding an {% endhighlight %} -![](Axis_images/axis_img41.png) +![Additional Horizontal and Vertical Axis in ASP.NET Core Chart](Axis_images/axis_img41.png) ## Smart axis labels @@ -988,41 +988,41 @@ When the Axis labels overlap with each other based on the chart dimensions and l {% endhighlight %} -![](Axis_images/axis_img42.png) +![Smart Axis Labels in ASP.NET Core Chart](Axis_images/axis_img42.png) The following screenshot displays the result when the LabelIntersectAction property is set to **Rotate45**. -![](Axis_images/axis_img43.png) +![Rotate 45 in ASP.NET Core Chart](Axis_images/axis_img43.png) The following screenshot displays the result when the LabelIntersectAction property is set to **Rotate90**. -![](Axis_images/axis_img44.png) +![Rotate 90 in ASP.NET Core Chart](Axis_images/axis_img44.png) The following screenshot displays the result when the LabelIntersectAction property is set to **Wrap**. -![](Axis_images/axis_img45.png) +![Wrap Labels in ASP.NET Core Chart](Axis_images/axis_img45.png) The following screenshot displays the result when the LabelIntersectAction property is set to **trim**. -![](Axis_images/axis_img46.png) +![Trim Labels in ASP.NET Core Char](Axis_images/axis_img46.png) The following screenshot displays the result when the LabelIntersectAction property is set to **Hide**. -![](Axis_images/axis_img47.png) +![Hide labels in ASP.NET Core Chart](Axis_images/axis_img47.png) The following screenshot displays the result when the LabelIntersectAction property is set to **MultipleRows**. -![](Axis_images/axis_img48.png) +![Multiple Rows in ASP.NET Core Chart](Axis_images/axis_img48.png) The following screenshot displays the result when the LabelIntersectAction property is set to **WrapByWord**. -![](/js/Chart/Axis_images/axis_img49.png) +![Wrap by Word in ASP.NET Core Chart](/js/Chart/Axis_images/axis_img49.png) ## Multi-level Labels Axis can be customized with multiple levels of labels by using the **MultiLevelLabels** property. These labels are placed based on the start and end range values. You can add any number of labels to an axis. @@ -1041,7 +1041,7 @@ Axis can be customized with multiple levels of labels by using the **MultiLevelL {% endhighlight %} -![](Axis_images/axis_img57.png) +![Multi level Labels in ASP.NET Core Chart](Axis_images/axis_img57.png) ### Customizing the multi-Level labels @@ -1062,7 +1062,7 @@ The text of the labels can be customized by using the **Text** property. {% endhighlight %} -![](Axis_images/axis_img59.png) +![Customizing Multi Level Labels in ASP.NET Core Chart](Axis_images/axis_img59.png) You can change the alignment of the text to far, near, or center position by using the **TextAlignment** property. By default, the text will be aligned at center. @@ -1081,7 +1081,7 @@ You can change the alignment of the text to far, near, or center position by usi {% endhighlight %} -![](Axis_images/axis_img60.png) +![Wrap Text in ASP.NET Core Chart](Axis_images/axis_img60.png) You can trim, wrap, or wrapAndTrim the text if it exceeds the maximum text width value by using the **TextOverflow** property. @@ -1102,6 +1102,6 @@ You can trim, wrap, or wrapAndTrim the text if it exceeds the maximum text width The following screenshot illustrates the trimmed multi-level labels. -![](Axis_images/axis_img61.png) +![Trimmed Multi Level Labels in ASP.NET Core Chart](Axis_images/axis_img61.png) And these labels can be placed in various rows by using the **Level** property. \ No newline at end of file diff --git a/aspnet-core/Gantt/Customizations.md b/aspnet-core/Gantt/Customizations.md index 1bda8701..af06b462 100644 --- a/aspnet-core/Gantt/Customizations.md +++ b/aspnet-core/Gantt/Customizations.md @@ -1,13 +1,13 @@ --- layout: post -title: Customization -description: Customization +title: Customization in ASP.NET Core Gantt Control | Syncfusion +description: Learn here about Customization support in Syncfusion Essential ASP.NET Core Gantt control, its elements, and more. platform: aspnet-core control: Gantt documentation: ug --- -# Customizations +# Customizations in Essential ASP.NET Core Gantt Gantt provides support for the following UI customizations, @@ -80,7 +80,7 @@ The DOM structure and class names mentioned in the above code snippet is mandato The following screenshot shows the template for taskbars in Gantt. -![](Customization_images/Customization_img1.png) +![Taskbar Template in ASP.NET Core Gantt](Customization_images/Customization_img1.png) ## Task label template @@ -104,7 +104,7 @@ The following code example explains how to set task name field as right label an The following screenshot shows Gantt with task labels mapped with different data source fields -![](Customization_images/Customization_img4.png) +![Mapping Data Source Fields as Task Labels in ASP.NET Core Gantt](Customization_images/Customization_img4.png) ### Task label templates @@ -150,7 +150,7 @@ It is possible to customize the task labels with templates, by using `right-task The following screenshot shows Gantt with task label templates. -![](Customization_images/Customization_img2.png) +![Task Labels Template in ASP.NET Core Gantt](Customization_images/Customization_img2.png) ## Tooltip template @@ -209,7 +209,7 @@ The following code example shows how to customize the tooltip. The following screenshot shows Gantt with task tooltip customization. -![](Customization_images/Customization_img3.png) +![Taskbar Tooltip ASP.NET Core Gantt](Customization_images/Customization_img3.png) ### Dependency tooltip @@ -256,7 +256,7 @@ The default dependency tooltip in Gantt can be customized by using `predecessor- {% endhighlight %} The following screenshot show the output of above code example. -![](Customization_images/Customization_img8.png) +![Dependency Tooltip in ASP.NET Core Gantt](Customization_images/Customization_img8.png) ### Cell tooltip @@ -301,7 +301,7 @@ TreeGrid part tooltip can also be customized using `cell-tooltip-template` prope {% endhighlight %} -![](Customization_images/Customization_img5.png) +![Cell Tooltip in ASP.NET Core Gantt](Customization_images/Customization_img5.png) ### Taskbar Editing Tooltip @@ -357,7 +357,7 @@ Taskbar editing tooltip can be customized by using `taskbar-editing-tooltip-temp {% endhighlight %} The below screenshot shows the output of above code example. -![](Customization_images/Customization_img6.png) +![Customize Taskbar Editing Toolbar in ASP.NET Core Gantt](Customization_images/Customization_img6.png) #### Customize progress bar editing tooltip @@ -385,4 +385,4 @@ Progress bar editing tooltip can be customized by using `progressbar-tooltip-tem {% endhighlight %} The below screenshot shows the output of above code example. -![](Customization_images/Customization_img7.png) +![Customize Progress Bar Editing Toolbar in ASP.NET Core Gantt](Customization_images/Customization_img7.png) diff --git a/aspnet-core/GettingStarted/Getting-Started-Linux-2-0-0.md b/aspnet-core/GettingStarted/Getting-Started-Linux-2-0-0.md index 1b57cd9e..cd3903c4 100644 --- a/aspnet-core/GettingStarted/Getting-Started-Linux-2-0-0.md +++ b/aspnet-core/GettingStarted/Getting-Started-Linux-2-0-0.md @@ -1,14 +1,14 @@ --- layout: post title: Getting Started on Linux| ASP.NET Core | Syncfusion -description: Getting Started on Linux. +description: Learn here about Getting Started on Linux in Syncfusion Essential ASP.NET Core Application, its elements, and more. platform: aspnet-core control: Common documentation: ug --- -# Getting Started on Linux +# Getting Started on Linux with ASP.NET Core Application > Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key#aspnet-core) to know about registering Syncfusion license key in your ASP.NET Core application to use our components. @@ -163,7 +163,7 @@ mkdir Sample {% endhighlight %} - ![](getting-started-images-linux/getting_started_2_1.png) + ![Run Command in ASP.NET Core Application](getting-started-images-linux/getting_started_2_1.png) * Then run the below mentioned command to create a new web application. After command execution the project will be created within your folder. @@ -174,7 +174,7 @@ mkdir Sample {% endhighlight %} - ![](getting-started-images-linux/getting_started_2_2.png) + ![Create New Web in ASP.NET Core Application](getting-started-images-linux/getting_started_2_2.png) #### Building Projects with Yeoman @@ -210,17 +210,17 @@ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - * From the list of available projects, select the *Web Application Basic* [without Membership and Authorization] by using arrow keys. - ![](getting-started-images-linux/getting_started_2_3.png) + ![Select Web in ASP.NET Core Application](getting-started-images-linux/getting_started_2_3.png) * And then provide the project name or simply press the ‘Enter’ key to create the project with default name. - ![](getting-started-images-linux/getting_started_2_4.png) + ![Create Project with Default in ASP.NET Core Application](getting-started-images-linux/getting_started_2_4.png) ### Configuring Syncfusion Components * Open Visual Studio Code and open your Sample application folder using **Open Folder** option. Now your project folder is loaded in Visual Studio Code application. - ![](getting-started-images-linux/getting_started_2_5.png) + ![Open Folder in ASP.NET Core Application](getting-started-images-linux/getting_started_2_5.png) > **bower.json** file has been deprecated from the latest version of DotNetCore 2.1. We have used syncfusion NPM packages and gulp task runner to download the necessary syncfusion scripts and CSS files into wwwroot folder. @@ -254,7 +254,7 @@ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - {% endhighlight %} -![](getting-started-images-linux/getting_started_2_6.png) +![Type Command in ASP.NET Core Application](getting-started-images-linux/getting_started_2_6.png) * After **package.json** file is created. Remove the content in that file and include the following dependencies. @@ -275,7 +275,7 @@ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - {% endhighlight %} - ![](getting-started-images-linux/getting_started_2_7.png) + ![Remove Content in ASP.NET Core Application](getting-started-images-linux/getting_started_2_7.png) * Now, run the following commands to download syncfusion scripts and CSS in the node_modules directory. @@ -339,19 +339,19 @@ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - To configure Visual Studio Code to use Gulp as task runner, Press **Ctrl+Shift+P** to bring up the command palette. Now type **Configure Task** and select **Create task.json file from template**. - ![](getting-started-images-linux/getting_started_2_9.png) + ![Configure Visual Studio Code in ASP.NET Core Application](getting-started-images-linux/getting_started_2_9.png) * This will create **task.json** file in .vscode directory. -![](getting-started-images-linux/getting_started_2_10.png) +![Create Task json in ASP.NET Core Application](getting-started-images-linux/getting_started_2_10.png) * Once again, press **Ctrl+Shift+P** to bring up the command palette. Type "Run Task" and select it, which will bring up a list of tasks configured in Gulp. Choose the Gulp Task **copy** to run gulp task to copy necessary script and CSS files from **node_modules** directory to **wwwroot** directory. - ![](getting-started-images-linux/getting_started_2_11.png) + ![ Commad Palette in ASP.NET Core Application](getting-started-images-linux/getting_started_2_11.png) * By the same way,type "Run Task" and select each gulp task mentioned in **gulpfile.js** to copy the scripts and CSS from the required package in **node_modules** directory to **wwwroot** directory. -![](getting-started-images-linux/getting_started_2_15.png) +![Run Task in ASP.NET Core Application](getting-started-images-linux/getting_started_2_15.png) * Now refer our Syncfusion package **Syncfusion.EJ.AspNet.Core** into your application for our components deployment. The packages configuration & installation guidelines will be documented [here](https://help.syncfusion.com/extension/syncfusion-nuget-packages/nuget-install-and-configuration#confuguring-syncfusion-nuget-packages-from-command-line-in-linuxmac). @@ -363,7 +363,7 @@ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - {% endhighlight %} - ![](getting-started-images-linux/getting_started_2_12.png) + ![Install NuGet Packages in in ASP.NET Core Application](getting-started-images-linux/getting_started_2_12.png) > The ASP.NET Core NuGet packages versioning has been streamlined as 16.1.0.32 in shorter than older versioning (16.1600.0.32) from Volume 1, 2018 service pack 1 release (16.1.0.32). Since all the framework version wise assemblies are grouped into a single package. @@ -387,7 +387,7 @@ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - {% endhighlight %} - ![](getting-started-images-linux/getting_started_2_13.png) + ![Open Terminal Window in in ASP.NET Core Application](getting-started-images-linux/getting_started_2_13.png) * Now refer the necessary scripts and CSS files in your **_layout.cshtml** page. @@ -443,4 +443,4 @@ N> jQuery.easing external dependency has been removed from version 14.3.0.49 onw * Then open your browser and paste the listening port **localhost:5000** to view your sample in browser. - ![](getting-started-images-linux/getting_started_2_14.png) \ No newline at end of file + ![Open Browser and Paste the Listening Port in in ASP.NET Core Application](getting-started-images-linux/getting_started_2_14.png) \ No newline at end of file diff --git a/aspnet-core/Grid/Sorting.md b/aspnet-core/Grid/Sorting.md index b541366b..d65631d9 100644 --- a/aspnet-core/Grid/Sorting.md +++ b/aspnet-core/Grid/Sorting.md @@ -1,12 +1,12 @@ --- layout: post -title: Sorting with Grid widget for Syncfusion Essential Core -description: How to enable sorting and its functionalities +title: Sorting in ASP.NET Core Grid Control | Syncfusion +description: Learn here about Sorting support in Syncfusion Essential ASP.NET Core Grid control, its elements, and more. platform: aspnet-core control: Grid documentation: ug --- -# Sorting +# Sorting in Essential ASP.NET Core Grid The Grid control has support to sort data bound columns in ascending or descending order. This can be achieved by setting the `allow-sorting` property as `true`. @@ -44,7 +44,7 @@ public partial class GridController : Controller {% endtabs %} The following output is displayed as a result of the above code example. -![](Sorting_images/Sorting_img1.png) +![Sorting in ASP.NET Core Grid](Sorting_images/Sorting_img1.png) ## Initial sorting @@ -91,7 +91,7 @@ public partial class GridController : Controller The following output is displayed as a result of the above code example. -![](Sorting_images/Sorting_img2.png) +![Initial Sorting in ASP.NET Core Grid](Sorting_images/Sorting_img2.png) ## Multi-column sorting @@ -138,7 +138,7 @@ public partial class GridController : Controller The following output is displayed as a result of the above code example. -![](Sorting_images/Sorting_img3.png) +![Multi Column Sorting in ASP.NET Core Grid](Sorting_images/Sorting_img3.png) ## Stable sorting @@ -188,7 +188,7 @@ public partial class GridController : Controller The following output is displayed as a result of the above code example. -![](Sorting_images/Sorting_img4.png) +![Stable Sorting in ASP.NET Core Grid](Sorting_images/Sorting_img4.png) ## Touch options @@ -229,7 +229,7 @@ public partial class GridController : Controller The following output is displayed as a result of the above code example. -![](Sorting_images/Sorting_img5.png) +![Touch Option in ASP.NET Core Grid](Sorting_images/Sorting_img5.png) N> To get the sorted data of the grid after sorting a column you can refer the [`How To`](https://help.syncfusion.com/aspnet-core/grid/how-to "Getting Datasource of Grid in Sorted Order"). diff --git a/aspnet-core/Overview.md b/aspnet-core/Overview.md index 5664f355..b3d2da5f 100644 --- a/aspnet-core/Overview.md +++ b/aspnet-core/Overview.md @@ -25,9 +25,9 @@ Essential JS is a comprehensive collection of over 80 enterprise-grade HTML5 Jav * The [Knowledge Base](https://www.syncfusion.com/kb/aspnetcore) section contains responses to some of the most common questions that other customers have asked us in the past so this would be a good place to search for topics that are not covered in the user guide. -* Similar to the [Knowledge Base](http://www.syncfusion.com/kb/aspnetcore), the [forum](https://www.syncfusion.com/forums/aspnetcore) section also contains responses to questions that other customers have asked us in the past. +* Similar to the [Knowledge Base](https://www.syncfusion.com/kb/aspnetcore), the [forum](https://www.syncfusion.com/forums/aspnetcore) section also contains responses to questions that other customers have asked us in the past. ## Create a support incident -If you are still not able to find the information that you are looking for in the self-help resources mentioned above then please [contact us](http://www.syncfusion.com/support/) by creating a support ticket. +If you are still not able to find the information that you are looking for in the self-help resources mentioned above then please [contact us](https://www.syncfusion.com/support/) by creating a support ticket.