Hi All,
In my Kendo React application i am populating Grid. When click Edit , i am loading respective row data in one dialog window. i am using Axios to Get and Post data in API. i am written my Get code to load grid in componentDidMount() method and for update i written one custom function and calling button onClick Event.
But here my problem is when i click on Update button its going through my custom Update function but its not hitting my post API. and its hitting on get api which used in
componentDidMount() method. Because of this i am not able to save data in database. How can i overcome this situation?
8 Answers, 1 is accepted
Hello, Binu,
Thank you for the details.
Is it possible to share the code or even better an example of this?
This will allow us to inspect what could be causing this undesired request.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
As per your request i am pasting my code below
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import '@progress/kendo-theme-default/dist/all.css';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { process } from '@progress/kendo-data-query';
import axios from 'axios';
import { Dialog } from '@progress/kendo-react-dialogs';
export default class ModuleList extends React.Component {
constructor(props) {
super(props);
this.state = {
products: [], dataState: {
skip: 0, take: 10,visible:false
}
};
this.TaskView = this.TaskView.bind(this);
this.Reassign = this.Reassign.bind(this);
this.Delete = this.Delete.bind(this);
}
TaskView() {
this.setState({
viewDialog: !this.state.viewDialog,
});
}
Reassign(data) {
if ('props' in data) {
this.setState({
reassignDialog: !this.state.reassignDialog,
reaAssignData: data.props.dataItem,
});
} else {
this.setState({
reassignDialog: !this.state.reassignDialog,
});
}
}
Delete() {
this.setState({
deteteDialog: !this.state.deteteDialog,
});
}
Update(e)
{
axios.post('http://localhost:63555/api/Module/UpdateModule', {
Code: 'React Code1',
Name: 'React Name1'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
componentDidMount() {
axios.get('http://localhost:63555/api/Module/GetModule')
.then(res => {
const products = res.data.items;
this.setState({ products });
});
}
ViewCell = (props) => <ViewTask {...props} TaskView={this.TaskView} />
ReassignCell = (props) => <ReassignTask {...props} Reassign={this.Reassign} />
DeleteCell = (props) => <DeleteTask {...props} Delete={this.Delete} />
render() {
return (
<div>
<Grid
style={{ position: 'absolute', left: 0, right: 0, top: 120, bottom: 40, }}
sortable
pageable
onDataStateChange={(event) => {
this.setState({
dataState: event.data
})
}}
data={process(this.state.products, this.state.dataState)}
>
<GridColumn field="id" />
<GridColumn field="code" title="Code" />
<GridColumn field="name" title="Name" />
<GridColumn width={100} field="View" cell={this.ViewCell} />
<GridColumn width={100} field="Reassign" cell={this.ReassignCell} />
<GridColumn width={100} field="Delete" cell={this.DeleteCell} />
</Grid>
{this.state.viewDialog &&
<Dialog title={"View Task"} width={700} onClose={this.TaskView}>
<form className="k-form">
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label className="strong" htmlFor="usr">Task Number*</label>
<input type="text" placeholder="PL1234567890" className="form-new-control" id="usr" />
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Task Type*</label>
<select className="form-new-control" name="" id="">
<option value="">select</option>
</select>
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Task Type*</label>
<textarea className="form-new-control" draggable="false" name="" id="" rows="5"></textarea>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label className="strong" htmlFor="usr">Due Date*</label>
<input type="date" className="form-new-control" id="usr" />
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Assign to*</label>
<input type="text" disabled className="form-new-control" id="usr" />
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Assigned on*</label>
<input type="date" className="form-new-control" id="usr" />
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Assigned by*</label>
<input type="text" disabled="" className="form-new-control" id="usr" />
</div>
</div>
</div>
</form>
<div className="btn-right">
<button className="btn btn-success mr-10" onClick={this.TaskView}>
<span>
<i className="fa fa-dot-circle-o"></i>
Create Task
</span>
</button>
<button className="btn btn-secondary" onClick={this.TaskView}>Cancel</button>
</div>
</Dialog>}
{this.state.reassignDialog &&
<Dialog title={"Edit Module"} width={700} onClose={this.Reassign}>
<form className="k-form">
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label className="strong" htmlFor="usr">Code*</label>
<input type="text" placeholder="Code" className="form-new-control" id="txtModuleCode" value={this.state.reaAssignData.code} />
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Module Name*</label>
<input type="text" placeholder="Name" className="form-new-control" id="txtModuleName" value={this.state.reaAssignData.name} />
</div>
</div>
</div>
<div className="btn-right">
<button className="btn btn-success mr-10" onClick={this.Update.bind(this)}>
<span>
<i className="fa fa-dot-circle-o"></i>
Create Module
</span>
</button>
<button className="btn btn-secondary" onClick={this.Reassign}>Cancel</button>
</div>
</form>
</Dialog>}
{this.state.deteteDialog &&
<Dialog title={"Delete Task"} width={700} onClose={this.Delete}>
<form className="k-form">
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label className="strong" htmlFor="usr">Task Number*</label>
<input type="text" placeholder="PL1234567890" className="form-new-control" id="usr" />
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Task Type*</label>
<select className="form-new-control" name="" id="">
<option value="">select</option>
</select>
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Task Type*</label>
<textarea className="form-new-control" draggable="false" name="" id="" rows="5"></textarea>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label className="strong" htmlFor="usr">Due Date*</label>
<input type="date" className="form-new-control" id="usr" />
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Assign to*</label>
<input type="text" disabled className="form-new-control" id="usr" />
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Assigned on*</label>
<input type="date" className="form-new-control" id="usr" />
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Assigned by*</label>
<input type="text" disabled="" className="form-new-control" id="usr" />
</div>
</div>
</div>
</form>
<div className="btn-right">
<button className="btn btn-success mr-10" onClick={this.Delete}>
<span>
<i className="fa fa-dot-circle-o"></i>
Create Task
</span>
</button>
<button className="btn btn-secondary" onClick={this.Delete}>Cancel</button>
</div>
</Dialog>}
</div>
);
}
}
class ViewTask extends Component {
render() {
return (
<td className="text-center">
<a className="text-success" onClick={this.props.TaskView}>View</a>
</td>
);
}
}
class ReassignTask extends Component {
render() {
return (
<td className="text-center">
<a className="text-primary" onClick={() => this.props.Reassign(this)}>Edit</a>
</td>
);
}
}
class DeleteTask extends Component {
render() {
return (
<td className="text-center">
<a className="text-danger" onClick={this.props.Delete}>Delete</a>
</td>
);
}
}
Hello, Binu,
Thank you for the code.
After inspecting it, it seems a valid approach.
Based on the first post, I can assume that the Update function is called?
Then, please check the network tab in the browser DevTools as the request may be made, but just not hitting the API.
As if the Update function is called, the Axiоs request has to be made.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan ,
Please see Capture.PNG, in my attachment. Here we can see my debug is going to Update function. But its not going to my local Post API. Instead its again going to componentDidMount() function and going my local Get API. As you sais checked in network dev tools but not listing post API, Listing Get API only . Please see Network.PNG for reference
Here i am posting my code here again
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import '@progress/kendo-theme-default/dist/all.css';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { process } from '@progress/kendo-data-query';
import axios from 'axios';
import { Dialog } from '@progress/kendo-react-dialogs';
export default class ModuleList extends React.Component {
constructor(props) {
super(props);
this.state = {
products: [],
dataState: {
skip: 0, take: 10, visible: false
},
saveMode: 0,
};
this.Reassign = this.Reassign.bind(this);
}
}
Reassign(data) {
if ('props' in data) {
this.setState({
reassignDialog: !this.state.reassignDialog,
reaAssignData: data.props.dataItem,
});
} else {
this.setState({
reassignDialog: !this.state.reassignDialog,
});
}
}
componentDidMount() {
axios.get('http://localhost:63555/api/Module/GetModule')
.then(res => {
const products = res.data.items;
this.setState({ products });
});
}
ReassignCell = (props) => <ReassignTask {...props} Reassign={this.Reassign} />
render() {
return (
)}
<Grid
style={{ position: 'absolute', left: 0, right: 0, top: 120, bottom: 40, }}
sortable
pageable
onDataStateChange={(event) => {
this.setState({
dataState: event.data
})
}}
data={process(this.state.products, this.state.dataState)}
>
<GridColumn field="id" />
<GridColumn field="code" title="Code" />
<GridColumn field="name" title="Name" />
<GridColumn width={100} field="Reassign" cell={this.ReassignCell} />
</Grid>
{this.state.reassignDialog &&
<Dialog title={"Edit Module"} width={700} onClose={this.Reassign}>
<form className="k-form">
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label className="strong" htmlFor="usr">Code*</label>
<input type="text" placeholder="Code" className="form-new-control" id="txtModuleCode" value={this.state.reaAssignData.code} />
</div>
<div className="form-group">
<label className="strong" htmlFor="usr">Module Name*</label>
<input type="text" placeholder="Name" className="form-new-control" id="txtModuleName" value={this.state.reaAssignData.name} />
</div>
</div>
</div>
<div className="btn-right">
<button className="btn btn-success mr-10" onClick={this.Update.bind(this)}>
<span>
<i className="fa fa-dot-circle-o"></i>
Update Module
</span>
</button>
<button className="btn btn-secondary" onClick={this.Reassign}>Cancel</button>
</div>
</form>
</Dialog>}
class ReassignTask extends Component {
render() {
return (
<td className="text-center">
<a className="text-primary" onClick={() => this.props.Reassign(this)}>Edit</a>
</td>
);
}
}
Hello, Binu,
Thank you for the additional details.
This seems very strange as the code looks correct, and the post has to be made.
Still, after trying to make an example based on the code what I have noticed is that clicking the button is making submit of the form. Form submit is causing a page to reload, which ends up re-mounting the component add calling componentDidMount again.
Please add an onSubmit event to the form and if it is called call e.preventDefault():
<form className="k-form" onSubmit={(e)=> e.preventDefault()}>Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
Thanks for your reply. I tried your method. Now its hitting on my Update API. But i am not able to pass my parameter to my API Below providing my code
Update(e) {
axios.post('http://localhost:63555/api/Module/UpdateModule', {
Code: 'React Code1',
Name: 'React Name1'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
API Code
============
[Route("UpdateModule")]
[HttpPost]
public HttpResponseMessage UpdateModule(ModuleUpdateModel data)
{
ModuleUpdateModel data1 = new ModuleUpdateModel();
try
{
#region model validations
if (data == null)
{
return new Response("Please supply inputs", HttpStatusCode.BadRequest);
}
if (!ModelState.IsValid)
{
return new Response("Please supply correct input", HttpStatusCode.BadRequest);
}
#endregion
ModuleBl moduleBl = new ModuleBl();
var apiResponse = new ModuleCreationResponse();
apiResponse.Status = moduleBl.UpdateModule(data);
if (apiResponse.Status == 2)
{
return new Response("Module updated successfully.", HttpStatusCode.OK);
}
else if (apiResponse.Status == 4)
{
return new Response("Module not found.", HttpStatusCode.NotFound);
}
else
return new Response("Module updation failed.", HttpStatusCode.NotModified);
}
catch (Exception ex)
{
return new Response("Request cannot be processed due to unknown error.");
}
}
Hello, Binu,
I`m glad to hear that the initial issue is resolved.
Could you please clarify if the content { Code: 'React Code1', Name: 'React Name1' } is not passed or the actual Grid row data?
Also, a screenshot of the request from the network tab will be helpful, to see if the parameters are part of the request.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
Thanks for your support. Issue is fixed