fix some issues

Author: AlisherAmonulloev

ASP.NET Core/Views/Home/Index.cshtml

@@ -2,7 +2,7 @@
     <h3>DataGrid - Select multiple items and drag'n'drop</h3>
     <div id="toggle-container">
         <span>Clear selection after drop</span>
-        @(Html.DevExtreme().Switch().ID("clearAfterDropSwitch"))
+        @(Html.DevExtreme().Switch().ID("clear-after-drop-switch"))
     </div>
 </div>
 @(Html.DevExtreme().TabPanel()

ASP.NET Core/package-lock.json

@@ -18,7 +18,7 @@ body {
     padding-top: 20px;
 }
 
-#clearAfterDropSwitch {
+#clear-after-drop-switch {
     vertical-align: text-bottom;
 }
 

ASP.NET Core/wwwroot/css/Site.css

@@ -61,6 +61,6 @@
         return column.lookup ? column.lookup.calculateCellValue(cellValue) : cellValue;
     },
     shouldClearSelection: function() {
-        return $("#clearAfterDropSwitch").dxSwitch("option", "value");
+        return $("#clear-after-drop-switch").dxSwitch("option", "value");
     }
 }

ASP.NET Core/wwwroot/js/GridLocal.js

@@ -65,7 +65,7 @@
         return column.lookup ? column.lookup.calculateCellValue(cellValue) : cellValue;
     },
     shouldClearSelection: function () {
-        return $("#clearAfterDropSwitch").dxSwitch("option", "value");
+        return $("#clear-after-drop-switch").dxSwitch("option", "value");
     },
     beforeSend: function(method, ajaxOptions) {
         ajaxOptions.xhrFields = { withCredentials: true };

ASP.NET Core/wwwroot/js/GridRemote.js

@@ -24,6 +24,7 @@
     "@angular/router": "^18.0.3",
     "devextreme": "24.2.3",
     "devextreme-angular": "24.2.3",
+    "devextreme-aspnet-data-nojquery": "5.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.7"

Angular/package-lock.json

@@ -2,19 +2,26 @@
   <div class="demo-header">
     <h3>DataGrid - Select multiple items and drag'n'drop</h3>
     <div id="toggle-container">
-        <span>Clear selection after drop</span>
-        <dx-switch id="clearAfterDropSwitch" [(value)]="clearSelectionAfterDrop"></dx-switch>
+      <span>Clear selection after drop</span>
+      <dx-switch
+        id="clear-after-drop-switch"
+        [(value)]="clearSelectionAfterDrop"
+      ></dx-switch>
     </div>
   </div>
   <dx-tab-panel [deferRendering]="false">
     <dxi-item title="Local Data">
       <div *dxTemplate>
-        <grid-local-data [shouldClearSelection]="clearSelectionAfterDrop" ></grid-local-data>
+        <grid-local-data
+          [shouldClearSelection]="clearSelectionAfterDrop"
+        ></grid-local-data>
       </div>
     </dxi-item>
     <dxi-item title="Remote Data">
       <div *dxTemplate>
-        <grid-remote-data [shouldClearSelection]="clearSelectionAfterDrop"></grid-remote-data>
+        <grid-remote-data
+          [shouldClearSelection]="clearSelectionAfterDrop"
+        ></grid-remote-data>
       </div>
     </dxi-item>
   </dx-tab-panel>

Angular/package.json

@@ -2,19 +2,24 @@
   margin: 50px;
   width: 90vw;
 }
+
 .demo-header {
   display: flex;
   justify-content: space-between;
 }
+
 .tab-item-content {
   margin: auto;
 }
+
 #toggle-container {
   padding-top: 20px;
 }
-#clearAfterDropSwitch {
+
+#clear-after-drop-switch {
   vertical-align: text-bottom;
 }
+
 #toggle-container span {
   padding-right: 10px;
 }

Angular/src/app/app.component.html

@@ -6,10 +6,10 @@ describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule,
       ],
       declarations: [
-        AppComponent
+        AppComponent,
       ],
     }).compileComponents();
   });
@@ -20,7 +20,7 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'angular-test'`, () => {
+  it('should have as title \'angular-test\'', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('angular-test');