selectbox not working in standalone mode, but ok in normal, bubble and inline mode

wouter

He guys,

I'm running into some unexpected behaviour. I'm using a mjoin for population a one to many dropdown. I'm using selectize but also tried chosen and select2. When i do so, it works great in the edit popup, bubble and inline. But when I use the same field inline the select boxes aren't populated. Since the server side and js is the same , i'm wondering if there might be some initialisation script not being triggered by the stand alone version. the only other option i can think of it that i'm doing something wrong in the way i use the data-editor-field but if i change it the selectbox isn't loaded at all so it seems to be ok...

What i've done is the following:

php:

    ->join(
        Mjoin::inst('projects', 'array')
            ->link('costs.id', 'costs_projects.costs_id')
            ->link('projects.id', 'costs_projects.projects_id')
            ->fields( 
                Field::inst('id')
                    ->validator( 'Validate::required' )
                    ->options( 'projects', 'id', array('id','product','title') ),
                Field::inst('product'),
                Field::inst('title')
                )
            )

js field declaration:

        fields: [
            {   "label": "projects:",       "name": "projects[].id",        "type": "selectize",        "attr": { multiple: "true", size: "4" } },

html for the standalone page:

<dd class="canedit" data-editor-field="projects[].id">-</dd>

Any help would be very much appreciated!

thanks,
wouter

allan

Are you able to give me a link to the page showing the issue please?

Allan

Ali Adnan

I have same problem I am following "https://editor.datatables.net/examples/standalone/collection.html" example, I am using .Net WebApi, I am successfully populated the Data in Html Markup, but the Select List does not populated with left join tables.

This is my Controller Code

       [HttpGet]
       [HttpPost]
        public IHttpActionResult SubstationData(string id)
        {
            var request = HttpContext.Current.Request;
            string strDbType = "oracle";
            string strDbConnection = Connection.ConnectionString();

            using (var db = new Database(strDbType, strDbConnection))
            {

                var editor = new Editor(db, "asset_main_ss", "assetid")
                    .Model<AssetSSModel>()
                    .Field(new Field("asset_main_ss.assetid")
                        .Set(false)
                    )
                    .Field(new Field("asset_main_ss.no_of_cap_bank")
                        .Validator(Validation.Numeric())
                    )
                    .Field(new Field("asset_main_ss.gov_id")
                           .Options(new Options()
                            .Table("region")
                            .Value("region_code")
                            .Label("region_name")
                        )
                    )
                    .Field(new Field("asset_main_ss.dist_id")
                           .Options(new Options()
                            .Table("region_district")
                            .Value("district_code")
                            .Label("district_name")
                        )
                    )
                    .Field(new Field("asset_main_ss.objectid")
                           .Options(new Options()
                            .Table("asset_code_ss")
                            .Value("objectid")
                            .Label("objname")
                        )
                    )
                    .Field(new Field("asset_main_ss.crt_by"))
                    .LeftJoin("region", "region.region_code", "=", "asset_main_ss.gov_id")
                    .LeftJoin("region_district", "region_district.district_code", "=", "asset_main_ss.dist_id")
                    .LeftJoin("asset_code_ss", "asset_code_ss.objectid", "=", "asset_main_ss.objectid")
                    .Where("asset_main_ss.objectid",id);

                editor.Field("asset_main_ss.crt_by")
                    .Set(Field.SetType.Create);

                editor.PreCreate += (sender, e) =>
                    editor.Field("asset_main_ss.crt_by").SetValue(HttpContext.Current.Session["P_USERID"]);

                return Json(
                    editor.Process(request).Data()
                );
            }
        }

and Model

public class AssetSSModel
    {
        public class asset_main_ss
        {
            public int assetid { get; set; }
            public int objectid { get; set; }
            public string ss_type { get; set; }
            public string gov_id { get; set; }
            public string dist_id { get; set; }
            public int no_of_cap_bank { get; set; }
            public string capicity { get; set; }
            public string crt_by { get; set; }
        }

        public class asset_code_ss
        {
            public string objname { get; set; }
        }

        public class region
        {
            public string region_name { get; set; }
        }

        public class region_district
        {
            public string district_name { get; set; }
        }
    }

and html

function PopulateSubStation(data) {
            var id = data.DT_RowId;
            if($('#panels').length > 0)
                $('#panels').text('');

            $(
                '<div data-editor-id="' + id + '">' +
                '<div class="row"><div class="col-sm-12">'+
                    '<button class="create">New</button>' +
                    '<button class="edit" data-id="' + id + '">Edit</button>' +
                    '<button class="remove" data-id="' + id + '">Delete</button></div></div><br />' +
                        '<div class="col-sm-6"><dt>Governorate:</dt>' +
                        '<span class="form-control" data-editor-field="asset_main_ss.gov_id">' + data.region.region_name + '</span></div>' +
                        '<div class="col-sm-6"><dt>District:</dt>' +
                        '<span class="form-control" data-editor-field="asset_main_ss.dist_id">' + data.region_district.district_name + '</span></div><br />' +
                        '<div class="col-sm-6"><dt>No of Capacitor Bank:</dt>' +
                        '<span class="form-control" data-editor-field="asset_main_ss.no_of_cap_bank">' + data.asset_main_ss.no_of_cap_bank + '</span></div>' +
                        '<div class="col-sm-6"><dt>Capicity (MVR):</dt>' +
                        '<span class="form-control" data-editor-field="asset_main_ss.capicity">' + data.asset_main_ss.capicity + '</span></div><br />' +
                        '<div class="col-sm-6"><dt>S/S Type:</dt>' +
                        '<span class="form-control" data-editor-field="asset_main_ss.ss_type">' + data.asset_main_ss.ss_type + '</span></div>' +
                '</div>'
            ).appendTo('#panels');

            // New
            $('button.create').on('click', function () {
                SS_main_editor
                    .title('Create new record')
                    .buttons('Create')
                    .create();
            });

            // Edit
            $('#panels').on('click', 'button.edit', function () {
                SS_main_editor
                    .title('Edit record')
                    .buttons('Save changes')
                    .edit($(this).data('id'));
            });

            // Remove
            $('#panels').on('click', 'button.remove', function () {
                SS_main_editor
                    .title('Delete record')
                    .buttons('Delete')
                    .message('Are you sure you wish to delete this record?')
                    .remove($(this).data('id'));
            });
        }
        
       //SUBSTATION FORM
        function CreateSubStation(P_OBJID) {
            SS_main_editor = new $.fn.dataTable.Editor({
                ajax: SS_main_strURL,
                fields: [{
                    label: "Governorate:",
                    name: "asset_main_ss.gov_id",
                    type: "select",
                    placeholder: "Select a Region"
                }, {
                    label: "District:",
                    name: "asset_main_ss.dist_id",
                    type: "select",
                    placeholder: "Select a District"
                }, {
                    label: "No of Capacitor Bank:",
                    name: "asset_main_ss.no_of_cap_bank"
                }, {
                    label: "Capicity (MVR):",
                    name: "asset_main_ss.capicity"
                }, {
                    label: "S/S Type:",
                    name: "asset_main_ss.ss_type",
                    type: "select",
                    placeholder: "Select a S/S Type",
                    options: [
                    { label: 'Booster', value: 'BOOSTER' },
                    { label: 'Grid', value: 'GRID' },
                    { label: 'In-Door', value: 'INDOOR' },
                    { label: 'Out Door', value: 'OUTDOOR' }
                    ]
                }
                ]
            });

            // Create record - on create we insert a new panel
            SS_main_editor.on('postCreate', function (e, json) {
                PopulateSubStation(json.data[0]);
            });


            // Load the initial data and display in panels
            $.ajax({
                url: SS_main_strURL + "/" + P_OBJID,
                dataType: 'json',
                success: function (json) {
                    PopulateSubStation(json.data[0]);
                }
            });
        }
        
        //END SUBSTATION FORM

Please point me what I did wrong

allan

The options only automatically populate when using Editor with DataTables since that information is included in the Ajax response for the DataTables "get" of the data.

Since you are using a standalone Editor there is no Ajax fetch initiated by DataTables, thus there is no way for Editor to hook into it and automatically extract the options. You'd need to use the field().update() method of the select field type to be able to set the options in response to the Ajax data you are fetching.

Allan