Editor with checkboxes not working

asharma

This is my javascript code

<script>
    var editor;
    $(document).ready(function () {
        editor = new $.fn.dataTable.Editor({
            "ajax": {
                "url": "/LocationMaintenance/GetLocationEditor",
                "type": "POST",
                "dataType": "JSON"
            },
            "table": "#locationTable",
            "fields": [{
                "label": "Location Key:",
                "name": "LocationKey"
            }, {
                "label": "Location Type ID:",
                "name": "LocationTypeID"
            }, {
                "label": "For Count:",
                "name": "ForCount",
                "type": "checkbox",
                "separator": "|",
                "options": [
                    { "label": '', "value": 1 }
                ]
            }, {
                "label": "Used By BM:",
                "name": "UsedByBM",
                "type": "checkbox",
                "separator": "|",
                "options": [
                    { "label": '', "value": 1 }
                ]
            }
            ]
        });


        $('#locationTable').DataTable({
            fixedHeader:{
                headerOffset: $('.navbar').outerHeight()
            },
            language:
                {
                    sLengthMenu: "_MENU_",
                    processing: "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
                },
            processing: false,
            serverSide: true,

            ajax:
                {
                    url: "/LocationMaintenance/GetLocationEditor",
                    type: "POST",
                    dataType: "JSON"
                },
            deferRender: true,
            columns: [
                        { data: "LocationKey" },
                        { data: "LocationTypeID" },
                        {
                            data: "ForCount",
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return '<input type="checkbox" class="editor-ForCount">';
                                }
                                return data;
                            },
                            className: "center"
                        },
                        {
                            data: "UsedByBM",
                            render: function (data, type, row) {
                            if (type === 'display') {
                                return '<input type="checkbox" class="editor-UsedByBM">';
                            }
                            return data;
                        },
        className: "center" }
            ],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            /*buttons: [
           { extend: "create", editor: editor },
           { extend: "edit", editor: editor },
           { extend: "remove", editor: editor }
            ]*/
            rowCallback: function (row, data) {
                // Set the checked state of the checkbox in the table
                $('input.editor-ForCount', row).prop('checked', data.ForCount == 1);
                $('input.editor-UsedByBM', row).prop('checked', data.UsedByBM == 1);
            }
        });
        $('#locationTable').on('click', 'tbody td:not(:first-child)', function (e) {
            editor.inline(this,
                {
                    onBlur: 'submit'
                });
        });
        $('#locationTable').on('change', 'input.editor-ForCount', function () {
            editor
                .edit($(this).closest('tr'), false)
                .set('ForCount', $(this).prop('checked') ? 1 : 0)
                .submit();
        });
        $('#locationTable').on('change', 'input.editor-UsedByBM', function () {
            editor
                .edit($(this).closest('tr'), false)
                .set('UsedByBM', $(this).prop('checked') ? 1 : 0)
                .submit();
        });
    });


</script>

This is my server side code:

public ActionResult GetLocationEditor()
        {
            var ed = new Editor(new Database("sqlserver", "data source=192.168.9.6;initial catalog=PRWholesale;persist security info=True;user id=sa;password=sa123$;MultipleActiveResultSets=True;App=EntityFramework"), "wms.Location", "LocationID")
                .Model<Location>()
                .Field(new Field("LocationKey")
                    .Validator(Validation.NotEmpty())
                    )
                 .Field(new Field("LocationTypeID"))
                 .Field(new Field("ForCount")
                 .SetFormatter((val, data) => Convert.ToBoolean(val) == false  ? 0 : 1))
                 .Field(new Field("UsedByBM")
                 .SetFormatter((val, data) => Convert.ToBoolean(val) == false ? 0 : 1));
            DtResponse res = ed.Process(Request.Form).Data();
            return Json(res);
        }

when I am editing a value, I get this error "Could not load file or assembly 'AntiXssLibrary, Version=3.1.3524.16873, Culture=neutral, PublicKeyToken=d127efab8a9c114f' or one of its dependencies."

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

allan

Sounds like you need to install this Nuget. Editor uses AntiXSS for security protection.

Allan

asharma

I installed it and now that error is gone.
But now I am getting an error in the backend. Since in the table I have boolean values and not integer values like your example, it throws errors. I have two values that I need to represent as Checkboxes. So I receive the error as cannot convert to boolean. When I change it to string like your example. It says cannot parse into string. I dont't know what to do.

allan

What values are you submitting to the server? Can you show me the code and the exact error message please?

Allan