kasperolesen / datatable-alteditor Goto Github PK

Question,

possible to put this for select :

 data: "profil.designation",
                title: "Profil",
                type: "select",
                "options": [
                    { label: "To do", value: 0 },
                    { label: "fffff", value: 3 },
                ]

Null fields are rendered as undefined string in the editor window and this behavior is not desirable for users.
In addition, this can cause parsing error while editing when mapping the json object to the model by Spring controller in case of non string values.

Hi, is there any way to update column options after choosing an option in a select?
For example:

        table = $('#table').DataTable({
            dom: "Bfrtip",
            ajax: {
                url: urlHOST + myEndpoint,
                type: 'GET'
            },
            columns: [
                { data: "id", type: "hidden" },
                { data: "accountId", type: "select", options: accountsData },
                { data: "projectId", type: "select", options: projectsData },
                { data: "wbsId", type: "select", options: wbsData }
            ]

I have two calls to api that load the accounts and the projects, but I need that when selecting an account this one load another list of projects that belong to that account, the call to the api is prepared.

Is there something like a function for the options in which can update the options with an onchange?

Regards.

Has anyone had any success using this alternative on a wordpress website? I'm having trouble implementing an AJAX object populated table to a single page. I assume i would do the loading of the js libraries for DataTables through a child theme right?

After recent "required" flag commit, my pattern checking is NOT working anymore. Why remove the validate function?

It would be nice to have the HTML Required attribute available on input fields to take advantage of browser validation of inputs.

https://www.w3schools.com/tags/att_input_required.asp

If you are using IE and tried this plugin in IE, you'll get an error SCRIPT1003: Expected ':' IE11 on console.

Solution for the plugin to work is to update Line 392:

completeColumnDefs() {}

Changed it to completeColumnDefs: function() {}

Hello,

after creating the modal, I need to set-up some event on some input fields. There is a way to add a callback function after modal has been created?

thank you

I get the following error in :

//Adding text-inputs and errorlabels
if(columnDefs[j].type.includes("text")){

"dataTables.altEditor.free.js:508 Uncaught TypeError: Cannot read property 'includes' of undefined(…)"

Am I missing any library?

Hi, Can I use this plugin for data extracted from MySQL via PHP?

I was wondering how you translate, the language

in my case I will translate to portuguese brazil

Regardless of add or edit, button id always set as addRowBtn in createDialog function, so edit button works as add button.

line 512-513

                    var btns = '<button type="button" data-content="remove" class="btn btn-default" data-dismiss="modal">'+closeCaption+'</button>' +
                        '<button type="button"  data-content="remove" class="btn btn-primary" id="addRowBtn">'+buttonCaption+'</button>';

HI,
var tableActivitySettings = $('#datatableActivitySettings')
.DataTable({ // Call a table function to create table.
"processing": true,
"lengthChange": false,
"pageLength": 50,
ajax: {
"url": Xrm.Page.context.getClientUrl() +
"/api/data/v8.2/ssi_activitysettings?$select=createdon,ssi_activitysettingid,ssi_availableinactivitiesplus,ssi_cancreateinactivitiesplus,ssi_entityname,ssi_includewithlastcontactedon,ssi_lastcontactedonattribute,ssi_lastcontactedonfieldtype,ssi_suppress",

                    "dataType": 'json',
                    "type": "GET",
                    "cache": true,
                    "beforeSend": function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0");
                        XMLHttpRequest.setRequestHeader("OData-Version", "4.0");
                        XMLHttpRequest.setRequestHeader("Accept", "application/json");
                        XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
                    },
                    "async": false,
                    "complete": function (json, type) { //type return "success" or "parsererror"
                        if (type == "parsererror") {
                            alert("parsererror");
                        } else {
                            //alert("from Complete: "+json);

                        }
                    },
                    "dataSrc": function (json) {
                        arrDataActivitySettings = [];
                        arrItems = [];
                        // Convert Json data into 2-d Array
                        //ssi_activitiespluscolumnid,ssi_columnheading,ssi_columntype,ssi_columnwidth,ssi_commonattributename,ssi_customattributetype,ssi_displayorder,ssi_sortcolumn,ssi_sortdirection
                        $.each(json.value, function (index, value) {
                            arrItems.push(value.ssi_activitysettingid);
                            arrItems.push(value
                                .ssi_entityname
                            ); //["[email protected]"]);
                            arrItems.push(value[
                                "ssi_availableinactivitiesplus@OData.Community.Display.V1.FormattedValue"
                            ]); //
                            arrItems.push(value[
                                "ssi_includewithlastcontactedon@OData.Community.Display.V1.FormattedValue"
                            ]);
                            arrItems.push(value[
                                "ssi_lastcontactedonattribute@OData.Community.Display.V1.FormattedValue"
                            ] == null ? "Null" : value[
                                "ssi_customattributetype@OData.Community.Display.V1.FormattedValue"
                            ]);
                            arrItems.push(value[
                                "ssi_lastcontactedonfieldtype@OData.Community.Display.V1.FormattedValue"
                            ]);
                            arrItems.push(value[
                                "[email protected]"
                            ]);
                            arrItems.push(value[
                                "ssi_cancreateinactivitiesplus@OData.Community.Display.V1.FormattedValue"
                            ]);
                            arrItems.push(value[
                                "[email protected]"]);
                            arrDataActivitySettings.push(
                                arrItems
                            ); // Push The Values Inside the Array to Create 2-D Array

                            arrItems = [];
                        });

                        return arrDataActivitySettings;
                    }

                },
                'data': arrDataActivitySettings,
                'columnDefs': [{
                    'targets': 0,
                    'searchable': false,
                    'orderable': false,
                    'width': '1%',
                    'className': 'dt-body-center',
                    'render': function (data, type, full, meta) {
                        return '<input type="checkbox">';
                    }
                }],

                'order': [1, 'asc'],
                'rowCallback': function (row, data, dataIndex) {
                    // Get row ID
                    var rowId = data[0];

                    // If row ID is in the list of selected row IDs
                    if ($.inArray(rowId, rows_selected) !== -1) {
                        $(row).find('input[type="checkbox"]').prop('checked', true);
                        //$(row).addClass('selected');
                    }
                },

                'initComplete': function () {
                    
                }

            });

Above is the code I used to populate datatble from dynamics crm,
Below is the result from webapi call

"@odata.context": "http://devarcrm82/CrmPlusCoreDevV2/api/data/v8.2/$metadata#ssi_activitysettings(_createdby_value,ssi_availableinactivitiesplus,ssi_cancreateinactivitiesplus,ssi_entityname,ssi_includewithlastcontactedon,ssi_lastcontactedonattribute,ssi_lastcontactedonfieldtype)",
"value": [
{
"@odata.etag": "W/"528951"",
"[email protected]": "SYSTEM",
"[email protected]": "systemuser",
"_createdby_value": "b5655f68-b549-46a3-8b9f-e371e21e75ab",
"ssi_availableinactivitiesplus@OData.Community.Display.V1.FormattedValue": "Yes",
"ssi_availableinactivitiesplus": true,
"ssi_cancreateinactivitiesplus@OData.Community.Display.V1.FormattedValue": "Yes",
"ssi_cancreateinactivitiesplus": true,
"ssi_entityname": "bulkoperation",
"ssi_includewithlastcontactedon@OData.Community.Display.V1.FormattedValue": "No",
"ssi_includewithlastcontactedon": false,
"ssi_lastcontactedonattribute": null,
"ssi_lastcontactedonfieldtype@OData.Community.Display.V1.FormattedValue": "Activity Type",
"ssi_lastcontactedonfieldtype": true,
"ssi_activitysettingid": "7667117d-3c92-e911-aa24-060dfd5b0b84"
},

    {
        "@odata.etag": "W/\"528956\"",
        "[email protected]": "SYSTEM",
        "[email protected]": "systemuser",
        "_createdby_value": "b5655f68-b549-46a3-8b9f-e371e21e75ab",
        "ssi_availableinactivitiesplus@OData.Community.Display.V1.FormattedValue": "Yes",
        "ssi_availableinactivitiesplus": true,
        "ssi_cancreateinactivitiesplus@OData.Community.Display.V1.FormattedValue": "Yes",
        "ssi_cancreateinactivitiesplus": true,
        "ssi_entityname": "task",
        "ssi_includewithlastcontactedon@OData.Community.Display.V1.FormattedValue": "No",
        "ssi_includewithlastcontactedon": false,
        "ssi_lastcontactedonattribute": null,
        "ssi_lastcontactedonfieldtype@OData.Community.Display.V1.FormattedValue": "Activity Type",
        "ssi_lastcontactedonfieldtype": true,
        "ssi_activitysettingid": "7b67117d-3c92-e911-aa24-060dfd5b0b84"
    },
    {
        "@odata.etag": "W/\"528957\"",
        "[email protected]": "SYSTEM",
        "[email protected]": "systemuser",
        "_createdby_value": "b5655f68-b549-46a3-8b9f-e371e21e75ab",
        "ssi_availableinactivitiesplus@OData.Community.Display.V1.FormattedValue": "Yes",
        "ssi_availableinactivitiesplus": true,
        "ssi_cancreateinactivitiesplus@OData.Community.Display.V1.FormattedValue": "Yes",
        "ssi_cancreateinactivitiesplus": true,
        "ssi_entityname": "incidentresolution",
        "ssi_includewithlastcontactedon@OData.Community.Display.V1.FormattedValue": "No",
        "ssi_includewithlastcontactedon": false,
        "ssi_lastcontactedonattribute": null,
        "ssi_lastcontactedonfieldtype@OData.Community.Display.V1.FormattedValue": "Activity Type",
        "ssi_lastcontactedonfieldtype": true,
        "ssi_activitysettingid": "7c67117d-3c92-e911-aa24-060dfd5b0b84"
    },
    {
        "@odata.etag": "W/\"528958\"",
        "[email protected]": "SYSTEM",
        "[email protected]": "systemuser",
        "_createdby_value": "b5655f68-b549-46a3-8b9f-e371e21e75ab",
        "ssi_availableinactivitiesplus@OData.Community.Display.V1.FormattedValue": "Yes",
        "ssi_availableinactivitiesplus": true,
        "ssi_cancreateinactivitiesplus@OData.Community.Display.V1.FormattedValue": "Yes",
        "ssi_cancreateinactivitiesplus": true,
        "ssi_entityname": "campaignresponse",
        "ssi_includewithlastcontactedon@OData.Community.Display.V1.FormattedValue": "No",
        "ssi_includewithlastcontactedon": false,
        "ssi_lastcontactedonattribute": null,
        "ssi_lastcontactedonfieldtype@OData.Community.Display.V1.FormattedValue": "Activity Type",
        "ssi_lastcontactedonfieldtype": true,
        "ssi_activitysettingid": "7d67117d-3c92-e911-aa24-060dfd5b0b84"
    },
  
    {
        "@odata.etag": "W/\"536735\"",
        "[email protected]": "Aparna Ravidas",
        "[email protected]": "systemuser",
        "_createdby_value": "37a4ef55-0191-e911-aa24-060dfd5b0b84",
        "ssi_availableinactivitiesplus@OData.Community.Display.V1.FormattedValue": "No",
        "ssi_availableinactivitiesplus": false,
        "ssi_cancreateinactivitiesplus@OData.Community.Display.V1.FormattedValue": "No",
        "ssi_cancreateinactivitiesplus": false,
        "ssi_entityname": " test name",
        "ssi_includewithlastcontactedon@OData.Community.Display.V1.FormattedValue": "No",
        "ssi_includewithlastcontactedon": false,
        "ssi_lastcontactedonattribute": "test field",
        "ssi_lastcontactedonfieldtype@OData.Community.Display.V1.FormattedValue": "Activity Attribute",
        "ssi_lastcontactedonfieldtype": false,
        "ssi_activitysettingid": "9d46e4b5-acac-e911-aa25-060dfd5b0b84"
    }
]

}
How can example be modified to populate this values to the datatable. Thanks in advance

Hi,
in the below code,datatable is populated by json. modal popsup with add, edit , delete functionalities works fine.javascript objects are used to populate dropdownlists.

var optionActivityColumnsColumnType = {
"true": "Entity Specific Attribute",
"false": "Common Attribute"
}
var url_activitycolumns_get = "xxxxx/api/data/v8.2/ssi_activitiespluscolumns?
$select=.....,ssi_commonattributename,ssi_customattributetype,....";

TableActivityColumns = $('#datatableActivityColumns').DataTable({
    "sPaginationType": "full_numbers",
    ajax: {
        url: url_activitycolumns_get,
        dataType: 'json',
        type: "GET",
        cache: true,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0");
            XMLHttpRequest.setRequestHeader("OData-Version", "4.0");
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
            XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations=\"OData.Community.Display.V1.FormattedValue\"");
        },
        async: false,
        complete: function (json, type) { //type return "success" or "parsererror"
            if (type == "parsererror") {
                alert("parsererror");

            } else {

            }
        },
        dataSrc: function (json) {
            arrDataActivityColumns = [];
            arrItems = [];
            // Convert Json data into 2-d Array               
            $.each(json.value, function (index, value) {
             arrItems.push(value.ssi_activitiespluscolumnid);
                arrItems.push(value.ssi_columnheading);
                arrItems.push(value["ssi_columntype"] == null ? "null" : value["ssi_columntype"]);
                arrDataActivityColumns.push(arrItems); // Push The Values Inside the Array to Create 2-D Array
                arrItems = [];
            });

            return arrDataActivityColumns;
        }
    },
    columnDefs: [{
            type: "hidden",
            "targets": [0],
            "visible": false,
            "searchable": false
        },
        {
            type: "select",
            "targets": 2,
            options: optionActivityColumnsColumnType,
            select2: {
                width: "100%"
            },
            render: function (data, type, row, meta) {
                alert(data);
                if (data == null || !(data in optionActivityColumnsColumnType)) return null;
                return optionActivityColumnsColumnType[data];

            }
        },

As you can see in the columnDef , target 2 uses a javascript object optionActivityColumnsColumnType, which is being used to get the datasrc json value of ssi_columntype.
what I want to do is , if the value is true, some fields in the modal should be hidden .

Could some one please help me with this requirement. Thanks in Advance

Your methods should just call the _openDeleteModal() or _openEditModal() methods of the datatable, everything should work

Originally posted by @luca-vercelli in #45 (comment)

I've tried calling it from another .js, but I'm gettin a reference error.
Can I have an example on how to use this from another .js?

I need some help in editing multiple rows.

Steps to reproduce:

1. Select row
2. Press delete button
3. Debug for loop in line 475. JSON has the wrong key, for example:
   {0: "08:00:00"}
   instead of
   {Hour: "08:00:00"}
4. generated URL is also wrong .../action?0=08%3A00%3A00

Solution:
Edit line 477 from
jsonDataArray[dt.context[0].aoColumns[i].idx] = adata.data()[0][dt.context[0].aoColumns[i].data];
to
jsonDataArray[dt.context[0].aoColumns[i].data] = adata.data()[0][dt.context[0].aoColumns[i].data];

HI
created a dropdownlist as follows in the table function to create table
columnDefs: [{
type: "select",
"targets": 7,

options : optionselection,
select2 : { width: "100%"},
render: function (data, type, row, meta) {
    if (data == null || !(data in optionselection)) return null;
    return optionselection[data];
  }
}],

where var times is declared
as var optionselection= {Yes: "Yes", No:"No"}
But in the model it shows a field as highlighted , which changes on changing the dropdownlist value. Could anyone provide a solution for this please. Thanks in advance

Is it possible when you try to edit a row, the modal to appear with the value of the select fields prepopulated?

The input type using textarea is missing, it would be really nice if you could add it.

Hello, is it possible to support customization http request? So it can communicate with server side individually. Thanks.

Hi,
According to the requirements. I have 6 different datatables on different tabs on same html page which make use of the same file datatables.AltEditor.free.js. I have 6 different .js files to maintain each of these datatables. As shown below

Now the current requirement, is in the 2nd tab alone, on clicking the add button, along with the _openAddModal: function, it has to fetch some json data and populate it in the dropdown in modal. ie it need to add more functions in the corresponding .JS file along with the _openAddModal function in the datatables.AltEditor.free.js file.

Can anybody please help me solve this issue. THank you in advance

If someone else has the problem. I have changed the following line.
old:

731: }else if($(this).attr("data-special") != "portRange" && !$(this).context.checkValidity()){

731: }else if($(this).attr("data-special") != "portRange" && !$(this)[0].checkValidity()){

Hi, i'm implementing a right click context menu, the idea is select a row, right click and choose edit or delete like the main buttons.
How i can imitate the buttons fuctions?

Regards.

Hi,

I'm implemention datatable to get entities and attributes from dynamics crm
Above shown is the column def
tableActivitySettings = $('#datatableActivitySettings').DataTable({
"sPaginationType": "full_numbers",
ajax: {
url: url_activitysettings_get,
dataType: 'json',
type: "GET",
cache: true,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0");
XMLHttpRequest.setRequestHeader("OData-Version", "4.0");
XMLHttpRequest.setRequestHeader("Accept", "application/json");
XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations="*"");
XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations="OData.Community.Display.V1.FormattedValue"");
},
async: false,
complete: function (json, type) { //type return "success" or "parsererror"
if (type == "parsererror") {
alert("parsererror");

    } else {

    }
  },
  dataSrc: function (json) {
    arrDataActivitySettings = [];
    arrItems = [];
    // Convert Json data into 2-d Array

    $.each(json.value, function (index, value) {
      arrItems.push(value.ssi_activitysettingid);
      arrItems.push(value.ssi_entityname);
      arrItems.push(value["ssi_availableinactivitiesplus"] == null ? "null" : value["ssi_availableinactivitiesplus"]);
      arrItems.push(value["ssi_suppress"] == null ? "null" : value["ssi_suppress"]);
      arrItems.push(value["ssi_cancreateinactivitiesplus"] == null ? "null" : value["ssi_cancreateinactivitiesplus"]);
      arrItems.push(value["ssi_includewithlastcontactedon"] == null ? "null" : value["ssi_includewithlastcontactedon"]);
      arrItems.push(value["ssi_lastcontactedonattribute"] == null ? "null" : value["ssi_lastcontactedonattribute"]);
      arrItems.push(value["ssi_lastcontactedonfieldtype"] == null ? "null" : value["ssi_lastcontactedonfieldtype"]);
      var createddate = new Date(value.createdon).toLocaleString();
      arrItems.push(createddate);
      arrDataActivitySettings.push(arrItems); // Push The Values Inside the Array to Create 2-D Array
      arrItems = [];
    });
    return arrDataActivitySettings;

  }
},
columnDefs: [{
    type: "hidden",
    "targets": [0],
    "visible": false,
    "searchable": false
  },
  {
    type: "select",
    "targets": 1,
    options: optionActivitySettingsEntityName,
    select2: {
      width: "100%"
    },
    render: function (data, type, row, meta) {         
      if (data == null || !(data in optionActivitySettingsEntityName)) return null;
      return optionActivitySettingsEntityName[data];
    }
  },
  {
    type: "select",
    "targets": 2,
    options: optionActivitySettingsSelection,
    select2: {
      width: "100%"
    },
    render: function (data, type, row, meta) {
      if (data == null || !(data in optionActivitySettingsSelection)) return null;
      return optionActivitySettingsSelection[data];
    }
  },

  {
    type: "select",
    "targets": 3,
    options: optionActivitySettingsSelection,
    select2: {
      width: "100%"
    },
    render: function (data, type, row, meta) {

      if (data == null || !(data in optionActivitySettingsSelection)) return null;
      return optionActivitySettingsSelection[data];
    }
  },
  {
    type: "select",
    "targets": 4,
    options: optionActivitySettingsSelection,
    select2: {
      width: "100%"
    },
    render: function (data, type, row, meta) {
      if (data == null || !(data in optionActivitySettingsSelection)) return null;
      return optionActivitySettingsSelection[data];
    }
  },
  {
    type: "select",
    "targets": 5,
    options: optionActivitySettingsSelection,
    select2: {
      width: "100%"
    },
    render: function (data, type, row, meta) {
      if (data == null || !(data in optionActivitySettingsSelection)) return null;
      return optionActivitySettingsSelection[data];
    }
  },
  {
    type: "select",
    "targets": 6,
    options: optionActivitySettingsLCOAttribute ,
    select2: {
      width: "100%"
    },
    render: function (data, type, row, meta) {     
     optionActivitySettingsLCOAttribute =test123();
      if (data == null || !(data in optionActivitySettingsLCOAttribute)) {         
      } else {            
        return optionActivitySettingsLCOAttribute[data];
      }


    }
  },
],

Column 2 options is var optionActivitySettingsEntityName = {};
which calls a function getentities to get all entities
optionActivitySettingsEntityName = getEntities();

function getEntities() {
var data1 = {};
//alert("get entity");
SDK.Metadata.RetrieveAllEntities(SDK.Metadata.EntityFilters.Entity, true, function successRetrieveAllEntities(entityMetadataCollection) {
entityMetadataCollection.sort(function (a, b) {
if (a.LogicalName < b.LogicalName) {
return -1
}
if (a.LogicalName > b.LogicalName) {
return 1
}
return 0;
});

  for (var i = 0; i < entityMetadataCollection.length; i++) {
    var entity = entityMetadataCollection[i];
    if (entity.IsActivity) {
      // var select = document.getElementById("combobox");
      //  var el = document.createElement("option");
      var data = {};
      var text = entity.SchemaName;
      var value = entity.LogicalName;
      data[value] = text;
      // alert(JSON.stringify(data));
      data1 = $.extend({}, data1, data);
      // alert(JSON.stringify(data1))             
      data = {};
    }

  }
  //alert(JSON.stringify(data1))

},
function errorRetrieveAllEntities(error) {
  alert("failed");
  setText(message, error.message);
}

);
return data1;
}

For each row,Column 6 should fetch attributes based on entity selected in column 1.
I tried to do it as below by calleing a test functio test123 returning the array which should serve as the options for column 6
If it works i can get the selected entity from rowdata
function test123() {

return ({
"null": "null ",
"AttachmentErrors ": "AttachmentErrors",
"Category": "Category",
"CreatedByName": "CreatedByName",
"SLAInvokedIdName": "SLAInvokedIdName",
"PriorityCode": "PriorityCode",
"OperationTypeCode":"OperationTypeCode"
});
}

even though it appears in the datatable , it doesn't show up in the edit modal

Please help me with this situation

Y populated a Select field with json. I need this order
{"5":"AAAAA", "4":"BBBBB", "3":"CCCCC", "2":"DDDDD", "1":"EEEEE", }
but, in modal editor, items are reordered and shows as
1: EEEEEE
2: DDDDD
.....
........

Hi,

thank you for this great script since the original is really brutal expensive for US$109. I would have paid 20-30 but 100 is out of question for such a tool.

My problem seems to be that I use foundation and not bootstrap because the modals dont open and the save and close button from the modals are always floating on top of everything. Is there a way to make this work for foundation?

Select2 autocomplete feature not working in datatable editor

How do we check if the select has no value selected and prevent the form from being submitted?
This is the columndef for the select and is populated from json and is tied up with editorOnChange() event also

{
type: "select",
"targets": 2,
options: optionHierarchyName,
select2: {
width: "100%"
},

            editorOnChange: function (event, altEditor) {
                console.log(event, altEditor);
                var curEntityNameHS = $(event.currentTarget).val();
                var primarytempHS = {};
                var secondarytempHS = {};
                primarytempHS = getPrimaryAttributesHS(curEntityNameHS);
                secondarytempHS = getSecondaryAttributesHS(curEntityNameHS);
                (JSON.stringify(primarytempHS));
                $(altEditor.modal_selector).find("#alteditor-row-3").show();
                var temp1 = $(altEditor.modal_selector).find('#3');
                altEditor.reloadOptions(temp1, primarytempHS);

There will be situation that there wont be any options in the select to chose. If no select option is choosed, validation should prevent the form submission.
Is ther a way to achieve that.

Thank You in advance

Child row.
Good afternoon, can I edit the child row that expand when I click simultaneously with parent?

I have this kind of issue and I don't find the bug.
I post a snap of my code, if anybody neeeds additional information, say it.

columns: [{ "data": "username",
"title": "Username",
"type": "readonly" },
{ "data": "first_name",
"title": "First name" },
{ "data": "last_name",
"title": "Last name" },
{ "data": "address",
"title": "Address" },
{ "data": "email",
"title": "Email" },
{ "data": "phone",
"title": "Phone" },
{ "data": "status",
"orderable": false,
"title": "Status",
"type": "readonly"
},
{ "data": "logged",
"orderable": false,
"type": "readonly",
"title": "Available"
}
],
dom: 'Brtip', // Needs button container
select: 'single',
responsive: true,
altEditor: true, // Enable altEditor
buttons: [
{
extend: 'selected', // Bind to Selected row
text: 'Edit',
name: 'edit' // do not change name
},
{
extend: 'selected', // Bind to Selected row
text: 'Delete',
name: 'delete' // do not change name
}]

Hi,

Is it possible to edit multiple rows at once with this editor? Meaning, can I enable somehow that a user selects multiple rows and when they press "Edit", columns with varying values show something like "Multiple Values"? The idea is to be able to set column A of rows 1 and 3 to the same value through one operation.

It would be great to add support for checkbox type (showing checkbox in add and edit modal) and datetime type (showing bootstrap datepicker)

Hi, Cheers for the example and improvements provided.

Unfortunately cannot run the example locally as the libs folder is not included in the repo.

Though , except for main.css, i can use cdn references for the libraries and css files used, it would be great to follow which versions you used

Many thanks in advance :D
Good day

I am getting this js error while editing the record on following line:

ERROR : Unable to get property 'id' of undefined or null reference
CODE:
//Adding the inputs from the edit-modal
for(var i = 0; i < dataSet.length; i++){
jsonDataArray[columnIds[i+1].id] = dataSet[i];
// rowDataArray[columnIds[i+1].id] = dataSet[i];
}

Why id is getting null ref ?

datetimepicker: { timepicker: false, format : "Y/m/d"}

Does this plugin support calendars?

Hi,

there is a method to add two different button on modal edit?
I need an "add and continue" that simply add the record and reset the form and another one like "add and close" that add the row and close the modal if there are no errors

There are some options that I miss or is something that I must add by myself?

Thank you for you awesome extension!

Steps to reproduce:

Use column with name type.name (nested object)
You got undefined
Solution:
Edit all "for (var j in columnDefs) {" loops
add to begining of loop body:
var inputValue = adata.data()[0][columnDefs[j].name];
if (columnDefs[j].name.indexOf(".") !== -1) { //inner object through dot notation
var splitted = columnDefs[j].name.split(".");
inputValue = adata.data()[0][splitted[0]][splitted[1]];
}
then replace all "adata.data()[0][columnDefs[j].name];" with inputValue

I recently tried using AltEditor. It's great, but i cannot disable/hide a specific input element that was shown in AltEditor modal unless i specified the field type to "readonly"/"hidden". I wanted that one element to be disabled or hidden but also able to specify its type as "text" or "number" like this:

<input type="number" hidden>

or

<input type="text" readonly>

Is there a possible way to do this?

Hi, In the edit dialog, even though its fetching the correct rowdata, the dropdownlist is showing the first option instead
d of the selected option. PLease help. Thank U in advance

how do I validate and handle messages coming from php, I find it safer

For example, if in case of an error the message returns no success or error and will be displayed on the screen!

I am able to register, editing by php file, but I need to do some validations in my file, if there is an error I want to display on the screen

translated by google translator

Hi,

i need some help. :) Datatables didn't find DT_RowId in my table.

My Datatable works in server-side mode. The syntax of my received JSON(array) is:
[["3","[email protected]"],["6","[email protected]"]

Thereby columns:[{...,data: "DT_RowId",...}] can be found, did i need a JSON (object) like
[{"DT_RowId":"3", "Email":"[email protected]"}] ?

Greetings
Patrick

Hi,

I got problem after trying to send insert data into my php using ajax example. My data successfully inserted into database. But I got error in console:

VM2662:1 Uncaught SyntaxError: Unexpected token s in JSON at position 0
    at JSON.parse (<anonymous>)
    at altEditor._editRowCallback (dataTables.altEditor.free.js:611)
    at Object.success (dataTables.altEditor.free.js:285)

What I want is just right after data succesfully inserted, it's show result in php via console or alert.

            editorOnChange: function (event, altEditor) {
                console.log(event, altEditor);
                var curEntityNameNO = $(event.currentTarget).val();
                var lookuptempNO = {};
                var conditiontempNO = {};
                lookuptempNO = getLookupAttributes(curEntityNameNO);
                conditiontempNO = getConditionAttributes(curEntityNameNO);
                (JSON.stringify(lookuptempNO));
                $(altEditor.modal_selector).find("#alteditor-row-3").show();
                var temp1 = $(altEditor.modal_selector).find('#3');
                altEditor.reloadOptions(temp1, lookuptempNO);

$(altEditor.modal_selector).find("#alteditor-row-4").hide();

Just like editoronChange, I would like to hide certain rows based on the datatable cell value when the datatable is loaded.
Would anybody please suggest a solution for it??

Hello and first thanks for your work!
I'm trying to use the delete button for selected rows in my datatables.
I've got no problem to make it appears with my other buttons.
When i select a row and click on the delete button, the modal window appears but not with all my column titles, it's missing the first one. So i've changed on your code that line in the _openDeleteModal function.
//Adding attribute IDs and values to object for( var i = 1; i < dt.context[0].aoColumns.length; i++ )
to that
//Adding attribute IDs and values to object for( var i = 0; i < dt.context[0].aoColumns.length; i++ )
and now i've got all my titles in the modal window but i've got no data! There are all written to 'undefined'.
It seems it can't get the data from the object. I've tried to look into that object
dt.context[0].aoColumns[i].data
where you try to get the data but when i "console.log" dt.context[0].aoColumns[j] i can't see any data inside.
Here's a sample if it can help you to explain where is my data
Object {idx: 3, aDataSort: Array(1), asSorting: Array(2), bSearchable: true, bSortable: true…} aDataSort:Array(1) asSorting:Array(2) bSearchable:true bSortable:true bVisible:true fnCreatedCell:null fnGetData:function (a,b,c) fnSetData:function (a,b,c) iDataSort:-1 idx:3 mData:3 mRender:null nTf:th.search nTh:th.sorting sCellType:"td" sClass:"" sContentPadding:"" sDefaultContent:null sName:"" sSortDataType:"std" sSortingClass:"sorting" sSortingClassJUI:"" sTitle:"Action" sType:"html" sWidth:"201px" sWidthOrig:null _bAttrSrc:false _hungarianMap:Object _sManualType:null _setter:null __proto__:Object

Thanks in advance for your future answer.

The dt param should reference to the datatable, however, currently it is reference to altEditor object.

onAddRow: function(dt, rowdata, success, error) {
	console.log(dt);
},

altEditor {c: {…}, s: {…}, dom: {…}, onAddRow: ƒ, onEditRow: ƒ, …}

(This issue may have been briefly mentioned in the to-do)

Editing multiple datatables seems to faulty since the onEditRow callback occurs for every datatable in the DOM while it should only be called for the selected element. While the selected row is still updated, other entities are also overwritten unless additional custom validation is added.

Following error is raised for the datatables that unintentionally call onEditRow:

Uncaught TypeError: Cannot set property '_aData' of undefined
at _Api. (jquery.dataTables.js:8030)
at _Api.data (jquery.dataTables.js:7105)
at altEditor._editRowCallback (dataTables.altEditor.free.js:699)
at Object.success (dataTables.altEditor.free.js:393)
at fire (jquery-1.12.4.js:3232)
at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
at done (jquery-1.12.4.js:9840)
at XMLHttpRequest.callback (jquery-1.12.4.js:10311)

Hi! How to handle the events of edit, add, and delete? I need to make some API calls when each button is clicked like "PUT", "POST", and "DELETE" respectively. Can you help me where to add the code for those event handling? I have tried something like as follows but it didn't work. "editRowBtn" is the ID of Submit button in edit modal.

$('#editRowBtn').click(function(e){
$.ajax({
url: "api3.php",
dataType: "json",
type:"POST",
data: {
appType:$('#APP_TYPE').val(),
capacity:$('#CAP').val(),
mesRate:$('#MEPS_RATE').val(),
capUnit:"hpower",
deflt:$('#DEFAULT').val(),
ref:$('#REF').val(),
calBase:$('#CAL_BASE').val(),

			type:"baselineData"
		},
		error: function(jqxhr,textStatus,errorThrown){
			
			alert('Error retrieving informations!...');
			console.log (jqxhr.status);
			console.log (textStatus);
			console.log (errorThrown);
		},
	    beforeSend: function(){
			
			//$('#gifImg').html('loading');

		},
		success: function(baselineObj){
			console.log("edit success!");
			
		}//success
		});//ajax
		
	});// function 

When I try to edit a row I get a warning about request uknown parameters

I close the warning and the success alert appears under the form, but the data is inserted incorrectly

When I click on refresh the edited row appears now correctly

This is the datatable data https://api.myjson.com/bins/19art7

This is the response of the edited row https://api.myjson.com/bins/107agj

This is my datatable conf: https://privatebin.net/?c12c9dbd5ca4f314#s9CMhq6kBfHW5ADkoq3YS43dq4BiYtYhZR+TOK+r6qk=

What am I doing wrong?

When using visible: false in a columDef, the Colum Header text is hidden, but not the value in the modals.

The example 04_more shows this error in the ID field.
In the modals for Add, Edit and Delete, the text DT_RowId is hidden, but the corresponding value/input is shown.