Really Quick Question

matt_rumsey1212

Is it possible in the newest version to dynamically change the ajax URL of editor...

for example: editor.ajax.url("/my/url/?query=" + myQuery).load()

allan

I'm afraid not - no. You can change the DataTable data source URL, but changing the URL used by Editor via the API is not something that is currently available.

What is the use case for this? The reason it isn't available is that I couldn't think of any reason why it would be useful to be honest!

Allan

matt_rumsey1212

NOTE: The bottom comment shows the individual line that seems to be causing the problem; included the entire javascript for reference purposes or just if you are interested in how your hard work is being put to use :P.

I hindsight I may have gone about it the wrong way; its getting pretty complex to say the least... I'l try to explain and post my script.

So I have a page which when loaded displays 3 tables.

The first is a list of teams - Clicking on a team loads the second table which displays a list of members of said team (Works perfectly :)). Clicking on the team also opens a child row with a custom display controller for the editor (also works perfectly).
The third table is also animated to load at this point on the far right which displays a list of all agents (for adding members to the second table).

The second table - as mentioned above displays a list of team members and doesn't do a lot apart from display information. It does this by sending a query string back to the controller and then uses a where condition to show only the relevant agents.

The third table displays a complete list of all the agents. It only appears when a row is selected within the first table. It has a button with the action set to modify an editor fields value (the teams id) of selected rows in order to update the second table and display the updated members within it.

The problem occurs while I am trying to remove agents form the second table via a "Remove selected" button. I thought that this may be because I needed to set the ajax url to the same one as the datatable's one however in hindsight it may be because .val() is not updating the database when using: null, "NULL" or "" as entries.

var editor;

