Inline edit can only edit once.
Inline edit can only edit once.
jasontfrance
Posts: 3Questions: 1Answers: 0
I'm trying to use inline edit, when I edit 1 field it POSTs, but it only allows me to edit one field. The data saves, but when I try to tab the focus remains on the field i edited and will not allow me to edit again. Any help?
editor = new $.fn.dataTable.Editor({
idSrc: "Id",
table: '#tblAdvancedEdit',
ajax:
{
url: Urls.ApiDataSetContractAdvancedEdit,
type: "POST",
data: function (d) {
var contractID = "";
$.each(d.data, function (id, valueParam) {
contractID = id;
});
var postData= {id: contractID};
return JSON.stringify($.extend(postData,d.data[contractID]));
}
},
table: "#tblAdvancedEdit",
fields: [{
label: "ContractName",
name: "ContractName"
},
{
label: "ContractNumber",
name: "ContractNumber"
}
,
{
label: "ContractType",
name: "ContractType"
},
{
label: "CompanyName",
name: "CompanyName",
type: "select",
options: companyNameDDL
},
{
label: "InsuranceName",
name: "InsuranceName",
type: "select",
options: insuranceMenuDDL
},
{
label: "InsuranceSubName",
name: "InsuranceSubName",
},
{
label: "EffectiveDateIso",
name: "EffectiveDateIso",
type: "date"
},
{
label: "TerminationDateIso",
name: "TerminationDateIso",
type: "date"
},
{
label: "SignedDateIso",
name: "SignedDateIso",
type: "date"
},
{
label: "InternalReviewDateIso",
name: "InternalReviewDateIso",
type: "date"
},
{
label: "RenewalTerms",
name: "RenewalTerms"
}
,
{
label: "ProviderNumber",
name: "ProviderNumber"
}]
});
var table = $("#tblAdvancedEdit").DataTable({
dom: "Bfrtip",
ajax: {
url: Urls.ApiDataGetContracts,
type: "POST",
data: search
},
columns: [
{
data: "ContractName"
},
{
data: "ContractNumber"
},
{
data: "ContractType"
},
{
data: "CompanyName"
},
{
data: "InsuranceName"
},
{
data: "InsuranceSubName"
},
{
data: "EffectiveDateIso",
render: function ( data, type, row ) {
return DateToString(createDateObject(data));
},
},
{
data: "TerminationDateIso",
render: function (data, type, row) {
return DateToString(createDateObject(data));
}, },
{
data: "SignedDateIso",
render: function (data, type, row) {
return DateToString(createDateObject(data));
},
},
{
data: "InternalReviewDateIso",
render: function (data, type, row) {
return DateToString(createDateObject(data));
},
},
{
data: "RenewalTerms"
},
{
data: "ProviderNumber"
}
],
keys: {
editor: editor
},
select: {
style: 'os',
selector: 'td:first-child',
blurable: true
},
buttons: [
'csv', 'print'
],
initComplete: function () {
this.api().columns().every(function () {
$('#selContrCompanyAdvancedEdit').on('change', function () {
table
.columns(3)
.search($(this).val())
.draw();
});
$('#selContrInsuranceAdvancedEdit').on('change', function () {
table
.columns(4)
.search($(this).val())
.draw();
});
$('#selContrInsuranceSubGroupAdvancedEdit').on('change', function () {
table
.columns(5)
.search($(this).val())
.draw();
});
});
}
});
This discussion has been closed.
Answers
The top part that was cut off...
Are you able to give me a link to the page so I can debug the issue please?
It sounds like there might be a Javascript error occurring, or the data returned from the server is not in the expected format.
Allan
Its only running locally at the moment. Here is the data being returned
I edited the ContractName field, and I pass everything else in as null. Should I be returning the full contract?
That looks okay. You should return whatever the value is for that field in the database. If that value is null, return that.
Did you have a look at your browser's console - does it show any errors? I don't see why the above would cause the table to not allow editing on another cell.
Allan