-
-
-
-
\ No newline at end of file
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/detail-template-cs1/systemjs.config.js b/ej2-javascript/code-snippet/grid/detail-template-cs1/systemjs.config.js
index 1f42105b0..5424bb49e 100644
--- a/ej2-javascript/code-snippet/grid/detail-template-cs1/systemjs.config.js
+++ b/ej2-javascript/code-snippet/grid/detail-template-cs1/systemjs.config.js
@@ -10,7 +10,7 @@ System.config({
}
},
paths: {
- "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/23.2.4/"
},
map: {
main: "index.ts",
@@ -33,7 +33,6 @@ System.config({
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
}
});
-
System.import('index.ts').catch(console.error.bind(console)).then(function () {
document.getElementById('loader').style.display = "none";
document.getElementById('container').style.visibility = "visible";
diff --git a/ej2-javascript/code-snippet/grid/detail-template-cs1/ts/index.html b/ej2-javascript/code-snippet/grid/detail-template-cs1/ts/index.html
index ba967c895..a2c7f002b 100644
--- a/ej2-javascript/code-snippet/grid/detail-template-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/grid/detail-template-cs1/ts/index.html
@@ -1,6 +1,5 @@
-
EJ2 Grid
@@ -8,21 +7,16 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/ej2-javascript/code-snippet/grid/detail-template-cs1/waitingpopup.gif b/ej2-javascript/code-snippet/grid/detail-template-cs1/waitingpopup.gif
deleted file mode 100644
index a2eae442e..000000000
Binary files a/ej2-javascript/code-snippet/grid/detail-template-cs1/waitingpopup.gif and /dev/null differ
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/1.png b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/1.png
new file mode 100644
index 000000000..677201146
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/1.png differ
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/2.png b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/2.png
new file mode 100644
index 000000000..c038c884a
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/2.png differ
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/3.png b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/3.png
new file mode 100644
index 000000000..02403629b
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/3.png differ
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/4.png b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/4.png
new file mode 100644
index 000000000..c2166f16a
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/4.png differ
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/5.png b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/5.png
new file mode 100644
index 000000000..5477dece4
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/5.png differ
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/6.png b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/6.png
new file mode 100644
index 000000000..c86c4e53d
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/6.png differ
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/7.png b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/7.png
new file mode 100644
index 000000000..dba7673f8
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/7.png differ
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/8.png b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/8.png
new file mode 100644
index 000000000..861f5907a
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/8.png differ
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/9.png b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/9.png
new file mode 100644
index 000000000..6892ac20b
Binary files /dev/null and b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/9.png differ
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/datasource.ts b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/datasource.ts
new file mode 100644
index 000000000..34b16355a
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/datasource.ts
@@ -0,0 +1,205 @@
+export let employeeData: Object[] = [{
+ 'EmployeeID': 1,
+ 'LastName': 'Davolio',
+ 'FirstName': 'Nancy',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-664743600000),
+ 'HireDate': new Date(704692800000),
+ 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
+ 'City': 'Seattle',
+ 'Region': 'WA',
+ 'PostalCode': '98122',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-9857',
+ 'Extension': '5467',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
+ \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 2,
+ 'LastName': 'Fuller',
+ 'FirstName': 'Andrew',
+ 'Title': 'Vice President, Sales',
+ 'TitleOfCourtesy': 'Dr.',
+ 'BirthDate': new Date(-563828400000),
+ 'HireDate': new Date(713764800000),
+ 'Address': '908 W. Capital Way',
+ 'City': 'Tacoma',
+ 'Region': 'WA',
+ 'PostalCode': '98401',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-9482',
+ 'Extension': '3457',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
+ Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
+ was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
+ Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+ 'ReportsTo': 0,
+ 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
+},
+{
+ 'EmployeeID': 3,
+ 'LastName': 'Leverling',
+ 'FirstName': 'Janet',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-200088000000),
+ 'HireDate': new Date(702104400000),
+ 'Address': '722 Moss Bay Blvd.',
+ 'City': 'Kirkland',
+ 'Region': 'WA',
+ 'PostalCode': '98033',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-3412',
+ 'Extension': '3355',
+ 'Photo': { 'Length': 21722 },
+
+ 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
+ She has also completed a certificate program in food retailing management.\
+ Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
+},
+{
+ 'EmployeeID': 4,
+ 'LastName': 'Peacock',
+ 'FirstName': 'Margaret',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mrs.',
+ 'BirthDate': new Date(-1018814400000),
+ 'HireDate': new Date(736401600000),
+ 'Address': '4110 Old Redmond Rd.',
+ 'City': 'Redmond',
+ 'Region': 'WA',
+ 'PostalCode': '98052',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-8122',
+ 'Extension': '5176',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
+ Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
+},
+{
+ 'EmployeeID': 5,
+ 'LastName': 'Buchanan',
+ 'FirstName': 'Steven',
+ 'Title': 'Sales Manager',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-468010800000),
+ 'HireDate': new Date(750830400000),
+ 'Address': '14 Garrett Hill',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode':
+ 'SW1 8JR',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-4848',
+ 'Extension': '3453',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
+ a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
+ post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
+ Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
+},
+{
+ 'EmployeeID': 6,
+ 'LastName': 'Suyama',
+ 'FirstName': 'Michael',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-205185600000),
+ 'HireDate': new Date(750830400000),
+ 'Address': 'Coventry House\r\nMiner Rd.',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'EC2 7JR',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-7773',
+ 'Extension': '428',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
+ (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
+ He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 7,
+ 'LastName': 'King',
+ 'FirstName': 'Robert',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-302731200000),
+ 'HireDate': new Date(757486800000),
+ 'Address': 'Edgeham Hollow\r\nWinchester Way',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'RG1 9SP',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-5598',
+ 'Extension': '465',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
+ University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
+ he was transferred to the London office in March 1993.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 8,
+ 'LastName': 'Callahan',
+ 'FirstName': 'Laura',
+ 'Title': 'Inside Sales Coordinator',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-377982000000),
+ 'HireDate': new Date(762843600000),
+ 'Address': '4726 - 11th Ave. N.E.',
+ 'City': 'Seattle',
+ 'Region': 'WA',
+ 'PostalCode': '98105',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-1189',
+ 'Extension': '2344',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
+ French. She reads and writes French.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 9,
+ 'LastName': 'Dodsworth',
+ 'FirstName': 'Anne',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-123966000000),
+ 'HireDate': new Date(784875600000),
+ 'Address': '7 Houndstooth Rd.',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'WG2 7LT',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-4444',
+ 'Extension': '452',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+}];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/es5-datasource.js b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/es5-datasource.js
new file mode 100644
index 000000000..48931ebb2
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/es5-datasource.js
@@ -0,0 +1,205 @@
+var employeeData = [{
+ 'EmployeeID': 1,
+ 'LastName': 'Davolio',
+ 'FirstName': 'Nancy',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-664743600000),
+ 'HireDate': new Date(704692800000),
+ 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
+ 'City': 'Seattle',
+ 'Region': 'WA',
+ 'PostalCode': '98122',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-9857',
+ 'Extension': '5467',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
+ \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 2,
+ 'LastName': 'Fuller',
+ 'FirstName': 'Andrew',
+ 'Title': 'Vice President, Sales',
+ 'TitleOfCourtesy': 'Dr.',
+ 'BirthDate': new Date(-563828400000),
+ 'HireDate': new Date(713764800000),
+ 'Address': '908 W. Capital Way',
+ 'City': 'Tacoma',
+ 'Region': 'WA',
+ 'PostalCode': '98401',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-9482',
+ 'Extension': '3457',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
+ Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
+ was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
+ Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+ 'ReportsTo': 0,
+ 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
+},
+{
+ 'EmployeeID': 3,
+ 'LastName': 'Leverling',
+ 'FirstName': 'Janet',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-200088000000),
+ 'HireDate': new Date(702104400000),
+ 'Address': '722 Moss Bay Blvd.',
+ 'City': 'Kirkland',
+ 'Region': 'WA',
+ 'PostalCode': '98033',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-3412',
+ 'Extension': '3355',
+ 'Photo': { 'Length': 21722 },
+
+ 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
+ She has also completed a certificate program in food retailing management.\
+ Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
+},
+{
+ 'EmployeeID': 4,
+ 'LastName': 'Peacock',
+ 'FirstName': 'Margaret',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mrs.',
+ 'BirthDate': new Date(-1018814400000),
+ 'HireDate': new Date(736401600000),
+ 'Address': '4110 Old Redmond Rd.',
+ 'City': 'Redmond',
+ 'Region': 'WA',
+ 'PostalCode': '98052',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-8122',
+ 'Extension': '5176',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
+ Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
+},
+{
+ 'EmployeeID': 5,
+ 'LastName': 'Buchanan',
+ 'FirstName': 'Steven',
+ 'Title': 'Sales Manager',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-468010800000),
+ 'HireDate': new Date(750830400000),
+ 'Address': '14 Garrett Hill',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode':
+ 'SW1 8JR',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-4848',
+ 'Extension': '3453',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
+ a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
+ post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
+ Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
+},
+{
+ 'EmployeeID': 6,
+ 'LastName': 'Suyama',
+ 'FirstName': 'Michael',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-205185600000),
+ 'HireDate': new Date(750830400000),
+ 'Address': 'Coventry House\r\nMiner Rd.',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'EC2 7JR',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-7773',
+ 'Extension': '428',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
+ (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
+ He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 7,
+ 'LastName': 'King',
+ 'FirstName': 'Robert',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-302731200000),
+ 'HireDate': new Date(757486800000),
+ 'Address': 'Edgeham Hollow\r\nWinchester Way',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'RG1 9SP',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-5598',
+ 'Extension': '465',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
+ University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
+ he was transferred to the London office in March 1993.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 8,
+ 'LastName': 'Callahan',
+ 'FirstName': 'Laura',
+ 'Title': 'Inside Sales Coordinator',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-377982000000),
+ 'HireDate': new Date(762843600000),
+ 'Address': '4726 - 11th Ave. N.E.',
+ 'City': 'Seattle',
+ 'Region': 'WA',
+ 'PostalCode': '98105',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-1189',
+ 'Extension': '2344',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
+ French. She reads and writes French.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+},
+{
+ 'EmployeeID': 9,
+ 'LastName': 'Dodsworth',
+ 'FirstName': 'Anne',
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-123966000000),
+ 'HireDate': new Date(784875600000),
+ 'Address': '7 Houndstooth Rd.',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'WG2 7LT',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-4444',
+ 'Extension': '452',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+}];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/index.css b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/index.css
new file mode 100644
index 000000000..038bf196b
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/index.css
@@ -0,0 +1,34 @@
+#container {
+ visibility: hidden;
+}
+
+#loader {
+ color: #008cff;
+ font-family: 'Helvetica Neue','calibiri';
+ font-size: 14px;
+ height: 40px;
+ left: 45%;
+ position: absolute;
+ top: 45%;
+ width: 30%;
+}
+
+.detailtable td{
+ font-size: 13px;
+ padding: 4px;
+ white-space: nowrap;
+}
+
+.photo {
+ border-radius: 50px;
+ box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
+ height: 100px;
+ width: 100px;
+}
+
+@media screen and (max-width: 800px) and (min-width: 320px) {
+ .photo {
+ height: 70px;
+ width: 70px;
+ }
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/index.js b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/index.js
new file mode 100644
index 000000000..f93503b4f
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/index.js
@@ -0,0 +1,13 @@
+ej.grids.Grid.Inject(ej.grids.DetailRow);
+var grid = new ej.grids.Grid({
+ dataSource: employeeData,
+ detailTemplate: '#detailtemplate',
+ columns: [
+ { field: 'FirstName', headerText: 'First Name', width: 140 },
+ { field: 'LastName', headerText: 'Last Name', width: 140 },
+ { field: 'Title', headerText: 'Title', width: 150 },
+ { field: 'Country', headerText: 'Country', width: 150 }
+ ],
+ height: 315
+});
+grid.appendTo('#Grid');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/index.ts b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/index.ts
new file mode 100644
index 000000000..d2feaa8f1
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/index.ts
@@ -0,0 +1,17 @@
+import { Grid, DetailRow } from '@syncfusion/ej2-grids';
+import { employeeData } from './datasource.ts';
+
+Grid.Inject(DetailRow);
+
+let grid: Grid = new Grid({
+ dataSource: employeeData,
+ detailTemplate: '#detailtemplate',
+ columns: [
+ { field: 'FirstName', headerText: 'First Name', width: 140 },
+ { field: 'LastName', headerText: 'Last Name', width: 140 },
+ { field: 'Title', headerText: 'Title', width: 150 },
+ { field: 'Country', headerText: 'Country', width: 150 }
+ ],
+ height: 315
+});
+grid.appendTo('#Grid');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/js/index.html b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/js/index.html
new file mode 100644
index 000000000..3b1482721
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/detail-template-icon-cs1/js/index.html
@@ -0,0 +1,88 @@
+
+
+ EJ2 Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ej2-javascript/code-snippet/grid/detail-template-method-cs1/waitingpopup.gif b/ej2-javascript/code-snippet/grid/detail-template-method-cs1/waitingpopup.gif
deleted file mode 100644
index a2eae442e..000000000
Binary files a/ej2-javascript/code-snippet/grid/detail-template-method-cs1/waitingpopup.gif and /dev/null differ
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-cs1/datasource.ts b/ej2-javascript/code-snippet/grid/draganddrop-cs1/datasource.ts
index c7b6b3d0c..afaf65670 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/grid/draganddrop-cs1/datasource.ts
@@ -73,210 +73,4 @@ export let data: Object[] = [
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
- }];
-
-export let employeeData: Object[] = [{
- 'EmployeeID': 1,
- 'LastName': 'Davolio',
- 'FirstName': 'Nancy',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-664743600000),
- 'HireDate': new Date(704692800000),
- 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98122',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9857',
- 'Extension': '5467',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
- \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 2,
- 'LastName': 'Fuller',
- 'FirstName': 'Andrew',
- 'Title': 'Vice President, Sales',
- 'TitleOfCourtesy': 'Dr.',
- 'BirthDate': new Date(-563828400000),
- 'HireDate': new Date(713764800000),
- 'Address': '908 W. Capital Way',
- 'City': 'Tacoma',
- 'Region': 'WA',
- 'PostalCode': '98401',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9482',
- 'Extension': '3457',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
- Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
- was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
- Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
- 'ReportsTo': 0,
- 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
-},
-{
- 'EmployeeID': 3,
- 'LastName': 'Leverling',
- 'FirstName': 'Janet',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-200088000000),
- 'HireDate': new Date(702104400000),
- 'Address': '722 Moss Bay Blvd.',
- 'City': 'Kirkland',
- 'Region': 'WA',
- 'PostalCode': '98033',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-3412',
- 'Extension': '3355',
- 'Photo': { 'Length': 21722 },
-
- 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
- She has also completed a certificate program in food retailing management.\
- Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
-},
-{
- 'EmployeeID': 4,
- 'LastName': 'Peacock',
- 'FirstName': 'Margaret',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mrs.',
- 'BirthDate': new Date(-1018814400000),
- 'HireDate': new Date(736401600000),
- 'Address': '4110 Old Redmond Rd.',
- 'City': 'Redmond',
- 'Region': 'WA',
- 'PostalCode': '98052',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-8122',
- 'Extension': '5176',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
- Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
-},
-{
- 'EmployeeID': 5,
- 'LastName': 'Buchanan',
- 'FirstName': 'Steven',
- 'Title': 'Sales Manager',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-468010800000),
- 'HireDate': new Date(750830400000),
- 'Address': '14 Garrett Hill',
- 'City': 'London',
- 'Region': null,
- 'PostalCode':
- 'SW1 8JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4848',
- 'Extension': '3453',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
- a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
- post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
- Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
-},
-{
- 'EmployeeID': 6,
- 'LastName': 'Suyama',
- 'FirstName': 'Michael',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-205185600000),
- 'HireDate': new Date(750830400000),
- 'Address': 'Coventry House\r\nMiner Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'EC2 7JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-7773',
- 'Extension': '428',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
- (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
- He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 7,
- 'LastName': 'King',
- 'FirstName': 'Robert',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-302731200000),
- 'HireDate': new Date(757486800000),
- 'Address': 'Edgeham Hollow\r\nWinchester Way',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'RG1 9SP',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-5598',
- 'Extension': '465',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
- University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
- he was transferred to the London office in March 1993.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 8,
- 'LastName': 'Callahan',
- 'FirstName': 'Laura',
- 'Title': 'Inside Sales Coordinator',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-377982000000),
- 'HireDate': new Date(762843600000),
- 'Address': '4726 - 11th Ave. N.E.',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98105',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-1189',
- 'Extension': '2344',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
- French. She reads and writes French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 9,
- 'LastName': 'Dodsworth',
- 'FirstName': 'Anne',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-123966000000),
- 'HireDate': new Date(784875600000),
- 'Address': '7 Houndstooth Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'WG2 7LT',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4444',
- 'Extension': '452',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-}];
\ No newline at end of file
+ }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-cs1/es5-datasource.js b/ej2-javascript/code-snippet/grid/draganddrop-cs1/es5-datasource.js
index 7fc7297c3..955466c83 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/grid/draganddrop-cs1/es5-datasource.js
@@ -73,210 +73,4 @@ var data = [
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
- }];
-
-var employeeData = [{
- 'EmployeeID': 1,
- 'LastName': 'Davolio',
- 'FirstName': 'Nancy',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-664743600000),
- 'HireDate': new Date(704692800000),
- 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98122',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9857',
- 'Extension': '5467',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
- \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 2,
- 'LastName': 'Fuller',
- 'FirstName': 'Andrew',
- 'Title': 'Vice President, Sales',
- 'TitleOfCourtesy': 'Dr.',
- 'BirthDate': new Date(-563828400000),
- 'HireDate': new Date(713764800000),
- 'Address': '908 W. Capital Way',
- 'City': 'Tacoma',
- 'Region': 'WA',
- 'PostalCode': '98401',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9482',
- 'Extension': '3457',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
- Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
- was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
- Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
- 'ReportsTo': 0,
- 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
-},
-{
- 'EmployeeID': 3,
- 'LastName': 'Leverling',
- 'FirstName': 'Janet',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-200088000000),
- 'HireDate': new Date(702104400000),
- 'Address': '722 Moss Bay Blvd.',
- 'City': 'Kirkland',
- 'Region': 'WA',
- 'PostalCode': '98033',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-3412',
- 'Extension': '3355',
- 'Photo': { 'Length': 21722 },
-
- 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
- She has also completed a certificate program in food retailing management.\
- Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
-},
-{
- 'EmployeeID': 4,
- 'LastName': 'Peacock',
- 'FirstName': 'Margaret',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mrs.',
- 'BirthDate': new Date(-1018814400000),
- 'HireDate': new Date(736401600000),
- 'Address': '4110 Old Redmond Rd.',
- 'City': 'Redmond',
- 'Region': 'WA',
- 'PostalCode': '98052',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-8122',
- 'Extension': '5176',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
- Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
-},
-{
- 'EmployeeID': 5,
- 'LastName': 'Buchanan',
- 'FirstName': 'Steven',
- 'Title': 'Sales Manager',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-468010800000),
- 'HireDate': new Date(750830400000),
- 'Address': '14 Garrett Hill',
- 'City': 'London',
- 'Region': null,
- 'PostalCode':
- 'SW1 8JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4848',
- 'Extension': '3453',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
- a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
- post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
- Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
-},
-{
- 'EmployeeID': 6,
- 'LastName': 'Suyama',
- 'FirstName': 'Michael',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-205185600000),
- 'HireDate': new Date(750830400000),
- 'Address': 'Coventry House\r\nMiner Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'EC2 7JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-7773',
- 'Extension': '428',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
- (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
- He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 7,
- 'LastName': 'King',
- 'FirstName': 'Robert',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-302731200000),
- 'HireDate': new Date(757486800000),
- 'Address': 'Edgeham Hollow\r\nWinchester Way',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'RG1 9SP',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-5598',
- 'Extension': '465',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
- University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
- he was transferred to the London office in March 1993.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 8,
- 'LastName': 'Callahan',
- 'FirstName': 'Laura',
- 'Title': 'Inside Sales Coordinator',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-377982000000),
- 'HireDate': new Date(762843600000),
- 'Address': '4726 - 11th Ave. N.E.',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98105',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-1189',
- 'Extension': '2344',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
- French. She reads and writes French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 9,
- 'LastName': 'Dodsworth',
- 'FirstName': 'Anne',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-123966000000),
- 'HireDate': new Date(784875600000),
- 'Address': '7 Houndstooth Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'WG2 7LT',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4444',
- 'Extension': '452',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-}];
\ No newline at end of file
+ }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-cs1/index.js b/ej2-javascript/code-snippet/grid/draganddrop-cs1/index.js
index aace4f655..4c3452cba 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-cs1/index.js
+++ b/ej2-javascript/code-snippet/grid/draganddrop-cs1/index.js
@@ -1,6 +1,6 @@
ej.grids.Grid.Inject(ej.grids.RowDD);
var grid = new ej.grids.Grid({
- dataSource: data.slice(0, 5),
+ dataSource: data,
allowRowDragAndDrop: true,
rowDropSettings: { targetID: 'DestGrid' },
selectionSettings: { type: 'Multiple' },
@@ -24,5 +24,4 @@ var destGrid = new ej.grids.Grid({
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
});
-destGrid.appendTo('#DestGrid');
-
+destGrid.appendTo('#DestGrid');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-cs1/index.ts b/ej2-javascript/code-snippet/grid/draganddrop-cs1/index.ts
index 35c6502ab..5fa8377cf 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-cs1/index.ts
+++ b/ej2-javascript/code-snippet/grid/draganddrop-cs1/index.ts
@@ -1,12 +1,10 @@
-
-
-import { Grid, Page, RowDD, Selection } from '@syncfusion/ej2-grids';
+import { Grid, RowDD, Selection } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
-Grid.Inject(Page, RowDD, Selection);
+Grid.Inject( RowDD, Selection);
let grid: Grid = new Grid({
- dataSource: data.slice(0, 5),
+ dataSource: data,
allowRowDragAndDrop: true,
rowDropSettings: { targetID: 'DestGrid' },
selectionSettings: { type: 'Multiple' },
@@ -31,7 +29,4 @@ let destGrid: Grid = new Grid({
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
});
-destGrid.appendTo('#DestGrid');
-
-
-
+destGrid.appendTo('#DestGrid');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-cs1/js/index.html b/ej2-javascript/code-snippet/grid/draganddrop-cs1/js/index.html
index 0bf127f5b..4a2871a48 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/grid/draganddrop-cs1/js/index.html
@@ -1,44 +1,36 @@
-
+
+
EJ2 Grid
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-cs1/systemjs.config.js b/ej2-javascript/code-snippet/grid/draganddrop-cs1/systemjs.config.js
index 05bf940b7..e32347149 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-cs1/systemjs.config.js
+++ b/ej2-javascript/code-snippet/grid/draganddrop-cs1/systemjs.config.js
@@ -10,7 +10,7 @@ System.config({
}
},
paths: {
- "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/23.2.4/"
},
map: {
main: "index.ts",
@@ -33,7 +33,6 @@ System.config({
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
}
});
-
System.import('index.ts').catch(console.error.bind(console)).then(function () {
document.getElementById('loader').style.display = "none";
document.getElementById('container').style.visibility = "visible";
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-cs1/ts/index.html b/ej2-javascript/code-snippet/grid/draganddrop-cs1/ts/index.html
index 88d9bfb92..0c495c0cf 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/grid/draganddrop-cs1/ts/index.html
@@ -1,6 +1,5 @@
-
EJ2 Grid
@@ -8,21 +7,16 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/datasource.ts b/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/datasource.ts
index 6a46580f3..8a43bef93 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/datasource.ts
@@ -1,306 +1,164 @@
-export let data: Object[] = [
+export let sampleGridData: Object[] = [
{
- OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
- ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
- ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
- },
- {
- OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
- ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
- ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
- },
- {
- OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
- ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
- ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
- },
- {
- OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
- ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
- ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
- },
- {
- OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
- ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
- ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
- },
- {
- OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
- ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
- ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
- },
- {
- OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
- ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
- ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
- },
- {
- OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
- ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
- ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
- },
- {
- OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
- ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
- ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
- },
- {
- OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
- ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
- ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
- },
- {
- OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
- ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
- ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
- },
- {
- OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
- ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
- ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
- },
- {
- OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
- ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
- ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
- },
- {
- OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
- ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
- ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
- },
- {
- OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
- ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
- ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
- }];
-
- export let hierarchicalData: { [key: string]: Object }[] = [
- {
- nodeId: '04', nodeText: 'Pictures', icon: 'folder', expanded: true,
- nodeChild: [
- {
- nodeId: '04-01', nodeText: 'Users', expanded: true,
- nodeChild: [
- { nodeId: '04-01-01', nodeText: 'Smith' },
- { nodeId: '04-01-02', nodeText: 'Admin' },
- { nodeId: '04-01-02', nodeText: 'Public' },
- ]
- },
- { nodeId: '04-02', nodeText: 'Windows',
- nodeChild: [
- { nodeId: '04-02-01', nodeText: 'Boot' },
- { nodeId: '04-02-02', nodeText: 'FileManager' },
- { nodeId: '04-02-02', nodeText: 'System32' },
- ]
- },
- { nodeId: '04-03', nodeText: 'Local Disk(D:)' },
- ]
- }
- ];
-
-export let employeeData: Object[] = [{
- 'EmployeeID': 1,
- 'LastName': 'Davolio',
- 'FirstName': 'Nancy',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-664743600000),
- 'HireDate': new Date(704692800000),
- 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98122',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9857',
- 'Extension': '5467',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
- \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 2,
- 'LastName': 'Fuller',
- 'FirstName': 'Andrew',
- 'Title': 'Vice President, Sales',
- 'TitleOfCourtesy': 'Dr.',
- 'BirthDate': new Date(-563828400000),
- 'HireDate': new Date(713764800000),
- 'Address': '908 W. Capital Way',
- 'City': 'Tacoma',
- 'Region': 'WA',
- 'PostalCode': '98401',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9482',
- 'Extension': '3457',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
- Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
- was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
- Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
- 'ReportsTo': 0,
- 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
-},
-{
- 'EmployeeID': 3,
- 'LastName': 'Leverling',
- 'FirstName': 'Janet',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-200088000000),
- 'HireDate': new Date(702104400000),
- 'Address': '722 Moss Bay Blvd.',
- 'City': 'Kirkland',
- 'Region': 'WA',
- 'PostalCode': '98033',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-3412',
- 'Extension': '3355',
- 'Photo': { 'Length': 21722 },
-
- 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
- She has also completed a certificate program in food retailing management.\
- Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
-},
-{
- 'EmployeeID': 4,
- 'LastName': 'Peacock',
- 'FirstName': 'Margaret',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mrs.',
- 'BirthDate': new Date(-1018814400000),
- 'HireDate': new Date(736401600000),
- 'Address': '4110 Old Redmond Rd.',
- 'City': 'Redmond',
- 'Region': 'WA',
- 'PostalCode': '98052',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-8122',
- 'Extension': '5176',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
- Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
-},
-{
- 'EmployeeID': 5,
- 'LastName': 'Buchanan',
- 'FirstName': 'Steven',
- 'Title': 'Sales Manager',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-468010800000),
- 'HireDate': new Date(750830400000),
- 'Address': '14 Garrett Hill',
- 'City': 'London',
- 'Region': null,
- 'PostalCode':
- 'SW1 8JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4848',
- 'Extension': '3453',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
- a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
- post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
- Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
-},
-{
- 'EmployeeID': 6,
- 'LastName': 'Suyama',
- 'FirstName': 'Michael',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-205185600000),
- 'HireDate': new Date(750830400000),
- 'Address': 'Coventry House\r\nMiner Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'EC2 7JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-7773',
- 'Extension': '428',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
- (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
- He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 7,
- 'LastName': 'King',
- 'FirstName': 'Robert',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-302731200000),
- 'HireDate': new Date(757486800000),
- 'Address': 'Edgeham Hollow\r\nWinchester Way',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'RG1 9SP',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-5598',
- 'Extension': '465',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
- University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
- he was transferred to the London office in March 1993.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 8,
- 'LastName': 'Callahan',
- 'FirstName': 'Laura',
- 'Title': 'Inside Sales Coordinator',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-377982000000),
- 'HireDate': new Date(762843600000),
- 'Address': '4726 - 11th Ave. N.E.',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98105',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-1189',
- 'Extension': '2344',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
- French. She reads and writes French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 9,
- 'LastName': 'Dodsworth',
- 'FirstName': 'Anne',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-123966000000),
- 'HireDate': new Date(784875600000),
- 'Address': '7 Houndstooth Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'WG2 7LT',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4444',
- 'Extension': '452',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-}];
\ No newline at end of file
+ taskID: 1,
+ taskName: 'Planning',
+ startDate: new Date('02/03/2017'),
+ endDate: new Date('02/07/2017'),
+ progress: 100,
+ duration: 5,
+ priority: 'Normal',
+ approved: false,
+ description: 'Task description 1',
+ category: 'Task category 1',
+ subtasks: [
+ {
+ taskID: 2,
+ taskName: 'Plan timeline',
+ startDate: new Date('02/03/2017'),
+ endDate: new Date('02/07/2017'),
+ duration: 5,
+ progress: 100,
+ priority: 'Normal',
+ approved: false,
+ },
+ {
+ taskID: 3,
+ taskName: 'Plan budget',
+ startDate: new Date('02/03/2017'),
+ endDate: new Date('02/07/2017'),
+ duration: 5,
+ progress: 100,
+ priority: 'Low',
+ approved: true,
+ },
+ {
+ taskID: 4,
+ taskName: 'Allocate resources',
+ startDate: new Date('02/03/2017'),
+ endDate: new Date('02/07/2017'),
+ duration: 5,
+ progress: 100,
+ priority: 'Critical',
+ approved: false,
+ },
+ {
+ taskID: 5,
+ taskName: 'Planning complete',
+ startDate: new Date('02/07/2017'),
+ endDate: new Date('02/07/2017'),
+ duration: 0,
+ progress: 0,
+ priority: 'Low',
+ approved: true,
+ },
+ ],
+ },
+ {
+ taskID: 6,
+ taskName: 'Design',
+ startDate: new Date('02/10/2017'),
+ endDate: new Date('02/14/2017'),
+ duration: 3,
+ progress: 86,
+ priority: 'High',
+ approved: false,
+ description: 'Task description 2',
+ category: 'Task category 2',
+ subtasks: [
+ {
+ taskID: 7,
+ taskName: 'Software Specification',
+ startDate: new Date('02/10/2017'),
+ endDate: new Date('02/12/2017'),
+ duration: 3,
+ progress: 60,
+ priority: 'Normal',
+ approved: false,
+ },
+ {
+ taskID: 8,
+ taskName: 'Develop prototype',
+ startDate: new Date('02/10/2017'),
+ endDate: new Date('02/12/2017'),
+ duration: 3,
+ progress: 100,
+ priority: 'Critical',
+ approved: false,
+ },
+ {
+ taskID: 9,
+ taskName: 'Get approval from customer',
+ startDate: new Date('02/13/2017'),
+ endDate: new Date('02/14/2017'),
+ duration: 2,
+ progress: 100,
+ priority: 'Low',
+ approved: true,
+ },
+ {
+ taskID: 10,
+ taskName: 'Design Documentation',
+ startDate: new Date('02/13/2017'),
+ endDate: new Date('02/14/2017'),
+ duration: 2,
+ progress: 100,
+ priority: 'High',
+ approved: true,
+ },
+ {
+ taskID: 11,
+ taskName: 'Design complete',
+ startDate: new Date('02/14/2017'),
+ endDate: new Date('02/14/2017'),
+ duration: 0,
+ progress: 0,
+ priority: 'Normal',
+ approved: true,
+ },
+ ],
+ },
+ {
+ taskID: 12,
+ taskName: 'Implementation Phase',
+ startDate: new Date('02/17/2017'),
+ endDate: new Date('02/27/2017'),
+ priority: 'Normal',
+ approved: false,
+ description: 'Task description 3',
+ category: 'Task category 3',
+ duration: 11,
+ progress: 66,
+ subtasks: [
+ {
+ taskID: 13,
+ taskName: 'Phase 1',
+ startDate: new Date('02/17/2017'),
+ endDate: new Date('02/27/2017'),
+ priority: 'High',
+ approved: false,
+ progress: 50,
+ duration: 11,
+ },
+ {
+ taskID: 21,
+ taskName: 'Phase 2',
+ startDate: new Date('02/17/2017'),
+ endDate: new Date('02/28/2017'),
+ priority: 'High',
+ approved: false,
+ duration: 12,
+ progress: 60,
+ },
+
+ {
+ taskID: 29,
+ taskName: 'Phase 3',
+ startDate: new Date('02/17/2017'),
+ endDate: new Date('02/27/2017'),
+ priority: 'Normal',
+ approved: false,
+ duration: 11,
+ progress: 30,
+ },
+ ],
+ },];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/es5-datasource.js b/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/es5-datasource.js
index caf53593b..ee67f31d5 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/es5-datasource.js
@@ -1,308 +1,164 @@
-var data = [
- {
- OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
- ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
- ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
- },
- {
- OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
- ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
- ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
- },
- {
- OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
- ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
- ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
- },
- {
- OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
- ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
- ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
- },
- {
- OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
- ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
- ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
- },
- {
- OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
- ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
- ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
- },
- {
- OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
- ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
- ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
- },
- {
- OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
- ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
- ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
- },
- {
- OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
- ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
- ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
- },
- {
- OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
- ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
- ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
- },
- {
- OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
- ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
- ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
- },
- {
- OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
- ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
- ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
- },
- {
- OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
- ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
- ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
- },
- {
- OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
- ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
- ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
- },
- {
- OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
- ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
- ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
- }];
-
-
-var hierarchicalData = [
- {
- nodeId: '04', nodeText: 'Pictures', icon: 'folder', expanded: true,
- nodeChild: [
- {
- nodeId: '04-01', nodeText: 'Users', expanded: true,
- nodeChild: [
- { nodeId: '04-01-01', nodeText: 'Smith' },
- { nodeId: '04-01-02', nodeText: 'Admin' },
- { nodeId: '04-01-02', nodeText: 'Public' },
- ]
- },
- {
- nodeId: '04-02', nodeText: 'Windows',
- nodeChild: [
- { nodeId: '04-02-01', nodeText: 'Boot' },
- { nodeId: '04-02-02', nodeText: 'FileManager' },
- { nodeId: '04-02-02', nodeText: 'System32' },
- ]
- },
- { nodeId: '04-03', nodeText: 'Local Disk(D:)' },
- ]
- }
-];
-
-var employeeData = [{
- 'EmployeeID': 1,
- 'LastName': 'Davolio',
- 'FirstName': 'Nancy',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-664743600000),
- 'HireDate': new Date(704692800000),
- 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98122',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9857',
- 'Extension': '5467',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
- \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 2,
- 'LastName': 'Fuller',
- 'FirstName': 'Andrew',
- 'Title': 'Vice President, Sales',
- 'TitleOfCourtesy': 'Dr.',
- 'BirthDate': new Date(-563828400000),
- 'HireDate': new Date(713764800000),
- 'Address': '908 W. Capital Way',
- 'City': 'Tacoma',
- 'Region': 'WA',
- 'PostalCode': '98401',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9482',
- 'Extension': '3457',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
- Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
- was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
- Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
- 'ReportsTo': 0,
- 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
-},
-{
- 'EmployeeID': 3,
- 'LastName': 'Leverling',
- 'FirstName': 'Janet',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-200088000000),
- 'HireDate': new Date(702104400000),
- 'Address': '722 Moss Bay Blvd.',
- 'City': 'Kirkland',
- 'Region': 'WA',
- 'PostalCode': '98033',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-3412',
- 'Extension': '3355',
- 'Photo': { 'Length': 21722 },
-
- 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
- She has also completed a certificate program in food retailing management.\
- Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
-},
-{
- 'EmployeeID': 4,
- 'LastName': 'Peacock',
- 'FirstName': 'Margaret',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mrs.',
- 'BirthDate': new Date(-1018814400000),
- 'HireDate': new Date(736401600000),
- 'Address': '4110 Old Redmond Rd.',
- 'City': 'Redmond',
- 'Region': 'WA',
- 'PostalCode': '98052',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-8122',
- 'Extension': '5176',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
- Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
-},
-{
- 'EmployeeID': 5,
- 'LastName': 'Buchanan',
- 'FirstName': 'Steven',
- 'Title': 'Sales Manager',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-468010800000),
- 'HireDate': new Date(750830400000),
- 'Address': '14 Garrett Hill',
- 'City': 'London',
- 'Region': null,
- 'PostalCode':
- 'SW1 8JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4848',
- 'Extension': '3453',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
- a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
- post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
- Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
-},
-{
- 'EmployeeID': 6,
- 'LastName': 'Suyama',
- 'FirstName': 'Michael',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-205185600000),
- 'HireDate': new Date(750830400000),
- 'Address': 'Coventry House\r\nMiner Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'EC2 7JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-7773',
- 'Extension': '428',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
- (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
- He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 7,
- 'LastName': 'King',
- 'FirstName': 'Robert',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-302731200000),
- 'HireDate': new Date(757486800000),
- 'Address': 'Edgeham Hollow\r\nWinchester Way',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'RG1 9SP',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-5598',
- 'Extension': '465',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
- University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
- he was transferred to the London office in March 1993.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 8,
- 'LastName': 'Callahan',
- 'FirstName': 'Laura',
- 'Title': 'Inside Sales Coordinator',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-377982000000),
- 'HireDate': new Date(762843600000),
- 'Address': '4726 - 11th Ave. N.E.',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98105',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-1189',
- 'Extension': '2344',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
- French. She reads and writes French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 9,
- 'LastName': 'Dodsworth',
- 'FirstName': 'Anne',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-123966000000),
- 'HireDate': new Date(784875600000),
- 'Address': '7 Houndstooth Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'WG2 7LT',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4444',
- 'Extension': '452',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-}];
\ No newline at end of file
+var sampleGridData = [
+ {
+ taskID: 1,
+ taskName: 'Planning',
+ startDate: new Date('02/03/2017'),
+ endDate: new Date('02/07/2017'),
+ progress: 100,
+ duration: 5,
+ priority: 'Normal',
+ approved: false,
+ description: 'Task description 1',
+ category: 'Task category 1',
+ subtasks: [
+ {
+ taskID: 2,
+ taskName: 'Plan timeline',
+ startDate: new Date('02/03/2017'),
+ endDate: new Date('02/07/2017'),
+ duration: 5,
+ progress: 100,
+ priority: 'Normal',
+ approved: false,
+ },
+ {
+ taskID: 3,
+ taskName: 'Plan budget',
+ startDate: new Date('02/03/2017'),
+ endDate: new Date('02/07/2017'),
+ duration: 5,
+ progress: 100,
+ priority: 'Low',
+ approved: true,
+ },
+ {
+ taskID: 4,
+ taskName: 'Allocate resources',
+ startDate: new Date('02/03/2017'),
+ endDate: new Date('02/07/2017'),
+ duration: 5,
+ progress: 100,
+ priority: 'Critical',
+ approved: false,
+ },
+ {
+ taskID: 5,
+ taskName: 'Planning complete',
+ startDate: new Date('02/07/2017'),
+ endDate: new Date('02/07/2017'),
+ duration: 0,
+ progress: 0,
+ priority: 'Low',
+ approved: true,
+ },
+ ],
+ },
+ {
+ taskID: 6,
+ taskName: 'Design',
+ startDate: new Date('02/10/2017'),
+ endDate: new Date('02/14/2017'),
+ duration: 3,
+ progress: 86,
+ priority: 'High',
+ approved: false,
+ description: 'Task description 2',
+ category: 'Task category 2',
+ subtasks: [
+ {
+ taskID: 7,
+ taskName: 'Software Specification',
+ startDate: new Date('02/10/2017'),
+ endDate: new Date('02/12/2017'),
+ duration: 3,
+ progress: 60,
+ priority: 'Normal',
+ approved: false,
+ },
+ {
+ taskID: 8,
+ taskName: 'Develop prototype',
+ startDate: new Date('02/10/2017'),
+ endDate: new Date('02/12/2017'),
+ duration: 3,
+ progress: 100,
+ priority: 'Critical',
+ approved: false,
+ },
+ {
+ taskID: 9,
+ taskName: 'Get approval from customer',
+ startDate: new Date('02/13/2017'),
+ endDate: new Date('02/14/2017'),
+ duration: 2,
+ progress: 100,
+ priority: 'Low',
+ approved: true,
+ },
+ {
+ taskID: 10,
+ taskName: 'Design Documentation',
+ startDate: new Date('02/13/2017'),
+ endDate: new Date('02/14/2017'),
+ duration: 2,
+ progress: 100,
+ priority: 'High',
+ approved: true,
+ },
+ {
+ taskID: 11,
+ taskName: 'Design complete',
+ startDate: new Date('02/14/2017'),
+ endDate: new Date('02/14/2017'),
+ duration: 0,
+ progress: 0,
+ priority: 'Normal',
+ approved: true,
+ },
+ ],
+ },
+ {
+ taskID: 12,
+ taskName: 'Implementation Phase',
+ startDate: new Date('02/17/2017'),
+ endDate: new Date('02/27/2017'),
+ priority: 'Normal',
+ approved: false,
+ description: 'Task description 3',
+ category: 'Task category 3',
+ duration: 11,
+ progress: 66,
+ subtasks: [
+ {
+ taskID: 13,
+ taskName: 'Phase 1',
+ startDate: new Date('02/17/2017'),
+ endDate: new Date('02/27/2017'),
+ priority: 'High',
+ approved: false,
+ progress: 50,
+ duration: 11,
+ },
+ {
+ taskID: 21,
+ taskName: 'Phase 2',
+ startDate: new Date('02/17/2017'),
+ endDate: new Date('02/28/2017'),
+ priority: 'High',
+ approved: false,
+ duration: 12,
+ progress: 60,
+ },
+
+ {
+ taskID: 29,
+ taskName: 'Phase 3',
+ startDate: new Date('02/17/2017'),
+ endDate: new Date('02/27/2017'),
+ priority: 'Normal',
+ approved: false,
+ duration: 11,
+ progress: 30,
+ },
+ ],
+ },];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/index.js b/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/index.js
index 15faa6e50..aef09d55c 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/index.js
+++ b/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/index.js
@@ -1,40 +1,47 @@
ej.grids.Grid.Inject(ej.grids.RowDD);
var grid = new ej.grids.Grid({
- dataSource: data.slice(0, 5),
- allowRowDragAndDrop: true,
- rowDropSettings: { targetID: 'tree' },
- selectionSettings: { type: 'Multiple' },
- columns: [
- { field: 'OrderID', headerText: 'Order ID',isPrimaryKey: true, textAlign: 'Right', width: 120 },
- { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
- { field: 'ShipCity', headerText: 'Ship City', width: 150 },
- { field: 'ShipName', headerText: 'Ship Name', width: 150 }
- ],
- rowDrop: function(args){
- var currLi = args.target.closest('li');
- var gridData = args.data;
- if(currLi !=null && closest(currLi, '.' + 'e-control').classList.contains('e-tree'))
- {
- if(gridData != null){
- var grid = (document.getElementById('Grid')).ej2_instances[0];
- var tree = (document.getElementById('tree')).ej2_instances[0];
- for(var i = 0, len = gridData.length; i < len; i++){
- var obj = [{ nodeId:gridData[i].OrderID,nodeText:gridData[i].CustomerID }];
- grid.deleteRow(args.rows[i]);
- tree.addNodes(obj,currLi);
- }
- args.cancel=true;
- }
- }
- }
+ dataSource: sampleGridData,
+ allowPaging: true,
+ pageSettings: true,
+ allowSelection: true,
+ allowRowDragAndDrop: true,
+ rowDropSettings: { targetID: 'TreeGrid' },
+ selectionSettings: { type: 'Multiple' },
+ editSettings: { allowDeleting: true },
+ rowDrop: function (args) {
+ var grid = document.getElementById('Grid').ej2_instances[0];
+ var tree = document.getElementById('TreeGrid').ej2_instances[0];
+ if (args.target.closest('.e-treegrid')) {
+ args.cancel = true;
+ var rowIndex =
+ args.target.closest('.e-row') !== null
+ ? args.target.closest('.e-row').rowIndex
+ : 0;
+ for (var i = 0; i < args.data.length; i++) {
+ tree.addRecord(args.data[i], rowIndex);
+ grid.deleteRecord('taskID', args.data[i]);
+ }
+ }
+ },
+ columns: [
+ { field: 'taskID', headerText: 'taskID', textAlign: 'Right', width: 90 },
+ { field: 'taskName', headerText: 'taskName', textAlign: 'Left', width: 180 },
+ { field: 'description', headerText: 'description', textAlign: 'Left', width: 180 },
+ { field: 'category', headerText: 'category', textAlign: 'Left', width: 180 },
+ { field: 'startDate', headerText: 'startDate', textAlign: 'Right', format: 'yMd', width: 120 },
+ { field: 'duration', headerText: 'duration', textAlign: 'Right', width: 80 }
+ ],
});
-grid.appendTo('#Grid');
-
-var treeViewObj = new ej.navigations.TreeView({
- fields: { dataSource: hierarchicalData, id: 'nodeId', text: 'nodeText',
- child: 'nodeChild'
- },
- });
-treeViewObj.appendTo('#tree');
-
+grid.appendTo('#Grid');
+var treeGridObj = new ej.treegrid.TreeGrid({
+ childMapping: 'subtasks',
+ editSettings: { allowAdding: true, allowEditing: true },
+ columns: [
+ { field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
+ { field: 'taskName', headerText: 'Task Name', width: 180, textAlign: 'Left' },
+ { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
+ { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
+ ],
+});
+treeGridObj.appendTo('#TreeGrid');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/index.ts b/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/index.ts
index 39f4ec25f..5ca8f308b 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/index.ts
+++ b/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/index.ts
@@ -1,47 +1,52 @@
+import { Grid, Page, RowDD, Selection, Edit, RowDragEventArgs } from '@syncfusion/ej2-grids';
+import { TreeGrid, Edit as TreeEdit } from '@syncfusion/ej2-treegrid';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { sampleGridData } from './datasource.ts';
+Grid.Inject(Page, RowDD, Selection, Edit);
+TreeGrid.Inject(TreeEdit);
-import { Grid, Page, RowDD, Selection } from '@syncfusion/ej2-grids';
-import { TreeView } from '@syncfusion/ej2-navigations';
-import { data } from './datasource.ts';
-
-Grid.Inject(Page, RowDD, Selection);
-let hierarchicalData: { [key: string]: Object }[];
let grid: Grid = new Grid({
- dataSource: data.slice(0, 5),
- allowRowDragAndDrop: true,
- rowDropSettings: { targetID: 'tree' },
- selectionSettings: { type: 'Multiple' },
- columns: [
- { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
- { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
- { field: 'ShipCity', headerText: 'Ship City', width: 150 },
- { field: 'ShipName', headerText: 'Ship Name', width: 150 }
- ],
- rowDrop: function(args:any){
- let currLi: Element = args.target.closest('li');
- let gridData: any = args.data;
- if(currLi !=null && closest(currLi, '.' + 'e-control').classList.contains('e-treeview')){
- if(gridData != null){
- let grid: any = (document.getElementById('Grid')).ej2_instances[0];
- let tree: any = (document.getElementById('tree')).ej2_instances[0];
- for(let i:number = 0, len = gridData.length; i < len; i++){
- let obj: any = [{ nodeId:gridData[i].OrderID,nodeText:gridData[i].CustomerID }];
- (grid as any).deleteRow(args.rows[i]);
- tree.addNodes(obj,currLi);
- }
- args.cancel=true;
- }
- }
- }
+ dataSource: sampleGridData,
+ allowPaging: true,
+ allowSelection: true,
+ allowRowDragAndDrop: true,
+ rowDropSettings: { targetID: 'TreeGrid' },
+ selectionSettings: { type: 'Multiple' },
+ editSettings: { allowDeleting: true },
+ columns: [
+ { field: 'taskID', headerText: 'taskID', textAlign: 'Right', width: 90 },
+ { field: 'taskName', headerText: 'taskName', textAlign: 'Left', width: 180 },
+ { field: 'description', headerText: 'description', textAlign: 'Left', width: 180 },
+ { field: 'category', headerText: 'category', textAlign: 'Left', width: 180 },
+ { field: 'startDate', headerText: 'startDate', textAlign: 'Right', format: 'yMd', width: 120 },
+ { field: 'duration', headerText: 'duration', textAlign: 'Right', width: 80 }
+ ],
+ rowDrop: function (args: RowDragEventArgs) {
+ let grid = (document.getElementById('Grid') as Grid).ej2_instances[0];
+ let tree = (document.getElementById('TreeGrid') as TreeGrid).ej2_instances[0];
+ if (args.target.closest('.e-treegrid')) {
+ args.cancel = true;
+ let rowIndex = !isNullOrUndefined(args.target.closest('.e-row'))
+ ? args.target.closest('.e-row').rowIndex
+ : 0;
+ for (let i = 0; i < args.data.length; i++) {
+ tree.addRecord(args.data[i], rowIndex);
+ grid.deleteRecord('taskID', args.data[i]);
+ }
+ }
+ },
});
grid.appendTo('#Grid');
-let treeObj: TreeView = new TreeView({
- fields: { dataSource: hierarchicalData, id: 'nodeId', text: 'nodeText',
- child: 'nodeChild'
- },
- });
- treeObj.appendTo('#tree');
-
-
-
+let treeGridObj: TreeGrid = new TreeGrid({
+ childMapping: 'subtasks',
+ editSettings: { allowAdding: true, allowEditing: true },
+ columns: [
+ { field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
+ { field: 'taskName', headerText: 'Task Name', width: 180, textAlign: 'Left' },
+ { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
+ { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
+ ],
+});
+treeGridObj.appendTo('#TreeGrid');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/js/index.html b/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/js/index.html
index 5fb8a1f6a..9daa38f17 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/grid/draganddrop-custom-cs1/js/index.html
@@ -1,44 +1,37 @@
-
+
+
EJ2 Grid
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/datasource.ts b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/datasource.ts
index c7b6b3d0c..afaf65670 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/datasource.ts
@@ -73,210 +73,4 @@ export let data: Object[] = [
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
- }];
-
-export let employeeData: Object[] = [{
- 'EmployeeID': 1,
- 'LastName': 'Davolio',
- 'FirstName': 'Nancy',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-664743600000),
- 'HireDate': new Date(704692800000),
- 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98122',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9857',
- 'Extension': '5467',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
- \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 2,
- 'LastName': 'Fuller',
- 'FirstName': 'Andrew',
- 'Title': 'Vice President, Sales',
- 'TitleOfCourtesy': 'Dr.',
- 'BirthDate': new Date(-563828400000),
- 'HireDate': new Date(713764800000),
- 'Address': '908 W. Capital Way',
- 'City': 'Tacoma',
- 'Region': 'WA',
- 'PostalCode': '98401',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9482',
- 'Extension': '3457',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
- Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
- was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
- Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
- 'ReportsTo': 0,
- 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
-},
-{
- 'EmployeeID': 3,
- 'LastName': 'Leverling',
- 'FirstName': 'Janet',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-200088000000),
- 'HireDate': new Date(702104400000),
- 'Address': '722 Moss Bay Blvd.',
- 'City': 'Kirkland',
- 'Region': 'WA',
- 'PostalCode': '98033',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-3412',
- 'Extension': '3355',
- 'Photo': { 'Length': 21722 },
-
- 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
- She has also completed a certificate program in food retailing management.\
- Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
-},
-{
- 'EmployeeID': 4,
- 'LastName': 'Peacock',
- 'FirstName': 'Margaret',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mrs.',
- 'BirthDate': new Date(-1018814400000),
- 'HireDate': new Date(736401600000),
- 'Address': '4110 Old Redmond Rd.',
- 'City': 'Redmond',
- 'Region': 'WA',
- 'PostalCode': '98052',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-8122',
- 'Extension': '5176',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
- Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
-},
-{
- 'EmployeeID': 5,
- 'LastName': 'Buchanan',
- 'FirstName': 'Steven',
- 'Title': 'Sales Manager',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-468010800000),
- 'HireDate': new Date(750830400000),
- 'Address': '14 Garrett Hill',
- 'City': 'London',
- 'Region': null,
- 'PostalCode':
- 'SW1 8JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4848',
- 'Extension': '3453',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
- a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
- post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
- Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
-},
-{
- 'EmployeeID': 6,
- 'LastName': 'Suyama',
- 'FirstName': 'Michael',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-205185600000),
- 'HireDate': new Date(750830400000),
- 'Address': 'Coventry House\r\nMiner Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'EC2 7JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-7773',
- 'Extension': '428',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
- (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
- He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 7,
- 'LastName': 'King',
- 'FirstName': 'Robert',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-302731200000),
- 'HireDate': new Date(757486800000),
- 'Address': 'Edgeham Hollow\r\nWinchester Way',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'RG1 9SP',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-5598',
- 'Extension': '465',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
- University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
- he was transferred to the London office in March 1993.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 8,
- 'LastName': 'Callahan',
- 'FirstName': 'Laura',
- 'Title': 'Inside Sales Coordinator',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-377982000000),
- 'HireDate': new Date(762843600000),
- 'Address': '4726 - 11th Ave. N.E.',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98105',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-1189',
- 'Extension': '2344',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
- French. She reads and writes French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 9,
- 'LastName': 'Dodsworth',
- 'FirstName': 'Anne',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-123966000000),
- 'HireDate': new Date(784875600000),
- 'Address': '7 Houndstooth Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'WG2 7LT',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4444',
- 'Extension': '452',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-}];
\ No newline at end of file
+ }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/es5-datasource.js b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/es5-datasource.js
index 7fc7297c3..955466c83 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/es5-datasource.js
@@ -73,210 +73,4 @@ var data = [
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
- }];
-
-var employeeData = [{
- 'EmployeeID': 1,
- 'LastName': 'Davolio',
- 'FirstName': 'Nancy',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-664743600000),
- 'HireDate': new Date(704692800000),
- 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98122',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9857',
- 'Extension': '5467',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
- \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 2,
- 'LastName': 'Fuller',
- 'FirstName': 'Andrew',
- 'Title': 'Vice President, Sales',
- 'TitleOfCourtesy': 'Dr.',
- 'BirthDate': new Date(-563828400000),
- 'HireDate': new Date(713764800000),
- 'Address': '908 W. Capital Way',
- 'City': 'Tacoma',
- 'Region': 'WA',
- 'PostalCode': '98401',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9482',
- 'Extension': '3457',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
- Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
- was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
- Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
- 'ReportsTo': 0,
- 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
-},
-{
- 'EmployeeID': 3,
- 'LastName': 'Leverling',
- 'FirstName': 'Janet',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-200088000000),
- 'HireDate': new Date(702104400000),
- 'Address': '722 Moss Bay Blvd.',
- 'City': 'Kirkland',
- 'Region': 'WA',
- 'PostalCode': '98033',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-3412',
- 'Extension': '3355',
- 'Photo': { 'Length': 21722 },
-
- 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
- She has also completed a certificate program in food retailing management.\
- Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
-},
-{
- 'EmployeeID': 4,
- 'LastName': 'Peacock',
- 'FirstName': 'Margaret',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mrs.',
- 'BirthDate': new Date(-1018814400000),
- 'HireDate': new Date(736401600000),
- 'Address': '4110 Old Redmond Rd.',
- 'City': 'Redmond',
- 'Region': 'WA',
- 'PostalCode': '98052',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-8122',
- 'Extension': '5176',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
- Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
-},
-{
- 'EmployeeID': 5,
- 'LastName': 'Buchanan',
- 'FirstName': 'Steven',
- 'Title': 'Sales Manager',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-468010800000),
- 'HireDate': new Date(750830400000),
- 'Address': '14 Garrett Hill',
- 'City': 'London',
- 'Region': null,
- 'PostalCode':
- 'SW1 8JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4848',
- 'Extension': '3453',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
- a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
- post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
- Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
-},
-{
- 'EmployeeID': 6,
- 'LastName': 'Suyama',
- 'FirstName': 'Michael',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-205185600000),
- 'HireDate': new Date(750830400000),
- 'Address': 'Coventry House\r\nMiner Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'EC2 7JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-7773',
- 'Extension': '428',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
- (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
- He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 7,
- 'LastName': 'King',
- 'FirstName': 'Robert',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-302731200000),
- 'HireDate': new Date(757486800000),
- 'Address': 'Edgeham Hollow\r\nWinchester Way',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'RG1 9SP',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-5598',
- 'Extension': '465',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
- University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
- he was transferred to the London office in March 1993.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 8,
- 'LastName': 'Callahan',
- 'FirstName': 'Laura',
- 'Title': 'Inside Sales Coordinator',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-377982000000),
- 'HireDate': new Date(762843600000),
- 'Address': '4726 - 11th Ave. N.E.',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98105',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-1189',
- 'Extension': '2344',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
- French. She reads and writes French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 9,
- 'LastName': 'Dodsworth',
- 'FirstName': 'Anne',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-123966000000),
- 'HireDate': new Date(784875600000),
- 'Address': '7 Houndstooth Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'WG2 7LT',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4444',
- 'Extension': '452',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-}];
\ No newline at end of file
+ }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/index.js b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/index.js
index e52a06b7c..e02e7eeb5 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/index.js
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/index.js
@@ -1,14 +1,16 @@
ej.grids.Grid.Inject(ej.grids.RowDD);
var grid = new ej.grids.Grid({
- dataSource: data.slice(0, 10),
+ dataSource: data,
allowRowDragAndDrop: true,
selectionSettings: { type: 'Multiple'},
+ height: 400,
columns: [
- { field: 'OrderID', headerText: 'Order ID',isPrimaryKey: true, textAlign: 'Right', width: 120 },
- { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
- { field: 'ShipCity', headerText: 'Ship City', width: 150 },
- { field: 'ShipName', headerText: 'Ship Name', width: 150 }
+ { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
+ { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
+ { field: 'OrderDate', headerText: 'Order Date', width: 100, format:'yMd', textAlign: 'Right' },
+ { field: 'Freight', headerText: 'Freight', width: 120, format:'C2', textAlign: 'Right' },
+ { field: 'ShipCity', headerText: 'Ship City', width: 130 },
+ { field: 'ShipCountry', headerText: 'Ship Country', width: 130 }
]
});
-grid.appendTo('#Grid');
-
+grid.appendTo('#Grid');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/index.ts b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/index.ts
index 2fbf7043f..3723825b8 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/index.ts
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/index.ts
@@ -1,5 +1,3 @@
-
-
import { Grid, RowDD, Selection } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
@@ -8,16 +6,15 @@ Grid.Inject(RowDD, Selection);
let grid: Grid = new Grid({
dataSource: data,
allowRowDragAndDrop: true,
- heigth:300,
selectionSettings: { type: 'Multiple' },
+ height: 400,
columns: [
- { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', width: 120 },
- { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
- { field: 'ShipCity', headerText: 'Ship City', width: 150 },
- { field: 'ShipName', headerText: 'Ship Name', width: 150 }
+ { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right'},
+ { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
+ { field: 'OrderDate', headerText: 'Order Date', width: 100, format:'yMd', textAlign: 'Right' },
+ { field: 'Freight', headerText: 'Freight', width: 120, format:'C2', textAlign: 'Right' },
+ { field: 'ShipCity', headerText: 'Ship City', width: 130 },
+ { field: 'ShipCountry', headerText: 'Ship Country', width: 130 }
]
});
-grid.appendTo('#Grid');
-
-
-
+grid.appendTo('#Grid');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/js/index.html b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/js/index.html
index d333dae27..d9433d3c3 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/js/index.html
@@ -1,43 +1,35 @@
-
+
+
EJ2 Grid
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/systemjs.config.js b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/systemjs.config.js
index 05bf940b7..e32347149 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/systemjs.config.js
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/systemjs.config.js
@@ -10,7 +10,7 @@ System.config({
}
},
paths: {
- "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/23.2.4/"
},
map: {
main: "index.ts",
@@ -33,7 +33,6 @@ System.config({
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
}
});
-
System.import('index.ts').catch(console.error.bind(console)).then(function () {
document.getElementById('loader').style.display = "none";
document.getElementById('container').style.visibility = "visible";
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/ts/index.html b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/ts/index.html
index 293a3035e..4f9b6d6df 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs1/ts/index.html
@@ -1,6 +1,5 @@
-
EJ2 Grid
@@ -8,21 +7,16 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/datasource.ts b/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/datasource.ts
index c7b6b3d0c..afaf65670 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/datasource.ts
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/datasource.ts
@@ -73,210 +73,4 @@ export let data: Object[] = [
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
- }];
-
-export let employeeData: Object[] = [{
- 'EmployeeID': 1,
- 'LastName': 'Davolio',
- 'FirstName': 'Nancy',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-664743600000),
- 'HireDate': new Date(704692800000),
- 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98122',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9857',
- 'Extension': '5467',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
- \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 2,
- 'LastName': 'Fuller',
- 'FirstName': 'Andrew',
- 'Title': 'Vice President, Sales',
- 'TitleOfCourtesy': 'Dr.',
- 'BirthDate': new Date(-563828400000),
- 'HireDate': new Date(713764800000),
- 'Address': '908 W. Capital Way',
- 'City': 'Tacoma',
- 'Region': 'WA',
- 'PostalCode': '98401',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9482',
- 'Extension': '3457',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
- Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
- was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
- Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
- 'ReportsTo': 0,
- 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
-},
-{
- 'EmployeeID': 3,
- 'LastName': 'Leverling',
- 'FirstName': 'Janet',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-200088000000),
- 'HireDate': new Date(702104400000),
- 'Address': '722 Moss Bay Blvd.',
- 'City': 'Kirkland',
- 'Region': 'WA',
- 'PostalCode': '98033',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-3412',
- 'Extension': '3355',
- 'Photo': { 'Length': 21722 },
-
- 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
- She has also completed a certificate program in food retailing management.\
- Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
-},
-{
- 'EmployeeID': 4,
- 'LastName': 'Peacock',
- 'FirstName': 'Margaret',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mrs.',
- 'BirthDate': new Date(-1018814400000),
- 'HireDate': new Date(736401600000),
- 'Address': '4110 Old Redmond Rd.',
- 'City': 'Redmond',
- 'Region': 'WA',
- 'PostalCode': '98052',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-8122',
- 'Extension': '5176',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
- Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
-},
-{
- 'EmployeeID': 5,
- 'LastName': 'Buchanan',
- 'FirstName': 'Steven',
- 'Title': 'Sales Manager',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-468010800000),
- 'HireDate': new Date(750830400000),
- 'Address': '14 Garrett Hill',
- 'City': 'London',
- 'Region': null,
- 'PostalCode':
- 'SW1 8JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4848',
- 'Extension': '3453',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
- a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
- post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
- Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
-},
-{
- 'EmployeeID': 6,
- 'LastName': 'Suyama',
- 'FirstName': 'Michael',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-205185600000),
- 'HireDate': new Date(750830400000),
- 'Address': 'Coventry House\r\nMiner Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'EC2 7JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-7773',
- 'Extension': '428',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
- (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
- He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 7,
- 'LastName': 'King',
- 'FirstName': 'Robert',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-302731200000),
- 'HireDate': new Date(757486800000),
- 'Address': 'Edgeham Hollow\r\nWinchester Way',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'RG1 9SP',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-5598',
- 'Extension': '465',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
- University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
- he was transferred to the London office in March 1993.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 8,
- 'LastName': 'Callahan',
- 'FirstName': 'Laura',
- 'Title': 'Inside Sales Coordinator',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-377982000000),
- 'HireDate': new Date(762843600000),
- 'Address': '4726 - 11th Ave. N.E.',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98105',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-1189',
- 'Extension': '2344',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
- French. She reads and writes French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 9,
- 'LastName': 'Dodsworth',
- 'FirstName': 'Anne',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-123966000000),
- 'HireDate': new Date(784875600000),
- 'Address': '7 Houndstooth Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'WG2 7LT',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4444',
- 'Extension': '452',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-}];
\ No newline at end of file
+ }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/es5-datasource.js b/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/es5-datasource.js
index 7fc7297c3..955466c83 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/es5-datasource.js
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/es5-datasource.js
@@ -73,210 +73,4 @@ var data = [
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
- }];
-
-var employeeData = [{
- 'EmployeeID': 1,
- 'LastName': 'Davolio',
- 'FirstName': 'Nancy',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-664743600000),
- 'HireDate': new Date(704692800000),
- 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98122',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9857',
- 'Extension': '5467',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
- \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 2,
- 'LastName': 'Fuller',
- 'FirstName': 'Andrew',
- 'Title': 'Vice President, Sales',
- 'TitleOfCourtesy': 'Dr.',
- 'BirthDate': new Date(-563828400000),
- 'HireDate': new Date(713764800000),
- 'Address': '908 W. Capital Way',
- 'City': 'Tacoma',
- 'Region': 'WA',
- 'PostalCode': '98401',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-9482',
- 'Extension': '3457',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
- Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
- was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
- Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
- 'ReportsTo': 0,
- 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
-},
-{
- 'EmployeeID': 3,
- 'LastName': 'Leverling',
- 'FirstName': 'Janet',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-200088000000),
- 'HireDate': new Date(702104400000),
- 'Address': '722 Moss Bay Blvd.',
- 'City': 'Kirkland',
- 'Region': 'WA',
- 'PostalCode': '98033',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-3412',
- 'Extension': '3355',
- 'Photo': { 'Length': 21722 },
-
- 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
- She has also completed a certificate program in food retailing management.\
- Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
-},
-{
- 'EmployeeID': 4,
- 'LastName': 'Peacock',
- 'FirstName': 'Margaret',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mrs.',
- 'BirthDate': new Date(-1018814400000),
- 'HireDate': new Date(736401600000),
- 'Address': '4110 Old Redmond Rd.',
- 'City': 'Redmond',
- 'Region': 'WA',
- 'PostalCode': '98052',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-8122',
- 'Extension': '5176',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
- Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
-},
-{
- 'EmployeeID': 5,
- 'LastName': 'Buchanan',
- 'FirstName': 'Steven',
- 'Title': 'Sales Manager',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-468010800000),
- 'HireDate': new Date(750830400000),
- 'Address': '14 Garrett Hill',
- 'City': 'London',
- 'Region': null,
- 'PostalCode':
- 'SW1 8JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4848',
- 'Extension': '3453',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
- a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
- post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
- Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
-},
-{
- 'EmployeeID': 6,
- 'LastName': 'Suyama',
- 'FirstName': 'Michael',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-205185600000),
- 'HireDate': new Date(750830400000),
- 'Address': 'Coventry House\r\nMiner Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'EC2 7JR',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-7773',
- 'Extension': '428',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
- (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
- He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 7,
- 'LastName': 'King',
- 'FirstName': 'Robert',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Mr.',
- 'BirthDate': new Date(-302731200000),
- 'HireDate': new Date(757486800000),
- 'Address': 'Edgeham Hollow\r\nWinchester Way',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'RG1 9SP',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-5598',
- 'Extension': '465',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
- University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
- he was transferred to the London office in March 1993.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 8,
- 'LastName': 'Callahan',
- 'FirstName': 'Laura',
- 'Title': 'Inside Sales Coordinator',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-377982000000),
- 'HireDate': new Date(762843600000),
- 'Address': '4726 - 11th Ave. N.E.',
- 'City': 'Seattle',
- 'Region': 'WA',
- 'PostalCode': '98105',
- 'Country': 'USA',
- 'HomePhone': '(206) 555-1189',
- 'Extension': '2344',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
- French. She reads and writes French.',
- 'ReportsTo': 2,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-},
-{
- 'EmployeeID': 9,
- 'LastName': 'Dodsworth',
- 'FirstName': 'Anne',
- 'Title': 'Sales Representative',
- 'TitleOfCourtesy': 'Ms.',
- 'BirthDate': new Date(-123966000000),
- 'HireDate': new Date(784875600000),
- 'Address': '7 Houndstooth Rd.',
- 'City': 'London',
- 'Region': null,
- 'PostalCode': 'WG2 7LT',
- 'Country': 'UK',
- 'HomePhone': '(71) 555-4444',
- 'Extension': '452',
- 'Photo': { 'Length': 21626 },
-
- 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
- 'ReportsTo': 5,
- 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
-}];
\ No newline at end of file
+ }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/index.js b/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/index.js
index 3a7a78f7a..a1299d138 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/index.js
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/index.js
@@ -1,41 +1,24 @@
+ej.grids.Grid.Inject(ej.grids.RowDD);
var grid = new ej.grids.Grid({
dataSource: data,
allowRowDragAndDrop: true,
- allowPaging: true,
rowDropSettings: { targetID: 'Grid' },
selectionSettings: { type: 'Multiple' },
- pageSettings: { pageSize: 10 },
- height: 300,
columns: [
-
- {
- field: 'OrderID',headerText: 'Order ID',isPrimaryKey: true,width: 80,textAlign: 'Right',
- },
- {
- field: 'CustomerID',headerText: 'Customer Name',width: 130,textAlign: 'Left',
- },
- {
- field: 'OrderDate',headerText: 'Order Date',width: 120,format: 'yMd',textAlign: 'Right',
- },
- {
- field: 'Freight',headerText: 'Freight',width: 130,format: 'C2',textAlign: 'Right',
- },
- {
- field: 'ShipCity',headerText: 'Ship City',width: 130,textAlign: 'Left',
- },
- {
- field: 'ShipCountry', headerText: 'Ship Country', width: 150
- },
+ { field: 'OrderID',headerText: 'Order ID', width: 120,textAlign: 'Right' },
+ { field: 'CustomerID',headerText: 'Customer Name',width: 130 },
+ { field: 'OrderDate',headerText: 'Order Date',width: 120,format: 'yMd',textAlign: 'Right' },
+ { field: 'Freight',headerText: 'Freight',width: 120,format: 'C2',textAlign: 'Right' },
+ { field: 'ShipCity',headerText: 'Ship City',width: 130 },
+ { field: 'ShipCountry', headerText: 'Ship Country', width: 130 },
],
rowDrop: (args) => {
args.cancel = true;
var value = [];
- for (var r = 0; r < args.rows.length; r++) {
- value.push(args.fromIndex + r);
+ for (var index = 0; index < args.rows.length; index++) {
+ value.push(args.fromIndex + index);
}
grid.reorderRows(value, args.dropIndex);
},
});
-grid.appendTo('#Grid');
-
-
+grid.appendTo('#Grid');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/index.ts b/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/index.ts
index aad1d1103..dc93e083f 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/index.ts
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/index.ts
@@ -1,48 +1,28 @@
-
-
-import { Grid, Page, RowDD, Selection } from '@syncfusion/ej2-grids';
+import { Grid, RowDD, Selection, RowDragEventArgs } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
-Grid.Inject(RowDD,Page, Selection);
+Grid.Inject(RowDD, Selection);
let grid: Grid = new Grid({
dataSource: data,
allowRowDragAndDrop: true,
- allowPaging: true,
rowDropSettings: { targetID: 'Grid' },
selectionSettings: { type: 'Multiple' },
- pageSettings: { pageSize: 10 },
- height: 300,
columns: [
- {
- field: 'OrderID',headerText: 'Order ID',isPrimaryKey: true,width: 80,textAlign: 'Center',
- },
- {
- field: 'CustomerID',headerText: 'Customer Name',width: 130,textAlign: 'Center',
- },
- {
- field: 'OrderDate',headerText: 'Order Date',width: 120,format: 'yMd',textAlign: 'Center',
- },
- {
- field: 'Freight',headerText: 'Freight',width: 130,format: 'C2',textAlign: 'Center',
- },
- {
- field: 'ShipCity',headerText: 'Ship City',width: 130,textAlign: 'Center',
- },
- {
- field: 'ShipCountry', headerText: 'Ship Country', width: 150
- },
+ { field: 'OrderID',headerText: 'Order ID', width: 120,textAlign: 'Right' },
+ { field: 'CustomerID',headerText: 'Customer Name',width: 130 },
+ { field: 'OrderDate',headerText: 'Order Date',width: 120,format: 'yMd',textAlign: 'Right' },
+ { field: 'Freight',headerText: 'Freight',width: 120,format: 'C2',textAlign: 'Right' },
+ { field: 'ShipCity',headerText: 'Ship City',width: 130 },
+ { field: 'ShipCountry', headerText: 'Ship Country', width: 130 },
],
- rowDrop: function(args:any){
+ rowDrop: function(args:RowDragEventArgs){
args.cancel = true;
let value = [];
- for (let r = 0; r < args.rows.length; r++) {
- value.push(args.fromIndex + r);
+ for (let index = 0; index < args.rows.length; index++) {
+ value.push(args.fromIndex + index);
}
grid.reorderRows(value, args.dropIndex);
}
});
-grid.appendTo('#Grid');
-
-
-
+grid.appendTo('#Grid');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/js/index.html b/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/js/index.html
index d333dae27..c6599dc16 100644
--- a/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/js/index.html
+++ b/ej2-javascript/code-snippet/grid/draganddrop-single-cs2/js/index.html
@@ -5,39 +5,30 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/data/adaptors.md b/ej2-javascript/data/adaptors.md
index 64e59f5b1..7c8e49b39 100644
--- a/ej2-javascript/data/adaptors.md
+++ b/ej2-javascript/data/adaptors.md
@@ -80,9 +80,9 @@ The sample response object should be as follows,
}
```
-## OData adaptor
+## ODataV4 adaptor
-[OData](http://www.odata.org/documentation/odata-version-3-0/) is standardized protocol for creating and consuming data. You can retrieve data from OData service using **DataManager**. The `ODataAdaptor` helps you to interact with OData service. You can refer to the following code example of remote Data binding using OData service.
+[OData](http://www.odata.org/documentation/odata-version-3-0/) is standardized protocol for creating and consuming data. You can retrieve data from OData service using **DataManager**. The `ODataV4Adaptor` helps you to interact with OData service. You can refer to the following code example of remote Data binding using OData service.
{% if page.publishingplatform == "typescript" %}
@@ -487,7 +487,7 @@ To create and use custom adaptor, please refer to the below steps.
* Override the desired method to achieve your requirement.
* Assign the custom adaptor to the `adaptor` property of **DataManager**.
-For the sake of demonstrating custom adaptor approach, we are going to see how to add serial number for the records by overriding the built-in response processing using `processResponse` method of the `ODataAdaptor`.
+For the sake of demonstrating custom adaptor approach, we are going to see how to add serial number for the records by overriding the built-in response processing using `processResponse` method of the `ODataV4Adaptor`.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/data/how-to.md b/ej2-javascript/data/how-to.md
index 025f6a969..43787de4b 100644
--- a/ej2-javascript/data/how-to.md
+++ b/ej2-javascript/data/how-to.md
@@ -80,11 +80,11 @@ You can use the [`addParams`](../api/data/query/#addparams) method of [`Query`](
You can add custom headers to the request made by **DataManager** using the `headers` property.
```ts
-import { DataManager, Query, ReturnOption, ODataAdaptor } from '@syncfusion/ej2-data';
+import { DataManager, Query, ReturnOption, ODataV4Adaptor } from '@syncfusion/ej2-data';
-const SERVICE_URI: string = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';
+const SERVICE_URI: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
-new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor, headers:[{ 'syncfusion': 'true' }] })
+new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor, headers:[{ 'syncfusion': 'true' }] })
.executeQuery(new Query())
.then((e: ReturnOption) => {
//get result from e.result
diff --git a/ej2-javascript/grid/row/detail-template.md b/ej2-javascript/grid/row/detail-template.md
index 52b7c96a3..aca753123 100644
--- a/ej2-javascript/grid/row/detail-template.md
+++ b/ej2-javascript/grid/row/detail-template.md
@@ -11,9 +11,9 @@ domainurl: ##DomainURL##
# Detail template in ##Platform_Name## Grid control
-The detail template provides additional information about a particular row by expanding or collapsing detail content. The [`detailTemplate`](../../api/grid/#detailtemplate) property accepts either the [template string](../../common/template-engine) or HTML element ID.
+The detail template in the Grid control allows you to display additional information about a specific row in the grid by expanding or collapsing detail content. This feature is useful when you need to show additional data or custom content that is specific to each row in the grid. You can use the [detailTemplate](../../api/grid/#detailtemplate) property to define an HTML template for the detail row. This template can include any HTML element or ##Platform_Name## control that you want to display as detail content.
-To use detail template, inject the [`DetailRow`](../../api/grid/detailRow)) module in the grid.
+Here's an example of using the `detailTemplate` property in the grid control:
{% if page.publishingplatform == "typescript" %}
@@ -42,11 +42,15 @@ To use detail template, inject the [`DetailRow`](../../api/grid/detailRow)) modu
{% previewsample "page.domainurl/code-snippet/grid/detail-template-cs1" %}
{% endif %}
-## Rendering custom component
+## Rendering custom control
-To render the custom component inside the detail row, define the template in the [`detailTemplate`](../../api/grid/#detailtemplate) and render the component in the [`detailDataBound`](../../api/grid/#detaildatabound-emittypedetaildataboundeventargs) event.
+The Grid control provides a powerful feature that allows you to render custom controls inside the detail row. This feature is helpful when you need to add additional information or functionality for a specific row in the grid.
-For example, to render grid inside the detail row, place an HTML div element as the [`detailTemplate`](../../api/grid/#detailtemplate) and render the DIV element as grid component in the [`detailDataBound`](../../api/grid/#detaildatabound-emittypedetaildataboundeventargs) event.
+To render a custom control inside the detail row, you need to define a template using the [detailTemplate](../../api/grid/#detailtemplate) property and handle the [detailDataBound](,../../api/grid/#detaildatabound) event. This template can include any HTML element or ##Platform_Name## control that you want to display as the detail content.
+
+The `detailDataBound` event is an event that is triggered after a detail row is bound to data. This event provides an object of type [DetailDataBoundEventArgs](../../api/grid/#detaildataboundeventargs) as a parameter.
+
+For example, to render grid inside the detail row, place an HTML div element as the `detailTemplate` and render the DIV element as grid control in the `detailDataBound` event.
{% if page.publishingplatform == "typescript" %}
@@ -77,7 +81,10 @@ For example, to render grid inside the detail row, place an HTML div element as
## Expand by external button
-By default, detail rows render in collapsed state. You can expand a detail row by invoking the [`expand`](../../api/grid/detailRow/#expand) method using the external button.
+The Grid provides a feature that allows users to expand the detail row of a grid using an external button. By default, detail rows render in a collapsed state, but this feature enables users to view additional details associated with a particular row.
+
+To achieve expanding the detail row of a grid using an external button, you need to invoke the [expand](../../api/grid/detailRow/#expand) method provided by the **detailRowModule** object of the Syncfusion Grid library. This method will expand the detail row of a specific grid row.
+Here is an example of how to use the `expand` method to expand a detail row:
{% if page.publishingplatform == "typescript" %}
@@ -106,10 +113,52 @@ By default, detail rows render in collapsed state. You can expand a detail row b
{% previewsample "page.domainurl/code-snippet/grid/detail-template-method-cs1" %}
{% endif %}
-> * You can expand all the rows by using [`expandAll`](../../api/grid/detailRow/#expandall) method.
-> * If you want to expand all the rows at initial Grid rendering, then use [`expandAll`](../../api/grid/detailRow/#expandall) method in [`dataBound`](../../api/grid/#databound) event of the Grid.
+## Customize detail template icon
+
+The detail template icon in the Syncfusion Grid is used to expand or collapse the detail content of a row. By default, the icon represents a right arrow for the collapsed state and a down arrow for the expanded state. If you want to customize this icon, you can achieve it by overriding the following CSS styles:
+
+```css
+
+.e-grid .e-icon-grightarrow::before {
+ content: '\e300';
+}
+
+.e-grid .e-icon-gdownarrow::before {
+ content: '\e304';
+}
+
+```
+
+Here is an example of how to customize the detail template icon:
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/grid/detail-template-icon-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/grid/detail-template-icon-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/detail-template-icon-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/grid/detail-template-icon-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/grid/detail-template-icon-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/detail-template-icon-cs1" %}
+{% endif %}
-## Limitations for detail template
+## Limitations
Detail template is not supported with the following features:
@@ -123,4 +172,3 @@ Detail template is not supported with the following features:
* Column spanning
* Lazy load grouping
* State persistence
-* Hierarchy Grid
\ No newline at end of file
diff --git a/ej2-javascript/grid/row/row-drag-and-drop.md b/ej2-javascript/grid/row/row-drag-and-drop.md
index 2deaa2b09..c363f5841 100644
--- a/ej2-javascript/grid/row/row-drag-and-drop.md
+++ b/ej2-javascript/grid/row/row-drag-and-drop.md
@@ -11,77 +11,86 @@ domainurl: ##DomainURL##
# Row drag and drop in ##Platform_Name## Grid control
-The grid row drag and drop allows you to drag and drop grid rows to another grid or custom component. To enable row drag and drop, set the [`allowRowDragAndDrop`](../../api/grid/#allowrowdraganddrop) to true. The target component where the grid rows are to be dropped can be set by using the [`targetID`](../../api/grid/rowDropSettings/#targetid).
+The Syncfusion ##Platform_Name## Grid control provides built-in support for row drag and drop functionality. This feature allows you to easily rearrange rows within the grid by dragging and dropping them to new positions. Additionally, you can also drag and drop rows from one grid to another grid, as well as drag and drop rows to custom controls.
-To use row drag and drop, inject the **RowDD** module in the grid.
+To use the row drag and drop feature in Grid control, you need to inject the **RowDD** module in the grid. The **RowDD** is responsible for handling the row drag and drop functionality in the grid control. Once you have injected the **RowDD**, you can then use the [allowRowDragAndDrop](../../api/grid/#allowrowdraganddrop) and [targetID](../../api/grid/rowDropSettings/#targetid) properties to enable and configure the row drag and drop feature in the Grid.
+
+## Drag and drop within grid
+
+The drag and drop feature allows you to rearrange rows within the grid by dragging them using a drag icon. This feature can be enabled by setting the [allowRowDragAndDrop](../../api/grid/#allowrowdraganddrop) property to **true**. This property is a boolean value that determines whether row drag and drop is enabled or not. By default, it is set to **false**, which means that row drag and drop is disabled.
+
+Here's an example of how to enable drag and drop within the Grid:
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/grid/draganddrop-cs1/index.ts %}
+{% include code-snippet/grid/draganddrop-single-cs1/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/grid/draganddrop-cs1/index.html %}
+{% include code-snippet/grid/draganddrop-single-cs1/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/draganddrop-cs1" %}
+{% previewsample "page.domainurl/code-snippet/grid/draganddrop-single-cs1" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/grid/draganddrop-cs1/index.js %}
+{% include code-snippet/grid/draganddrop-single-cs1/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/grid/draganddrop-cs1/index.html %}
+{% include code-snippet/grid/draganddrop-single-cs1/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/draganddrop-cs1" %}
+{% previewsample "page.domainurl/code-snippet/grid/draganddrop-single-cs1" %}
{% endif %}
-> * Selection feature must be enabled for row drag and drop.
-> * Multiple rows can be selected by clicking and dragging inside the grid.
-For multiple row selection, the [`type`](../../api/grid/selectionSettings/#type) property must be set to **multiple**.
+## Drag and drop to grid
+
+The grid row drag and drop allows you to drag grid rows and drop to another grid. This feature can be enabled by setting the [allowRowDragAndDrop](../../api/grid/#allowrowdraganddrop) property to **true** in the Grid control. This property specifies whether to enable or disable the row drag and drop feature in the Grid. By default, this property is set to **false**, which means that row drag and drop functionality is not enabled.
-## Drag and drop within Grid
+To specify the target control where the grid rows should be dropped, use the [targetID](../../api/grid/rowDropSettings/#targetid) property of the [rowDropSettings](../../api/grid/rowDropSettings/) object. The `targetID` property takes the ID of the target control as its value.
-The grid row drag and drop allows you to drag and drop grid rows on the same grid using drag icon. To enable row drag and drop, set the [`allowRowDragAndDrop`](../../api/grid/#allowrowdraganddrop) to true.
+Here's an example code snippet that demonstrates how to enable Row drag and drop another Grid control:
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/grid/draganddrop-single-cs1/index.ts %}
+{% include code-snippet/grid/draganddrop-cs1/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/grid/draganddrop-single-cs1/index.html %}
+{% include code-snippet/grid/draganddrop-cs1/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/draganddrop-single-cs1" %}
+{% previewsample "page.domainurl/code-snippet/grid/draganddrop-cs1" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/grid/draganddrop-single-cs1/index.js %}
+{% include code-snippet/grid/draganddrop-cs1/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/grid/draganddrop-single-cs1/index.html %}
+{% include code-snippet/grid/draganddrop-cs1/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/draganddrop-single-cs1" %}
+{% previewsample "page.domainurl/code-snippet/grid/draganddrop-cs1" %}
{% endif %}
-## Drag and drop to custom component
+> * The row drag and drop feature is not supported in virtual scrolling and frozen rows and columns mode.
+> * In order to use row drag and drop, you need to inject the **RowDD** module in the grid.
+
+## Drag and drop to custom control
-You can drag and drop the grid rows to any custom component. To enable row drag and drop, set the [`allowRowDragAndDrop`](../../api/grid/#allowrowdraganddrop) as true and define the custom component id in [`targetID`](../../api/grid/rowDropSettings/#targetid) property of rowDropSettings.
+The Grid provides the feature to drag and drop grid rows to any custom control. This feature allows you to easily move rows from one control to another without having to manually copy and paste data. To enable row drag and drop, you need to set the [allowRowDragAndDrop](../../api/grid/#allowrowdraganddrop) property to **true** and defining the custom control ID in the [targetID](../../api/grid/rowDropSettings/#targetid) property of the `rowDropSettings` object. The ID provided in `targetID` should correspond to the ID of the target control where the rows are to be dropped.
-In the below example, the selected grid row is dragged and dropped in to the TreeView component by using [`rowDrop`](../../api/grid/#rowdrop) event. Once the row is dropped into the TreeView component, we have removed the corresponding grid row from grid and its data inserted in custom component. To know more information about the drag and drop events check [`here`](https://ej2.syncfusion.com/documentation/grid/row/?no-cache=1#drag-and-drop-events).
+In the below example, the selected grid row is dragged and dropped in to the TreeGrid control by using [rowDrop](../../api/grid/#rowdrop) event. Once the row is dropped into the TreeGrid control, we have removed the corresponding grid row from grid and its data inserted in custom control.
{% if page.publishingplatform == "typescript" %}
@@ -110,95 +119,91 @@ In the below example, the selected grid row is dragged and dropped in to the Tre
{% previewsample "page.domainurl/code-snippet/grid/draganddrop-custom-cs1" %}
{% endif %}
-## Drag and drop with sorting and filtering
+> * The `rowDrop` event is fired when a row is dropped onto a custom control, regardless of whether the drop is successful or not. You can use the `args.cancel` property to prevent the default action.
+
+## Drag and drop rows without drag icon
+
+By default, when performing a drag and drop operation in the Syncfusion Grid, drag icons are displayed. However, in some cases, you may want to hide these drag icons. This can be achieved by setting the [targetID](../../api/grid/rowDropSettings/#targetid) property of the [rowDropSettings](../../api/grid/rowDropSettings/) object to the current Grid's ID.
-In the following demo, you can achieve the grid row drag and drop support with filtering and sorting using [`rowDrop`](../../api/grid/rowDragEventArgs) event.
+By setting the `targetID`, the Grid will render without a helper icon for row dragging. You can then customize the drag and drop action by binding to the [rowDrop](../../api/grid/#rowdrop) event of the Grid. In the `rowDrop` event, you can prevent the default action by setting `args.cancel` to **true**, and reorder the rows using the [reorderRows](../../api/grid/#reorderrows) method of the Grid.
+
+Here's an example of how to hide the drag and drop icon in the Syncfusion Grid:
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/grid/draganddrop-single-filter-sort-cs1/index.ts %}
+{% include code-snippet/grid/draganddrop-single-cs2/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/grid/draganddrop-single-filter-sort-cs1/index.html %}
+{% include code-snippet/grid/draganddrop-single-cs2/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/draganddrop-single-filter-sort-cs1" %}
+{% previewsample "page.domainurl/code-snippet/grid/draganddrop-single-cs2" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/grid/draganddrop-single-filter-sort-cs1/index.js %}
+{% include code-snippet/grid/draganddrop-single-cs2/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/grid/draganddrop-single-filter-sort-cs1/index.html %}
+{% include code-snippet/grid/draganddrop-single-cs2/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/draganddrop-single-filter-sort-cs1" %}
+{% previewsample "page.domainurl/code-snippet/grid/draganddrop-single-cs2" %}
{% endif %}
-> * You can enable/disable the drag icon by using **disableRowDD** method which is achieved in the [`actionComplete`](../../api/grid/actionEventArgs) event.
-
-```ts
- actionComplete: function (args) {
- if (this.filterSettings.columns.length) {
- this.disableRowDD(true);
- }
- else {
- this.disableRowDD(false);
- }
- }
-
-```
+> * The selection feature must be enabled in the Grid to allow users to select rows before performing the drag and drop operation.
+> * Multiple rows can be selected by clicking and dragging inside the grid. For multiple row selection, the [type](../../api/grid/selectionSettings/#type) property must be set to **Multiple**.
## Drag and drop events
-The following events are triggered while drag and drop the grid rows.
+The Grid control provides a set of events that are triggered during drag and drop operations on grid rows. These events allow you to customize the drag element, track the progress of the dragging operation, and perform actions when a row is dropped on a target element. The following events are available:
-[`rowDragStartHelper`](../../api/grid/#rowdragstarthelper) - Triggers when click the drag icon or grid row and this event is used to customize the drag element based on user criteria.
-[`rowDragStart`](../../api/grid/#rowdragstart) -Triggers when starts to drag the grid row.
-[`rowDrag`](../../api/grid/#rowdrag) - Triggers while dragging the grid row.
-[`rowDrop`](../../api/grid/#rowdrop) - Triggers when a drag element is dropped on the target element.
+1. [rowDragStartHelper](../../api/grid/#rowdragstarthelper): This event is triggered when a click occurs on the drag icon or a grid row. It allows you to customize the drag element based on specific criteria.
-## Drag and drop rows without drag icon
+2. [rowDragStart](../../api/grid/#rowdragstart): This event is triggered when the dragging of a grid row starts.
-You can hide the drag and drop icon when performing a drag and drop operation within the grid. This can be achieved by setting the [targetID](../../api/grid/rowDropSettings/#targetid) of the [rowDropSettings](../../api/grid/rowDropSettings/) as the current Grid’s ID.
+3. [rowDrag](../../api/grid/#rowdrag): This event is triggered continuously while the grid row is being dragged.
-By setting the [targetID](../../api/grid/rowDropSettings/#targetid), the Grid will render without a helper icon (for row drag). Now you can customize the drag and drop action. To control the drop action, you can bind the [rowDrop](../../api/grid/#rowdrop) event of the Grid. In the [rowDrop](../../api/grid/#rowdrop) event, you can prevent the default action(args.cancel as true) and reorder the rows using [reorderRows](../../api/grid/#reorderrows) method of the Grid.
+4. [rowDrop](../../api/grid/#rowdrop): This event is triggered when a drag element is dropped onto a target element.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/grid/draganddrop-single-cs2/index.ts %}
+{% include code-snippet/grid/draganddrop-event-cs1/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/grid/draganddrop-single-cs2/index.html %}
+{% include code-snippet/grid/draganddrop-event-cs1/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/draganddrop-single-cs2" %}
+{% previewsample "page.domainurl/code-snippet/grid/draganddrop-event-cs1" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/grid/draganddrop-single-cs2/index.js %}
+{% include code-snippet/grid/draganddrop-event-cs1/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/grid/draganddrop-single-cs2/index.html %}
+{% include code-snippet/grid/draganddrop-event-cs1/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/draganddrop-single-cs2" %}
+{% previewsample "page.domainurl/code-snippet/grid/draganddrop-event-cs1" %}
{% endif %}
## Limitations
-* Multiple rows can be drag and drop in the row selections basis.
* Single row is able to drag and drop in same grid without enable the row selection.
-* Row drag and drop feature is not having built in support with sorting, filtering, hierarchy grid and grouping features of grid. However we can achieve sorting and filtering behavior by sample side customization which will be explained in the previous topic.
\ No newline at end of file
+* Row drag and drop feature is not having built in support with row template, detail template, hierarchy grid and grouping features of grid.
+
+## See also
+
+[Sorting data in the Syncfusion Grid](../sorting.md)
+[Filtering data in the Syncfusion Grid](../filtering/filtering.md)
diff --git a/ej2-javascript/grid/row/row-spanning.md b/ej2-javascript/grid/row/row-spanning.md
index ae6c49552..eab7db24f 100644
--- a/ej2-javascript/grid/row/row-spanning.md
+++ b/ej2-javascript/grid/row/row-spanning.md
@@ -11,11 +11,13 @@ domainurl: ##DomainURL##
# Row spanning in ##Platform_Name## Grid control
-The grid has option to span row cells. To achieve this, You need to define the [`rowSpan`](../../api/grid/queryCellInfoEventArgs/#rowspan) attribute to span cells in the [`QueryCellInfo`](../../api/grid/queryCellInfoEventArgs) event.
+The grid provides an option to span row cells, allowing you to merge two or more cells in a row into a single cell. This feature can be useful in scenarios where you want to display information that spans across multiple rows, but want to avoid repeating the same information in each row.
-In the following demo, **Davolio** cell is spanned to two rows in the **EmployeeName** column.
+To achieve this, You need to define the [rowSpan](../../api/grid/queryCellInfoEventArgs/#rowspan) attribute to span cells in the [queryCellInfo](../../api/grid/queryCellInfoEventArgs) event. The rowSpan attribute is used to specify the number of rows that the current cell should span.
-Also Grid supports the spanning of rows and columns for same cells. **Lunch Break** cell is spanned to two rows and three columns in the **1:00** column.
+The `queryCellInfo` event is triggered for each cell in the grid, and allows you to customize the cells in the grid. By handling this event, you can set the `rowSpan` attribute for a cell to achieve row spanning.
+
+In the following demo, **Davolio** cell is spanned to two rows in the **EmployeeName** column.Also Grid supports the spanning of rows and columns for same cells. **Lunch Break** cell is spanned to two rows and three columns in the **1:00** column.
{% if page.publishingplatform == "typescript" %}
@@ -44,4 +46,5 @@ Also Grid supports the spanning of rows and columns for same cells. **Lunch Brea
{% previewsample "page.domainurl/code-snippet/grid/row-spanning-cs1" %}
{% endif %}
-> When paging is enabled in grid, you can disable the rows and columns spanning for any particular page. To achieve this, we need to check **requestType** as paging ` string` in [`queryCellInfo`](../../api/grid/queryCellInfoEventArgs) event of grid.
\ No newline at end of file
+> To disable the spanning for particular grid page, you need to use **requestType** from `queryCellInfo` event argument.
+> The `rowSpan` and `colSpan` attributes can be used together to merge cells both vertically and horizontally.
diff --git a/ej2-javascript/grid/row/row-template.md b/ej2-javascript/grid/row/row-template.md
index cc78a9911..f6b8db340 100644
--- a/ej2-javascript/grid/row/row-template.md
+++ b/ej2-javascript/grid/row/row-template.md
@@ -11,7 +11,11 @@ domainurl: ##DomainURL##
# Row template in ##Platform_Name## Grid control
-The [`rowTemplate`](../../api/grid/#rowtemplate) has an option to customise the look and behavior of the grid rows. The [`rowTemplate`](../../api/grid/#rowtemplate) property accepts either the [template string](../../common/template-engine) or HTML element ID.
+The row template feature in Grid allows you to customize the appearance and layout of rows in the grid. This feature is useful when you want to display custom content, such as images, buttons, or other controls, within the rows.
+
+To enable the row template feature, you need to set the [rowTemplate](../../api/grid/#rowtemplate) property of the Grid control. This property accepts a custom HTML template that defines the layout for each row.
+
+In the following example, Employee Information with Employee Photo is presented in the first column and employee details like Name, Address, etc., are presented in the second column.
{% if page.publishingplatform == "typescript" %}
@@ -40,11 +44,15 @@ The [`rowTemplate`](../../api/grid/#rowtemplate) has an option to customise the
{% previewsample "page.domainurl/code-snippet/grid/row-template-cs30" %}
{% endif %}
->The [`rowTemplate`](../../api/grid/#rowtemplate) property accepts only the TR element.
-
## Row template with formatting
-If the [`rowTemplate`](../../api/grid/#rowtemplate) is used, the value cannot be formatted inside the template using the [`columns.format`](../../api/grid/column/#format) property. In that case, a function should be defined globally to format the value and invoke it inside the template.
+The row template feature in Syncfusion Grid allows you to customize the layout of rows in the grid. This is useful when you want to display images, buttons, or other custom content within the rows of a grid.
+
+By default, Syncfusion Grid provides the [columns->format](../../api/grid/column/#format) property to format the values displayed in each column. However, when using the [rowtemplate](../../api/grid/#rowtemplate), the `columns->format` property cannot be directly applied to format the values inside the template.
+
+To format the values within the row template, you can define a global function that handles the formatting logic. This function can be invoked inside the template to format the corresponding values.
+
+Here is an example of how to define a global formatting function for a date column and use it inside a `rowTemplate`:
{% if page.publishingplatform == "typescript" %}
@@ -73,9 +81,46 @@ If the [`rowTemplate`](../../api/grid/#rowtemplate) is used, the value cannot be
{% previewsample "page.domainurl/code-snippet/grid/row-template-format-cs1" %}
{% endif %}
+>When using the `rowTemplate` feature in Syncfusion Grid, keep in mind that any formatting applied to columns using the `columns->format` property will not work inside the template.
+
+## Render syncfusion control in row template
+
+The Grid allows you to render custom Syncfusion controls within the rows of the grid. This feature is helpful as it enables you to display interactive Syncfusion controls instead of field values in the grid.
+
+To enable a Syncfusion control in a row template, you need to set the [rowTemplate](../../api/grid/#rowtemplate) property of the Grid control. This property accepts a custom HTML template that defines the layout for each row.
+
+Here is an example that demonstrates rendering Syncfusion controls within a row template :
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/grid/row-template-control-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/grid/row-template-control-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/row-template-control-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/grid/row-template-control-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/grid/row-template-control-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/row-template-control-cs1" %}
+{% endif %}
+
## Limitations
-Row template feature is not compatible with all the features which are available in grid and it has limited features support. Here we have listed out the features which are not compatible with row template feature.
+Row template feature is not compatible with all the features which are available in the grid, and it has limited features support. The features that are incompatible with the row template feature are listed below.
* Filtering
* Paging
@@ -98,4 +143,4 @@ Row template feature is not compatible with all the features which are available
* Reordering
* Aggregates
* Clipboard
-* Adaptive view
\ No newline at end of file
+* Adaptive view
diff --git a/ej2-javascript/pivotview/js/server-side-pivot-engine.md b/ej2-javascript/pivotview/js/server-side-pivot-engine.md
index 86150215f..e5c807ff4 100644
--- a/ej2-javascript/pivotview/js/server-side-pivot-engine.md
+++ b/ej2-javascript/pivotview/js/server-side-pivot-engine.md
@@ -522,10 +522,10 @@ public class PivotExpandoData
```
-To bind the data source, set its class **PivotExpandoData** to **TValue** of the **PivotEngine** class.
+To bind the data source, set its model type as **ExpandoObject** to **TValue** of the **PivotEngine** class.
```c#
-private PivotEngine PivotEngine = new PivotEngine();
+private PivotEngine PivotEngine = new PivotEngine();
```
diff --git a/ej2-javascript/pivotview/ts/server-side-pivot-engine.md b/ej2-javascript/pivotview/ts/server-side-pivot-engine.md
index 0b15b1add..8a7f38c7d 100644
--- a/ej2-javascript/pivotview/ts/server-side-pivot-engine.md
+++ b/ej2-javascript/pivotview/ts/server-side-pivot-engine.md
@@ -526,10 +526,10 @@ public class PivotExpandoData
```
-To bind the data source, set its class **PivotExpandoData** to **TValue** of the **PivotEngine** class.
+To bind the data source, set its model type as **ExpandoObject** to **TValue** of the **PivotEngine** class.
```c#
-private PivotEngine PivotEngine = new PivotEngine();
+private PivotEngine PivotEngine = new PivotEngine();
```
diff --git a/ej2-javascript/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet.md b/ej2-javascript/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet.md
new file mode 100644
index 000000000..9fe39c1b3
--- /dev/null
+++ b/ej2-javascript/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet.md
@@ -0,0 +1,43 @@
+---
+layout: post
+title: Insert a sheet programmatically and make the inserted sheet as the active sheet in ##Platform_Name## Spreadsheet control | Syncfusion
+description: Learn here all about insert a sheet programmatically and make the inserted sheet as the active sheet in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Spreadsheet
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+## Insert a sheet programmatically and make it the active sheet in ##Platform_Name## Spreadsheet control
+
+A sheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. Using [insertSheet](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#insertsheet) method, you can insert one or more sheets at the desired index. Then, you can make the inserted sheet as active sheet by focusing the start cell of that sheet using the [goTo](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#goto) method.
+
+The following code example shows how to insert a sheet programmatically and make it the active sheet.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1" %}
+{% endif %}
diff --git a/ej2-javascript/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string.md b/ej2-javascript/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string.md
new file mode 100644
index 000000000..1719307aa
--- /dev/null
+++ b/ej2-javascript/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string.md
@@ -0,0 +1,45 @@
+---
+layout: post
+title: Save and open Spreadsheet data as a Base64 string in ##Platform_Name## Spreadsheet control | Syncfusion
+description: Learn here all about save and open Spreadsheet data as a Base64 string in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Spreadsheet
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+## Save and open Spreadsheet data as a Base64 string in ##Platform_Name## Spreadsheet control
+
+In the Spreadsheet control, there is currently no direct option to save and open data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`.
+
+> You can get the Spreadsheet data as blob in the [saveComplete](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#savecomplete) event when you set the `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#beforesave) event.
+
+The following code example shows how to save and open the spreadsheet data as base64 string.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/base-64-string/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/base-64-string/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/spreadsheet/base-64-string/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/base-64-string/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
+{% endif %}
diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html
index 946e2b6a4..a0430f949 100644
--- a/ej2-typescript-toc.html
+++ b/ej2-typescript-toc.html
@@ -2210,6 +2210,8 @@