Hello,
I've been following along with your video tutorial (2min 40 mark about Custom Services)
Handling CRUD Operations
https://www.youtube.com/watch?v=lGEPmY0bOws
I've
created a test REACT project on my MAC (running node.js). In doing so,
I've essentially copied everything in the video regarding customer
service (no DataManager). Whenever I attempt a CRUD operation and check
console output, I don't see any events being fired. For the example
code below, I've essentially copied the code you used in the video,
except I didnt use the typescript notation (please note I also attempted
this with typescript but I still had same behavior.
Summary:
>> When page loads, the getAllData call successfully returns and renders the data
>>
when i check chrome debugger, I can see that the gridComponent has the
"dataSourceChanged" bound to dataSourceChanged function
>>
when I click Add and Save or Edit/Update, I dont see the "state" in the
console.log output as shown in the youTube video
*********************************************************************
import React, { useState, useEffect } from "react";
import { getProductFeatureData } from "./Helper";
import {
GridComponent,
ColumnDirective,
ColumnsDirective,
Page,
Edit,
EditSettingsModel,
Toolbar,
ToolbarItems,
TextWrapSettingsModel,
Inject
} from "@syncfusion/ej2-react-grids";
import {
getAllData,
getProdFeatData,
addData,
updateData,
deleteData
} from "./Crud.js";
function cleanGridData(data) {
if (data != null) {
for (var index = 0; index < data.length; index++) {
if (data[index].type == "link") {
data[index].content = data[index].content[0];
}
if (data[index].type == "logs" || data[index].type == "commands") {
data[index].content = JSON.stringify(data[index].content);
}
if (Array.isArray(data[index].category)) {
data[index].category = data[index].category.join(",");
}
}
}
return data;
}
function DataGrid() {
const cellSettings = { wrapMode: "Content" };
const editOptions = {
allowEditing: true,
allowAdding: true,
allowDeleting: true
//mode: "Dialog"
};
const toolbarOptions = ["Add", "Edit", "Delete", "Update", "Cancel"];
const [data, setData] = useState();
useEffect(() => {
getAllData().then(data => {
setData(data);
});
}, []);
function dataSourceChanged(state) {
console.log(state);
if (state.action === "add") {
addData(state.data);
}
}
return (
<div className="section panel panel--loose panel--bordered">
<div style={{ margin: "1%", marginTop: "2%" }}>
<GridComponent
dataSource={data}
editSettings={editOptions}
toolbar={toolbarOptions}
allowTextWrap={true}
textWrapSettings={cellSettings}
dataSourceChanged={dataSourceChanged}
>
<ColumnsDirective>
<ColumnDirective field="_id" visible={false} />
<ColumnDirective field="product" visible={true} width="50" />
<ColumnDirective field="feature" visible={true} width="80" />
<ColumnDirective
field="category"
headerText="Category"
width="90"
/>
<ColumnDirective
field="audience"
headerText="Audience"
width="70"
/>
<ColumnDirective field="title" headerText="Title" width="150" />
<ColumnDirective
field="description"
headerText="Description"
width="200"
/>
<ColumnDirective
field="content_type"
headerText="Type"
width="50"
/>
<ColumnDirective field="content" headerText="Content" width="200" />
</ColumnsDirective>
<Inject services={[Edit, Toolbar]} />
</GridComponent>
</div>
</div>
);
}
export default DataGrid;
*********************************************************************
The json returned from "getAllData" has the following structure
[
{
"product": "PROD1",
"feature": "PROD1-FEATURE1",
"category": ["doc", "training", "tshoot"],
"audience": "internal",
"title": "Troubleshooting PROD1-FEATURE1",
"description": "ARTICLE DESCRIPTION",
"content_type": "link",
"content": [
"https://SOME-LINK-FOR-PROD-FEATURE
],
"display_name": "PROD1-DISPLAY-NAME"
},
{
"product": "PROD2",
"feature": "PROD2-FEATURE1",
"category": ["doc", "training", "tshoot"],
"audience": "internal",
"title": "Troubleshooting PROD2-FEATURE1",
"description": "ARTICLE DESCRIPTION",
"content_type": "link",
"content": [
"https://SOME-LINK-FOR-PROD-FEATURE
],
"display_name": "PROD2-DISPLAY-NAME"
}
]
