diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/start-trial-download-offline-installer.PNG b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/start-trial-download-offline-installer.PNG index 16cce7ebc1..a8b5452f06 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/start-trial-download-offline-installer.PNG and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/start-trial-download-offline-installer.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/trial-confirmation.PNG b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/trial-confirmation.PNG index 95484ec00d..295f714b19 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/trial-confirmation.PNG and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/trial-confirmation.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-1.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-1.png index 93ffa5904e..7812176c22 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-1.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-1.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-2.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-2.png index c1fa28ec03..9fc0bbd3f6 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-2.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-2.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-3.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-3.png index 992e2b738b..25893ba0fa 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-3.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-3.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-4.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-4.png index fe9e88b2ef..35e04ba87b 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-4.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-4.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-5.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-5.png index b6cfb8d4e4..d07e8aa7ce 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-5.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-5.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-7.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-7.png index ca16efb226..b7b611b63d 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-7.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-7.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-8.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-8.png index f86116fdda..954d8065b4 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-8.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-8.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-9.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-9.png index e71de5a546..d5aa99f515 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-9.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/offline-installer/images/webofflineinstaller-9.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/start-trial-download-web-installer.PNG b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/start-trial-download-web-installer.PNG index 4e200c6ec0..3f5e7d3941 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/start-trial-download-web-installer.PNG and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/start-trial-download-web-installer.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/trial-confirmation.PNG b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/trial-confirmation.PNG index f0b490d697..448e3247f8 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/trial-confirmation.PNG and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/trial-confirmation.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-1.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-1.png index 7c07f297b1..ccb80b8492 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-1.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-1.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-10.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-10.png index 9bbf4dc0d0..d695a5dc55 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-10.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-10.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-11.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-11.png index 03c6798bed..5b7f08468f 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-11.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-11.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-12.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-12.png index 52deb115b4..a847961739 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-12.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-12.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-13.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-13.png index 57e63c2dc9..bc9bdea448 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-13.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-13.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-2.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-2.png index e265d7eed9..022374aea7 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-2.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-2.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-3.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-3.png index f0b36aaf79..7809a328f7 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-3.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-3.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-4.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-4.png index dccf77ee57..1c42b7ade0 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-4.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-4.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-5.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-5.png index 231641288b..ee38862669 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-5.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-5.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-6.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-6.png index 0165cff11e..fdd96435f3 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-6.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-6.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-8.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-8.png index 5054a22675..8400e8e0d0 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-8.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-8.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-9.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-9.png index 5e7573ce55..6e1cb1ff47 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-9.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-9.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-2.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-2.png index d8ac9b479f..f31b55a4ed 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-2.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-2.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-3.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-3.png index f0b36aaf79..7809a328f7 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-3.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-3.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-4.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-4.png index 0165cff11e..fdd96435f3 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-4.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-4.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-5.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-5.png index fbe8250b77..031d346a6f 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-5.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-5.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-6.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-6.png index 5e7573ce55..d2ef1c1afb 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-6.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-6.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-7.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-7.png index af304f6532..47ccfd4988 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-7.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-7.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-8.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-8.png index dd1508e218..245df1ef75 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-8.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/installation/web-installer/images/webinstaller-uninstall-8.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/licensing/images/get-community-license-key.png b/ej2-asp-core-mvc/EJ2_ASP.MVC/licensing/images/get-community-license-key.png index dd03f6e344..36f39ebc80 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.MVC/licensing/images/get-community-license-key.png and b/ej2-asp-core-mvc/EJ2_ASP.MVC/licensing/images/get-community-license-key.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Download.PNG b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Download.PNG index ee7eb527ce..ed5adb5470 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Download.PNG and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Download.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/start-trial-download-offline-installer.PNG b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/start-trial-download-offline-installer.PNG index c57e748e4e..a247f74b6e 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/start-trial-download-offline-installer.PNG and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/start-trial-download-offline-installer.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/trial-confirmation.PNG b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/trial-confirmation.PNG index 175f0fedfb..fc16e589f6 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/trial-confirmation.PNG and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/trial-confirmation.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-1.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-1.png index 09f98343c6..0c5995e044 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-1.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-1.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-2.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-2.png index ae71dbca24..5dc7a978ef 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-2.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-2.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-3.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-3.png index 29236f3c44..c52e30f5a1 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-3.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-3.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-4.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-4.png index 3372cca610..6b8bfae497 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-4.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-4.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-5.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-5.png index 182eca4fd4..2a408bfb11 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-5.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-5.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-7.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-7.png index 6ef3941b59..d55e39b95a 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-7.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-7.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-8.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-8.png index 8fdddae9d7..6eba00acf7 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-8.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-8.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-9.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-9.png index af18c5a48d..d272471e7f 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-9.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/offline-9.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/start-trial-download-offline-installer.PNG b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/start-trial-download-offline-installer.PNG index a2c34bc26b..9078820666 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/start-trial-download-offline-installer.PNG and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/start-trial-download-offline-installer.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/trial-confirmation.PNG b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/trial-confirmation.PNG index 5915bf6af1..4b41165d5b 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/trial-confirmation.PNG and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/offline-installer/images/trial-confirmation.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-1.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-1.png index a17bfd00c2..03eda292aa 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-1.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-1.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-10.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-10.png index 9bbf4dc0d0..d695a5dc55 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-10.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-10.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-11.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-11.png index 50c2dbed93..1f66d2820e 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-11.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-11.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-12.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-12.png index 03c767e475..10fb00a568 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-12.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-12.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-2.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-2.png index 0c74f8724b..2d6d226429 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-2.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-2.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-3.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-3.png index 39c3abf8eb..ad8fb3c535 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-3.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-3.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-4.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-4.png index 0eb48f0510..7cf2b20dd3 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-4.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-4.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-5.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-5.png index b728276a49..ee38862669 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-5.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-5.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-6.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-6.png index 2526040ed5..cebdc0215f 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-6.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-6.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-8.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-8.png index 6aa4acf962..71b203e03d 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-8.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-8.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-9.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-9.png index 3708137604..6619390432 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-9.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-Installation-9.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-1.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-1.png index a17bfd00c2..03eda292aa 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-1.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-1.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-10.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-10.png index 16e7df8f37..d695a5dc55 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-10.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-10.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-11.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-11.png index d62655ec65..85ca70b80a 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-11.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-11.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-12.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-12.png index 821f719297..e506a09100 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-12.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-12.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-2.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-2.png index 0c74f8724b..2d6d226429 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-2.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-2.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-4.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-4.png index 0eb48f0510..7cf2b20dd3 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-4.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-4.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-5.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-5.png index 39c3abf8eb..ad8fb3c535 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-5.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-5.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-6.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-6.png index 2526040ed5..cebdc0215f 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-6.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-6.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-8.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-8.png index 6aa4acf962..71b203e03d 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-8.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-8.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-9.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-9.png index 3708137604..6619390432 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-9.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/Webinstaller-uninstallation-9.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/start-trial-download-web-installer.PNG b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/start-trial-download-web-installer.PNG index f31571cfba..6984744c10 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/start-trial-download-web-installer.PNG and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/start-trial-download-web-installer.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/trial-confirmation.PNG b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/trial-confirmation.PNG index c693158e8c..41ffa0132a 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/trial-confirmation.PNG and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/web-installer/images/trial-confirmation.PNG differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/licensing/images/get-community-license-key.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/licensing/images/get-community-license-key.png index dd03f6e344..36f39ebc80 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/licensing/images/get-community-license-key.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/licensing/images/get-community-license-key.png differ diff --git a/ej2-asp-core-mvc/circular-gauge/gauge-animation.md b/ej2-asp-core-mvc/circular-gauge/gauge-animation.md new file mode 100644 index 0000000000..c1a0d4e8fc --- /dev/null +++ b/ej2-asp-core-mvc/circular-gauge/gauge-animation.md @@ -0,0 +1,63 @@ +--- +layout: post +title: Animation in ##Platform_Name## Circular Gauge component | Syncfusion +description: Learn here all about animation in the Syncfusion ##Platform_Name## Circular Gauge component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Circular Gauge +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Animation in Circular Gauge component + +{% if page.publishingplatform == "aspnet-core" %} + +All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.CircularGauge.CircularGauge.html#Syncfusion_EJ2_CircularGauge_CircularGauge_AnimationDuration) property. The animation for the Circular Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. + +1. The axis line will be animated in the rendering direction (clockwise or anticlockwise). +2. Each tick line and label will then be animated. +3. If available, ranges will be animated. +4. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetcore/documentation/circular-gauge/gauge-pointers#animation). +5. If available, annotations will be animated. + +The animation of the Circular Gauge is demonstrated in the following example. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/circulargauge/gauge-animation/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Animation.cs" %} +{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %} +{% endhighlight %} +{% endtabs %} + +![Circular Gauge with Animation](../circular-gauge/images/animation.gif) + +> Only the pointer of the Circular Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetcore/documentation/circular-gauge/gauge-pointers#animation) to enable only pointer animation. + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.CircularGauge.CircularGauge.html#Syncfusion_EJ2_CircularGauge_CircularGauge_AnimationDuration) property. The animation for the Circular Gauge is enabled when the `AnimationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `AnimationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. + +1. The axis line will be animated in the rendering direction (clockwise or anticlockwise). +2. Each tick line and label will then be animated. +3. If available, ranges will be animated. +4. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetmvc/documentation/circular-gauge/gauge-pointers#animation). +5. If available, annotations will be animated. + +The animation of the Circular Gauge is demonstrated in the following example. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/circulargauge/gauge-animation/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Animation.cs" %} +{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %} +{% endhighlight %} +{% endtabs %} + +![Circular Gauge with Animation](../circular-gauge/images/animation.gif) + +> Only the pointer of the Circular Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetmvc/documentation/circular-gauge/gauge-pointers#animation) to enable only pointer animation. + +{% endif %} diff --git a/ej2-asp-core-mvc/circular-gauge/images/animation.gif b/ej2-asp-core-mvc/circular-gauge/images/animation.gif new file mode 100644 index 0000000000..a39eb9276f Binary files /dev/null and b/ej2-asp-core-mvc/circular-gauge/images/animation.gif differ diff --git a/ej2-asp-core-mvc/code-snippet/chart/getting-started/multi-export/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/getting-started/multi-export/tagHelper index 4f981cab55..7460e41877 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/getting-started/multi-export/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/getting-started/multi-export/tagHelper @@ -21,4 +21,4 @@ var chart1 = document.getElementById('container1').ej2_instances[0]; chart.exportModule.export('PNG', 'chart', 'Landscape', [chart,chart1]); }; - \ No newline at end of file + diff --git a/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/gauge-animation.cs b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/gauge-animation.cs new file mode 100644 index 0000000000..13b690a185 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/gauge-animation.cs @@ -0,0 +1,19 @@ +using System; +using System.Collections.Generic; +using System.Diagnostics; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using EJ2_Core_Application.Models; +using Newtonsoft.Json; + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/razor b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/razor new file mode 100644 index 0000000000..ed1a6ec9ed --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/razor @@ -0,0 +1,26 @@ +@using Syncfusion.EJ2; +@using Syncfusion.EJ2.CircularGauge; + +@Html.EJS().CircularGauge("container").AnimationDuration(2000).Load("gaugeLoad").Background("transparent").Axes(axes => axes + .Radius("80%").StartAngle(230).EndAngle(130).LabelStyle(labelStyle => labelStyle.Position(Position.Inside).Font(font => font.FontFamily("inherit")).Offset(-1)) + .Annotations(annotation => annotation.Content("
60
").ZIndex("1").Angle(165).Radius("35%").Add()) + .Pointers(pointer => pointer.Value(60).Radius("60%").PointerWidth(7).Color("#c06c84").Animation(animation => animation.Enable(true).Duration(2000)).Cap(cap => cap.Radius(8).Color("#c06c84").Border(border => border.Width(0))).NeedleTail(needleTail => needleTail.Length("0%")).Add()) + .Ranges(range => range.Start(0).End(30).StartWidth(22).EndWidth(22).Color("#E63B86").Radius("60%").Add()) + .LineStyle(lineStyle => lineStyle.Width(8).Color("#E0E0E0")) + .MinorTicks(minorTick => minorTick.Offset(5)).MajorTicks(majorTick => majorTick.Offset(5)).Add()).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper new file mode 100644 index 0000000000..7a8dc69ac3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper @@ -0,0 +1,49 @@ +@using Syncfusion.EJ2; + +@{ + var labelFont = new Syncfusion.EJ2.CircularGauge.CircularGaugeFont { FontFamily = "inherit" }; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/razor new file mode 100644 index 0000000000..e17a73cb43 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/razor @@ -0,0 +1,37 @@ +@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/tagHelper new file mode 100644 index 0000000000..ff5280635c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/tagHelper @@ -0,0 +1,38 @@ + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/razor new file mode 100644 index 0000000000..55c9ef6877 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/razor @@ -0,0 +1,4 @@ +@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).DocumentEditorSettings("settings").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/tagHelper new file mode 100644 index 0000000000..ac01a406da --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/tagHelper @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/razor new file mode 100644 index 0000000000..0ef77821c6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/razor @@ -0,0 +1,16 @@ +@Html.EJS().Button("export").Content("Export").Render() +
+ @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/tagHelper new file mode 100644 index 0000000000..076b9a70a9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/tagHelper @@ -0,0 +1,16 @@ +Export +
+ +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/razor new file mode 100644 index 0000000000..22378936ef --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/razor @@ -0,0 +1,16 @@ +@Html.EJS().Button("export").Content("Export").Render() +
+ @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/tagHelper new file mode 100644 index 0000000000..e5f3071471 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/tagHelper @@ -0,0 +1,16 @@ +Export +
+ +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/razor new file mode 100644 index 0000000000..25db6655ea --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/razor @@ -0,0 +1,16 @@ +@Html.EJS().Button("export").Content("Export").Render() +
+ @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/tagHelper new file mode 100644 index 0000000000..ea814856f5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/tagHelper @@ -0,0 +1,16 @@ +Export +
+ +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/razor new file mode 100644 index 0000000000..b73361aadb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/razor @@ -0,0 +1,16 @@ +@Html.EJS().Button("export").Content("Export").Render() +
+ @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/tagHelper new file mode 100644 index 0000000000..89c62544df --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/tagHelper @@ -0,0 +1,16 @@ +Export +
+ +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/razor new file mode 100644 index 0000000000..0e979b4800 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/razor @@ -0,0 +1,16 @@ +@Html.EJS().Button("export").Content("Export").Render() +
+ @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/tagHelper new file mode 100644 index 0000000000..bc696a6b4f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/tagHelper @@ -0,0 +1,16 @@ +Export +
+ +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/toggle-track-pane/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/toggle-track-pane/razor new file mode 100644 index 0000000000..c1c8d48907 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/toggle-track-pane/razor @@ -0,0 +1,12 @@ +
+ @Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).EnableTrackChanges(true).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/toggle-track-pane/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/toggle-track-pane/tagHelper new file mode 100644 index 0000000000..11280217af --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/toggle-track-pane/tagHelper @@ -0,0 +1,10 @@ + + + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor/export-dotx/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor/export-dotx/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor/export-dotx/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor/export-dotx/razor b/ej2-asp-core-mvc/code-snippet/document-editor/export-dotx/razor new file mode 100644 index 0000000000..b8e5c7cb06 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor/export-dotx/razor @@ -0,0 +1,16 @@ +@Html.EJS().Button("export").Content("Export").Render() +
+ @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableWordExport(true).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor/export-dotx/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor/export-dotx/tagHelper new file mode 100644 index 0000000000..702ece0b3f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor/export-dotx/tagHelper @@ -0,0 +1,15 @@ +Export +
+ +
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor/heading-navigation/document-editor.cs b/ej2-asp-core-mvc/code-snippet/document-editor/heading-navigation/document-editor.cs new file mode 100644 index 0000000000..048a3eb88c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor/heading-navigation/document-editor.cs @@ -0,0 +1,5 @@ +public ActionResult Default() +{ + return View(); +} + diff --git a/ej2-asp-core-mvc/code-snippet/document-editor/heading-navigation/razor b/ej2-asp-core-mvc/code-snippet/document-editor/heading-navigation/razor new file mode 100644 index 0000000000..a6bc5b3fbb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor/heading-navigation/razor @@ -0,0 +1,13 @@ +
+ @Html.EJS().DocumentEditor("container").Created("onCreate").IsReadOnly(false).DocumentEditorSettings("settings").Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor/heading-navigation/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor/heading-navigation/tagHelper new file mode 100644 index 0000000000..c06816b4c7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor/heading-navigation/tagHelper @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/annotation/adjust-stroke-color/razor b/ej2-asp-core-mvc/code-snippet/image-editor/annotation/adjust-stroke-color/razor index 60c1cd2ad3..bf558fbfd8 100644 --- a/ej2-asp-core-mvc/code-snippet/image-editor/annotation/adjust-stroke-color/razor +++ b/ej2-asp-core-mvc/code-snippet/image-editor/annotation/adjust-stroke-color/razor @@ -41,4 +41,4 @@ .control-wrapper { height: 100%; } - \ No newline at end of file + diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/annotation/adjust-stroke-color/tagHelper b/ej2-asp-core-mvc/code-snippet/image-editor/annotation/adjust-stroke-color/tagHelper index c9dbbff4e7..5323c4cd38 100644 --- a/ej2-asp-core-mvc/code-snippet/image-editor/annotation/adjust-stroke-color/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/image-editor/annotation/adjust-stroke-color/tagHelper @@ -40,4 +40,4 @@ .control-wrapper { height: 100%; } - \ No newline at end of file + diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/animation/animation.cs b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/animation.cs new file mode 100644 index 0000000000..48a99dcc60 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/animation.cs @@ -0,0 +1,22 @@ +using System; +using System.Collections.Generic; +using System.Diagnostics; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using EJ2_Core_Application.Models; +using Newtonsoft.Json; +using Syncfusion.EJ2.Charts; +using Syncfusion.EJ2.LinearGauge; + + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/animation/razor b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/razor new file mode 100644 index 0000000000..6a8632f24e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/razor @@ -0,0 +1,15 @@ +@using Syncfusion.EJ2.LinearGauge; + +@Html.EJS().LinearGauge("container").Load("gaugeLoad").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Annotations( + annotation => annotation.AxisIndex(0).AxisValue(10).X(10).Y(-70).ZIndex("1").Content("
10 MPH
").Add()).Axes(axes => + axes.Pointers(pointer => pointer.Width(15).Height(15).Value(10).Offset("-40").Placement(Syncfusion.EJ2.LinearGauge.Placement.Near).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Triangle).Add()) + .MajorTicks(majorTick => majorTick.Interval(10).Height(20).Color("#9E9E9E")) + .MinorTicks(minorTick => minorTick.Interval(2).Height(10).Color("#9E9E9E")) + .Ranges(range => range.Start(0).End(50).StartWidth(10).EndWidth(10).Color("#F45656").Offset(35).Add()) + .LabelStyle(labelStyle => labelStyle.Offset(48).Font(font => font.FontFamily("inherit"))).Add()).Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/animation/tagHelper b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/tagHelper new file mode 100644 index 0000000000..2d6c5cccae --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/tagHelper @@ -0,0 +1,34 @@ +@using Syncfusion.EJ2.LinearGauge + +@{ + var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" }; +} + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs new file mode 100644 index 0000000000..48a99dcc60 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs @@ -0,0 +1,22 @@ +using System; +using System.Collections.Generic; +using System.Diagnostics; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using EJ2_Core_Application.Models; +using Newtonsoft.Json; +using Syncfusion.EJ2.Charts; +using Syncfusion.EJ2.LinearGauge; + + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/razor b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/razor new file mode 100644 index 0000000000..1b4920425b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/razor @@ -0,0 +1,10 @@ +@using Syncfusion.EJ2.LinearGauge; + +@Html.EJS().LinearGauge("gauge").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Axes(axes => axes.Minimum(0).Maximum(100) + .LabelStyle(labelStyle => labelStyle.Font(font => font.FontFamily("inherit")).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)) + .Pointers(pointer => + { + pointer.Value(60).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Image).Width(40).Height(40).ImageUrl("https://ej2.syncfusion.com/aspnetmvc/Content/LinearGauge/step-count.png").Offset("-27").Add(); + }) + .MajorTicks(majorTick => majorTick.Interval(20).Height(7).Width(1).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).MinorTicks(minorTick => minorTick.Height(3).Width(1).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).Add()).Render() + diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/tagHelper b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/tagHelper new file mode 100644 index 0000000000..885b6f444b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/tagHelper @@ -0,0 +1,20 @@ +@using Syncfusion.EJ2.LinearGauge + +@{ + var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" }; +} + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs new file mode 100644 index 0000000000..48a99dcc60 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs @@ -0,0 +1,22 @@ +using System; +using System.Collections.Generic; +using System.Diagnostics; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using EJ2_Core_Application.Models; +using Newtonsoft.Json; +using Syncfusion.EJ2.Charts; +using Syncfusion.EJ2.LinearGauge; + + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/razor b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/razor new file mode 100644 index 0000000000..8d79d83e67 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/razor @@ -0,0 +1,21 @@ +@using Syncfusion.EJ2.LinearGauge; + +@{ + var textStyle = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { Size = "18px", FontWeight = "bold" }; +} + +@Html.EJS().LinearGauge("gauge").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Axes(axes => axes.Minimum(0).Maximum(100) + .Line(line => line.Width(0)).LabelStyle(labelStyle => labelStyle.Font(font => font.FontFamily("inherit")).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)) + .Pointers(pointer => + { + pointer.Value(13).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("Low").Color("Black").Offset("-35").TextStyle(textStyle).Add(); + pointer.Value(48).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("Moderate").Color("Black").Offset("-35").TextStyle(textStyle).Add(); + pointer.Value(83).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("High").Color("Black").Offset("-35").TextStyle(textStyle).Add(); + }) + .Ranges(range => + { + range.Start(0).End(30).StartWidth(50).EndWidth(50).Color("#FB7D55").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add(); + range.Start(30).End(65).StartWidth(50).EndWidth(50).Color("#ECC85B").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add(); + range.Start(65).End(100).StartWidth(50).EndWidth(50).Color("#6FC78A").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add(); + }).MajorTicks(majorTick => majorTick.Interval(20).Height(7).Width(1).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).MinorTicks(minorTick => minorTick.Height(3).Interval(10).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).Add()).Render() + diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/tagHelper b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/tagHelper new file mode 100644 index 0000000000..3987770725 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/tagHelper @@ -0,0 +1,27 @@ +@using Syncfusion.EJ2.LinearGauge + +@{ + var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" }; +} + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/getMinMaxLatitudeLongitude.cs b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/getMinMaxLatitudeLongitude.cs new file mode 100644 index 0000000000..f30278336b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/getMinMaxLatitudeLongitude.cs @@ -0,0 +1,35 @@ +using System; +using System.Collections.Generic; +using System.Diagnostics; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using EJ2_Core_Application.Models; +using Newtonsoft.Json; + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + ViewBag.world_map = GetWorldMap(); + ViewBag.worldMap = GetMap(); + return View(); + } + + // To access the data in Core + public object GetWorldMap() + { + string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js"); + return JsonConvert.DeserializeObject(allText); + } + + // To access the data in MVC + public object GetMap() + { + string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json")); + return JsonConvert.DeserializeObject(allText, typeof(object)); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/razor b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/razor new file mode 100644 index 0000000000..2b4c94889b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/razor @@ -0,0 +1,50 @@ +@{ + var data = new [] + { + new { latitude= 22.572646, longitude= 88.363895 }, + new { latitude= 25.0700428, longitude= 67.2847875 } +}; +} + + +< button id = "button" > GetMinMaxLatitudeLongitude +

+ +@(Html.EJS().Maps("maps").Width("450px").ZoomSettings(zoom => zoom.ZoomFactor(7).Enable(true)).CenterPosition(center => center.Latitude(21.815447).Longitude(80.1932)).Layers(layers => { + layers.MarkerSettings(marker => { + marker.Visible(true).AnimationDuration(1500).Shape(MarkerType.Circle).DataSource(data).Height(25).Width(25).Add(); + }).ShapeData(ViewBag.worldMap).Add(); +}).Render()) + + diff --git a/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/tagHelper new file mode 100644 index 0000000000..c97039a35d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/tagHelper @@ -0,0 +1,60 @@ +@using Syncfusion.EJ2.Maps + +@{ +var data = new[] +{ +new { latitude= 22.572646, longitude= 88.363895 }, +new { latitude= 25.0700428, longitude= 67.2847875} +}; + +} + + + +

+ + + + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/polygon-shape-highlight.cs b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/polygon-shape-highlight.cs new file mode 100644 index 0000000000..a720d8b43a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/polygon-shape-highlight.cs @@ -0,0 +1,29 @@ +using Newtonsoft.Json; +using Syncfusion.EJ2.Charts; + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + ViewBag.worldmap = GetWorldMap(); + ViewBag.world_map = GetMap(); + return View(); + } + + // To access the data in Core + public object GetWorldMap() + { + string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js"); + return JsonConvert.DeserializeObject(allText); + } + + // To access the data in MVC + public object GetMap() + { + string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json")); + return JsonConvert.DeserializeObject(allText, typeof(object)); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/razor b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/razor new file mode 100644 index 0000000000..4ff2dab42a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/razor @@ -0,0 +1,74 @@ +@using Syncfusion.EJ2.Maps; + +@{ + var data = new[] + { + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 }, + new { longitude = -1.6479633699113947, latitude = 33.58989612266137 }, + new { longitude = -1.4201220366858252, latitude = 32.819439646045254 }, + new { longitude = -1.197974596225663, latitude = 32.26940895444655 }, + new { longitude = -2.891112397949655, latitude = 32.10303058820031 }, + new { longitude = -3.8246984550501963, latitude = 31.34551662687602 }, + new { longitude = -3.720166273688733, latitude = 30.758086682848685 }, + new { longitude = -5.6571886081189575, latitude = 29.613582597203006 }, + new { longitude = -7.423353242214745, latitude = 29.44328441403087 }, + new { longitude = -8.6048931685323, latitude = 28.761444633616776 }, + new { longitude = -8.695726975465703, latitude = 27.353491085576195 }, + new { longitude = 3.837867279970908, latitude = 19.15916564839422 }, + new { longitude = 6.0705408799045415, latitude = 19.48749097192868 }, + new { longitude = 12.055736352807713, latitude = 23.694596786078293 }, + new { longitude = 11.272522332402986, latitude = 24.289329186946034 }, + new { longitude = 10.30872578261932, latitude = 24.65419958524693 }, + new { longitude = 9.910236690050027, latitude = 25.48943950947175 }, + new { longitude = 9.432639882414293, latitude = 26.398372489836902 }, + new { longitude = 9.898266456582292, latitude = 26.73489453809293 }, + new { longitude = 9.560243026853641, latitude = 30.31040379467153 }, + new { longitude = 8.943853847283322, latitude = 32.350324876652195 }, + new { longitude = 7.57004059025715, latitude = 33.75071049019398 }, + new { longitude = 8.0906322609153, latitude = 34.69043151009983 }, + new { longitude = 8.363285449347273, latitude = 35.38654406371319 }, + new { longitude = 8.26139549449448, latitude = 36.44751078733985 }, + new { longitude = 8.61100824823302, latitude = 36.881913362940196 }, + new { longitude = 7.4216488925819135, latitude = 37.021408008916254 }, + new { longitude = 6.461182254165351, latitude = 36.99092409199429 }, + new { longitude = 5.297178918070159, latitude = 36.69985479014656 }, + new { longitude = 3.6718056161224695, latitude = 36.86470546831693 }, + new { longitude = 1.2050052555659931, latitude = 36.57658056301722 }, + new { longitude = -0.26968570003779746, latitude = 35.806903541813625 }, + new { longitude = -0.995191786435754, latitude = 35.58466127904214 }, + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 } + }; + + + var polygons = new List + { + new Syncfusion.EJ2.Maps.MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; + + var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings + { + Enable = true, Fill = "yellow", Opacity = 0.4, + Border = new MapsBorder + { + Color ="blue", + Opacity = 0.6, + Width=4 + } + }; + + var selection = new Syncfusion.EJ2.Maps.MapsSelectionSettings + { + Enable = true, + Fill = "red", + EnableMultiSelect = false, + Opacity = 0.7, + Border = new MapsBorder + { + Color = "green", + Opacity = 0.7, + Width = 2 + } + }; +} + +@(Html.EJS().Maps("maps").Layers(layers => { layers.PolygonSettings(polygon => { polygon.Polygons(polygons).HighlightSettings(highlight).SelectionSettings(selection); }).ShapeData(ViewBag.world_map).Add(); }).Render()) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/tagHelper new file mode 100644 index 0000000000..0ed75a4fe8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/tagHelper @@ -0,0 +1,82 @@ +@using Syncfusion.EJ2.Maps + +@{ + var data = new[] + { + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 }, + new { longitude = -1.6479633699113947, latitude = 33.58989612266137 }, + new { longitude = -1.4201220366858252, latitude = 32.819439646045254 }, + new { longitude = -1.197974596225663, latitude = 32.26940895444655 }, + new { longitude = -2.891112397949655, latitude = 32.10303058820031 }, + new { longitude = -3.8246984550501963, latitude = 31.34551662687602 }, + new { longitude = -3.720166273688733, latitude = 30.758086682848685 }, + new { longitude = -5.6571886081189575, latitude = 29.613582597203006 }, + new { longitude = -7.423353242214745, latitude = 29.44328441403087 }, + new { longitude = -8.6048931685323, latitude = 28.761444633616776 }, + new { longitude = -8.695726975465703, latitude = 27.353491085576195 }, + new { longitude = 3.837867279970908, latitude = 19.15916564839422 }, + new { longitude = 6.0705408799045415, latitude = 19.48749097192868 }, + new { longitude = 12.055736352807713, latitude = 23.694596786078293 }, + new { longitude = 11.272522332402986, latitude = 24.289329186946034 }, + new { longitude = 10.30872578261932, latitude = 24.65419958524693 }, + new { longitude = 9.910236690050027, latitude = 25.48943950947175 }, + new { longitude = 9.432639882414293, latitude = 26.398372489836902 }, + new { longitude = 9.898266456582292, latitude = 26.73489453809293 }, + new { longitude = 9.560243026853641, latitude = 30.31040379467153 }, + new { longitude = 8.943853847283322, latitude = 32.350324876652195 }, + new { longitude = 7.57004059025715, latitude = 33.75071049019398 }, + new { longitude = 8.0906322609153, latitude = 34.69043151009983 }, + new { longitude = 8.363285449347273, latitude = 35.38654406371319 }, + new { longitude = 8.26139549449448, latitude = 36.44751078733985 }, + new { longitude = 8.61100824823302, latitude = 36.881913362940196 }, + new { longitude = 7.4216488925819135, latitude = 37.021408008916254 }, + new { longitude = 6.461182254165351, latitude = 36.99092409199429 }, + new { longitude = 5.297178918070159, latitude = 36.69985479014656 }, + new { longitude = 3.6718056161224695, latitude = 36.86470546831693 }, + new { longitude = 1.2050052555659931, latitude = 36.57658056301722 }, + new { longitude = -0.26968570003779746, latitude = 35.806903541813625 }, + new { longitude = -0.995191786435754, latitude = 35.58466127904214 }, + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 } + }; + + + var polygons = new List + { + new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; + + var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings + { + Enable = true, Fill = "yellow", Opacity = 0.4, + Border = new MapsBorder + { + Color ="blue", + Opacity = 0.6, + Width=4 + } + }; + + var selection = new Syncfusion.EJ2.Maps.MapsSelectionSettings + { + Enable = true, + Fill = "red", + EnableMultiSelect = false, + Opacity = 0.7, + Border = new MapsBorder + { + Color = "green", + Opacity = 0.7, + Width = 2 + } + }; + +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/polygon-shape-selection.cs b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/polygon-shape-selection.cs new file mode 100644 index 0000000000..a720d8b43a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/polygon-shape-selection.cs @@ -0,0 +1,29 @@ +using Newtonsoft.Json; +using Syncfusion.EJ2.Charts; + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + ViewBag.worldmap = GetWorldMap(); + ViewBag.world_map = GetMap(); + return View(); + } + + // To access the data in Core + public object GetWorldMap() + { + string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js"); + return JsonConvert.DeserializeObject(allText); + } + + // To access the data in MVC + public object GetMap() + { + string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json")); + return JsonConvert.DeserializeObject(allText, typeof(object)); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/razor b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/razor new file mode 100644 index 0000000000..c411172799 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/razor @@ -0,0 +1,74 @@ +@using Syncfusion.EJ2.Maps; + +@{ + var data = new[] + { + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 }, + new { longitude = -1.6479633699113947, latitude = 33.58989612266137 }, + new { longitude = -1.4201220366858252, latitude = 32.819439646045254 }, + new { longitude = -1.197974596225663, latitude = 32.26940895444655 }, + new { longitude = -2.891112397949655, latitude = 32.10303058820031 }, + new { longitude = -3.8246984550501963, latitude = 31.34551662687602 }, + new { longitude = -3.720166273688733, latitude = 30.758086682848685 }, + new { longitude = -5.6571886081189575, latitude = 29.613582597203006 }, + new { longitude = -7.423353242214745, latitude = 29.44328441403087 }, + new { longitude = -8.6048931685323, latitude = 28.761444633616776 }, + new { longitude = -8.695726975465703, latitude = 27.353491085576195 }, + new { longitude = 3.837867279970908, latitude = 19.15916564839422 }, + new { longitude = 6.0705408799045415, latitude = 19.48749097192868 }, + new { longitude = 12.055736352807713, latitude = 23.694596786078293 }, + new { longitude = 11.272522332402986, latitude = 24.289329186946034 }, + new { longitude = 10.30872578261932, latitude = 24.65419958524693 }, + new { longitude = 9.910236690050027, latitude = 25.48943950947175 }, + new { longitude = 9.432639882414293, latitude = 26.398372489836902 }, + new { longitude = 9.898266456582292, latitude = 26.73489453809293 }, + new { longitude = 9.560243026853641, latitude = 30.31040379467153 }, + new { longitude = 8.943853847283322, latitude = 32.350324876652195 }, + new { longitude = 7.57004059025715, latitude = 33.75071049019398 }, + new { longitude = 8.0906322609153, latitude = 34.69043151009983 }, + new { longitude = 8.363285449347273, latitude = 35.38654406371319 }, + new { longitude = 8.26139549449448, latitude = 36.44751078733985 }, + new { longitude = 8.61100824823302, latitude = 36.881913362940196 }, + new { longitude = 7.4216488925819135, latitude = 37.021408008916254 }, + new { longitude = 6.461182254165351, latitude = 36.99092409199429 }, + new { longitude = 5.297178918070159, latitude = 36.69985479014656 }, + new { longitude = 3.6718056161224695, latitude = 36.86470546831693 }, + new { longitude = 1.2050052555659931, latitude = 36.57658056301722 }, + new { longitude = -0.26968570003779746, latitude = 35.806903541813625 }, + new { longitude = -0.995191786435754, latitude = 35.58466127904214 }, + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 } + }; + + + var polygons = new List + { + new Syncfusion.EJ2.Maps.MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; + + var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings + { + Enable = true, Fill = "blue", Opacity = 0.7, + Border = new MapsBorder + { + Color ="green", + Opacity = 0.7, + Width=2 + } + }; + + var selection = new Syncfusion.EJ2.Maps.MapsSelectionSettings + { + Enable = true, + Fill = "violet", + EnableMultiSelect = false, + Opacity = 0.8, + Border = new MapsBorder + { + Color = "cyan", + Opacity = 1, + Width = 7 + } + }; +} + +@(Html.EJS().Maps("maps").Layers(layers => { layers.PolygonSettings(polygon => { polygon.Polygons(polygons).HighlightSettings(highlight).SelectionSettings(selection); }).ShapeData(ViewBag.world_map).Add(); }).Render()) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/tagHelper new file mode 100644 index 0000000000..84e3296b3a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/tagHelper @@ -0,0 +1,82 @@ +@using Syncfusion.EJ2.Maps + +@{ + var data = new[] + { + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 }, + new { longitude = -1.6479633699113947, latitude = 33.58989612266137 }, + new { longitude = -1.4201220366858252, latitude = 32.819439646045254 }, + new { longitude = -1.197974596225663, latitude = 32.26940895444655 }, + new { longitude = -2.891112397949655, latitude = 32.10303058820031 }, + new { longitude = -3.8246984550501963, latitude = 31.34551662687602 }, + new { longitude = -3.720166273688733, latitude = 30.758086682848685 }, + new { longitude = -5.6571886081189575, latitude = 29.613582597203006 }, + new { longitude = -7.423353242214745, latitude = 29.44328441403087 }, + new { longitude = -8.6048931685323, latitude = 28.761444633616776 }, + new { longitude = -8.695726975465703, latitude = 27.353491085576195 }, + new { longitude = 3.837867279970908, latitude = 19.15916564839422 }, + new { longitude = 6.0705408799045415, latitude = 19.48749097192868 }, + new { longitude = 12.055736352807713, latitude = 23.694596786078293 }, + new { longitude = 11.272522332402986, latitude = 24.289329186946034 }, + new { longitude = 10.30872578261932, latitude = 24.65419958524693 }, + new { longitude = 9.910236690050027, latitude = 25.48943950947175 }, + new { longitude = 9.432639882414293, latitude = 26.398372489836902 }, + new { longitude = 9.898266456582292, latitude = 26.73489453809293 }, + new { longitude = 9.560243026853641, latitude = 30.31040379467153 }, + new { longitude = 8.943853847283322, latitude = 32.350324876652195 }, + new { longitude = 7.57004059025715, latitude = 33.75071049019398 }, + new { longitude = 8.0906322609153, latitude = 34.69043151009983 }, + new { longitude = 8.363285449347273, latitude = 35.38654406371319 }, + new { longitude = 8.26139549449448, latitude = 36.44751078733985 }, + new { longitude = 8.61100824823302, latitude = 36.881913362940196 }, + new { longitude = 7.4216488925819135, latitude = 37.021408008916254 }, + new { longitude = 6.461182254165351, latitude = 36.99092409199429 }, + new { longitude = 5.297178918070159, latitude = 36.69985479014656 }, + new { longitude = 3.6718056161224695, latitude = 36.86470546831693 }, + new { longitude = 1.2050052555659931, latitude = 36.57658056301722 }, + new { longitude = -0.26968570003779746, latitude = 35.806903541813625 }, + new { longitude = -0.995191786435754, latitude = 35.58466127904214 }, + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 } + }; + + + var polygons = new List + { + new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; + + var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings + { + Enable = true, Fill = "blue", Opacity = 0.7, + Border = new MapsBorder + { + Color ="green", + Opacity = 0.7, + Width=2 + } + }; + + var selection = new Syncfusion.EJ2.Maps.MapsSelectionSettings + { + Enable = true, + Fill = "violet", + EnableMultiSelect = false, + Opacity = 0.8, + Border = new MapsBorder + { + Color = "cyan", + Opacity = 1, + Width = 7 + } + }; + +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/polygon-shape-tooltip-template.cs b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/polygon-shape-tooltip-template.cs new file mode 100644 index 0000000000..a720d8b43a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/polygon-shape-tooltip-template.cs @@ -0,0 +1,29 @@ +using Newtonsoft.Json; +using Syncfusion.EJ2.Charts; + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + ViewBag.worldmap = GetWorldMap(); + ViewBag.world_map = GetMap(); + return View(); + } + + // To access the data in Core + public object GetWorldMap() + { + string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js"); + return JsonConvert.DeserializeObject(allText); + } + + // To access the data in MVC + public object GetMap() + { + string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json")); + return JsonConvert.DeserializeObject(allText, typeof(object)); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/razor b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/razor new file mode 100644 index 0000000000..1b32821d2d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/razor @@ -0,0 +1,66 @@ +@using Syncfusion.EJ2; + +@{ + var data = new[] + { + new { longitude = 34.88539587371454, latitude = 28.181421087099537 }, + new { longitude = 37.50029619722466, latitude = 24.299419888989462 }, + new { longitude = 39.22241423764024, latitude = 22.638529461838658 }, + new { longitude = 38.95650769309776, latitude = 21.424998160017495 }, + new { longitude = 40.19963938650778, latitude = 20.271205391339606 }, + new { longitude = 41.76547269134551, latitude = 18.315451049867193 }, + new { longitude = 42.78452077838921, latitude = 16.097235052947966 }, + new { longitude = 43.36984949591576, latitude = 17.188572054533054 }, + new { longitude = 44.12558191797012, latitude = 17.407258102232234 }, + new { longitude = 46.69027032797584, latitude = 17.33342243475734 }, + new { longitude = 47.09312386141585, latitude = 16.97087769526452 }, + new { longitude = 48.3417299826302, latitude = 18.152700711188004 }, + new { longitude = 49.74762591400318, latitude = 18.81544363931681 }, + new { longitude = 52.41428026336621, latitude = 18.9035706497573 }, + new { longitude = 55.272683129240335, latitude = 20.133861012918544 }, + new { longitude = 55.60121336079203, latitude = 21.92042703112351 }, + new { longitude = 55.08204399107967, latitude = 22.823302662258882 }, + new { longitude = 52.743894337844154, latitude = 22.954463486477437 }, + new { longitude = 51.47035908651375, latitude = 24.35818837668566 }, + new { longitude = 51.122553219055874, latitude = 24.666679732426346 }, + new { longitude = 51.58731671256831, latitude = 25.173806925822717 }, + new { longitude = 51.35950585992913, latitude = 25.84556484481108 }, + new { longitude = 51.088770529661275, latitude = 26.168494193631147 }, + new { longitude = 50.78527056538036, latitude = 25.349051242147596 }, + new { longitude = 50.88330288802666, latitude = 24.779242606720743 }, + new { longitude = 50.19702490702369, latitude = 25.66825106363693 }, + new { longitude = 50.066461167339924, latitude = 26.268905608606616 }, + new { longitude = 49.645896067213215, latitude = 27.15116474192905 }, + new { longitude = 48.917371072320805, latitude = 27.55738830340198 }, + new { longitude = 48.3984720209192, latitude = 28.566207269716173 }, + new { longitude = 47.68851714518985, latitude = 28.5938991332588 }, + new { longitude = 47.45059089191449, latitude = 29.009321449856984 }, + new { longitude = 44.73549453609391, latitude = 29.157358362696385 }, + new { longitude = 41.79487372890989, latitude = 31.23489959729713 }, + new { longitude = 40.36977176033773, latitude = 31.9642352513131 }, + new { longitude = 39.168270913149826, latitude = 32.18348471414393 }, + new { longitude = 37.019253492546454, latitude = 31.47710220862595 }, + new { longitude = 37.99644645508337, latitude = 30.4851028633376 }, + new { longitude = 37.67756530485232, latitude = 30.3636358598429 }, + new { longitude = 37.50181466030105, latitude = 29.960155516804974 }, + new { longitude = 36.700288181129594, latitude = 29.882136586478993 }, + new { longitude = 36.100009274845206, latitude = 29.15308642012721 }, + new { longitude = 34.85774476486728, latitude = 29.3103032832622 }, + new { longitude = 34.64498583263142, latitude = 28.135787235699823 }, + new { longitude = 34.88539587371454, latitude = 28.181421087099537 } + }; + + + var polygons = new List + { + new Syncfusion.EJ2.Maps.MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2, TooltipTemplate="
Country Name : Saudi Arabia
" } + }; + + var tooltipSettings = new Syncfusion.EJ2.Maps.MapsTooltipSettings + { + Visible = true + }; + +} + +@(Html.EJS().Maps("maps").Layers(layers => { layers.PolygonSettings(polygon => { polygon.Polygons(polygons).TooltipSettings(tooltipSettings); }).ShapeData(ViewBag.world_map).Add(); }).Render()) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/tagHelper new file mode 100644 index 0000000000..a9998bf996 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/tagHelper @@ -0,0 +1,72 @@ +@using Syncfusion.EJ2.Maps + +@{ + var data = new[] + { + new { longitude = 34.88539587371454, latitude = 28.181421087099537 }, + new { longitude = 37.50029619722466, latitude = 24.299419888989462 }, + new { longitude = 39.22241423764024, latitude = 22.638529461838658 }, + new { longitude = 38.95650769309776, latitude = 21.424998160017495 }, + new { longitude = 40.19963938650778, latitude = 20.271205391339606 }, + new { longitude = 41.76547269134551, latitude = 18.315451049867193 }, + new { longitude = 42.78452077838921, latitude = 16.097235052947966 }, + new { longitude = 43.36984949591576, latitude = 17.188572054533054 }, + new { longitude = 44.12558191797012, latitude = 17.407258102232234 }, + new { longitude = 46.69027032797584, latitude = 17.33342243475734 }, + new { longitude = 47.09312386141585, latitude = 16.97087769526452 }, + new { longitude = 48.3417299826302, latitude = 18.152700711188004 }, + new { longitude = 49.74762591400318, latitude = 18.81544363931681 }, + new { longitude = 52.41428026336621, latitude = 18.9035706497573 }, + new { longitude = 55.272683129240335, latitude = 20.133861012918544 }, + new { longitude = 55.60121336079203, latitude = 21.92042703112351 }, + new { longitude = 55.08204399107967, latitude = 22.823302662258882 }, + new { longitude = 52.743894337844154, latitude = 22.954463486477437 }, + new { longitude = 51.47035908651375, latitude = 24.35818837668566 }, + new { longitude = 51.122553219055874, latitude = 24.666679732426346 }, + new { longitude = 51.58731671256831, latitude = 25.173806925822717 }, + new { longitude = 51.35950585992913, latitude = 25.84556484481108 }, + new { longitude = 51.088770529661275, latitude = 26.168494193631147 }, + new { longitude = 50.78527056538036, latitude = 25.349051242147596 }, + new { longitude = 50.88330288802666, latitude = 24.779242606720743 }, + new { longitude = 50.19702490702369, latitude = 25.66825106363693 }, + new { longitude = 50.066461167339924, latitude = 26.268905608606616 }, + new { longitude = 49.645896067213215, latitude = 27.15116474192905 }, + new { longitude = 48.917371072320805, latitude = 27.55738830340198 }, + new { longitude = 48.3984720209192, latitude = 28.566207269716173 }, + new { longitude = 47.68851714518985, latitude = 28.5938991332588 }, + new { longitude = 47.45059089191449, latitude = 29.009321449856984 }, + new { longitude = 44.73549453609391, latitude = 29.157358362696385 }, + new { longitude = 41.79487372890989, latitude = 31.23489959729713 }, + new { longitude = 40.36977176033773, latitude = 31.9642352513131 }, + new { longitude = 39.168270913149826, latitude = 32.18348471414393 }, + new { longitude = 37.019253492546454, latitude = 31.47710220862595 }, + new { longitude = 37.99644645508337, latitude = 30.4851028633376 }, + new { longitude = 37.67756530485232, latitude = 30.3636358598429 }, + new { longitude = 37.50181466030105, latitude = 29.960155516804974 }, + new { longitude = 36.700288181129594, latitude = 29.882136586478993 }, + new { longitude = 36.100009274845206, latitude = 29.15308642012721 }, + new { longitude = 34.85774476486728, latitude = 29.3103032832622 }, + new { longitude = 34.64498583263142, latitude = 28.135787235699823 }, + new { longitude = 34.88539587371454, latitude = 28.181421087099537 } + }; + + + var polygons = new List + { + new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2, TooltipTemplate="
Country Name : Saudi Arabia
" } + }; + + var tooltipSettings = new Syncfusion.EJ2.Maps.MapsTooltipSettings + { + Visible = true + }; +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/polygon-shape-tooltip.cs b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/polygon-shape-tooltip.cs new file mode 100644 index 0000000000..a720d8b43a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/polygon-shape-tooltip.cs @@ -0,0 +1,29 @@ +using Newtonsoft.Json; +using Syncfusion.EJ2.Charts; + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + ViewBag.worldmap = GetWorldMap(); + ViewBag.world_map = GetMap(); + return View(); + } + + // To access the data in Core + public object GetWorldMap() + { + string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js"); + return JsonConvert.DeserializeObject(allText); + } + + // To access the data in MVC + public object GetMap() + { + string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json")); + return JsonConvert.DeserializeObject(allText, typeof(object)); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/razor b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/razor new file mode 100644 index 0000000000..e6fb4fd1d5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/razor @@ -0,0 +1,71 @@ +@using Syncfusion.EJ2; + +@{ + var data = new[] + { + new { longitude = 34.88539587371454, latitude = 28.181421087099537 }, + new { longitude = 37.50029619722466, latitude = 24.299419888989462 }, + new { longitude = 39.22241423764024, latitude = 22.638529461838658 }, + new { longitude = 38.95650769309776, latitude = 21.424998160017495 }, + new { longitude = 40.19963938650778, latitude = 20.271205391339606 }, + new { longitude = 41.76547269134551, latitude = 18.315451049867193 }, + new { longitude = 42.78452077838921, latitude = 16.097235052947966 }, + new { longitude = 43.36984949591576, latitude = 17.188572054533054 }, + new { longitude = 44.12558191797012, latitude = 17.407258102232234 }, + new { longitude = 46.69027032797584, latitude = 17.33342243475734 }, + new { longitude = 47.09312386141585, latitude = 16.97087769526452 }, + new { longitude = 48.3417299826302, latitude = 18.152700711188004 }, + new { longitude = 49.74762591400318, latitude = 18.81544363931681 }, + new { longitude = 52.41428026336621, latitude = 18.9035706497573 }, + new { longitude = 55.272683129240335, latitude = 20.133861012918544 }, + new { longitude = 55.60121336079203, latitude = 21.92042703112351 }, + new { longitude = 55.08204399107967, latitude = 22.823302662258882 }, + new { longitude = 52.743894337844154, latitude = 22.954463486477437 }, + new { longitude = 51.47035908651375, latitude = 24.35818837668566 }, + new { longitude = 51.122553219055874, latitude = 24.666679732426346 }, + new { longitude = 51.58731671256831, latitude = 25.173806925822717 }, + new { longitude = 51.35950585992913, latitude = 25.84556484481108 }, + new { longitude = 51.088770529661275, latitude = 26.168494193631147 }, + new { longitude = 50.78527056538036, latitude = 25.349051242147596 }, + new { longitude = 50.88330288802666, latitude = 24.779242606720743 }, + new { longitude = 50.19702490702369, latitude = 25.66825106363693 }, + new { longitude = 50.066461167339924, latitude = 26.268905608606616 }, + new { longitude = 49.645896067213215, latitude = 27.15116474192905 }, + new { longitude = 48.917371072320805, latitude = 27.55738830340198 }, + new { longitude = 48.3984720209192, latitude = 28.566207269716173 }, + new { longitude = 47.68851714518985, latitude = 28.5938991332588 }, + new { longitude = 47.45059089191449, latitude = 29.009321449856984 }, + new { longitude = 44.73549453609391, latitude = 29.157358362696385 }, + new { longitude = 41.79487372890989, latitude = 31.23489959729713 }, + new { longitude = 40.36977176033773, latitude = 31.9642352513131 }, + new { longitude = 39.168270913149826, latitude = 32.18348471414393 }, + new { longitude = 37.019253492546454, latitude = 31.47710220862595 }, + new { longitude = 37.99644645508337, latitude = 30.4851028633376 }, + new { longitude = 37.67756530485232, latitude = 30.3636358598429 }, + new { longitude = 37.50181466030105, latitude = 29.960155516804974 }, + new { longitude = 36.700288181129594, latitude = 29.882136586478993 }, + new { longitude = 36.100009274845206, latitude = 29.15308642012721 }, + new { longitude = 34.85774476486728, latitude = 29.3103032832622 }, + new { longitude = 34.64498583263142, latitude = 28.135787235699823 }, + new { longitude = 34.88539587371454, latitude = 28.181421087099537 } + }; + + + var polygons = new List + { + new Syncfusion.EJ2.Maps.MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2, TooltipText="Saudi Arabia" } + }; + + var tooltipSettings = new Syncfusion.EJ2.Maps.MapsTooltipSettings + { + Visible = true, + Border = new Syncfusion.EJ2.Maps.MapsBorder + { + Width = 2, + Color = "Red" + } + }; + +} + +@(Html.EJS().Maps("maps").Layers(layers => { layers.PolygonSettings(polygon => { polygon.Polygons(polygons).TooltipSettings(tooltipSettings); }).ShapeData(ViewBag.world_map).Add(); }).Render()) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/tagHelper new file mode 100644 index 0000000000..4de2a71afb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/tagHelper @@ -0,0 +1,77 @@ +@using Syncfusion.EJ2.Maps + +@{ + var data = new[] + { + new { longitude = 34.88539587371454, latitude = 28.181421087099537 }, + new { longitude = 37.50029619722466, latitude = 24.299419888989462 }, + new { longitude = 39.22241423764024, latitude = 22.638529461838658 }, + new { longitude = 38.95650769309776, latitude = 21.424998160017495 }, + new { longitude = 40.19963938650778, latitude = 20.271205391339606 }, + new { longitude = 41.76547269134551, latitude = 18.315451049867193 }, + new { longitude = 42.78452077838921, latitude = 16.097235052947966 }, + new { longitude = 43.36984949591576, latitude = 17.188572054533054 }, + new { longitude = 44.12558191797012, latitude = 17.407258102232234 }, + new { longitude = 46.69027032797584, latitude = 17.33342243475734 }, + new { longitude = 47.09312386141585, latitude = 16.97087769526452 }, + new { longitude = 48.3417299826302, latitude = 18.152700711188004 }, + new { longitude = 49.74762591400318, latitude = 18.81544363931681 }, + new { longitude = 52.41428026336621, latitude = 18.9035706497573 }, + new { longitude = 55.272683129240335, latitude = 20.133861012918544 }, + new { longitude = 55.60121336079203, latitude = 21.92042703112351 }, + new { longitude = 55.08204399107967, latitude = 22.823302662258882 }, + new { longitude = 52.743894337844154, latitude = 22.954463486477437 }, + new { longitude = 51.47035908651375, latitude = 24.35818837668566 }, + new { longitude = 51.122553219055874, latitude = 24.666679732426346 }, + new { longitude = 51.58731671256831, latitude = 25.173806925822717 }, + new { longitude = 51.35950585992913, latitude = 25.84556484481108 }, + new { longitude = 51.088770529661275, latitude = 26.168494193631147 }, + new { longitude = 50.78527056538036, latitude = 25.349051242147596 }, + new { longitude = 50.88330288802666, latitude = 24.779242606720743 }, + new { longitude = 50.19702490702369, latitude = 25.66825106363693 }, + new { longitude = 50.066461167339924, latitude = 26.268905608606616 }, + new { longitude = 49.645896067213215, latitude = 27.15116474192905 }, + new { longitude = 48.917371072320805, latitude = 27.55738830340198 }, + new { longitude = 48.3984720209192, latitude = 28.566207269716173 }, + new { longitude = 47.68851714518985, latitude = 28.5938991332588 }, + new { longitude = 47.45059089191449, latitude = 29.009321449856984 }, + new { longitude = 44.73549453609391, latitude = 29.157358362696385 }, + new { longitude = 41.79487372890989, latitude = 31.23489959729713 }, + new { longitude = 40.36977176033773, latitude = 31.9642352513131 }, + new { longitude = 39.168270913149826, latitude = 32.18348471414393 }, + new { longitude = 37.019253492546454, latitude = 31.47710220862595 }, + new { longitude = 37.99644645508337, latitude = 30.4851028633376 }, + new { longitude = 37.67756530485232, latitude = 30.3636358598429 }, + new { longitude = 37.50181466030105, latitude = 29.960155516804974 }, + new { longitude = 36.700288181129594, latitude = 29.882136586478993 }, + new { longitude = 36.100009274845206, latitude = 29.15308642012721 }, + new { longitude = 34.85774476486728, latitude = 29.3103032832622 }, + new { longitude = 34.64498583263142, latitude = 28.135787235699823 }, + new { longitude = 34.88539587371454, latitude = 28.181421087099537 } + }; + + + var polygons = new List + { + new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2, TooltipText="Saudi Arabia" } + }; + + var tooltipSettings = new Syncfusion.EJ2.Maps.MapsTooltipSettings + { + Visible = true, + Border = new Syncfusion.EJ2.Maps.MapsBorder + { + Width = 2, + Color = "Red" + } + }; +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/polygon-shape.cs b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/polygon-shape.cs new file mode 100644 index 0000000000..a720d8b43a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/polygon-shape.cs @@ -0,0 +1,29 @@ +using Newtonsoft.Json; +using Syncfusion.EJ2.Charts; + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + ViewBag.worldmap = GetWorldMap(); + ViewBag.world_map = GetMap(); + return View(); + } + + // To access the data in Core + public object GetWorldMap() + { + string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js"); + return JsonConvert.DeserializeObject(allText); + } + + // To access the data in MVC + public object GetMap() + { + string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json")); + return JsonConvert.DeserializeObject(allText, typeof(object)); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/razor b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/razor new file mode 100644 index 0000000000..21a87f4f16 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/razor @@ -0,0 +1,60 @@ +@using Syncfusion.EJ2; + +@{ + var data = new[] + { + new { longitude = 34.88539587371454, latitude = 28.181421087099537 }, + new { longitude = 37.50029619722466, latitude = 24.299419888989462 }, + new { longitude = 39.22241423764024, latitude = 22.638529461838658 }, + new { longitude = 38.95650769309776, latitude = 21.424998160017495 }, + new { longitude = 40.19963938650778, latitude = 20.271205391339606 }, + new { longitude = 41.76547269134551, latitude = 18.315451049867193 }, + new { longitude = 42.78452077838921, latitude = 16.097235052947966 }, + new { longitude = 43.36984949591576, latitude = 17.188572054533054 }, + new { longitude = 44.12558191797012, latitude = 17.407258102232234 }, + new { longitude = 46.69027032797584, latitude = 17.33342243475734 }, + new { longitude = 47.09312386141585, latitude = 16.97087769526452 }, + new { longitude = 48.3417299826302, latitude = 18.152700711188004 }, + new { longitude = 49.74762591400318, latitude = 18.81544363931681 }, + new { longitude = 52.41428026336621, latitude = 18.9035706497573 }, + new { longitude = 55.272683129240335, latitude = 20.133861012918544 }, + new { longitude = 55.60121336079203, latitude = 21.92042703112351 }, + new { longitude = 55.08204399107967, latitude = 22.823302662258882 }, + new { longitude = 52.743894337844154, latitude = 22.954463486477437 }, + new { longitude = 51.47035908651375, latitude = 24.35818837668566 }, + new { longitude = 51.122553219055874, latitude = 24.666679732426346 }, + new { longitude = 51.58731671256831, latitude = 25.173806925822717 }, + new { longitude = 51.35950585992913, latitude = 25.84556484481108 }, + new { longitude = 51.088770529661275, latitude = 26.168494193631147 }, + new { longitude = 50.78527056538036, latitude = 25.349051242147596 }, + new { longitude = 50.88330288802666, latitude = 24.779242606720743 }, + new { longitude = 50.19702490702369, latitude = 25.66825106363693 }, + new { longitude = 50.066461167339924, latitude = 26.268905608606616 }, + new { longitude = 49.645896067213215, latitude = 27.15116474192905 }, + new { longitude = 48.917371072320805, latitude = 27.55738830340198 }, + new { longitude = 48.3984720209192, latitude = 28.566207269716173 }, + new { longitude = 47.68851714518985, latitude = 28.5938991332588 }, + new { longitude = 47.45059089191449, latitude = 29.009321449856984 }, + new { longitude = 44.73549453609391, latitude = 29.157358362696385 }, + new { longitude = 41.79487372890989, latitude = 31.23489959729713 }, + new { longitude = 40.36977176033773, latitude = 31.9642352513131 }, + new { longitude = 39.168270913149826, latitude = 32.18348471414393 }, + new { longitude = 37.019253492546454, latitude = 31.47710220862595 }, + new { longitude = 37.99644645508337, latitude = 30.4851028633376 }, + new { longitude = 37.67756530485232, latitude = 30.3636358598429 }, + new { longitude = 37.50181466030105, latitude = 29.960155516804974 }, + new { longitude = 36.700288181129594, latitude = 29.882136586478993 }, + new { longitude = 36.100009274845206, latitude = 29.15308642012721 }, + new { longitude = 34.85774476486728, latitude = 29.3103032832622 }, + new { longitude = 34.64498583263142, latitude = 28.135787235699823 }, + new { longitude = 34.88539587371454, latitude = 28.181421087099537 } + }; + + + var polygons = new List +{ + new Syncfusion.EJ2.Maps.MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; +} + +@(Html.EJS().Maps("maps").Layers(layers => { layers.PolygonSettings(polygon => { polygon.Polygons(polygons); }).ShapeData(ViewBag.world_map).Add(); }).Render()) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/tagHelper new file mode 100644 index 0000000000..c44b21b5a8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/tagHelper @@ -0,0 +1,67 @@ +@using Syncfusion.EJ2.Maps + +@{ + var data = new[] + { + new { longitude = 34.88539587371454, latitude = 28.181421087099537 }, + new { longitude = 37.50029619722466, latitude = 24.299419888989462 }, + new { longitude = 39.22241423764024, latitude = 22.638529461838658 }, + new { longitude = 38.95650769309776, latitude = 21.424998160017495 }, + new { longitude = 40.19963938650778, latitude = 20.271205391339606 }, + new { longitude = 41.76547269134551, latitude = 18.315451049867193 }, + new { longitude = 42.78452077838921, latitude = 16.097235052947966 }, + new { longitude = 43.36984949591576, latitude = 17.188572054533054 }, + new { longitude = 44.12558191797012, latitude = 17.407258102232234 }, + new { longitude = 46.69027032797584, latitude = 17.33342243475734 }, + new { longitude = 47.09312386141585, latitude = 16.97087769526452 }, + new { longitude = 48.3417299826302, latitude = 18.152700711188004 }, + new { longitude = 49.74762591400318, latitude = 18.81544363931681 }, + new { longitude = 52.41428026336621, latitude = 18.9035706497573 }, + new { longitude = 55.272683129240335, latitude = 20.133861012918544 }, + new { longitude = 55.60121336079203, latitude = 21.92042703112351 }, + new { longitude = 55.08204399107967, latitude = 22.823302662258882 }, + new { longitude = 52.743894337844154, latitude = 22.954463486477437 }, + new { longitude = 51.47035908651375, latitude = 24.35818837668566 }, + new { longitude = 51.122553219055874, latitude = 24.666679732426346 }, + new { longitude = 51.58731671256831, latitude = 25.173806925822717 }, + new { longitude = 51.35950585992913, latitude = 25.84556484481108 }, + new { longitude = 51.088770529661275, latitude = 26.168494193631147 }, + new { longitude = 50.78527056538036, latitude = 25.349051242147596 }, + new { longitude = 50.88330288802666, latitude = 24.779242606720743 }, + new { longitude = 50.19702490702369, latitude = 25.66825106363693 }, + new { longitude = 50.066461167339924, latitude = 26.268905608606616 }, + new { longitude = 49.645896067213215, latitude = 27.15116474192905 }, + new { longitude = 48.917371072320805, latitude = 27.55738830340198 }, + new { longitude = 48.3984720209192, latitude = 28.566207269716173 }, + new { longitude = 47.68851714518985, latitude = 28.5938991332588 }, + new { longitude = 47.45059089191449, latitude = 29.009321449856984 }, + new { longitude = 44.73549453609391, latitude = 29.157358362696385 }, + new { longitude = 41.79487372890989, latitude = 31.23489959729713 }, + new { longitude = 40.36977176033773, latitude = 31.9642352513131 }, + new { longitude = 39.168270913149826, latitude = 32.18348471414393 }, + new { longitude = 37.019253492546454, latitude = 31.47710220862595 }, + new { longitude = 37.99644645508337, latitude = 30.4851028633376 }, + new { longitude = 37.67756530485232, latitude = 30.3636358598429 }, + new { longitude = 37.50181466030105, latitude = 29.960155516804974 }, + new { longitude = 36.700288181129594, latitude = 29.882136586478993 }, + new { longitude = 36.100009274845206, latitude = 29.15308642012721 }, + new { longitude = 34.85774476486728, latitude = 29.3103032832622 }, + new { longitude = 34.64498583263142, latitude = 28.135787235699823 }, + new { longitude = 34.88539587371454, latitude = 28.181421087099537 } + }; + + + var polygons = new List + { + new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/query-builder/globalization/localization/razor b/ej2-asp-core-mvc/code-snippet/query-builder/globalization/localization/razor index dcfea2fa0c..35b8dc70eb 100644 --- a/ej2-asp-core-mvc/code-snippet/query-builder/globalization/localization/razor +++ b/ej2-asp-core-mvc/code-snippet/query-builder/globalization/localization/razor @@ -25,6 +25,9 @@ 'SelectOperator': 'Operator auswählen', 'StartsWith': 'Beginnt mit', 'EndsWith': 'Endet mit', + 'DoesNotStartWith': 'Beginnt nicht mit', + 'DoesNotEndWith': 'Endet nicht mit', + 'DoesNotContain': 'Beinhaltet nicht', 'Contains': 'Enthält', 'Equal': 'Gleich', 'NotEqual': 'Nicht gleich', diff --git a/ej2-asp-core-mvc/code-snippet/query-builder/globalization/localization/tagHelper b/ej2-asp-core-mvc/code-snippet/query-builder/globalization/localization/tagHelper index b1496875f3..6eed1ea033 100644 --- a/ej2-asp-core-mvc/code-snippet/query-builder/globalization/localization/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/query-builder/globalization/localization/tagHelper @@ -24,6 +24,9 @@ 'SelectOperator': 'Operator auswählen', 'StartsWith': 'Beginnt mit', 'EndsWith': 'Endet mit', + 'DoesNotStartWith': 'Beginnt nicht mit', + 'DoesNotEndWith': 'Endet nicht mit', + 'DoesNotContain': 'Beinhaltet nicht', 'Contains': 'Enthält', 'Equal': 'Gleich', 'NotEqual': 'Nicht gleich', diff --git a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-editing/collaborativeController.cs b/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-editing/collaborativeController.cs deleted file mode 100644 index ae802af03b..0000000000 --- a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-editing/collaborativeController.cs +++ /dev/null @@ -1,4 +0,0 @@ -public IActionResult Index() - { - return View(); - } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-editing/razor b/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-editing/razor deleted file mode 100644 index 65e896c9d1..0000000000 --- a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-editing/razor +++ /dev/null @@ -1,23 +0,0 @@ -@Html.EJS().Spreadsheet("spreadsheet").ActionComplete("actionComplete").Render() - - diff --git a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-editing/tagHelper b/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-editing/tagHelper deleted file mode 100644 index ea8fae8b20..0000000000 --- a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-editing/tagHelper +++ /dev/null @@ -1,24 +0,0 @@ - - - - diff --git a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-prevent-action/collaborativePreventController.cs b/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-prevent-action/collaborativePreventController.cs deleted file mode 100644 index ae802af03b..0000000000 --- a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-prevent-action/collaborativePreventController.cs +++ /dev/null @@ -1,4 +0,0 @@ -public IActionResult Index() - { - return View(); - } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-prevent-action/razor b/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-prevent-action/razor deleted file mode 100644 index 9f52f83d6f..0000000000 --- a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-prevent-action/razor +++ /dev/null @@ -1,26 +0,0 @@ -@Html.EJS().Spreadsheet("spreadsheet").ActionComplete("actionComplete").Render() - - diff --git a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-prevent-action/tagHelper b/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-prevent-action/tagHelper deleted file mode 100644 index 6b18853bc5..0000000000 --- a/ej2-asp-core-mvc/code-snippet/spreadsheet/collaborative-prevent-action/tagHelper +++ /dev/null @@ -1,27 +0,0 @@ - - - - diff --git a/ej2-asp-core-mvc/code-snippet/spreadsheet/import-collaborative-mode/collaborativeImportController.cs b/ej2-asp-core-mvc/code-snippet/spreadsheet/import-collaborative-mode/collaborativeImportController.cs deleted file mode 100644 index ae802af03b..0000000000 --- a/ej2-asp-core-mvc/code-snippet/spreadsheet/import-collaborative-mode/collaborativeImportController.cs +++ /dev/null @@ -1,4 +0,0 @@ -public IActionResult Index() - { - return View(); - } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/spreadsheet/import-collaborative-mode/razor b/ej2-asp-core-mvc/code-snippet/spreadsheet/import-collaborative-mode/razor deleted file mode 100644 index 211b35940a..0000000000 --- a/ej2-asp-core-mvc/code-snippet/spreadsheet/import-collaborative-mode/razor +++ /dev/null @@ -1,39 +0,0 @@ -@Html.EJS().Spreadsheet("spreadsheet").ActionComplete("actionComplete").Render() - - diff --git a/ej2-asp-core-mvc/code-snippet/spreadsheet/import-collaborative-mode/tagHelper b/ej2-asp-core-mvc/code-snippet/spreadsheet/import-collaborative-mode/tagHelper deleted file mode 100644 index a7089ba142..0000000000 --- a/ej2-asp-core-mvc/code-snippet/spreadsheet/import-collaborative-mode/tagHelper +++ /dev/null @@ -1,41 +0,0 @@ - - - - diff --git a/ej2-asp-core-mvc/diagram/bpmn-shapes.md b/ej2-asp-core-mvc/diagram/bpmn-shapes.md index 00a48664bf..21d844be77 100644 --- a/ej2-asp-core-mvc/diagram/bpmn-shapes.md +++ b/ej2-asp-core-mvc/diagram/bpmn-shapes.md @@ -527,21 +527,21 @@ Artifact is used to show additional information about a process in order to make ## Text annotation -* A BPMN object can be associated with a text annotation which does not affect the flow but gives details about objects within a flow. The annotation property of the node is used to connect an annotation element to the BPMN node. +* A BPMN object can be associated with a text annotation which does not affect the flow but gives details about objects within a flow. -* The annotation element can be displaced into a different position interactively by dragging the annotation to a particular position. +* A TextAnnotation points to or references another BPMN shape, which we call the `textAnnotationTarget` of the textAnnotation. When a target shape is moved or deleted, any TextAnnotations attached to the shape will be moved or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The `textAnnotationTarget` property of the BpmnTextAnnotation is used to connect an annotation element to the BPMN Node. * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. -* The annotation angle property is used to set the angle between the BPMN shape and the annotation. +* By default, the TextAnnotation shape has a connection. -* The annotation direction property is used to set the direction of the text annotation. +* The `textAnnotationDirection` property is used to set the shape direction of the text annotation. -* To set the size for text annotation, use width and height properties. +* By default, the `textAnnotationDirection` is set to a Auto. -* The annotation length property is used to set the distance between the BPMN shape and the annotation. +* To set the size for text annotation, use the `width` and `height` properties of the node. -* The annotation text property defines the additional information about the flow object in a BPMN process. +* The `offsetX` and `offsetY` properties are used to set the distance between the BPMN node and the TextAnnotation. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/diagram/interaction/keyboard.md b/ej2-asp-core-mvc/diagram/interaction/keyboard.md index ee7d996c95..861b93fd0b 100644 --- a/ej2-asp-core-mvc/diagram/interaction/keyboard.md +++ b/ej2-asp-core-mvc/diagram/interaction/keyboard.md @@ -30,6 +30,40 @@ The following table illustrates those commands with the associated key values. | Ctrl + MouseWheel | zoom | Zoom (Zoom in/Zoom out the diagram).| | F2 | `startLabelEditing` | Starts to edit the label of the selected element.| | Esc | `endLabelEditing` | Sets the label mode as view and stops editing.| +| Tab | Tab to Focus | Select the diagram element based on the rendering order when using the "Tab" key.| +| Shift + Tab | Go to Previous Object | This command is employed to shift the selection to the preceding object based on the z-order.| +| Control + B | Bold | Toggle bold formatting for the selected text.| +| Control + I | Italic | Toggle italic formatting for the selected text.| +| Control + U | Underline | Toggle underline formatting for the selected text.| +| Control + D | Duplicate | Duplicate a selected shape.| +| Control + G | Group | Group together multiple selected shapes, allowing them to be treated as a single shape.| +| Control + Shift + U | UnGroup | Ungroup shapes within a previously grouped selection.| +| Control + R | Rotate clockwise | Rotate the selected nodes in clockwise.| +| Control + L | Rotate anti-clockwise | Rotate the selected nodes in counterclockwise.| +| Control + H | Flip Horizontal | Flip the selected elements horizontally.| +| Control + J | Flip Vertical | Flip the selected elements vertically.| +| Control + 1 | Pointer tool | Activate the pointer tool.| +| Control + 2 | Text tool | Activate the text tool.| +| Control + 3 | Connector tool | Activate the connector tool.| +| Control + 5 | Freeform tool | Activate the freeform tool.| +| Control + 6 | Line tool | Activate the polyline tool.| +| Control + + | Zoom In | Zoom in the diagram.| +| Control + - | Zoom Out | Zoom out the diagram.| +| Shift + Up Arrow | Up | Moves the selected elements towards up by 5 pixel.| +| Shift + Down Arrow | Down | Moves the selected elements towards down by 5 pixel.| +| Shift + Left Arrow | Left | Moves the selected elements towards left by 5 pixel.| +| Shift + Right Arrow | Right | Moves the selected elements towards right by 5 pixel.| +| Control + Shift + L | Align Text Left | Align the selected text to the left.| +| Control + Shift + C | Center Text Horizontally | Center the selected text horizontally.| +| Control + Shift + R | Align Text Right | Align the selected text to the right.| +| Control + Shift + J | Justify Text Horizontally | Justify the selected text, aligning it to both the left and right margins.| +| Control + Shift + E | Top-align Text Vertically | Align the selected text to the top vertically.| +| Control + Shift + M | Center Text Vertically | Center the selected text vertically.| +| Control + Shift + V | Bottom-align Text Vertically | Align the selected text to the bottom vertically.| +| Control + Shift + B | Send To Back | Send the selected shape backward in the stacking order, making it appear behind other shapes.| +| Control + Shift + F | Bring To Front | Bring the selected shape forward in the stacking order, making it appear in front of other shapes.| +| Control + [ | Send Backward | Move the selected shape one step backward in the layer order.| +| Control + ] | Bring Forward | Move the selected shape one step forward in the layer order.| ## See Also diff --git a/ej2-asp-core-mvc/diagram/nodes.md b/ej2-asp-core-mvc/diagram/nodes.md index 5d4c0149f7..3f0a2dcf58 100644 --- a/ej2-asp-core-mvc/diagram/nodes.md +++ b/ej2-asp-core-mvc/diagram/nodes.md @@ -196,6 +196,22 @@ N> The flip is also applicable for group and BPMN shapes. {% endtabs %} {% endif %} +## Customize the style of main node on multi-selection. + +The style of the main node can be customized by using the className `e-diagram-first-selection-indicator`. + +Use the following CSS to customize the style of main node on multiple selection. + +```css + + .e-diagram-first-selection-indicator{ + stroke-width: 5px; + stroke: red; + stroke-dasharray: 1,1; + } + +``` + ## Gradient The [`gradient`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramShapeStyle.html#Syncfusion_EJ2_Diagrams_DiagramShapeStyle_Gradient) property of the node allows to define and apply the gradient effect to that node. diff --git a/ej2-asp-core-mvc/document-editor/collaborative-editing.md b/ej2-asp-core-mvc/document-editor/collaborative-editing.md index bd5fb51043..f7d67b5d76 100644 --- a/ej2-asp-core-mvc/document-editor/collaborative-editing.md +++ b/ej2-asp-core-mvc/document-editor/collaborative-editing.md @@ -1,16 +1,14 @@ --- -title: Collaborative Editing (preview) +title: Collaborative Editing in ##Platform_Name## Document Editor Control | Syncfusion component: DocumentEditor -description: Learn how to perform collaborative editing in ##Platform_Name## document editor +description: Learn how to enable and perform collaborative editing in Syncfusion ##Platform_Name## Document editor. publishingplatform: ##Platform_Name## --- -# Collaborative Editing (preview) +# Collaborative Editing Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes. -> Note: Collaborative editing support is currently in preview mode only and is not yet ready for production environments. - ## Prerequisites Following things are needed to enable collaborative editing in Document Editor diff --git a/ej2-asp-core-mvc/document-editor/comments.md b/ej2-asp-core-mvc/document-editor/comments.md index ea99c3b7f4..d4525f424c 100644 --- a/ej2-asp-core-mvc/document-editor/comments.md +++ b/ej2-asp-core-mvc/document-editor/comments.md @@ -79,4 +79,29 @@ Comment only protection can be enabled in UI by using [Restrict Editing pane](.. ![Enable comment only protection](images/commentsonly.png) -N> In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password. \ No newline at end of file +N> In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password. + +## Mention Support in comments + +Mention support displays a list of items that users can select or tag from the suggested list. To use this feature, type the `@` character in the comment box and select or tag the user from the suggestion list. + +The following example illustrates how to enable mention support in Document Editor + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/comments-mention/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="comments-mention.cs" %} +{% endhighlight %}{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/comments-mention/razor %} +{% endhighlight %} +{% highlight c# tabtitle="comments-mention.cs" %} +{% endhighlight %}{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/document-editor/export.md b/ej2-asp-core-mvc/document-editor/export.md index a25da7642e..f1b1fb66f8 100644 --- a/ej2-asp-core-mvc/document-editor/export.md +++ b/ej2-asp-core-mvc/document-editor/export.md @@ -9,16 +9,16 @@ documentation: ug --- -# Export in Document Editor Component +# Export in Document Editor Component Document editor exports the document into various known file formats in client-side such as Microsoft Word document (.docx), text document (.txt), and its own format called **Syncfusion Document Text (.sfdt)**. We are providing two types of save APIs as mentioned below. -|API name|Purpose| -|--------|---------| -|save(filename,FormatType):void
FormatType: Sfdt or Docx or Txt|Creates the document with specified file name and format type. Then, the created file is downloaded in the client browser by default.| -|saveAsBlob(FormatType):Blob|Creates the document in specified format type and returns the created document as Blob.
This blob can be uploaded to your required server, database, or file path.| +|API name|Purpose|Code Snippet for Document Editor|Code Snippet for Document Editor Container| +|--------|---------|----------|----------| +|save(filename,FormatType):void
FormatType: Sfdt or Docx or Txt|Creates the document with specified file name and format type. Then, the created file is downloaded in the client browser by default.|documenteditor.save('sample', 'Docx')|container.documentEditor.save('sample', 'Docx')| +|saveAsBlob(FormatType):Blob|Creates the document in specified format type and returns the created document as Blob.
This blob can be uploaded to your required server, database, or file path.|documenteditor.saveAsBlob('Docx')|container.documentEditor.saveAsBlob('Docx')| ## Sfdt export @@ -35,6 +35,15 @@ The following example shows how to export documents in document editor as Syncfu {% endhighlight %} {% endtabs %} +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-container-sfdt/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor-container/export-container-sfdt/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + {% elsif page.publishingplatform == "aspnet-mvc" %} {% tabs %} @@ -45,8 +54,16 @@ The following example shows how to export documents in document editor as Syncfu {% include code-snippet/document-editor/export-sfdt/document-editor.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-container-sfdt/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor-container/export-container-sfdt/document-editor.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} N>To enable Sfdt export for a document editor instance, set [`enableSfdtExport`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_EnableSfdtExport) to true. @@ -66,6 +83,15 @@ The following example shows how to export the document as Word document (.docx). {% endhighlight %} {% endtabs %} +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-container-docx/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor-container/export-container-docx/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + {% elsif page.publishingplatform == "aspnet-mvc" %} {% tabs %} @@ -76,12 +102,67 @@ The following example shows how to export the document as Word document (.docx). {% include code-snippet/document-editor/export-docx/document-editor.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-container-docx/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor-container/export-container-docx/document-editor.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} N>To enable word export for a document editor instance, set [`enableWordExport`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_EnableWordExport) to true. +## Word Template Export + +The following example shows how to export the document as Word Template (.dotx). + +>Note: The Syncfusion Document Editor component's document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application. For more information about [why the document pagination (page-by-page display) differs from Microsoft Word](../document-editor/import/#why-the-document-pagination-differs-from-microsoft-word) + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor/export-dotx/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor/export-dotx/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-container-dotx/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor-container/export-container-dotx/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor/export-dotx/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor/export-dotx/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-container-dotx/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor-container/export-container-dotx/document-editor.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Text export The following example shows how to export document as text document (.txt). @@ -97,6 +178,15 @@ The following example shows how to export document as text document (.txt). {% endhighlight %} {% endtabs %} +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-container-txt/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor-container/export-container-txt/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + {% elsif page.publishingplatform == "aspnet-mvc" %} {% tabs %} @@ -107,6 +197,15 @@ The following example shows how to export document as text document (.txt). {% include code-snippet/document-editor/export-txt/document-editor.cs %} {% endhighlight %} {% endtabs %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-container-txt/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor-container/export-container-txt/document-editor.cs %} +{% endhighlight %} +{% endtabs %} {% endif %} @@ -126,6 +225,13 @@ Document editor also supports API to store the document into a blob. {% highlight c# tabtitle="Export-blob.cs" %} {% endhighlight %}{% endtabs %} +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-container-blob/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Export-blob.cs" %} +{% endhighlight %}{% endtabs %} + {% elsif page.publishingplatform == "aspnet-mvc" %} {% tabs %} @@ -134,6 +240,13 @@ Document editor also supports API to store the document into a blob. {% endhighlight %} {% highlight c# tabtitle="Export-blob.cs" %} {% endhighlight %}{% endtabs %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/export-container-blob/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Export-blob.cs" %} +{% endhighlight %}{% endtabs %} {% endif %} diff --git a/ej2-asp-core-mvc/document-editor/how-to/customize-color-picker.md b/ej2-asp-core-mvc/document-editor/how-to/customize-color-picker.md new file mode 100644 index 0000000000..28fa60756d --- /dev/null +++ b/ej2-asp-core-mvc/document-editor/how-to/customize-color-picker.md @@ -0,0 +1,45 @@ +--- +layout: post +title: Customize Color Picker in Syncfusion ##Platform_Name## Document Editor Component +description: Learn here all about how to customize color picker in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Customize Color Picker +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# How to customize the color picker in Document Editor component + +Document editor provides an options to customize the color picker using `colorPickerSettings` in Document editor settings. The color picker offers customization options for default appearance, by allowing selection between Picker or Palette mode, for font and border colors." + +Similarly, you can use `documentEditorSettings` property for DocumentEditor also. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/customize-color-picker/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="customize-color-picker.cs" %} +{% endhighlight %}{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/customize-color-picker/razor %} +{% endhighlight %} +{% highlight c# tabtitle="customize-color-picker.cs" %} +{% endhighlight %}{% endtabs %} +{% endif %} + +The following table illustrates all the possible properties for the color picker. + +| Property | Behaviour | +|---|---| +| columns | It is used to render the ColorPicker palette with specified columns. Defaults to 10 | +| disabled | It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open. Defaults to false | +| mode | It is used to render the ColorPicker with the specified mode. Defaults to ‘Picker’ | +| modeSwitcher | It is used to show / hide the mode switcher button of ColorPicker component. Defaults to true | +| showButtons | It is used to show / hide the control buttons (apply / cancel) of ColorPicker component. Defaults to true | \ No newline at end of file diff --git a/ej2-asp-core-mvc/document-editor/track-changes.md b/ej2-asp-core-mvc/document-editor/track-changes.md index f38823d3e1..8baa3f5213 100644 --- a/ej2-asp-core-mvc/document-editor/track-changes.md +++ b/ej2-asp-core-mvc/document-editor/track-changes.md @@ -35,6 +35,31 @@ The following example demonstrates how to enable track changes. {% endhighlight %}{% endtabs %} {% endif %} +## Show/Hide Revisions Pane + +The Show/Hide Revisions Pane feature in the Document Editor allows users to toggle the visibility of the revisions pane, providing flexibility in managing tracked changes within the document. + +The following example code illustrates how to show/hide the revisions pane. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/toggle-track-pane/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Track-changes-only.cs" %} +{% endhighlight %}{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/toggle-track-pane/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Track-changes-only.cs" %} +{% endhighlight %}{% endtabs %} +{% endif %} + ## Get all tracked revisions The following example demonstrate how to get all tracked revision from current document. diff --git a/ej2-asp-core-mvc/document-editor/view.md b/ej2-asp-core-mvc/document-editor/view.md new file mode 100644 index 0000000000..36416ed6e9 --- /dev/null +++ b/ej2-asp-core-mvc/document-editor/view.md @@ -0,0 +1,92 @@ +--- +layout: post +title: View in ##Platform_Name## Document Editor Control | Syncfusion +description: Learn here all about View in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: View +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# View in DocumentEditor + +## Web Layout + +DocumentEditor allows to change the view to web layout and print using the [`layoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_LayoutType) property with the supported [`LayoutType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.LayoutType.html) + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor/web-layout/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Web-layout.cs" %} +{% endhighlight %}{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor/web-layout/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Web-layout.cs" %} +{% endhighlight %}{% endtabs %} +{% endif %} + +## Ruler + +Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor. + +The following example illustrates how to enable ruler in Document Editor + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor/ruler/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor/ruler/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor/ruler/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Document-editor.cs" %} +{% include code-snippet/document-editor/ruler/document-editor.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Navigation Pane + +Using the heading navigation pane allows users to swiftly navigate documents by heading, enhancing their ability to move through the document efficiently. + +The following example illustrates how to enable heading navigation pane in Document Editor + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor/heading-navigation/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="heading-navigation.cs" %} +{% include code-snippet/document-editor/heading-navigation/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor/heading-navigation/razor %} +{% endhighlight %} +{% highlight c# tabtitle="heading-navigation.cs" %} +{% include code-snippet/document-editor/heading-navigation/document-editor.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/animation.md b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/animation.md new file mode 100644 index 0000000000..98acfa8cf5 --- /dev/null +++ b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/animation.md @@ -0,0 +1,36 @@ +--- +layout: post +title: Animation in the Syncfusion ##Platform_Name## Linear Gauge component +description: Learn here all about animation in the Syncfusion ##Platform_Name## Linear Gauge component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Linear Gauge +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Animation in ASP.NET MVC Linear Gauge + +All of the elements in the Linear Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGauge.html#Syncfusion_EJ2_LinearGauge_LinearGauge_AnimationDuration) property. The animation for the Linear Gauge is enabled when the `AnimationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `AnimationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. + +1. The axis line, ticks, labels, and ranges will all be animated at the same time. +2. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetmvc/documentation/linear-gauge/pointers#pointer-animation). +3. If available, annotations will be animated. + +The animation of the Linear Gauge is demonstrated in the following example. + +{% if page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/animation/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Animation.cs" %} +{% include code-snippet/lineargauge/animation/animation.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![Linear Gauge with animation](../linear-gauge/images/animation.gif) + +> Only the pointer of the Linear Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetmvc/documentation/linear-gauge/pointers#pointer-animation) to enable only pointer animation. diff --git a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/pointers.md b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/pointers.md index d5c3ec2566..5f9d18e225 100644 --- a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/pointers.md +++ b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/pointers.md @@ -1,6 +1,6 @@ --- layout: post -title: Pointers in ##Platform_Name## Linear Gauge Component +title: Pointers in Syncfusion ##Platform_Name## Linear Gauge Component description: Learn here all about Pointers in Syncfusion ##Platform_Name## Linear Gauge component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Pointers @@ -11,7 +11,7 @@ documentation: ug # Pointers in ASP.NET MVC Linear Gauge -Pointers are used to indicate values on an axis. The value of the pointer can be modified using the [`Value`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Value) property in [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). +Pointers are used to indicate values on an axis. The value of the pointer can be modified using the [Value](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Value) property in [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). {% if page.publishingplatform == "aspnet-core" %} @@ -47,7 +47,7 @@ The Linear Gauge supports the following types of pointers: * Bar * Marker -The type of pointer can be modified by using the [`Type`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Type) property in [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). +The type of pointer can be modified by using the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Type) property in [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). ### Marker pointer @@ -55,7 +55,7 @@ A marker pointer is a shape that can be used to mark the pointer value in the Li Types of marker shapes -By default, the marker shape for the pointer is **InvertedTriangle**. To change the shape of the pointer, use the [`MarkerType`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property in [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). The following marker types are available in Linear Gauge. +By default, the marker shape for the pointer is **InvertedTriangle**. To change the shape of the pointer, use the [MarkerType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property in [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). The following marker types are available in Linear Gauge. * Circle * Rectangle @@ -63,35 +63,54 @@ By default, the marker shape for the pointer is **InvertedTriangle**. To change * InvertedTriangle * Diamond * Image - -An image can be rendered instead of rendering a shape as a pointer. It can be achieved by setting the [`MarkerType`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Image** and setting the source URL of image to [`ImageUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_ImageUrl) property in [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). - -{% if page.publishingplatform == "aspnet-core" %} +* Text {% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/lineargauge/pointers/marker-pointer/tagHelper %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/pointers/marker-pointer/razor %} {% endhighlight %} {% highlight c# tabtitle="Marker-pointer.cs" %} {% include code-snippet/lineargauge/pointers/marker-pointer/marker-pointer.cs %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Linear Gauge with pointer as circle](../linear-gauge/images/marker-pointer.png) + + +Image can be rendered instead of rendering a shape as a pointer. It can be achieved by setting the [MarkerType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Image** and setting the source URL of image to [ImageUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_ImageUrl) property in [Pointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/lineargauge/pointers/marker-pointer/razor %} +{% include code-snippet/lineargauge/pointers/marker-pointer-image/razor %} {% endhighlight %} -{% highlight c# tabtitle="Marker-pointer.cs" %} -{% include code-snippet/lineargauge/pointers/marker-pointer/marker-pointer.cs %} +{% highlight c# tabtitle="Marker-pointer-image.cs" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +![Linear Gauge with image pointer](../linear-gauge/images/marker-pointer-image.png) -![Linear Gauge with pointer as circle](../linear-gauge/images/marker-pointer.png) +Text can be added instead of rendering a shape as a pointer. It can be achieved by setting the [MarkerType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Text**, and the text content can be set using the [Text](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Text) property in [Pointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). + +The following properties in the [TextStyle](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_TextStyle) property can be used to set the text style for the text pointer. + +* [FontFamily](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontFamily) - It is used to set the font family for the text pointer. +* [FontStyle](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontStyle) - It is used to set the font style for the text pointer. +* [FontWeight](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontWeight) - It is used to set the font weight for the text pointer. +* [Size](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_Size) - It is used to set the font size for the text pointer. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-text/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Marker-pointer.cs" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs %} +{% endhighlight %} +{% endtabs %} + +![Linear Gauge with text pointer](../linear-gauge/images/marker-pointer-text.png) + @@ -99,15 +118,15 @@ An image can be rendered instead of rendering a shape as a pointer. It can be ac The marker pointer can be customized using the following properties and class. -* [`Height`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Height) - To set the height of the pointer. -* [`Position`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Position) - The position of the pointer can be changed by setting the value as **Inside**, **Outside**, **Cross**, or **Auto**. -* [`Width`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Width) - To set the width of the pointer. -* [`Color`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Color) - To set the color of the pointer. -* [`Placement`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Placement) - To place the pointer in the specified position. By default, the pointer is placed **Far** from the axis. To change the placement, set the [`Placement`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Placement) property as **Near**, **Center**, or **None**. -* [`Offset`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Offset) - To place the pointer with specified distance from the axis. -* [`Opacity`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Opacity) - To set the opacity of the pointer. -* [`AnimationDuration`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) - To specify the duration of the animation in pointer. -* [`Border`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Border) - To set the color and width for the border of the pointer. +* [Height](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Height) - To set the height of the pointer. +* [Position](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Position) - The position of the pointer can be changed by setting the value as **Inside**, **Outside**, **Cross**, or **Auto**. +* [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Width) - To set the width of the pointer. +* [Color](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Color) - To set the color of the pointer. +* [Placement](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Placement) - To place the pointer in the specified position. By default, the pointer is placed **Far** from the axis. To change the placement, set the [Placement](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Placement) property as **Near**, **Center**, or **None**. +* [Offset](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Offset) - To place the pointer with specified distance from the axis. +* [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Opacity) - To set the opacity of the pointer. +* [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) - To specify the duration of the animation in pointer. +* [Border](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Border) - To set the color and width for the border of the pointer. {% if page.publishingplatform == "aspnet-core" %} @@ -132,7 +151,7 @@ The marker pointer can be customized using the following properties and class. ### Bar pointer -The bar pointer is used to track the axis value. The bar pointer starts from the beginning of the gauge and ends at the pointer value. To enable bar pointer set the [`Type`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Type) property in [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html) as **Bar**. +The bar pointer is used to track the axis value. The bar pointer starts from the beginning of the gauge and ends at the pointer value. To enable bar pointer set the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Type) property in [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html) as **Bar**. {% if page.publishingplatform == "aspnet-core" %} @@ -167,13 +186,13 @@ The bar pointer is used to track the axis value. The bar pointer starts from the The bar pointer can be customized using following properties and class. -* [`Width`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Width) - To set the thickness of the bar pointer. -* [`Color`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Color) - To set the color of the bar pointer. -* [`Offset`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Offset) - To place the bar pointer with the specified distance from it's default position. -* [`Opacity`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Opacity) - To set the opacity of the bar pointer. -* [`RoundedCornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_RoundedCornerRadius) - To set the corner radius of the bar pointer. -* [`Border`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Border) - To set the color and width for the border of the pointer. -* [`AnimationDuration`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) - To set the duration of the animation in bar pointer. +* [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Width) - To set the thickness of the bar pointer. +* [Color](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Color) - To set the color of the bar pointer. +* [Offset](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Offset) - To place the bar pointer with the specified distance from it's default position. +* [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Opacity) - To set the opacity of the bar pointer. +* [RoundedCornerRadius](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_RoundedCornerRadius) - To set the corner radius of the bar pointer. +* [Border](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Border) - To set the color and width for the border of the pointer. +* [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) - To set the duration of the animation in bar pointer. N>The Placement property is not applicable for the bar pointer. @@ -206,7 +225,7 @@ N>The Placement property is not applicable for the bar pointer. ## Multiple pointers -Multiple pointers can be added to the Linear Gauge by adding multiple [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html) in the [`LinearGaugePointers`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointers.html) and customization for the pointers can be done with [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). +Multiple pointers can be added to the Linear Gauge by adding multiple [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html) in the [LinearGaugePointers](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointers.html) and customization for the pointers can be done with [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). {% if page.publishingplatform == "aspnet-core" %} @@ -237,7 +256,7 @@ Multiple pointers can be added to the Linear Gauge by adding multiple [`LinearGa ## Pointer animation -Pointer is animated on loading the gauge. This can be handled using the [`AnimationDuration`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) property. The duration of the animation can be specified in milliseconds. +Pointer is animated on loading the gauge. This can be handled using the [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) property. The duration of the animation can be specified in milliseconds. {% if page.publishingplatform == "aspnet-core" %} @@ -275,7 +294,7 @@ Gradient support allows the addition of multiple colors in the pointers of the L ### Linear Gradient -Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the [`StartValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) property. The end value of the linear gradient will be set using the [`EndValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) property. The color stop values such as [`Color`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Color), [`Opacity`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Opacity), and [`Offset`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Offset) are set using [`ColorStop`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_ColorStop) property. +Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the [StartValue](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) property. The end value of the linear gradient will be set using the [EndValue](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) property. The color stop values such as [Color](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Color), [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Opacity), and [Offset](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Offset) are set using [ColorStop](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_ColorStop) property. {% if page.publishingplatform == "aspnet-core" %} @@ -306,7 +325,7 @@ Using linear gradient, colors will be applied in a linear progression. The start ### Radial Gradient -Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`InnerPosition`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_InnerPosition) property. The outer circle position of the radial gradient can be set using the [`OuterPosition`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_OuterPosition) property. The color stop values such as [`Color`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Color), [`Opacity`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Opacity), and [`Offset`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Offset) are set using [`ColorStop`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_ColorStop) property. +Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [InnerPosition](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_InnerPosition) property. The outer circle position of the radial gradient can be set using the [OuterPosition](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_OuterPosition) property. The color stop values such as [Color](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Color), [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Opacity), and [Offset](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Offset) are set using [ColorStop](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_ColorStop) property. {% if page.publishingplatform == "aspnet-core" %} @@ -335,4 +354,4 @@ Using radial gradient, colors will be applied in circular progression. The inner ![Linear Gauge with radial gradient pointer](../linear-gauge/images/radial-pointer.png) -N>If we set both gradients, only the linear gradient gets rendered. If we set the [`StartValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) of the [`LinearGradient`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html) as empty strings, then the radial gradient gets rendered in the pointer of the Linear Gauge. \ No newline at end of file +N>If we set both gradients, only the linear gradient gets rendered. If we set the [StartValue](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) and [EndValue](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) of the [LinearGradient](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html) as empty strings, then the radial gradient gets rendered in the pointer of the Linear Gauge. \ No newline at end of file diff --git a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/animation.md b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/animation.md new file mode 100644 index 0000000000..2885381dca --- /dev/null +++ b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/animation.md @@ -0,0 +1,37 @@ +--- +layout: post +title: Animation in the Syncfusion ##Platform_Name## Linear Gauge component +description: Learn here all about animation in the Syncfusion ##Platform_Name## Linear Gauge component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Animation +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Animation in ASP.NET Core Linear Gauge + +All of the elements in the Linear Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGauge.html#Syncfusion_EJ2_LinearGauge_LinearGauge_AnimationDuration) property. The animation for the Linear Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. + +1. The axis line, ticks, labels, and ranges will all be animated at the same time. +2. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetcore/documentation/linear-gauge/pointers#pointer-animation). +3. If available, annotations will be animated. + +The animation of the Linear Gauge is demonstrated in the following example. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/animation/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Animation.cs" %} +{% include code-snippet/lineargauge/animation/animation.cs %} +{% endhighlight %} +{% endtabs %} + +{% endif %} + +![Linear Gauge with animation](../linear-gauge/images/animation.gif) + +> Only the pointer of the Linear Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetcore/documentation/linear-gauge/pointers#pointer-animation) to enable only pointer animation. diff --git a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/pointers.md b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/pointers.md index 2a203f86ee..259b233a76 100644 --- a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/pointers.md +++ b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/pointers.md @@ -1,6 +1,6 @@ --- layout: post -title: Pointers in ##Platform_Name## Linear Gauge Component +title: Pointers in Syncfusion ##Platform_Name## Linear Gauge Component description: Learn here all about Pointers in Syncfusion ##Platform_Name## Linear Gauge component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Pointers @@ -63,10 +63,7 @@ By default, the marker shape for the pointer is **InvertedTriangle**. To change * InvertedTriangle * Diamond * Image - -An image can be rendered instead of rendering a shape as a pointer. It can be achieved by setting the [`MarkerType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Image** and setting the source URL of image to [`ImageUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_ImageUrl) property in [`e-lineargauge-pointer`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). - -{% if page.publishingplatform == "aspnet-core" %} +* Text {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -77,21 +74,43 @@ An image can be rendered instead of rendering a shape as a pointer. It can be ac {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Linear Gauge with pointer as circle](../linear-gauge/images/marker-pointer.png) + + +Image can be rendered instead of rendering a shape as a pointer. It can be achieved by setting the [markerType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Image** and setting the source URL of image to [imageUrl](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_ImageUrl) property in [pointer](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). {% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/lineargauge/pointers/marker-pointer/razor %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-image/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Marker-pointer.cs" %} -{% include code-snippet/lineargauge/pointers/marker-pointer/marker-pointer.cs %} +{% include code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +![Linear Gauge with image pointer](../linear-gauge/images/marker-pointer-image.png) -![Linear Gauge with pointer as circle](../linear-gauge/images/marker-pointer.png) +Text can be added instead of rendering a shape as a pointer. It can be achieved by setting the [markerType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Text**, and the text content can be set using the [text](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Text) property in [pointer](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). + +The following properties in the [textStyle](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_TextStyle) property can be used to set the text style for the text pointer. + +* [fontFamily](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontFamily) - It is used to set the font family for the text pointer. +* [fontStyle](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontStyle) - It is used to set the font style for the text pointer. +* [fontWeight](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontWeight) - It is used to set the font weight for the text pointer. +* [size](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_Size) - It is used to set the font size for the text pointer. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-text/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Marker-pointer-text.cs" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs %} +{% endhighlight %} +{% endtabs %} + +![Linear Gauge with text pointer](../linear-gauge/images/marker-pointer-text.png) + @@ -335,4 +354,4 @@ Using radial gradient, colors will be applied in circular progression. The inner ![Linear Gauge with radial gradient pointer](../linear-gauge/images/radial-pointer.png) -N>If we set both gradients, only the linear gradient gets rendered. If we set the [`StartValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) of the [`LinearGradient`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html) as empty strings, then the radial gradient gets rendered in the pointer of the Linear Gauge. \ No newline at end of file +N>If we set both gradients, only the linear gradient gets rendered. If we set the [`StartValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) of the [`LinearGradient`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html) as empty strings, then the radial gradient gets rendered in the pointer of the Linear Gauge. diff --git a/ej2-asp-core-mvc/linear-gauge/images/animation.gif b/ej2-asp-core-mvc/linear-gauge/images/animation.gif new file mode 100644 index 0000000000..35454154d3 Binary files /dev/null and b/ej2-asp-core-mvc/linear-gauge/images/animation.gif differ diff --git a/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-image.png b/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-image.png new file mode 100644 index 0000000000..ec631074e2 Binary files /dev/null and b/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-image.png differ diff --git a/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-text.png b/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-text.png new file mode 100644 index 0000000000..8fd79b75d1 Binary files /dev/null and b/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-text.png differ diff --git a/ej2-asp-core-mvc/maps/images/Methods/getMinMaxLatitudeLongitude-method.PNG b/ej2-asp-core-mvc/maps/images/Methods/getMinMaxLatitudeLongitude-method.PNG new file mode 100644 index 0000000000..a23423ad2b Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Methods/getMinMaxLatitudeLongitude-method.PNG differ diff --git a/ej2-asp-core-mvc/maps/images/Polygon/PolygonShape.png b/ej2-asp-core-mvc/maps/images/Polygon/PolygonShape.png new file mode 100644 index 0000000000..35eab5e742 Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Polygon/PolygonShape.png differ diff --git a/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-highlight.gif b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-highlight.gif new file mode 100644 index 0000000000..bc6c4c3ec7 Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-highlight.gif differ diff --git a/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-selection.gif b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-selection.gif new file mode 100644 index 0000000000..105e6384ec Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-selection.gif differ diff --git a/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip-template.png b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip-template.png new file mode 100644 index 0000000000..1f754a412b Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip-template.png differ diff --git a/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip.png b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip.png new file mode 100644 index 0000000000..024a2e8933 Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip.png differ diff --git a/ej2-asp-core-mvc/maps/methods.md b/ej2-asp-core-mvc/maps/methods.md new file mode 100644 index 0000000000..74fc290047 --- /dev/null +++ b/ej2-asp-core-mvc/maps/methods.md @@ -0,0 +1,45 @@ +--- +layout: post +title: Methods in Syncfusion ##Platform_Name## Maps Component +description: Learn here all about the methods in the Syncfusion ##Platform_Name## Maps component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Maps +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Methods in ##Platform_Name## Maps component + +## Methods + +This section explains the methods used in the Maps component. + +## getMinMaxLatitudeLongitude + +The `getMinMaxLatitudeLongitude` method returns the minimum and maximum latitude and longitude values of the Maps visible area. This method returns a `IMinMaxLatitudeLongitude` object that contains the Maps minimum and maximum latitude and longitude coordinates. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/methods/getMinMaxLatitudeLongitude/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="GetMinMax.cs" %} +{% include code-snippet/maps/methods/getMinMaxLatitudeLongitude/getMinMaxLatitudeLongitude.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/methods/getMinMaxLatitudeLongitude/razor %} +{% endhighlight %} +{% highlight c# tabtitle="GetMinMax.cs" %} +{% include code-snippet/maps/methods/getMinMaxLatitudeLongitude/getMinMaxLatitudeLongitude.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +![getMinMaxLatitudeLongitude method](./images/Methods/getMinMaxLatitudeLongitude-method.PNG) diff --git a/ej2-asp-core-mvc/maps/polygon.md b/ej2-asp-core-mvc/maps/polygon.md new file mode 100644 index 0000000000..d897b0e750 --- /dev/null +++ b/ej2-asp-core-mvc/maps/polygon.md @@ -0,0 +1,151 @@ +--- +layout: post +title: Polygon in Syncfusion ##Platform_Name## Maps component +description: Learn here all about Polygon in Syncfusion ##Platform_Name## Maps component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Polygon +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Polygon shape in ##Platform_Name## Maps component + +{% if page.publishingplatform == "aspnet-core" %} + +The Maps component allows you to add polygon shape to a geometry map or an online map by using the properties in the [polygons](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_Polygons). This section describes how to add polygon shape to the map and customize them. + +## Adding polygon shape + +The polygon shape can be rendered over the map layer by defining the [points](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_Points) property in the `polygons` of the Maps component. The `points` property uses a collection of latitude and longitude values to define the polygon shape. + +The `polygons` provides the following properties for customizing the polygon shape of the Maps component. + +* [fill](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_Fill) - It is used to change the color of the polygon shape. +* [opacity](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_Opacity) - It is used to change the opacity of the polygon shape. +* [borderColor](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_BorderColor) - It is used to change the color of the border in the polygon shape. +* [borderWidth](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_BorderWidth) - It is used to change the width of the border in the polygon shape. +* [borderOpacity](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_BorderOpacity) - It is used to change the opacity of the border in the polygon shape. + +> You can also include “n” polygon shapes using the [polygons](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_Polygons) property. + +The following example shows how to customize the polygon shape over the geometry map. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape.cs" %} +{% include code-snippet/maps/polygon/polygon-shape/polygon-shape.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +The Maps component allows you to add polygon shape to a geometry map or an online map by using the properties in the [Polygons](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_Polygons). This section describes how to add polygon shape to the map and customize them. + +## Adding polygon shape + +The polygon shape can be rendered over the map layer by defining the [Points](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_Points) property in the `Polygons` of the Maps component. The `Points` property uses a collection of latitude and longitude values to define the polygon shape. + +The `Polygons` provides the following properties for customizing the polygon shape of the Maps component. + +* [Fill](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_Fill) - It is used to change the color of the polygon shape. +* [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_Opacity) - It is used to change the opacity of the polygon shape. +* [BorderColor](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_BorderColor) - It is used to change the color of the border in the polygon shape. +* [BorderWidth](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_BorderWidth) - It is used to change the width of the border in the polygon shape. +* [BorderOpacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_BorderOpacity) - It is used to change the opacity of the border in the polygon shape. + +> You can also include “n” polygon shapes using the [Polygons](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_Polygons) property. + +The following example shows how to customize the polygon shape over the geometry map. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape.cs" %} +{% include code-snippet/maps/polygon/polygon-shape/polygon-shape.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +![Maps with polygon shape](./images/Polygon/PolygonShape.png) + +## Tooltip + +{% if page.publishingplatform == "aspnet-core" %} + +Tooltip is used to display more information about a polygon shape during a mouse or touch interaction. Tooltip and tooltip template can be enabled by setting the `visible` property to **true** in the [tooltipSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_TooltipSettings). Additionally, you need to set the desired content as a value to the [tooltipText](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_TooltipText) property in the `polygons` property to show the tooltip. If you add 'n' numbers of polygon shapes, you can add the `tooltipText` property to each polygon, which will display the tooltip for the associated polygon shape. + +### Tooltip customization + +The following properties are available in the [tooltipSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_TooltipSettings) to customize the appearance of the tooltip. + +* `border` - To change the color, width, and opacity of the border of the tooltip in the polygon shape. +* `fill` - Applies the color of the tooltip in the polygon shape. +* `textStyle` - To change the style of the text in the tooltip of the polygon shape. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-tooltip.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip/polygon-shape-tooltip.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +Tooltip is used to display more information about a polygon shape during a mouse or touch interaction. Tooltip and tooltip template can be enabled by setting the `Visible` property to **true** in the [TooltipSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_TooltipSettings). Additionally, you need to set the desired content as a value to the [TooltipText](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_TooltipText) property in the `Polygons` property to show the tooltip. If you add 'n' numbers of polygon shapes, you can add the `TooltipText` property to each polygon, which will display the tooltip for the associated polygon shape. + +### Tooltip customization + +The following properties are available in the [TooltipSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_TooltipSettings) to customize the appearance of the tooltip. + +* `Border` - To change the color, width, and opacity of the border of the tooltip in the polygon shape. +* `Fill` - Applies the color of the tooltip in the polygon shape. +* `TextStyle` - To change the style of the text in the tooltip of the polygon shape. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-tooltip.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip/polygon-shape-tooltip.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![Maps with tooltip for polygon shape](./images/Polygon/polygon-shape-tooltip.png) + +### Tooltip template + +{% if page.publishingplatform == "aspnet-core" %} + +Any HTML element can be rendered in the tooltip of the polygon shapes using the [tooltipTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_TooltipTemplate) property of the `polygons`. If you add 'n' numbers of polygon shapes, you can add the `tooltipTemplate` property to each polygon, which will display the tooltip for the associated polygon shape. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-tooltip-template.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip-template/polygon-shape-tooltip-template.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +Any HTML element can be rendered in the tooltip of the polygon shapes using the [TooltipTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_TooltipTemplate) property of the `Polygons`. If you add 'n' numbers of polygon shapes, you can add the `TooltipTemplate` property to each polygon, which will display the tooltip for the associated polygon shape. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-tooltip-template.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip-template/polygon-shape-tooltip-template.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![Maps with tooltip template for polygon shape](./images/Polygon/polygon-shape-tooltip-template.png) diff --git a/ej2-asp-core-mvc/maps/user-interactions.md b/ej2-asp-core-mvc/maps/user-interactions.md index 4b77f001ca..52b39cd74c 100644 --- a/ej2-asp-core-mvc/maps/user-interactions.md +++ b/ej2-asp-core-mvc/maps/user-interactions.md @@ -549,6 +549,54 @@ To enable the selection for markers in Maps, set the `MapsSelectionSettings` in ![Enable selection for markers](./images/UserInteraction/selection-marker.PNG) +### Enable selection for polygons + +{% if page.publishingplatform == "aspnet-core" %} + +When the [enable](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Enable) property of [selectionSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_SelectionSettings) is set to **true**, the polygon shapes can be selected via user interaction. The following properties are available in `selectionSettings` to customize the polygon shape when it is selected. + +* [enableMultiSelect](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_EnableMultiSelect) - It is used to enable multiple selection of polygon shapes. +* [fill](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Fill) - It is used to change the color of the selected polygon shape. +* [opacity](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Opacity) - It is used to change the opacity of the selected polygon shape. +* [border](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Border) - This property is used to change the color, width, and opacity of the border of the selected polygon shape. + +The following example shows how to select the polygon shape in the geometry map. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-selection.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-selection/polygon-shape-selection.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +When the [Enable](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Enable) property of [SelectionSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_SelectionSettings) is set to **true**, the polygon shapes can be selected via user interaction. The following properties are available in `SelectionSettings` to customize the polygon shape when it is selected. + +* [EnableMultiSelect](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_EnableMultiSelect) - It is used to enable multiple selection of polygon shapes. +* [Fill](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Fill) - It is used to change the color of the selected polygon shape. +* [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Opacity) - It is used to change the opacity of the selected polygon shape. +* [Border](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Border) - This property is used to change the color, width, and opacity of the border of the selected polygon shape. + +The following example shows how to select the polygon shape in the geometry map. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-selection.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-selection/polygon-shape-selection.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +![Enable selection for polygons](./images/Polygon/polygon-shape-selection.gif) + + ### Public method for the shape selection The `shapeSelection` method can be used to select each shape in the Maps. LayerIndex, propertyName, country name, and selected value as a boolean state(true / false) are the input parameters for this method. @@ -741,6 +789,51 @@ To enable the highlight for markers in Maps, set the `MapsHighlightSettings` in ![Enable highlight for markers](./images/UserInteraction/selection-marker.PNG) +### Enable highlight for polygons + +{% if page.publishingplatform == "aspnet-core" %} + +The polygon shapes can be highlighted via user interaction if the [enable](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Enable) property of [highlightSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_HighlightSettings) is set to **true**. The following properties are available in `highlightSettings` to customize the polygon shape when it is highlighted. + +* [fill](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Fill) - It is used to change the color of the highlighted polygon shape. +* [opacity](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Opacity) - It is used to change the opacity of the highlighted polygon shape. +* [border](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Border) - This property is used to change the color, width, and opacity of the border of the highlighted polygon shape. + +The following example shows how to highlight a polygon shape on a geometry map. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-highlight/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-highlight.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-highlight/polygon-shape-highlight.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +The polygon shapes can be highlighted via user interaction if the [Enable](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Enable) property of [HighlightSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_HighlightSettings) is set to **true**. The following properties are available in `HighlightSettings` to customize the polygon shape when it is highlighted. + +* [Fill](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Fill) - It is used to change the color of the highlighted polygon shape. +* [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Opacity) - It is used to change the opacity of the highlighted polygon shape. +* [Border](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Border) - This property is used to change the color, width, and opacity of the border of the highlighted polygon shape. + +The following example shows how to highlight a polygon shape on a geometry map. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-highlight/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-highlight.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-highlight/polygon-shape-highlight.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +![Enable highlight for polygons](./images/Polygon/polygon-shape-highlight.gif) + ## Tooltip On mouse over or touch end event, the tooltip is used to get more information about the layer, bubble, or marker. It can be enabled separately for layer or bubble or marker by using the `Visible` property of `MapsTooltipSettings` as **true**. The `ValuePath` property in the tooltip takes the field name that presents in data source and displays that value as tooltip text. The `TooltipDisplayMode` property is used to change the display mode of the tooltip in Maps. Following display modes of tooltip are available in the Maps component. By default, `TooltipDisplayMode` is set to **MouseMove**. diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/accessibility.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/accessibility.md index 196a8b3b98..c28d724f1b 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/accessibility.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/accessibility.md @@ -4,7 +4,7 @@ title: Accessibility with EJ2 ASP.NET MVC PDF Viewer | Syncfusion description: Learn here all about accessibility in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: PDF Viewer -publishingplatform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## documentation: ug --- diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/comments.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/comments.md index 8abd02e3c5..4545497e05 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/comments.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/comments.md @@ -1,7 +1,7 @@ --- layout: post -title: Comments in ##Platform_Name## Pdfviewer Component -description: Learn here all about Comments in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Comments in ##Platform_Name## PDF Viewer Component | Syncfusion +description: Learn here all about Comments in Syncfusion ##Platform_Name## PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Comments publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/free-text-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/free-text-annotation.md index 4aabe85486..d915c57937 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/free-text-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/free-text-annotation.md @@ -4,11 +4,10 @@ title: Free Text Annotation in EJ2 ASP.NET MVC PDF Viewer | Syncfusion description: Learn here all about Free Text Annotation in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Free Text Annotation -publishingplatform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## documentation: ug --- - # Free Text Annotation in the ASP.NET MVC PDF Viewer component The PDF Viewer control provides the options to add, edit, and delete the free text annotations. @@ -30,36 +29,163 @@ Refer to the following code sample to switch to the Free Text annotation mode. {% tabs %} {% highlight html tabtitle="Standalone" %} -```html - - -
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- -``` + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} + +{% highlight html tabtitle="Server-Backed" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% endtabs %} + +## Adding a free text annotation programmatically to the PDF document + +The PDF Viewer library allows you to add the free text annotation in the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here is an example of how you can use the **addAnnotation()** method to move the free text annotation programmatically: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + + {% endhighlight %} +{% endtabs %} + +## Change the content of an existing Free text annotation programmatically + +To change the content of an existing free text annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- -``` + } + + {% endhighlight %} {% endtabs %} @@ -131,19 +257,17 @@ Refer to the following code sample to set the default free text annotation setti {% tabs %} {% highlight html tabtitle="Standalone" %} -```html
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { FillColor = "green", BorderColor = "blue", FontColor = "yellow" }).Render()
-``` + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { FillColor = "green", BorderColor = "blue", FontColor = "yellow" }).Render()
-``` + {% endhighlight %} {% endtabs %} @@ -151,17 +275,17 @@ You can also enable the autofit support for free text annotation by using the En {% tabs %} {% highlight html tabtitle="Standalone" %} -```html +
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { EnableAutoFit = true }).Render()
-``` + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html +
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { EnableAutoFit = true }).Render()
-``` + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/ink-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/ink-annotation.md index 27b9aa24a6..e04cf250ef 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/ink-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/ink-annotation.md @@ -1,14 +1,13 @@ --- layout: post -title: Ink Annotation in ##Platform_Name## Pdfviewer Component -description: Learn here all about Ink Annotation in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Ink Annotation in ##Platform_Name## PDF Viewer Component | Syncfusion +description: Learn here all about Ink Annotation in Syncfusion ##Platform_Name## PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Ink Annotation publishingplatform: ##Platform_Name## documentation: ug --- - # Ink Annotation in the ASP.NET MVC PDF Viewer component The PDF Viewer control provides the options to add, edit, and delete the ink annotations. @@ -29,34 +28,149 @@ Refer to the following code sample to switch to the ink annotation mode. {% tabs %} {% highlight html tabtitle="Standalone" %} -```html - - -
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% endtabs %} + +## Adding a Ink annotation to the PDF document Programmatically + +With the PDF Viewer library, you can add a Ink annotation to the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here's a example of how you can utilize the **addAnnotation()** method to include a Ink annotation programmatically + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + + +{% endhighlight %} +{% endtabs %} + +## Edit the existing Ink annotation programmatically + +To modify existing Ink annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + +
+ + +
+ -``` + } + } + + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- -``` + } + } + + {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/measurement-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/measurement-annotation.md index 21bc9d875a..fdfa40393e 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/measurement-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/measurement-annotation.md @@ -1,14 +1,13 @@ --- layout: post -title: Measurement Annotation in ##Platform_Name## Pdfviewer Component -description: Learn here all about Measurement Annotation in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Measurement Annotation in ##Platform_Name## PDF Viewer Component | Syncfusion +description: Learn here all about Measurement Annotation in Syncfusion ##Platform_Name## PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Measurement Annotation publishingplatform: ##Platform_Name## documentation: ug --- - # Measurement Annotation in the ASP.NET MVC PDF Viewer component The PDF Viewer provides the options to add measurement annotations. You can measure the page annotations with the help of measurement annotation. The supported measurement annotations in the PDF Viewer control are: @@ -38,34 +37,318 @@ Refer to the following code sample to switch to the distance annotation mode. {% tabs %} {% highlight html tabtitle="Standalone" %} -```html - - -
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% endtabs %} + +## Adding a measurement annotation to the PDF document Programmatically + +With the PDF Viewer library, you can add a measurement annotation to the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here's a example of how you can utilize the **addAnnotation()** method to include a measurement annotation programmatically: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + + + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + + + + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + + +{% endhighlight %} +{% endtabs %} + +## Edit the existing measurement annotation programmatically + +To modify existing measurement annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + + + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + -``` + } + function editAreaAnnotation() { + var viewer = document.getElementById('pdfviewer').ej2_instances[0]; + for (let i = 0; i < viewer.annotationCollection.length; i++) { + if (viewer.annotationCollection[i].subject === "Area calculation") { + viewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" + viewer.annotationCollection[i].strokeColor = "#0000FF"; + viewer.annotationCollection[i].thickness = 2; + viewer.annotationCollection[i].fillColor = "#FFFF00"; + viewer.annotation.editAnnotation(viewer.annotationCollection[i]); + } + } + } + function editRadiusAnnotation() { + var viewer = document.getElementById('pdfviewer').ej2_instances[0]; + for (let i = 0; i < viewer.annotationCollection.length; i++) { + if (viewer.annotationCollection[i].subject === "Radius calculation") { + viewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" + viewer.annotationCollection[i].strokeColor = "#0000FF"; + viewer.annotationCollection[i].thickness = 2; + viewer.annotationCollection[i].fillColor = "#FFFF00"; + viewer.annotation.editAnnotation(viewer.annotationCollection[i]); + } + } + } + function editVolumeAnnotation() { + var viewer = document.getElementById('pdfviewer').ej2_instances[0]; + for (let i = 0; i < viewer.annotationCollection.length; i++) { + if (viewer.annotationCollection[i].subject === "Volume calculation") { + viewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" + viewer.annotationCollection[i].strokeColor = "#0000FF"; + viewer.annotationCollection[i].thickness = 2; + viewer.annotationCollection[i].fillColor = "#FFFF00"; + viewer.annotation.editAnnotation(viewer.annotationCollection[i]); + } + } + } + + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- -``` + } + function editAreaAnnotation() { + var viewer = document.getElementById('pdfviewer').ej2_instances[0]; + for (let i = 0; i < viewer.annotationCollection.length; i++) { + if (viewer.annotationCollection[i].subject === "Area calculation") { + viewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" + viewer.annotationCollection[i].strokeColor = "#0000FF"; + viewer.annotationCollection[i].thickness = 2; + viewer.annotationCollection[i].fillColor = "#FFFF00"; + viewer.annotation.editAnnotation(viewer.annotationCollection[i]); + } + } + } + function editRadiusAnnotation() { + var viewer = document.getElementById('pdfviewer').ej2_instances[0]; + for (let i = 0; i < viewer.annotationCollection.length; i++) { + if (viewer.annotationCollection[i].subject === "Radius calculation") { + viewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" + viewer.annotationCollection[i].strokeColor = "#0000FF"; + viewer.annotationCollection[i].thickness = 2; + viewer.annotationCollection[i].fillColor = "#FFFF00"; + viewer.annotation.editAnnotation(viewer.annotationCollection[i]); + } + } + } + function editVolumeAnnotation() { + var viewer = document.getElementById('pdfviewer').ej2_instances[0]; + for (let i = 0; i < viewer.annotationCollection.length; i++) { + if (viewer.annotationCollection[i].subject === "Volume calculation") { + viewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" + viewer.annotationCollection[i].strokeColor = "#0000FF"; + viewer.annotationCollection[i].thickness = 2; + viewer.annotationCollection[i].fillColor = "#FFFF00"; + viewer.annotation.editAnnotation(viewer.annotationCollection[i]); + } + } + } + + {% endhighlight %} {% endtabs %} @@ -110,18 +393,18 @@ Refer to the following code sample to set the default annotation settings. {% tabs %} {% highlight html tabtitle="Standalone" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DistanceSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerDistanceSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).PerimeterSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPerimeterSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).AreaSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerAreaSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).RadiusSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRadiusSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).VolumeSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerVolumeSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() -
-``` + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DistanceSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerDistanceSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).PerimeterSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPerimeterSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).AreaSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerAreaSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).RadiusSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRadiusSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).VolumeSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerVolumeSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() +
+ {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DistanceSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerDistanceSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).PerimeterSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPerimeterSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).AreaSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerAreaSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).RadiusSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRadiusSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).VolumeSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerVolumeSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() -
-``` + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DistanceSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerDistanceSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).PerimeterSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPerimeterSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).AreaSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerAreaSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).RadiusSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRadiusSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).VolumeSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerVolumeSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() +
+ {% endhighlight %} {% endtabs %} @@ -148,17 +431,17 @@ The properties of scale ratio for measurement annotation can be set before creat {% tabs %} {% highlight html tabtitle="Standalone" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").MeasurementSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerMeasurementSettings { ScaleRatio = 2, ConversionUnit = Syncfusion.EJ2.PdfViewer.CalibrationUnit.Cm }).Render() -
-``` + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").MeasurementSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerMeasurementSettings { ScaleRatio = 2, ConversionUnit = Syncfusion.EJ2.PdfViewer.CalibrationUnit.Cm }).Render() +
+ {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").MeasurementSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerMeasurementSettings { ScaleRatio = 2, ConversionUnit = Syncfusion.EJ2.PdfViewer.CalibrationUnit.Cm }).Render() -
-``` + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").MeasurementSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerMeasurementSettings { ScaleRatio = 2, ConversionUnit = Syncfusion.EJ2.PdfViewer.CalibrationUnit.Cm }).Render() +
+ {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/shape-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/shape-annotation.md index 905a930bd9..11977a05e8 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/shape-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/shape-annotation.md @@ -1,14 +1,13 @@ --- layout: post -title: Shape Annotation in ##Platform_Name## Pdfviewer Component -description: Learn here all about Shape Annotation in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Shape Annotation in ##Platform_Name## PDF Viewer Component | Syncfusion +description: Learn here all about Shape Annotation in Syncfusion ##Platform_Name## PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Shape Annotation publishingplatform: ##Platform_Name## documentation: ug --- - # Shape Annotation in the ASP.NET MVC PDF Viewer component The PDF Viewer control provides the options to add, edit, and delete the shape annotations. The shape annotation types supported in the PDF Viewer control are: @@ -38,34 +37,316 @@ Refer to the following code sample to switch to the circle annotation mode. {% tabs %} {% highlight html tabtitle="Standalone" %} -```html - - -
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% endtabs %} + +## Adding a shape annotation to the PDF document Programmatically + +With the PDF Viewer library, you can add a shape annotation to the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here's a example of how you can utilize the **addAnnotation()** method to include a shape annotation programmatically: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + + + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + + + + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + + +{% endhighlight %} +{% endtabs %} + +## Edit the existing shape annotation programmatically + +To modify existing shape annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + + + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + -``` + } + function editCircleAnnotation() { + var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0]; + for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { + if (pdfviewer.annotationCollection[i].subject === "Circle") { + pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; + pdfviewer.annotationCollection[i].thickness = 2; + pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; + pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" + pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); + } + } + } + function editPolygonAnnotation() { + var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0]; + for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { + if (pdfviewer.annotationCollection[i].subject === "Polygon") { + pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; + pdfviewer.annotationCollection[i].thickness = 2; + pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; + pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" + pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); + } + } + } + + + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- -``` + } + + {% endhighlight %} {% endtabs %} @@ -111,17 +392,17 @@ The properties of the shape annotations can be set before creating the control u {% tabs %} {% highlight html tabtitle="Standalone" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").LineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerLineSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).ArrowSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerArrowSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).RectangleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRectangleSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).CircleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerCircleSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).PolygonSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPolygonSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() -
-``` + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").LineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerLineSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).ArrowSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerArrowSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).RectangleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRectangleSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).CircleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerCircleSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).PolygonSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPolygonSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() +
+ {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").LineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerLineSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).ArrowSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerArrowSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).RectangleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRectangleSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).CircleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerCircleSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).PolygonSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPolygonSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() -
-``` + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").LineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerLineSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).ArrowSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerArrowSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).RectangleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRectangleSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).CircleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerCircleSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).PolygonSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPolygonSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() +
+ {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/stamp-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/stamp-annotation.md index 132b02f313..41ac4561fa 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/stamp-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/stamp-annotation.md @@ -1,14 +1,13 @@ --- layout: post -title: Stamp Annotation in ##Platform_Name## Pdfviewer Component -description: Learn here all about Stamp Annotation in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Stamp Annotation in ##Platform_Name## PDF Viewer Component | Syncfusion +description: Learn here all about Stamp Annotation in Syncfusion ##Platform_Name## PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Stamp Annotation publishingplatform: ##Platform_Name## documentation: ug --- - # Stamp Annotation in the ASP.NET MVC PDF Viewer component The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotation in the PDF documents: @@ -37,6 +36,63 @@ The stamp annotations can be added to the PDF document using the annotation tool In the pan mode, if the stamp annotation mode is entered, the PDF Viewer control will switch to text select mode. +Refer to the following code sample to switch to the stamp annotation mode. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% endtabs %} + ## Adding custom stamp to the PDF document * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. @@ -49,6 +105,174 @@ In the pan mode, if the stamp annotation mode is entered, the PDF Viewer control N>The JPG and JPEG image format is only supported in the custom stamp annotations. +## Adding a Stamp annotation to the PDF document Programmatically + +With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here's a example of how you can utilize the **addAnnotation()** method to include a Stamp annotation programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% endtabs %} + +## Edit the existing sticky note annotation programmatically + +To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ +{% endhighlight %} +{% endtabs %} + + ## Setting default properties during control initialization The properties of the stamp annotation can be set before creating the control using the StampSettings. @@ -58,17 +282,16 @@ Refer to the following code sample to set the default sticky note annotation set {% tabs %} {% highlight html tabtitle="Standalone" %} -```html +
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").StampSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStampSettings { Opacity = 0.3, Author = "Guest User" }).Render() -
-``` + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html +
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").StampSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStampSettings { Opacity = 0.3, Author = "Guest User" }).Render()
-``` + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/sticky-notes-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/sticky-notes-annotation.md index 70c4820957..c77c5f6063 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/sticky-notes-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/sticky-notes-annotation.md @@ -1,14 +1,13 @@ --- layout: post -title: Sticky Notes Annotation in ##Platform_Name## Pdfviewer Component -description: Learn here all about Sticky Notes Annotation in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Sticky Notes Annotation in ##Platform_Name## PDF Viewer Component | Syncfusion +description: Learn here all about Sticky Notes Annotation in Syncfusion ##Platform_Name## PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Sticky Notes Annotation publishingplatform: ##Platform_Name## documentation: ug --- - # Sticky Notes Annotation in the ASP.NET MVC PDF Viewer component The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document. @@ -34,6 +33,104 @@ Annotation comments can be added to the PDF document using the comment panel. ![StickyNotesComment](../images/stickynotes_comment.png) +## Adding a sticky note annotation to the PDF document Programmatically + +With the PDF Viewer library, you can add a sticky note annotation to the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here's a example of how you can utilize the **addAnnotation()** method to include a sticky note annotation programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% endtabs %} + +## Edit the existing sticky note annotation programmatically + +To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% endtabs %} + ## Editing the properties of the sticky note annotation ### Editing opacity diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/text-markup-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/text-markup-annotation.md index 2d2d3c952d..1db28414c6 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/text-markup-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/annotation/text-markup-annotation.md @@ -1,14 +1,13 @@ --- layout: post -title: Text Markup Annotation in ##Platform_Name## Pdfviewer Component -description: Learn here all about Text Markup Annotation in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Text Markup Annotation Support in ##Platform_Name## PDF Viewer Component | Syncfusion +description: Learn here all about Text Markup Annotation in Syncfusion ##Platform_Name## PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Text Markup Annotation publishingplatform: ##Platform_Name## documentation: ug --- - # Text Markup Annotation in the ASP.NET MVC PDF Viewer component The PDF Viewer control provides the options to add, edit, and delete text markup annotations such as highlight, underline, and strikethrough annotations in the PDF document. @@ -40,7 +39,7 @@ Refer to the following code sample to switch to the highlight mode. {% tabs %} {% highlight html tabtitle="Standalone" %} -```html +
@@ -52,10 +51,10 @@ Refer to the following code sample to switch to the highlight mode. pdfViewer.annotation.setAnnotationMode('Highlight'); } -``` + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html +
@@ -67,7 +66,7 @@ Refer to the following code sample to switch to the highlight mode. pdfViewer.annotation.setAnnotationMode('Highlight'); } -``` + {% endhighlight %} {% endtabs %} @@ -75,7 +74,7 @@ Refer to the following code sample to switch back to normal mode from the highli {% tabs %} {% highlight html tabtitle="Standalone" %} -```html + @@ -94,10 +93,10 @@ Refer to the following code sample to switch back to normal mode from the highli pdfViewer.annotation.setAnnotationMode('None'); } -``` + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html + @@ -116,10 +115,54 @@ Refer to the following code sample to switch back to normal mode from the highli pdfViewer.annotation.setAnnotationMode('None'); } -``` + {% endhighlight %} {% endtabs %} +## Highlight a text programmatically + +The PDF Viewer library enables you to programmatically highlight text within the PDF Viewer control using the **addAnnotation()** method. + +Here's an example of how you can use the **addAnnotation()** method to apply highlighting programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% endtabs %} + + ## Underline a text There are two ways to underline a text in the PDF document: @@ -145,7 +188,7 @@ Refer to the following code sample to switch to the underline mode. {% tabs %} {% highlight html tabtitle="Standalone" %} -```html +
@@ -157,10 +200,10 @@ Refer to the following code sample to switch to the underline mode. pdfViewer.annotation.setAnnotationMode('Underline'); } -``` + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html +
@@ -172,7 +215,7 @@ Refer to the following code sample to switch to the underline mode. pdfViewer.annotation.setAnnotationMode('Underline'); } -``` + {% endhighlight %} {% endtabs %} @@ -181,7 +224,6 @@ Refer to the following code sample to switch back to normal mode from the underl {% tabs %} {% highlight html tabtitle="Standalone" %} -```html @@ -200,11 +242,10 @@ Refer to the following code sample to switch back to normal mode from the underl pdfViewer.annotation.setAnnotationMode('None'); } -``` + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html @@ -223,7 +264,50 @@ Refer to the following code sample to switch back to normal mode from the underl pdfViewer.annotation.setAnnotationMode('None'); } -``` + +{% endhighlight %} +{% endtabs %} + +## Underline a text programmatically + +The PDF Viewer library enables you to programmatically Underline text within the PDF Viewer control using the **addAnnotation()** method. + +Here's an example of how you can use the **addAnnotation()** method to apply Underline programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + {% endhighlight %} {% endtabs %} @@ -253,7 +337,7 @@ Refer to the following code sample to switch to the strikethrough mode. {% tabs %} {% highlight html tabtitle="Standalone" %} -```html +
@@ -265,11 +349,11 @@ Refer to the following code sample to switch to the strikethrough mode. pdfViewer.annotation.setAnnotationMode('Strikethrough'); } -``` + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html +
@@ -281,7 +365,7 @@ Refer to the following code sample to switch to the strikethrough mode. pdfViewer.annotation.setAnnotationMode('Strikethrough'); } -``` + {% endhighlight %} {% endtabs %} @@ -289,7 +373,7 @@ Refer to the following code sample to switch back to normal mode from the strike {% tabs %} {% highlight html tabtitle="Standalone" %} -```html + @@ -308,10 +392,10 @@ Refer to the following code sample to switch back to normal mode from the strike pdfViewer.annotation.setAnnotationMode('None'); } -``` + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html + @@ -330,7 +414,50 @@ Refer to the following code sample to switch back to normal mode from the strike pdfViewer.annotation.setAnnotationMode('None'); } -``` + +{% endhighlight %} +{% endtabs %} + +## Strikethrough a text programmatically + +The PDF Viewer library enables you to programmatically Strikethrough text within the PDF Viewer control using the **addAnnotation()** method. + +Here's an example of how you can use the **addAnnotation()** method to apply Strikethrough programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + {% endhighlight %} {% endtabs %} @@ -374,18 +501,18 @@ Refer to the following code sample to set the default annotation settings. {% tabs %} {% highlight html tabtitle="Standalone" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HighlightSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerHighlightSettings{Author = "Guest User", Color = "#ffff00", Opacity = 0.9 }).UnderlineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerUnderlineSettings{ Author = "Guest User", Color = "#00ffff", Opacity = 0.9 }).StrikethroughSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStrikethroughSettings{ Author = "Guest User", Color = "#ff00ff", Opacity = 0.9, }).Render() -
-``` + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HighlightSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerHighlightSettings{Author = "Guest User", Color = "#ffff00", Opacity = 0.9 }).UnderlineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerUnderlineSettings{ Author = "Guest User", Color = "#00ffff", Opacity = 0.9 }).StrikethroughSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStrikethroughSettings{ Author = "Guest User", Color = "#ff00ff", Opacity = 0.9, }).Render() +
+ {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HighlightSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerHighlightSettings{Author = "Guest User", Color = "#ffff00", Opacity = 0.9 }).UnderlineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerUnderlineSettings{ Author = "Guest User", Color = "#00ffff", Opacity = 0.9 }).StrikethroughSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStrikethroughSettings{ Author = "Guest User", Color = "#ff00ff", Opacity = 0.9, }).Render() -
-``` + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HighlightSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerHighlightSettings{Author = "Guest User", Color = "#ffff00", Opacity = 0.9 }).UnderlineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerUnderlineSettings{ Author = "Guest User", Color = "#00ffff", Opacity = 0.9 }).StrikethroughSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStrikethroughSettings{ Author = "Guest User", Color = "#ff00ff", Opacity = 0.9, }).Render() +
+ {% endhighlight %} {% endtabs %} @@ -408,48 +535,48 @@ Refer to the following code sample for calling undo and redo actions from the cl {% tabs %} {% highlight html tabtitle="Standalone" %} -```html - - - - -
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- -``` + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- -``` + + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ + {% endhighlight %} {% endtabs %} @@ -467,17 +594,17 @@ The PDF Viewer control provides an option to disable the text markup annotation {% tabs %} {% highlight html tabtitle="Standalone" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").EnableTextMarkupAnnotation(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
-``` + +
+ @Html.EJS().PdfViewer("pdfviewer").EnableTextMarkupAnnotation(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ {% endhighlight %} {% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnableTextMarkupAnnotation(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
-``` + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnableTextMarkupAnnotation(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() +
+ {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/getting-started.md index 1263f6a503..3b288b5956 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/getting-started.md @@ -134,10 +134,6 @@ N> You can refer to our [ASP.NET MVC PDF Viewer](https://www.syncfusion.com/aspn When comparing a Standalone PDF Viewer to a Server-Backed PDF Viewer control, it's crucial to understand the limitations that the Standalone PDF Viewer may have in comparison. These limitations are important to consider -### PNG Image Support - -The Standalone PDF Viewer does not have the capability to utilize PNG format for adding images to handwritten annotations ,custom stamp ,signature and initial form fields. It's important to be aware that only certain image formats, such as JPEG, are compatible for these purposes. - ### Local File Access * The Standalone PDF Viewer control does not have the capability to directly access and load local physical files from a user's device. As a result, it is not possible to use a documentPath to load a PDF file directly from a local server within the viewer. diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/custom-context-menu.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/custom-context-menu.md new file mode 100644 index 0000000000..0815d6f098 --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/custom-context-menu.md @@ -0,0 +1,390 @@ +--- +layout: post +title: Customize context menu with EJ2 ASP.NET MVC PDF Viewer | Syncfusion +description: Learn here all about Customize context menu in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Customize context menu + +PDF Viewer allows you to add custom option in context menu. It can be achieved by using the `addCustomMenu()` method and custom action is defined using the `customContextMenuSelect()`method. + +### Add Custom Option + +The following code shows how to add custom option in context menu. + +``` + +``` + +### Customize custom option in context menu + +The PDF Viewer feature enables customization of custom options and the ability to toggle the display of the default context menu. When the addCustomMenu parameter is set to `true`, the default menu is hidden; conversely, when it is set to `false`, the default menu items are displayed. + +``` + +``` + +#### Customize added context menu items + +The following code shows how to hide/show added custom option in context menu using the `customContextMenuBeforeOpen()` method. + +``` + +``` + +The following is the output of custom context menu with customization. + +``` + +@using Syncfusion.EJ2 + +
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib").CustomContextMenuSelect("customContextMenuSelect").CustomContextMenuBeforeOpen("customContextMenuBeforeOpen").DocumentLoad("documentLoaded").Render() +
+
+ + +``` + +[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to/Custom%20Context%20Menu/PDFViewerSample) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/open-bookmark.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/open-bookmark.md new file mode 100644 index 0000000000..66076524b8 --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/open-bookmark.md @@ -0,0 +1,91 @@ +--- +layout: post +title: Open and Close Bookmark in EJ2 ASP.NET MVC PDF Viewer | Syncfusion +description: Learn here all about Open and Close Bookmark in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Open and Close Bookmark pane programmatically + +The PDF Viewer library allows you to open the Bookmark pane programmatically using the **openBookmarkPane()** method. + +The following steps are used to open the Bookmark. + +**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample. + +**Step 2:** Insert the following code snippet to implement the functionality for opening the Bookmark pane: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
+ + + +{% endhighlight %} +{% endtabs %} + +Similarly, to close the Bookmark pane programmatically, employ the following code snippet: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
+ + + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to/Open%20and%20Close%20bookmark%20pane/PDFViewerSample/PDFViewerSample) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/organize-pdf.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/organize-pdf.md new file mode 100644 index 0000000000..6e7ccd0c7e --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/organize-pdf.md @@ -0,0 +1,53 @@ +--- +layout: post +title: Organize Pages Feature with EJ2 ASP.NET MVC PDF Viewer | Syncfusion +description: Learn here all about Organize Pages Feature in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Organize Pages Feature in ASP.NET MVC PDF Viewer control + +## Introduction + +Welcome to the User Guide for the Organize Pages feature in JS2 PDF Viewer. This powerful feature allows you to manage your PDF documents efficiently by organizing pages seamlessly. Whether you need to add new pages, remove unnecessary ones, or adjust page orientation, this feature has got you covered. + +## Getting Started + +To access the Organize Pages feature, simply open the PDF document in the JS2 PDF Viewer and navigate to the toolbar. Look for the `Organize Pages` option to begin utilizing these capabilities. + +## Key Functionalities + +- **Add New Pages:** Easily integrate additional content by adding new pages to your document. Simply select the option to insert new pages and customize them as needed. + +- **Remove Pages:** Streamline your document management process by removing unnecessary pages with ease. Select the pages you wish to delete and confirm to remove them from the document. + +- **Rotate Pages:** Resolve orientation issues by rotating pages clockwise or counterclockwise as required. This feature ensures that your document displays correctly, maintaining clarity and readability. + +- **Select All Pages:** Make uniform adjustments and modifications by conveniently selecting all pages at once. This allows for efficient editing and formatting across the entire document. + +- **Real-Time Updates:** Experience instant updates as any changes made to the page organization are instantly reflected within the PDF Viewer. Simply click the **Save** button to ensure that your modifications are preserved. + +- **Save As Feature:** Preserve your edits by utilizing the **Save As** feature. This allows you to download the modified version of the PDF document for future reference, ensuring that your changes are stored securely. + +### API's supported + +**enableOrganizePdf:** This API enables or disables the page organizer feature in the PDF Viewer. By default, it is set to `true`, indicating that the page organizer is enabled. + +**isPageOrganizerOpen:** This API determines whether the page organizer dialog will be displayed automatically when a document is loaded into the PDF Viewer. By default, it is set to `false`, meaning the dialog is not displayed initially. + +**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, and moving pages. By default, all these actions are enabled. + +**showPageOrganizerTool:** This API controls the visibility of the page organizer tool within the PDF Viewer. If set to `false`, the tool is hidden by default. + +**openPageOrganizer:** This API opens the page organizer dialog within the PDF Viewer, providing access to manage PDF pages. + +**closePageOrganizer:** This API closes the currently open page organizer dialog within the PDF Viewer, if it is present. It allows users to dismiss the dialog when done with page organization tasks. + +#### Conclusion + +With the Organize Pages feature in JS2 PDF Viewer, managing your PDF documents has never been easier. Whether you're adding new content, adjusting page orientation, or removing unnecessary pages, this feature provides the tools you need to streamline your document management workflow. Explore these capabilities today and take control of your PDF documents with ease! + +[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf/PDFViewerSample) diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/pagerenderstarted-pagerendercompleted.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/pagerenderstarted-pagerendercompleted.md new file mode 100644 index 0000000000..a340d571ba --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/pagerenderstarted-pagerendercompleted.md @@ -0,0 +1,78 @@ +--- +layout: post +title: Rendering event in EJ2 ASP.NET MVC PDF Viewer | Syncfusion +description: Learn here all about Rendering event in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# PageRenderInitiate and PageRenderComplete event + +In Syncfusion PDF Viewer, `pageRenderInitiate` and `pageRenderComplete` actions are events that occur during the rendering process of PDF documents. + +**pageRenderInitiate** + +The `pageRenderInitiate` event is triggered when the rendering of a page in the PDF document begins. This event provides developers with an opportunity to perform any necessary initialization or setup before the rendering of the page content commences. It can be utilized to prepare resources, set up rendering parameters, or execute any other actions required before the page rendering process starts. + +**pageRenderComplete** + +The `pageRenderComplete` event is triggered when the rendering of a page in the PDF document is completed. This event allows developers to perform cleanup tasks or finalize rendering-related processes after the rendering of the page content finishes. It can be used to release resources, finalize rendering settings, or handle any post-rendering tasks necessary for the application. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +@{ + ViewBag.Title = "Home Page"; +} + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").PageRenderInitiate("pageRenderInitiate").PageRenderComplete("pageRenderComplete").Render() +
+ + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +@{ + ViewBag.Title = "Home Page"; +} + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").PageRenderInitiate("pageRenderInitiate").PageRenderComplete("pageRenderComplete").Render() +
+ + + +{% endhighlight %} +{% endtabs %} + +The provided code demonstrates how to subscribe to the `pageRenderInitiate` and `pageRenderComplete` events in the Syncfusion PDF Viewer component. + +[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to/PageRenderStarted%20and%20PageRenderCompleted%20event/PDFViewerSample) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/accessibility.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/accessibility.md index f1d36d675a..aa50c911fa 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/accessibility.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/accessibility.md @@ -4,7 +4,7 @@ title: Accessibility with EJ2 ASP.NET Core PDF Viewer | Syncfusion description: Learn here all about accessibility in ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: PDF Viewer -publishingplatform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## documentation: ug --- # Accessibility in Syncfusion PDF Viewer components diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/comments.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/comments.md index 47c9fa0d8e..09b461d471 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/comments.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/comments.md @@ -1,14 +1,13 @@ --- layout: post -title: Comments in ##Platform_Name## Pdfviewer Component -description: Learn here all about Comments in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Comments in ##Platform_Name## PDF Viewer Component | Syncfusion +description: Learn here all about Comments in Syncfusion ##Platform_Name## PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Comments publishingplatform: ##Platform_Name## documentation: ug --- - # Comments in the ASP.NET Core PDF Viewer component The PDF Viewer control provides options to add, edit, and delete the comments to the following annotation in the PDF documents: diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/free-text-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/free-text-annotation.md index f2965c1995..39abd99c1d 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/free-text-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/free-text-annotation.md @@ -4,11 +4,10 @@ title: Free Text Annotation in EJ2 ASP.NET CORE PDF Viewer | Syncfusion description: Learn here all about Free Text Annotation in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Free Text Annotation -publishingplatform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## documentation: ug --- - # Free Text Annotation in the ASP.NET Core PDF Viewer component The PDF Viewer control provides the options to add, edit, and delete the free text annotations. @@ -67,6 +66,140 @@ Refer to the following code sample to switch to the Free Text annotation mode. {% endhighlight %} {% endtabs %} +## Adding a free text annotation programmatically to the PDF document + +The PDF Viewer library allows you to add the free text annotation in the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here is an example of how you can use the **addAnnotation()** method to move the free text annotation programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + +## Change the content of an existing Free text annotation programmatically + +To change the content of an existing free text annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + ## Editing the properties of free text annotation The font family, font size, font styles, font color, text alignment, fill color, the border stroke color, border thickness, and opacity of the free text annotation can be edited using the Font Family tool, Font Size tool, Font Color tool, Text Align tool, Font Style tool Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar. diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/ink-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/ink-annotation.md index 62110b924f..7f48558926 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/ink-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/ink-annotation.md @@ -4,11 +4,10 @@ title: Ink Annotation in EJ2 ASP.NET CORE PDF Viewer | Syncfusion description: Learn here all about Ink Annotation in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Ink Annotation -publishingplatform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## documentation: ug --- - # Ink Annotation in the ASP.NET Core PDF Viewer component The PDF Viewer control provides the options to add, edit, and delete the ink annotations. @@ -67,6 +66,128 @@ Refer to the following code sample to switch to the ink annotation mode. {% endhighlight %} {% endtabs %} +## Adding a Ink annotation to the PDF document Programmatically + +With the PDF Viewer library, you can add a Ink annotation to the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here's a example of how you can utilize the **addAnnotation()** method to include a Ink annotation programmatically + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + +## Edit the existing Ink annotation programmatically + +To modify existing Ink annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + ## Editing the properties of the ink annotation The stroke color, thickness, and opacity of the ink annotation can be edited using the Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar. diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/measurement-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/measurement-annotation.md index 75bb386972..9acf3f9ff6 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/measurement-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/measurement-annotation.md @@ -4,11 +4,10 @@ title: Measurement Annotation in EJ2 ASP.NET CORE PDF Viewer | Syncfusion description: Learn here all about Measurement Annotation in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Measurement Annotation -publishingplatform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## documentation: ug --- - # Measurement Annotation in the ASP.NET Core PDF Viewer component The PDF Viewer provides the options to add measurement annotations. You can measure the page annotations with the help of measurement annotation. The supported measurement annotations in the PDF Viewer control are: @@ -73,6 +72,297 @@ Refer to the following code sample to switch to the distance annotation mode. } +{% endhighlight %} +{% endtabs %} + +## Adding a measurement annotation to the PDF document Programmatically + +With the PDF Viewer library, you can add a measurement annotation to the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here's a example of how you can utilize the **addAnnotation()** method to include a measurement annotation programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + + + + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + + + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + +## Edit the existing measurement annotation programmatically + +To modify existing measurement annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + + + + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + + + + +
+ + +
+ + + {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/shape-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/shape-annotation.md index deae576eaa..c137d4610b 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/shape-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/shape-annotation.md @@ -4,7 +4,7 @@ title: Shape Annotation in EJ2 ASP.NET CORE PDF Viewer | Syncfusion description: Learn here all about Shape Annotation in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Shape Annotation -publishingplatform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## documentation: ug --- @@ -75,6 +75,296 @@ Refer to the following code sample to switch to the circle annotation mode. {% endhighlight %} {% endtabs %} +## Adding a shape annotation to the PDF document Programmatically + +With the PDF Viewer library, you can add a shape annotation to the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here's a example of how you can utilize the **addAnnotation()** method to include a shape annotation programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + + + + + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + + + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + +## Edit the existing shape annotation programmatically + +To modify existing shape annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + + + + + +
+ + +
+ + + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + + + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + ## Editing the properties of the shape annotation The fill color, stroke color, thickness, and opacity of the shape annotation can be edited using the Edit color tool, Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar. diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/stamp-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/stamp-annotation.md index cd93704c3f..cf15dccb73 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/stamp-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/stamp-annotation.md @@ -4,11 +4,10 @@ title: Stamp Annotation in EJ2 ASP.NET CORE PDF Viewer | Syncfusion description: Learn here all about Stamp Annotation in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Stamp Annotation -publishingplatform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## documentation: ug --- - # Stamp Annotation in the ASP.NET Core PDF Viewer Control The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotation in the PDF documents: @@ -37,6 +36,72 @@ The stamp annotations can be added to the PDF document using the annotation tool In the pan mode, if the stamp annotation mode is entered, the PDF Viewer control will switch to text select mode. +Refer to the following code sample to switch to the stamp annotation mode. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + + + + +
+ + +
+ + + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + + + +
+ + +
+ + + +{% endhighlight %} +{% endtabs %} + ## Adding custom stamp to the PDF document * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. @@ -49,6 +114,187 @@ In the pan mode, if the stamp annotation mode is entered, the PDF Viewer control N>The JPG and JPEG image format is only supported in the custom stamp annotations. +## Adding a Stamp annotation to the PDF document Programmatically + +With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here's a example of how you can utilize the **addAnnotation()** method to include a Stamp annotation programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + + + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + +## Edit the existing sticky note annotation programmatically + +To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ + +
+ +{% endhighlight %} +{% endtabs %} + ## Setting default properties during control initialization The properties of the stamp annotation can be set before creating the control using the StampSettings. diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/sticky-notes-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/sticky-notes-annotation.md index a33e6c17f6..a3e7d84884 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/sticky-notes-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/sticky-notes-annotation.md @@ -4,11 +4,10 @@ title: Sticky Notes Annotation in EJ2 ASP.NET CORE PDF Viewer | Syncfusion description: Learn here all about Sticky Notes Annotation in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Sticky Notes Annotation -publishingplatform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## documentation: ug --- - # Sticky Notes Annotation in the ASP.NET Core PDF Viewer component The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document. @@ -54,6 +53,118 @@ You can modify or delete the comments or comments replay and it’s status using ![StickyNotesEdit](../../pdfviewer/images/sticky_editbtn.png) +## Adding a sticky note annotation to the PDF document Programmatically + +With the PDF Viewer library, you can add a sticky note annotation to the PDF Viewer control programmatically using the **addAnnotation()** method. + +Here's a example of how you can utilize the **addAnnotation()** method to include a sticky note annotation programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + +## Edit the existing sticky note annotation programmatically + +To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. + +Here is an example of how you can use the **editAnnotation()** method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + ## Setting default properties during the control initialization The properties of the sticky note annotation can be set before creating the control using the StickyNotesSettings. diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/text-markup-annotation.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/text-markup-annotation.md index cb47b36421..451a76fd9d 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/text-markup-annotation.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/annotation/text-markup-annotation.md @@ -4,7 +4,7 @@ title: Text Markup Annotation in EJ2 ASP.NET CORE PDF Viewer | Syncfusion description: Learn here all about Text Markup Annotation in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Text Markup Annotation -publishingplatform: ej2-asp-core-mvc +publishingplatform: ##Platform_Name## documentation: ug --- @@ -135,6 +135,56 @@ Refer to the following code sample to switch back to normal mode from the highli {% endhighlight %} {% endtabs %} +## Highlight a text programmatically + +The PDF Viewer library enables you to programmatically highlight text within the PDF Viewer control using the **addAnnotation()** method. + +Here's an example of how you can use the **addAnnotation()** method to apply highlighting programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + ## Underline a text There are two ways to underline a text in the PDF document: @@ -256,6 +306,56 @@ Refer to the following code sample to switch back to normal mode from the underl {% endhighlight %} {% endtabs %} +## Underline a text programmatically + +The PDF Viewer library enables you to programmatically Underline text within the PDF Viewer control using the **addAnnotation()** method. + +Here's an example of how you can use the **addAnnotation()** method to apply Underline programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + ## Strikethrough a text There are two ways to strikethrough a text in the PDF document: @@ -377,6 +477,56 @@ Refer to the following code sample to switch back to normal mode from the strike {% endhighlight %} {% endtabs %} +## Strikethrough a text programmatically + +The PDF Viewer library enables you to programmatically Strikethrough text within the PDF Viewer control using the **addAnnotation()** method. + +Here's an example of how you can use the **addAnnotation()** method to apply Strikethrough programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + +
+ + +
+ + +{% endhighlight %} +{% endtabs %} + ## Deleting a text markup annotation The selected annotation can be deleted in the following ways: diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/getting-started.md index 27133aa67b..36e5bdc063 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/getting-started.md @@ -138,10 +138,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Ge When comparing a Standalone PDF Viewer to a Server-Backed PDF Viewer control, it's crucial to understand the limitations that the Standalone PDF Viewer may have in comparison. These limitations are important to consider -### PNG Image Support - -The Standalone PDF Viewer does not have the capability to utilize PNG format for adding images to handwritten annotations ,custom stamp ,signature and initial form fields. It's important to be aware that only certain image formats, such as JPEG, are compatible for these purposes. - ### Local File Access * The Standalone PDF Viewer control does not have the capability to directly access and load local physical files from a user's device. As a result, it is not possible to use a documentPath to load a PDF file directly from a local server within the viewer. diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/custom-context-menu.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/custom-context-menu.md new file mode 100644 index 0000000000..8b85d16d98 --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/custom-context-menu.md @@ -0,0 +1,375 @@ +--- +layout: post +title: Customize context menu with EJ2 ASP.NET Core PDF Viewer | Syncfusion +description: Learn here all about Customize context menu in ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Customize context menu in ASP.NET Core PDF Viewer control + +PDF Viewer allows you to add custom option in context menu. It can be achieved by using the `addCustomMenu()` method and custom action is defined using the `customContextMenuSelect()`method. + +### Add Custom Option + +The following code shows how to add custom option in context menu. +``` + +``` + +### Customize custom option in context menu + +The PDF Viewer feature enables customization of custom options and the ability to toggle the display of the default context menu. When the addCustomMenu parameter is set to `true`, the default menu is hidden; conversely, when it is set to `false`, the default menu items are displayed. + +``` + +``` + +#### Customize added context menu items + +The following code shows how to hide/show added custom option in context menu using the `customContextMenuBeforeOpen()` method. + +``` + +``` + +The following is the output of custom context menu with customization. + +``` + + + +``` + +[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Custom%20Context%20Menu/PDFViewerSample) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/open-bookmark.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/open-bookmark.md new file mode 100644 index 0000000000..77e1a6cf03 --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/open-bookmark.md @@ -0,0 +1,107 @@ +--- +layout: post +title: Open and Close Bookmark in EJ2 ASP.NET Core PDF Viewer | Syncfusion +description: Learn here all about Open and Close Bookmark in ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Open and Close Bookmark pane programmatically + +The PDF Viewer library allows you to open the Bookmark pane programmatically using the **openBookmarkPane()** method. + +The following steps are used to open the Bookmark. + +**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample. + +**Step 2:** Insert the following code snippet to implement the functionality for opening the Bookmark pane: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + +
+ + +
+ + + +{% endhighlight %} +{% endtabs %} + +Similarly, to close the Bookmark pane programmatically, employ the following code snippet: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + + + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + + + +
+ + +
+ + + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Open%20and%20Close%20bookmark%20pane/PDFViewerSample) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/organize-pdf.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/organize-pdf.md new file mode 100644 index 0000000000..657de3272f --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/organize-pdf.md @@ -0,0 +1,54 @@ +--- +layout: post +title: Organize Pages with EJ2 ASP.NET Core PDF Viewer | Syncfusion +description: Learn here all about Organize Pages in ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Organize Pages Feature in ASP.NET Core PDF Viewer control + +## Introduction + +Welcome to the User Guide for the Organize Pages feature in JS2 PDF Viewer. This powerful feature allows you to manage your PDF documents efficiently by organizing pages seamlessly. Whether you need to add new pages, remove unnecessary ones, or adjust page orientation, this feature has got you covered. + +## Getting Started + +To access the Organize Pages feature, simply open the PDF document in the JS2 PDF Viewer and navigate to the toolbar. Look for the `Organize Pages` option to begin utilizing these capabilities. + +## Key Functionalities + +- **Add New Pages:** Easily integrate additional content by adding new pages to your document. Simply select the option to insert new pages and customize them as needed. + +- **Remove Pages:** Streamline your document management process by removing unnecessary pages with ease. Select the pages you wish to delete and confirm to remove them from the document. + +- **Rotate Pages:** Resolve orientation issues by rotating pages clockwise or counterclockwise as required. This feature ensures that your document displays correctly, maintaining clarity and readability. + +- **Select All Pages:** Make uniform adjustments and modifications by conveniently selecting all pages at once. This allows for efficient editing and formatting across the entire document. + +- **Real-Time Updates:** Experience instant updates as any changes made to the page organization are instantly reflected within the PDF Viewer. Simply click the **Save** button to ensure that your modifications are preserved. + +- **Save As Feature:** Preserve your edits by utilizing the **Save As** feature. This allows you to download the modified version of the PDF document for future reference, ensuring that your changes are stored securely. + +### API's supported + +**enableOrganizePdf:** This API enables or disables the page organizer feature in the PDF Viewer. By default, it is set to `true`, indicating that the page organizer is enabled. + +**isPageOrganizerOpen:** This API determines whether the page organizer dialog will be displayed automatically when a document is loaded into the PDF Viewer. By default, it is set to `false`, meaning the dialog is not displayed initially. + +**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, and moving pages. By default, all these actions are enabled. + +**showPageOrganizerTool:** This API controls the visibility of the page organizer tool within the PDF Viewer. If set to `false`, the tool is hidden by default. + +**openPageOrganizer:** This API opens the page organizer dialog within the PDF Viewer, providing access to manage PDF pages. + +**closePageOrganizer:** This API closes the currently open page organizer dialog within the PDF Viewer, if it is present. It allows users to dismiss the dialog when done with page organization tasks. + +#### Conclusion + +With the Organize Pages feature in JS2 PDF Viewer, managing your PDF documents has never been easier. Whether you're adding new content, adjusting page orientation, or removing unnecessary pages, this feature provides the tools you need to streamline your document management workflow. Explore these capabilities today and take control of your PDF documents with ease! + + +[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/pagerenderstarted-pagerendercompleted.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/pagerenderstarted-pagerendercompleted.md new file mode 100644 index 0000000000..e7860d79c0 --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/pagerenderstarted-pagerendercompleted.md @@ -0,0 +1,85 @@ +--- +layout: post +title: Rendering event in EJ2 ASP.NET Core PDF Viewer | Syncfusion +description: Learn here all about Rendering event in ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# PageRenderInitiate and pageRenderComplete event + +In Syncfusion PDF Viewer, `pageRenderInitiate` and `pageRenderComplete` actions are events that occur during the rendering process of PDF documents. + +**pageRenderInitiate** + +The `pageRenderInitiate` event is triggered when the rendering of a page in the PDF document begins. This event provides developers with an opportunity to perform any necessary initialization or setup before the rendering of the page content commences. It can be utilized to prepare resources, set up rendering parameters, or execute any other actions required before the page rendering process starts. + +**pageRenderComplete** + +The `pageRenderComplete` event is triggered when the rendering of a page in the PDF document is completed. This event allows developers to perform cleanup tasks or finalize rendering-related processes after the rendering of the page content finishes. It can be used to release resources, finalize rendering settings, or handle any post-rendering tasks necessary for the application. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +@{ + ViewData["Title"] = "Home page"; +} + +
+ + +
+ + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +@{ + ViewData["Title"] = "Home page"; +} + +
+ + +
+ +{% endhighlight %} +{% endtabs %} + +The provided code demonstrates how to subscribe to the `pageRenderInitiate` and `pageRenderComplete` events in the Syncfusion PDF Viewer component. \ No newline at end of file diff --git a/ej2-asp-core-mvc/query-builder/clone-group-rule.md b/ej2-asp-core-mvc/query-builder/clone-group-rule.md index 0f57a395e6..fd00d5b48e 100644 --- a/ej2-asp-core-mvc/query-builder/clone-group-rule.md +++ b/ej2-asp-core-mvc/query-builder/clone-group-rule.md @@ -11,7 +11,7 @@ documentation: ug # Clone Group/Rule in ##Platform_Name## Query builder control -Query Builder allows you to clone rules as well as groups. The Clone options will create an exact replica of a rule or group next to the original. You can use `ShowButtons` to enable/disable these buttons. +The Query Builder functionality extends to cloning both individual rules and entire groups. Utilizing the Clone options will generate an exact duplicate of a rule or group adjacent to the original one. This feature enables users to replicate complex query structures effortlessly. The `ShowButtons` function offers users the ability to toggle the visibility of these cloning buttons, providing convenient control over the cloning process within the Query Builder interface. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/query-builder/global-local.md b/ej2-asp-core-mvc/query-builder/global-local.md index 1378eea7d9..36d20ae584 100644 --- a/ej2-asp-core-mvc/query-builder/global-local.md +++ b/ej2-asp-core-mvc/query-builder/global-local.md @@ -1,6 +1,6 @@ --- layout: post -title: Global Local in ##Platform_Name## Query Builder Component +title: Global Local in Syncfusion ##Platform_Name## Query Builder Component description: Learn here all about Global Local in Syncfusion ##Platform_Name## Query Builder component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Global Local @@ -9,7 +9,7 @@ documentation: ug --- -# Localization +# Localization in Syncfusion Query Builder Control The `Localization` library allows you to localize the default text content of the Query Builder. The Query Builder has static text that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the `Locale` value and translation object. @@ -26,7 +26,10 @@ The following list of properties and its values are used in the Query Builder. | SelectOperator | Select operator | | StartsWith | Starts With| | EndsWith | Ends With | +| DoesNotStartWith | Does Not Start With | +| DoesNotEndWith | Does Not End With | | Contains | Contains | +| DoesNotContain | Does Not Contain | | Equal | Equal | | NotEqual | Not Equal | | LessThan | Less Than | diff --git a/ej2-asp-core-mvc/query-builder/import-export.md b/ej2-asp-core-mvc/query-builder/import-export.md index d279f0ecad..fdc29cbf8b 100644 --- a/ej2-asp-core-mvc/query-builder/import-export.md +++ b/ej2-asp-core-mvc/query-builder/import-export.md @@ -8,17 +8,21 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Import export in ##Platform_Name## Query builder control +# Importing and Exporting in ##Platform_Name## Query builder control -Importing allows you to view or edit the predefined conditions which is available in JSON or SQL. You can import the conditions either initial rendering or post rendering. +Importing facilitates the viewing or editing of predefined conditions available in JSON, SQL, and MongoDB query formats, while exporting enables obtaining the created rules in the query builder as JSON, SQL, and MongoDB queries. ## Importing -### Importing from JSON +Importing enables users to bring predefined conditions into the system for viewing or editing, available in formats such as JSON, SQL, and MongoDB query. It facilitates the quick incorporation of pre-defined rules or parameters into workflows, streamlining the setup process by importing directly from external sources or saved configurations. + +### Importing from JSON Object + +Importing from JSON enables users to bring predefined conditions encoded in JSON format into the system. This feature streamlines the process by providing a standardized format for importing data, ensuring compatibility, and ease of use. #### Initial Rendering -To apply conditions initially, you can define the `Rule`. Here, you can import structured JSON object by defining the `Rule` property. +To initially apply conditions, you can establish the `Rule` by importing a structured JSON object and defining its properties. {% if page.publishingplatform == "aspnet-core" %} @@ -70,13 +74,13 @@ You can set the conditions from structured JSON object through the `setRules` me {% endtabs %} {% endif %} +### Importing From SQL Query +Importing from SQL involves integrating predefined conditions or data stored in a SQL database into the Query Builder. This enables the direct integration of SQL queries, thereby improving workflow efficiency and data accuracy within the application. SQL importing supports various types, including Inline SQL, Parameter SQL, and Named Parameter SQL. -### Importing From SQL +#### Importing from Inline SQL Query -#### Importing from Inline SQL - -You can set the conditions from Inline SQL query through the `setRulesFromSql` method. +Importing from Inline SQL involves integrating SQL queries directly into the Query Builder. This method streamlines the process by enabling users to input SQL statements directly into the application for analysis, manipulation, or further processing within the Query Builder. Conditions can be set from Inline SQL queries using the `setRulesFromSql` method. {% if page.publishingplatform == "aspnet-core" %} @@ -101,9 +105,9 @@ You can set the conditions from Inline SQL query through the `setRulesFromSql` m {% endtabs %} {% endif %} -#### Importing from Parameter SQL +#### Importing from Parameter SQL Query -You can set the conditions from Parameter SQL query through the `setParameterizedSql` method. +Importing from Parameter SQL involves integrating SQL queries with parameters directly into the Query Builder. This method allows users to input SQL statements containing parameters, which can be dynamically filled in during execution. It streamlines the process by enabling flexible and customizable querying within the application. Conditions can be set from Parameter SQL queries using the `setParameterizedSql` method. {% if page.publishingplatform == "aspnet-core" %} @@ -128,9 +132,9 @@ You can set the conditions from Parameter SQL query through the `setParameterize {% endtabs %} {% endif %} -#### Importing from Named Parameter SQL +#### Importing from Named Parameter SQL Query -You can set the conditions from Named Parameter SQL query through the `setParameterizedNamedSql` method. +Importing from Named Parameter SQL involves integrating SQL queries with named parameters directly into the Query Builder. This method enables users to input SQL statements containing named parameters, providing flexibility and customization during execution. It streamlines the process by allowing dynamic parameter assignment within the application's query environment. Conditions can be set from Named Parameter SQL queries using the `setParameterizedNamedSql` method. {% if page.publishingplatform == "aspnet-core" %} @@ -155,9 +159,9 @@ You can set the conditions from Named Parameter SQL query through the `setParame {% endtabs %} {% endif %} -### Importing from MongoDB +### Importing from MongoDB Query -You can set the conditions from MongoDB query through the `setMongoQuery` method. +Importing from MongoDB Query involves integrating MongoDB queries directly into the Query Builder. This enables users to input MongoDB query statements directly into the application, allowing for seamless integration and manipulation of MongoDB data within the Query Builder environment. It streamlines the process by facilitating direct access to MongoDB data for analysis, filtering, and further processing within the application. Conditions can be set from Named Parameter SQL queries using the `setMongoQuery` method. {% if page.publishingplatform == "aspnet-core" %} @@ -185,17 +189,19 @@ You can set the conditions from MongoDB query through the `setMongoQuery` method ## Exporting -Exporting allows you to save or maintain the created conditions through the Query Builder. You can export the defined conditions by the following ways. +Exporting from the Query Builder allows users to preserve or store the created conditions. The defined conditions can be exported using various methods, including: + +### Exporting to JSON Object -### Exporting to JSON +You can extract the established conditions in the Query Builder and convert them into a structured JSON object format using the `getRules` method. This process enables users to save or transfer the conditions for further use or analysis in other applications or systems that support JSON data. -You can export the defined conditions to structured JSON object through the `getRules` method. +### Exporting to SQL Query -### Exporting to SQL +Exporting to SQL involves converting the defined conditions within the Query Builder into SQL queries. This functionality allows users to generate SQL code representing the conditions set in the Query Builder, which can then be executed directly on a SQL database or used for further analysis and processing. SQL exporting supports various types, including Inline SQL, Parameter SQL, and Named Parameter SQL. -#### Exporting to Inline SQL +#### Exporting to Inline SQL Query -You can export the defined conditions to Inline SQL query through the `getRulesFromSQL` method. +Exporting to Inline SQL Query entails embedding the defined conditions from the Query Builder directly into SQL statements within the exported code. This method ensures that the conditions are seamlessly integrated into the SQL query syntax, enabling straightforward execution or further processing within SQL database systems. This can be achieved using the `getRulesFromSQL` method. {% if page.publishingplatform == "aspnet-core" %} @@ -220,9 +226,9 @@ You can export the defined conditions to Inline SQL query through the `getRulesF {% endtabs %} {% endif %} -#### Exporting to Parameter SQL +#### Exporting to Parameter SQL Query -You can export the defined conditions to Parameter SQL query through the `getParameterizedSql` method. +Exporting to Parameter SQL involves incorporating the defined conditions from the Query Builder into SQL queries with parameters. This method allows for dynamic value assignment during execution, enhancing flexibility and adaptability in query processing within SQL database. This can be accomplished using the `getParameterizedSql` method for exporting to Parameter SQL query. {% if page.publishingplatform == "aspnet-core" %} @@ -247,9 +253,9 @@ You can export the defined conditions to Parameter SQL query through the `getPar {% endtabs %} {% endif %} -#### Exporting to Named Parameter SQL +#### Exporting to Named Parameter SQL Query -You can export the defined conditions to Named Parameter SQL query through the `getParameterizedNamedSql` method. +Exporting to Named Parameter SQL entails integrating the defined conditions from the Query Builder into SQL queries with named parameters. This method offers enhanced readability and flexibility during execution by using named placeholders for parameter values. Named Parameter SQL facilitates easier maintenance and modification of queries, making it convenient for dynamic parameter assignment within SQL database. This can be accomplished using the method `getParameterizedNamedSql` for exporting to Named Parameter SQL query. {% if page.publishingplatform == "aspnet-core" %} @@ -274,9 +280,9 @@ You can export the defined conditions to Named Parameter SQL query through the ` {% endtabs %} {% endif %} -### Exporting to MongoDB +### Exporting to MongoDB Query -You can export the defined conditions to MongoDB query through the `getMongoQuery` method. +Exporting to MongoDB Query involves converting the defined conditions within the Query Builder into MongoDB query syntax. This process allows users to generate MongoDB queries representing the conditions set in the Query Builder, which can then be executed directly on a MongoDB database or used for further analysis and processing. This can be accomplished using the `getMongoQuery` method for exporting to MongoDB query. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/query-builder/lock-group-rule.md b/ej2-asp-core-mvc/query-builder/lock-group-rule.md index 9bf5747877..9700fb1c25 100644 --- a/ej2-asp-core-mvc/query-builder/lock-group-rule.md +++ b/ej2-asp-core-mvc/query-builder/lock-group-rule.md @@ -11,7 +11,7 @@ documentation: ug # Lock Group/Rule in ##Platform_Name## Query builder control -Query Builder allows you to lock rules as well as groups. When a rule is locked, the field, operator, and value will be disabled. When a group is locked, all the elements within the group will be disabled. You can use `ShowButtons` to enable/disable these buttons. +The Query Builder provides the functionality to lock individual rules or entire groups. When a rule is locked, it prevents users from modifying its field, operator, and value, effectively disabling these components. Similarly, locking a group disables all elements contained within it. This feature offers users greater control over their query configurations, ensuring that specific rules or groups remain unchanged. Additionally, users can manage the visibility of locking buttons through the `ShowButtons` function, allowing for seamless control over the locking mechanism. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-rows.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-rows.md index d3817bb0ac..041df2c7b1 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-rows.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-rows.md @@ -1,6 +1,6 @@ --- layout: post -title: Header Rows in ##Platform_Name## Schedule Component +title: Header Rows in ##Platform_Name## Schedule Component | Syncfusion description: Learn here all about Header Rows in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Header Rows @@ -143,6 +143,11 @@ It is possible to display a complete year in a timeline view by setting `interva You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in `template` option available within the `headerRows` property. +To get start quickly about header row template option available in our Scheduler, you can check on this video: + +{% youtube +"youtube:https://www.youtube.com/watch?v=oX2cPQGyIkk"%} + {% if page.publishingplatform == "aspnet-core" %} {% tabs %} diff --git a/ej2-asp-core-mvc/spreadsheet/use-cases/collaborative-editing.md b/ej2-asp-core-mvc/spreadsheet/use-cases/collaborative-editing.md deleted file mode 100644 index bf7bfcaf3d..0000000000 --- a/ej2-asp-core-mvc/spreadsheet/use-cases/collaborative-editing.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -layout: post -title: Collaborative Editing in ##Platform_Name## Spreadsheet Component -description: Learn here all about Collaborative Editing in Syncfusion ##Platform_Name## Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Collaborative Editing -publishingplatform: ##Platform_Name## -documentation: ug ---- - - -# Collaborative Editing - -The collaborative editing support allows you to work at a spreadsheet collaboratively with other users. Multiple users can access to the the same spreadsheet simultaneously. - -## Dependencies - -The following dependent script is required to use the collaborative editing support in spreadsheet. - -```js - -``` - -## Client configuration - -To broadcast the data for every action in the spreadsheet, you need to transfer the data to the server through `send` method in `actionComplete` event and receive the same data by using the `dataReceived` method. In the `dataReceived` method, you need to update the action to the connected clients through `updateAction` method. - -The following code example shows `Collaborative Editing` support in the Spreadsheet control. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/collaborative-editing/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="CollaborativeController.cs" %} -{% include code-snippet/spreadsheet/collaborative-editing/collaborativeController.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/collaborative-editing/razor %} -{% endhighlight %} -{% highlight c# tabtitle="CollaborativeController.cs" %} -{% include code-snippet/spreadsheet/collaborative-editing/collaborativeController.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -## Server configuration - -To make the communication between the server to the connected clients and from clients to the server, you need to configure the signalR Hubs using the following code. - -```js - -// For signalR Hub connection - -var connection = new signalR.HubConnectionBuilder().withUrl('https://localhost:44385/hubs/spreadsheethub', { // localhost from AspNetCore service - skipNegotiation: true, - transport: signalR.HttpTransportType.WebSockets - }).build(); - -``` - -## Hub configuration - -Initially create a AspNetCore project and add the hub file for sending and receiving the data between server and clients. - -```c# -using Microsoft.AspNetCore.SignalR; -using System.Threading.Tasks; - -namespace WebApplication.Hubs -{ - public class SpreadsheetHub : Hub - { - public async Task BroadcastData(string data) - { - await Clients.Others.SendAsync("dataReceived", data); - } - } -} -``` - -To configure the SignalR middleware by registering the following service in the `ConfigureServices` method of the `Startup` class. - -```c# - services.AddSignalR(e => - { - e.MaximumReceiveMessageSize = int.MaxValue; // Option to increase message size for inserting image feature. By default, SignalR send messages up to 32 KB. - }); -``` - -To set up the SignalR routes by calling MapHub in the `Configure` method of the `Startup` class. - -```c# - app.UseEndpoints(endpoints => - - { - - endpoints.MapRazorPages(); - - endpoints.MapHub("/hubs/spreadsheethub"); - - }); -``` - -For hosting the service, you may use the above code snippet or download and run the [local service](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1327152095). - -## Prevent the particular action update for collaborative client - -Using the `action` argument from the `actionComplete` event, you can prevent the particular action update for collaborative client. - -The following code example shows how to prevent collaborative client from updating the `format` action. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/collaborative-prevent-action/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="CollaborativePreventController.cs" %} -{% include code-snippet/spreadsheet/collaborative-prevent-action/collaborativePreventController.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/collaborative-prevent-action/razor %} -{% endhighlight %} -{% highlight c# tabtitle="CollaborativePreventController.cs" %} -{% include code-snippet/spreadsheet/collaborative-prevent-action/collaborativePreventController.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -## Perform import action for collaborative clients - -Using the `action` argument from the `actionComplete` event, you can identity whether the import action is performed or not. If the action is `import`, then you need to send the `response data` to the server and also update the same to the collaborative clients. - -The following code example shows how to perform the import functionality for collaborative clients. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/import-collaborative-mode/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="collaborativeImportController.cs" %} -{% include code-snippet/spreadsheet/import-collaborative-mode/collaborativeImportController.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/import-collaborative-mode/razor %} -{% endhighlight %} -{% highlight c# tabtitle="collaborativeImportController.cs" %} -{% include code-snippet/spreadsheet/import-collaborative-mode/collaborativeImportController.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md b/ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md index c59767e2d1..e02c06ac0b 100644 --- a/ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md +++ b/ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md @@ -14,7 +14,11 @@ The Timeline items can be added by using the `` tag helper. Eac ## Adding content +<<<<<<<< HEAD:ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md You can define the item content using the [content](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_Content) property. +======== +You can define the item content using the [content](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_Content) property. +>>>>>>>> remotes/origin/hotfix/hotfix-v25.1.35:ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/items.md ### String content @@ -47,7 +51,11 @@ You can define string content for the Timeline items. ### Templated content +<<<<<<<< HEAD:ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md You can specify the [Template Content](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_ContentTemplate) for the items, by using the selector for an element in HTML. +======== +You can specify the [Template Content](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_ContentTemplate) for the items, by using the selector for an element in HTML. +>>>>>>>> remotes/origin/hotfix/hotfix-v25.1.35:ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/items.md {% if page.publishingplatform == "aspnet-core" %} @@ -76,7 +84,11 @@ You can specify the [Template Content](https://help.syncfusion.com/cr/aspnetmvc- ## Adding opposite content +<<<<<<<< HEAD:ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md You can add additional information to each Timeline item, by using the [oppositeContent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_OppositeContent) property which is positioned opposite to the item content. Similar to the `content` property you can define `string` or `function` as contents to the oppositeContent. +======== +You can add additional information to each Timeline item, by using the [oppositeContent](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_OppositeContent) property which is positioned opposite to the item content. Similar to the `content` property you can define `string` or `function` as contents to the oppositeContent. +>>>>>>>> remotes/origin/hotfix/hotfix-v25.1.35:ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/items.md {% if page.publishingplatform == "aspnet-core" %} @@ -105,7 +117,11 @@ You can add additional information to each Timeline item, by using the [opposite ## Dot item +<<<<<<<< HEAD:ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md You can define CSS class to set icons, background colors, or images to personalize the appearance of dots associated with each Timeline item by using the [dotCss](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_DotCss) property. +======== +You can define CSS class to set icons, background colors, or images to personalize the appearance of dots associated with each Timeline item by using the [dotCss](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_DotCss) property. +>>>>>>>> remotes/origin/hotfix/hotfix-v25.1.35:ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/items.md ### Adding icons @@ -146,7 +162,11 @@ You can display text for the Timeline items using the `dotCss` property, by addi ## Disabling items +<<<<<<<< HEAD:ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md You can use the [disabled](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_Disabled) property to disable an item when set to `true`. By default, the value is `false`. +======== +You can use the [disabled](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_Disabled) property to disable an item when set to `true`. By default, the value is `false`. +>>>>>>>> remotes/origin/hotfix/hotfix-v25.1.35:ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/items.md {% if page.publishingplatform == "aspnet-core" %} @@ -175,4 +195,8 @@ You can use the [disabled](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusi ## CSS class -The [cssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_CssClass) property allows you to define a custom class to modify the appearance of the Timeline item. \ No newline at end of file +<<<<<<<< HEAD:ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md +The [cssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_CssClass) property allows you to define a custom class to modify the appearance of the Timeline item. +======== +The [cssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_CssClass) property allows you to define a custom class to modify the appearance of the Timeline item. +>>>>>>>> remotes/origin/hotfix/hotfix-v25.1.35:ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/items.md diff --git a/ej2-asp-core-mvc/uploader/EJ2_ASP.NETCORE/async.md b/ej2-asp-core-mvc/uploader/EJ2_ASP.NETCORE/async.md index 21827ca59c..69efbf0ba5 100644 --- a/ej2-asp-core-mvc/uploader/EJ2_ASP.NETCORE/async.md +++ b/ej2-asp-core-mvc/uploader/EJ2_ASP.NETCORE/async.md @@ -523,3 +523,5 @@ N> You can also explore [ASP.NET Core File Upload](https://www.syncfusion.com/as * [How to add confirm dialog to remove the files](./how-to/add-confirm-dialog-to-remove-the-files) * [Check the MIME type of file before uploading it](./how-to/check-the-mime-type-of-file-before-upload-it) * [How to open and edit the uploaded files](./how-to/open-and-edit-the-uploaded-files) + +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/aspcore-uploader-webservices).