932646: Enhancing the UI for a More Attractive Stock Management Application with tailwind3.

Author: MohanrajRK

Stock-Market-Application/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@syncfusion/ej2-base": "^26.1.35",
     "@syncfusion/ej2-react-base": "^26.1.35",
+    "@syncfusion/ej2-react-notifications": "^26.1.35",
     "@syncfusion/ej2-querybuilder": "^26.1.35",
     "@syncfusion/ej2-react-querybuilder": "^26.1.35",
     "@syncfusion/ej2-data": "^26.1.35",

Stock-Market-Application/public/index.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     <link
-      href="https://cdn.syncfusion.com/ej2/26.1.35/material-dark.css"
+      href="https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css"
       rel="stylesheet"
     />
     <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>

Stock-Market-Application/src/components/MyPortfolio.tsx

@@ -19,6 +19,7 @@ import {
 } from '@syncfusion/ej2-react-grids';
 import { StockDetails } from '../data';
 import { useNavigate } from 'react-router-dom';
+import { MessageComponent } from '@syncfusion/ej2-react-notifications';
 
 export default function MyPortfolio(props: { changeMarquee: Function, myStockDm: DataManager }) {
   const navigate = useNavigate();
@@ -155,6 +156,11 @@ export default function MyPortfolio(props: { changeMarquee: Function, myStockDm:
               enableHover={false}
               commandClick={commandClick}
               destroyed={destroyed}
+              allowSelection={false}
+              allowKeyboard={false}
+              emptyRecordTemplate={()=>{
+                return (<MessageComponent id="msg_info" content="Your portfolio has no stocks." severity="Info" variant="Filled"></MessageComponent>);
+              }}
             >
               <ColumnsDirective>
                 <ColumnDirective