(function() {
   /*
    * Creates a custom display controller for CRUD operations
    */
    var Editor = $.fn.dataTable.Editor;
    Editor.display.details = $.extend(true, {}, Editor.models.displayController, {
        "init": function(editor) {
            return Editor.display.details;
        },

        "open": function(editor, append, callback) {
            var table = $(editor.s.table).DataTable();
            var row = editor.s.modifier;

            Editor.display.details.close(editor);

            table
                .row(row)
                .child(append, "editChild")
                .show();

            $(table.row(row).node()).addClass("shown");

            if (callback) {
                callback();
            }
        },

        "close": function(editor, callback) {
            var table = $(editor.s.table).DataTable();

            table.rows().every(function() {
                if (this.child.isShown()) {
                    this.child.hide();
                    $(this.node()).removeClass("shown");
                }
            });

            if (callback) {
                callback();
            }
        }
    });

    $(document).ready(function () {
        $("#AddWrapper").toggle();
//TEAM LIST EDITOR
       /*
        * Populates the Editor with fields (create, edit) for the team list.
        */
        editor = new $.fn.dataTable.Editor({
            ajax: "/NewTeam/TeamListTable",
            table: "#TeamList",
            display: "details",
            fields: [
                {
                    "label": "Team Name",
                    "name": "Team.Name"
                },
                {
                    "label": "Team Leader",
                    "name": "Team.TeamLeader_id",
                    "type": "select"
                },
                {
                    "label": "Active",
                    "name": "Team.IsActive",
                    "type": "checkbox",
                    "separator": "|",
                    "options":
                    [
                        {
                            label: "",
                            value: 1
                        }
                    ]
                }
            ]
        });

matt_rumsey1212

//TEAM MEMBERS EDITOR
       /*
        * Populates the Editor with fields neccessary for removing agents from a team CURRENTLY INCOMPLETE
        */
        var editorTwo = new $.fn.dataTable.Editor({
            ajax: "",
            table: "#TeamMembers",
            fields: [
                {
                    "label": "Team",
                    "name": "Agent.Team_id"
                }
            ]
        })

//ADD TEAM MEMBERS EDITOR
       /*
        * Populates the Editor with fields neccessary for adding agents to a team
        */
        var editorThree = new $.fn.dataTable.Editor({
            ajax: "/NewTeam/AddTeamMembersTable",
            table: "#AddTeamMembers",
            fields: [
                {
                    "label": "Team",
                    "name": "Agent.Team_id"
                }
            ]
        });

//TEAM LIST TABLE
       /*
        * Populates the Teams List table
        */
        var table = $("#TeamList").DataTable({
            ajax: "/NewTeam/TeamListTable",
            select: {
                style: "single"
            },
            paging: false,
            scrollY: "600px",
            scrollCollapse: true,
            autoWidth: false,
            stateSave: true,
            columns: [
                {
                    "data": "Team.Id",
                    "visible": false
                },
                {
                    "className": "TeamCell",
                    "data": "Team.Name",
                    "width": "400px"
                },
                {
                    "data": "Team.IsActive",
                    "render": function(data, type, row) {
                        if (type === "display") {
                            return "<input type=\"checkbox\" class=\"editor-active\">";
                        }
                        return data;
                    },
                    "className": "dt-body-center",
                    "visible": false
                }
            ]
        });

        /*
        * Function for deleting teams.
        */
        function deleteTeam(id, g) {
            $("#ConfirmationModal").modal("show");

            $("#PerformDelete").on("click", function(event) {
                $.post("/Agents/NewTeam/DeleteTeam/", { "TeamId": id },
                    function(response, responseText) {
                        if (response === "SUCCESS") {
                            $("#ConfirmationModal").modal("hide");
                            var modalSuccess = $("#ResultModal");
                            modalSuccess.find(".modal-title").text("Team Deleted");
                            modalSuccess.find(".modal-body").text("Team deleted sucessfully.");
                            $("#ResultModal").modal("show");
                            table.ajax.url("/NewTeam/TeamListTable").load();
                            $("#ResultModal").on("hidden.bs.modal", function() {
                                location.reload();
                            });
                        } else {
                            $("#ConfirmationModal").modal("hide");
                            var modalFail = $("#ResultModal");
                            modalFail.find(".modal-title").text("Error");
                            modalFail.find(".modal-body").text("This team can not be removed as agents are currently linked to it.");
                            $("#ResultModal").modal("show");
                            $("#ResultModal").on("hidden.bs.modal", function() {
                            location.reload();
                            });
                        }
                    });
            });
        }

       /*
        * Create Buttons for the 'Team List' table
        */
        var listButtons = new $.fn.dataTable.Buttons(table, [
            {
                 extend: "create", editor: editor
            }
        ]);
        table.buttons().container()
            .appendTo($(".col-sm-6:eq(0)", table.table().container()));


//TEAM MEMBERS TABLE
       /*
        * Populates the second (team members) table
        */
        var tableTwo = $("#TeamMembers").DataTable({
            ajax: "",
            scrollY: "650px",
            scrollCollapse: true,
            select: true,
            paging: false,
            autoWidth: false,
            stateSave: true,
            columns: [
                {
                    "data": null,
                    render: function(data, type, row) {
                        return data.Agent.Surname + ", " + data.Agent.Forename;
                    }
                },
                {
                    "data": "Agent.Organisation"
                },
                {
                    "data": "Campaign.Name"
                },
                {
                    "data": "Site.Name"
                }
            ]
        });


       /*
        * Function for removing an agent from a team. CURRENTLY DOESNT WORK (FIELD.SET MAY HELP!!!!)
        */
        function removeAgentsFromTeam(teamMembers) {
            //Generate A Confirmation Modal Dialog
            var modalConfirm = $("#ConfirmRemoveModal");
            modalConfirm.find(".modal-title").text("Confirm Removal");
            modalConfirm.find(".modal-body").text("You are about to remove " + teamMembers.length + " agents. Please confirm.");
            $("#ConfirmRemoveModal").modal("show");
            $("#RemoveMembers").on("click", function(event) {
                //$.post("/Agents/NewTeam/DeleteAgentFromTeam/", { "AgentIds": teamMembers },
                $.ajax({
                    type: "POST",
                    traditional: true,
                    url: "/Agents/NewTeam/DeleteAgentFromTeam/",
                    data: { "agentIds": teamMembers },
                    success: function(response, responseText) {
                        if (response === "SUCCESS") {
                            console.log("SUCCESS"); 
                        } else {
                            console.log("Error");
                        }
                    }
                });
            });
        }

       /*
        * Create Buttons for the 'Team Members' table
        */
        var membersButtons = new $.fn.dataTable.Buttons(tableTwo, [
            {
                text: "Remove Members",
                action: function(e, dt, node, config) {
                    editorThree.edit(dt.rows({ selected: true }).indexes(), false).val("Agent.Team_id", "").submit();
                },
                enabled: false
            }
        ]);
        tableTwo.buttons().container()
        .appendTo($(".col-sm-6:eq(0)", tableTwo.table().container()));

        /*
        * Enable/Disable confirm button based on selection within table
        */
        tableTwo.on("select", function () {
            var selectedRows = tableTwo.rows({ selected: true }).count();
            tableTwo.button(0).enable(selectedRows > 0);
        });

        tableTwo.on("deselect", function () {
            var selectedRows = tableTwo.rows({ selected: true }).count();
            if (selectedRows === 0) {
                tableTwo.button(0).disable(selectedRows === 0);
            }
        });

matt_rumsey1212

//ADD TEAM MEMBERS TABLE
       /*
        * Populates the Third (add team members) table
        */
        var tableThree = $("#AddTeamMembers").DataTable({
            ajax: "/NewTeam/AddTeamMembersTable",
            scrollY: "600px",
            scrollCollapse: false,
            select: true,
            paging: false,
            stateSave: true,
            columns: [
                {
                    "data": null,
                    render: function(data, type, row) {
                        return data.Agent.Surname + ", " + data.Agent.Forename;
                    }
                }
            ]
        });

       /*
        * Create Buttons for adding members
        */
        var addButtons = new $.fn.dataTable.Buttons(tableThree, [
            {
                text: "Confirm",
                action: function (e, dt, node, congig) {
                    var selectedTeam = table.row({
                        selected: true
                    }).data();
                    var selectedTeamId = selectedTeam.DT_RowId.replace("row_", "");
                    editorThree.edit(dt.rows({ selected: true }).indexes(), false).val("Agent.Team_id", selectedTeamId).submit();
                    tableTwo.ajax.reload().draw();
                    tableThree.rows().deselect();
                    tableTwo.ajax.reload().draw();
                    tableTwo.draw();
                },
                enabled: false
            }
        ]);
        tableThree.buttons().container()
        .appendTo($(".col-sm-6:eq(0)", tableThree.table().container()));

       /*
        * Enable/Disable confirm button based on selection within table
        */
        tableThree.on("select", function () {
            var selectedRows = tableThree.rows({ selected: true }).count();
            tableThree.button(0).enable(selectedRows > 0);
        });

        tableThree.on("deselect", function () {
            var selectedRows = tableThree.rows({ selected: true }).count();
            if(selectedRows === 0) {
                tableThree.button(0).disable(selectedRows === 0);
}
        });

//RELATED FUNCTIONS
        /*
        * Loads data in the second table (Team Members) when a team is selected within
        * the teams list
        */
        $("#TeamList tbody").on("click", "tr", function () {
            var selectedRows = table.rows({ selected: true }).count();
            if (selectedRows === 1) {
                var rowId = table.row(this).data().DT_RowId;
                var currentTeamId = rowId.replace("row_", "");
                tableTwo.ajax.url("/NewTeam/TeamMembersTable/?teamID=" + currentTeamId).load().draw();
                $("#AddWrapper").show(250).promise().done(function() {
                    tableThree.columns.adjust().draw();
                });
            }
            else if (selectedRows === 0) {
                tableTwo.button(0).disable();
                tableTwo.clear().draw();
                $("#AddWrapper").hide(250);
            }
        });

       

       /*
        * Shows and hides the extra details panel for each row
        */
        $("#TeamList").on("click", "td.TeamCell", function () {
            var tr = this.parentNode;

            if (table.row(tr).child.isShown()) {
                editor.close();
            }
            else {
                editor.edit(
                    tr,
                    "Edit row",
                    [
                    {
                        "className": "delete",
                        "label": "Delete Team",
                        "fn": function() {
                            var rowData = table.row({
                                selected: true
                            }).data();
                            var id = rowData.DT_RowId.replace("row_", "");
                            deleteTeam(id);
                        }
                        },
                        {
                            "label": "Update Team",
                            "fn": function() {
                                editor.submit();
                            }
                        }
                    ]);
            }
        });
    });
}(jQuery));

