Editor - New, Update - Checkbox group - C#

david.j.meyer2@boeing.com

Is there an example on how to use checkbox for editing. We have an existing application we are modernizing that requires a field displayed in a table as a concatenated string. For example the field would display in a table "Admin|Analyst|Super User" which means that user has three roles. (Admin, Analyst, Super User) In the dialog we would want this to be a dynamic list of checkbox's. Meaning we have a roles table and if we add a new entry the dialog would adjust too. Any suggestions or examples to get me through a simple case is appreciated.

colin

Hi @david.j.meyer2@boeing.com ,

This example here might help, it's doing a join on a table to show a list of options as checkboxes.

If not, could you give a bit more info, please, such as how would the client know the entire list of checkboxes: In your example, if a second user only has "Admin/Analyst", would you expect there to also be a "Super User" checkbox?

Cheers,

Colin

david.j.meyer2@boeing.com

I found my to this example too. Thanks for the help but it has evolved into a more specific issue. The checkboxs are not appearing in the dialog, the label for them is but no checkbox is present.

Below is a sample of the JSON message being sent on Load. The table loads correctly and the editor form appears with the data populated except for the checkbox roles. In the table view the checkbox roles are concatenated into "|" delimited string. That is also working correctly. The problem is specifically with the form, the label for the checkbox shows but no check boxes are present. I have also included the Editor and DataTables JQuery from the page. This is a asp.net MVC applicaiton.

        "data":
            [{
                "ROLES":[{"label":"ADMIN","id":"ADMIN"},{"label":"DESIGN","id":"DESIGN"},{"label":"QUALITY","id":"QUALITY"}],
                "EmpID":"22",
                "Name":"Person, Two",
                "EMAIL":"PERSON.TWO@COMPANY.COM",
                "ROLE_LIST":"ADMIN|DESIGN|QUALITY"},{"ROLES":[{"label":"INSPECTION","id":"INSPECTION"}],
                "EmpID":"11",
                "Name":"Person, One",
                "EMAIL":"USER1@GMAIL.COM"
            }],
        "recordsTotal":2,"recordsFiltered":2,"draw":1,
        "options":
            [{
                "ROLES[].id":
                    [{"label":"ANALYST","id":"ANALYST"},
                    {"label":"DESIGN","id":"DESIGN"},
                    {"label":"INSPECTION","id":"INSPECTION"},
                    {"label":"QUALITY","id":"QUALITY"},
                    {"label":"SUPER USER","id":"SUPER USER"},
                    {"label":"ADMIN","id":"ADMIN"
                    }]
            }]
    


var editor = new $.fn.dataTable.Editor({
                dom: "Bfrtip",
                ajax:
                {
                    create: {
                        type: 'POST',
                        url: '/App/Users/CreateContact'
                    },
                    edit: {
                        type: 'PUT',
                        url: '/App/Users/EditContact'
                    },
                    remove: {
                        type: 'DELETE',
                        url: '/App/Users/Remove'
                    }
                },
                idSrc: "EmpID",
                table: "#appUsers",
                fields: [{
                    type: "readonly",
                    label: "Emp ID:",
                    name: "EmpID"
                }, {
                    type: "readonly",
                    label: "Name:",
                    name: "Name"
                }, {
                    type: "readonly",
                    label: "Email:",
                    name: "EMAIL"
                }, 
                {
                    label: "Roles:",
                    name: "ROLES[].id",
                    type: "checkbox"
                }]
            });
            
    
            var drawingTable = $('#appUsers').DataTable({
                dom: "Bfrtip",
                ajax: "/App/Users/GetUsers",
                "processing": true,
                "columns": [
                    { "data": "EmpID" },
                    { "data": "Name" },
                    { "data": "EMAIL" },
                    { "data": "ROLES", render: "[|].label" }],
                select: true
                ,
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });

Any help you can give would be greatly appreciated.

Thanks

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The checkboxs are not appearing in the dialog, the label for them is but no checkbox is present.

That's really odd! It sounds like there might be a styling conflict as I can't think of any other reason why you would get a label but not a checkbox. If you right click and "Inspect" the label, can you see a checkbox near it in the DOM structure?

Allan

david.j.meyer2@boeing.com

I have inspected the DOM and the dive that has DTE_Field_InputControl with the attribute data-dte-e="input-control" contains an empty div. This is where i would expect to see the complete list of input checkbox tags.

allan

They should be a sibling to the label as can be seen in the example here.

Are you able to give me a link to the page so I can debug it? If not, it would be useful if you could copy / paste the HTML that is generated for the field as a whole so I can see that.

Is there anything that might be watching for a DOM mutation and removing the input elements?

Allan

david.j.meyer2@boeing.com

I resolved the problem. The issue i have is the editor does not allow us to use oracle stored procedures for our database interactions. If we use the editor in new development we could use the editor. What i mean is the editor as designed to perform create, read, update, and delete. However, we are modernizing interfaces to existing applications that the business rules are developed in stored procedures. This includes all CRUD operations. I was emulating the response from the editor object into the data tables response object to allow generation of the json response to be the same. Not fun but its working now that i have a better understanding of the response formats.

Thanks for the help.