it is on this section that the problem occurs:

/*
        * Create Buttons for the 'Team Members' table
        */
        var membersButtons = new $.fn.dataTable.Buttons(tableTwo, [
            {
                text: "Remove Members",
                action: function(e, dt, node, config) {
                    editorThree.edit(dt.rows({ selected: true }).indexes(), false).val("Agent.Team_id", "").submit();
                },
                enabled: false
            }
        ]);
        tableTwo.buttons().container()
        .appendTo($(".col-sm-6:eq(0)", tableTwo.table().container()));

matt_rumsey1212

I dont expect you to read through all the above. This is the line giving me grief. Submitting a null value doesn't seem to be possible.

editorThree.edit(dt.rows({ selected: true }).indexes(), false).val("Agent.Team_id", "").submit();

editorThree.edit(dt.rows({ selected: true }).indexes(), false).val("Agent.Team_id", null).submit();

editorThree.edit(dt.rows({ selected: true }).indexes(), false).val("Agent.Team_id", "NULL").submit();

All three of the above have not worked so far.

PS; Congratulations! Saw your post on the forum.

allan

Submitting a null value doesn't seem to be possible.

It sort of depends :-). Editor submits HTTP parameters which is just plain strings without any type information. So the issue is that there is no way to immediately distinguish between an empty string or null, or alternatively the string 'null' and an actual null!

editorThree.edit(dt.rows({ selected: true }).indexes(), false).val("Agent.Team_id", "").submit();

This is the one I would suggest and have the server see the empty string and take what action is needed based on that (deleting rows, or are you just marking them as removed?).

Allan

p.s. Thanks :-)

matt_rumsey1212

Team_id is just a foreign key value so no deletion or removal required at all. Literally just need to change it to null then reload the updated data set.

matt_rumsey1212

Will try out your suggestion now :)

matt_rumsey1212

No luck on this solution unfortunately

editorThree.edit(dt.rows({ selected: true }).indexes(), false).val("Agent.Team_id", "").submit();

allan

What does happen when you try the above? It should submit Agent.Team_id with an empty string to the server-side for the selected rows. Does that happen? What does the server-side do with that information (i.e. what code is being used)? Any errors?

Allan

matt_rumsey1212

Aha; so further investigation into the chrome debugger shows this error:
"Conversion failed when converting from a character string to uniqueidentifier."

allan

Are you using the Editor .NET libraries on the server-side? If so, are you using 1.5.3 (if not, can you update). If you aren't using the Editor libraries, you'd need to debug whatever code is being used on the server-side.

Allan

matt_rumsey1212

Managed to get everything working :) so...

editorTwo.edit(dt.rows({ selected: true }).indexes(), false).val("Agent.Team_id", null).submit();

It appears I needed to use the following within the controller to solve this issue:

.SetFormatter(Format.NullEmpty())

Works like a charm now :).
The one final thing I need to solve is getting a 'null' option when selecting a team from an inline select box... Does there happen to be a built in way of achieving this?

Thankyou once again for your continued support and help throughout this process.

allan

Good to hear you got that working.

The one final thing I need to solve is getting a 'null' option when selecting a team from an inline select box... Does there happen to be a built in way of achieving this?

I'm afraid I don't quite understand. What do you mean by "getting a 'null' option"? You want to provide an null option?

Allan

matt_rumsey1212

So the dropdown for selecting a team (In the editor popup or inline) when editing an Agent or creating an Agent always defaults to having a team selected as opposed to, say, being blank and allowing no team to be selected upon creation of an Agent.

matt_rumsey1212

Found your response to a similar problem in this:

https://datatables.net/forums/discussion/31257/select-dropdown-in-add-form-populated-from-database-does-not-have-a-blank-option#Comment_84355

Shall follow the accepted answer if this is still the best way of doing such a thing? :)

allan

Yes, that's currently the way to do it. I'm thinking of adding a configuration option for it in Editor's built in select field type.

Allan

matt_rumsey1212

Awesome :), That would be a great addition!

matt_rumsey1212

May I ask what the C# equivalent of this would be please?

array_unshift(
    $data['options']['warehouse_subcategories.intWarehouseCategoryId'],
    [ "label" => "Select a value...", "value" => "" ]
);

allan

You can use:

List<T>.Insert(0, item);

to insert into a list in C#.

I'm not really much of a fan of this approach though, its messy. Let me look into what exactly will be required to add the option into the select field to add a placeholder and I'll try to include that in the next release (tomorrow) if all goes well.

Allan

matt_rumsey1212

Wasn't expecting that, awesome :)

allan

I've just committed this in and it will be in 1.5.4. I'm not certain I'll get it out today now, but it will be in the next couple of days. its a nice little feature this I think though :-)

To add a placeholder option you can simply use the placeholder option. Typically this won't be selectable, but there are cases when you might want that (which it sounds like you might) - that is enabled using the placeholderDisabled option - so you might use:

placeholder: 'Select an agent',
placeholderDisabled: false

Allan

matt_rumsey1212

That is amazing! Thanks so much for providing this as an option. Is everything we needed and more!

matt_rumsey1212

Is 1.5.4 live yet out of interest?

allan

No - sorry. For various reasons I wasn't able to get it out last week - it will be tomorrow (Tuesday 8th).

Allan

matt_rumsey1212

Placeholders for the select lists work perfectly dude! Thankyou :)

allan

Good to hear - thanks!