options not working

montoyam

I have a parent/child DataTable. in the child's editor, there is a select box and the options populate no problem.

I have another DataTable/Editor where the editor is using the some controller as the previously mentioned child datatable. In this second one, the options are not populating.However, if I look at the ajax call results, I see the options listed.

sorry I can't post a link to the project as it is on an intranet.

controller:

    public class EquipmentOnLoan_LoanRateLinkController : ApiController
    {
        [Route("api/EquipmentOnLoan_LoanRateLink")]
        [HttpGet]
        [HttpPost]
        public IHttpActionResult EquipmentOnLoan_LoanRateLink()
        {
            var request = HttpContext.Current.Request;
            var settings = Properties.Settings.Default;
            var AsOfCookie = request.Cookies.Get("AsOfDate").Value;

            using (var db = new Database(settings.DbType, settings.DbConnection))
            {
                var response = new Editor(db, "EquipmentOnLoan_LoanRateLink", "EquipmentRateID")
                    .Field(new Field("EquipmentOnLoan_LoanRateLink.LoanResourceID")
                        .Validator(Validation.NotEmpty())
                        .Validator(Validation.Numeric())
                        .Options("udf_EquipmentOnLoan('" + AsOfCookie + "')", "LOANRESOURCEID", "LOANRESOURCEID")
                    )
                    .Field(new Field("EquipmentOnLoan_LoanRateLink.RateID")
                        .Validator(Validation.NotEmpty())
                        .Validator(Validation.Numeric())
                        .Options("EquipmentOnLoan_Rates", "LoanRateID", "RateName")
                    )
                    .Field(new Field("EquipmentOnLoan_LoanRateLink.EffectiveDate")
                        .Validator(Validation.NotEmpty())
                        .GetFormatter(Format.DateSqlToFormat("MM/dd/yyyy"))
                    )
                    .Field(new Field("EquipmentOnLoan_LoanRateLink.ExpireDate")
                        .SetFormatter(Format.NullEmpty())
                        .GetFormatter(Format.DateSqlToFormat("MM/dd/yyyy"))
                    )
                    .LeftJoin("udf_EquipmentOnLoan('" + AsOfCookie + "') as vw_EquipmentOnLoan", "vw_EquipmentOnLoan.LOANRESOURCEID", "=", "EquipmentOnLoan_LoanRateLink.LoanResourceID")
                        .Field(new Field("vw_EquipmentOnLoan.LOANID"))
                    .LeftJoin("EquipmentOnLoan_Rates", "EquipmentOnLoan_Rates.LoanRateID", "=", "EquipmentOnLoan_LoanRateLink.RateID")
                        .Field(new Field("EquipmentOnLoan_Rates.RateName"))
                    .Where(q =>
                    {
                        if (request.Form["LoanIDFilter"] != "0")
                        {
                            q.Where("EquipmentOnLoan_LoanRateLink.LoanResourceID", request.Form["LoanIDFilter"]);
                        }
                    })
                    .Process(request)
                    .Data();
                
                return Json(response);

            }
        }
    }

parent/child Editor where the RateID select is populating correctly:

    var EquipmentOnLoan_LoanRateLinkEditor;


    function createChild(row) {
        var rowData = row.data();
        var rowID = rowData.EquipmentOnLoan.LOANRESOURCEID;
        var startDate = rowData.EquipmentOnLoan.LoanStartDate;
        // This is the table we'll convert into a DataTable
        var table = $('<table class="display" style="width:40%" />');

        // Display it the child row
        row.child(table).show();

        // Editor definition for the child table
        EquipmentOnLoan_LoanRateLinkEditor = new $.fn.dataTable.Editor({
            ajax: {
                url: 'api/EquipmentOnLoan_LoanRateLink',
                data: function (d) {
                    d['LoanIDFilter'] = rowID;
                }
            },
            table: table,
            fields: [
                { label: "Rate:", name: "EquipmentOnLoan_LoanRateLink.LoanResourceID" , type:"readonly", def:rowID},
                {
                    label: "Rate:", name: "EquipmentOnLoan_LoanRateLink.RateID", type: "select",
                    placeholder: "<Select Rate>",
                    placeholderValue: 0,
                    placeholderDisabled: false
                },
                {
                    label: "Effective Date:"
                    , name: "EquipmentOnLoan_LoanRateLink.EffectiveDate"
                    , type: 'datetime'
                    , def: AsOfCookie // startDate
                    , format: "M/D/YYYY"
                },
                {
                    label: "Expire Date:"
                    , name: "EquipmentOnLoan_LoanRateLink.ExpireDate"
                    , type: 'datetime'
                    , format: "M/D/YYYY"
                }
            ]
        });

on the same page, I have the other dataTable where the select is not populated. Note that it is using the same ajax call as the working one

    var EquipmentOnLoan_LoanRateLinkEditorStandalone = new $.fn.dataTable.Editor({
        ajax: {
            url: 'api/EquipmentOnLoan_LoanRateLink',
            data: function (d) {

                d.LoanIDFilter = 0;
                /*
                var selected = EquipmentOnLoan_AlertsTable.row({ selected: true });

                if (selected.any()) {
                    console.log(selected.data().LOANRESOURCEID)
                    d.LoanIDFilter = selected.data().LOANRESOURCEID;
                }
            */
            }
        },
        table: EquipmentOnLoan_LoanRateLinkTableStandalone,
        fields: [
            {
                label: "id:", name: "EquipmentOnLoan_LoanRateLink.LoanResourceID", type: "readonly"
                //, def: rowID
            },
            {
                label: "Rate:", name: "EquipmentOnLoan_LoanRateLink.RateID", type: "select",
                placeholder: "<Select Rate>",
                placeholderValue: 0,
                placeholderDisabled: false
            },
            {
                label: "Effective Date:"
                , name: "EquipmentOnLoan_LoanRateLink.EffectiveDate"
                , type: 'datetime'
                //, def: startDate
                , format: "M/D/YYYY"
            },
            {
                label: "Expire Date:"
                , name: "EquipmentOnLoan_LoanRateLink.ExpireDate"
                , type: 'datetime'
                , format: "M/D/YYYY"
            }
        ]
    });

I wish I didn't have to create the 'standAlone' datatable/editor, but I guess because the first is dynamic, I can't get it to work without creating the second editor (which the standalone dataTable will be hidden). but first thing first, why is the select not working even though the ajax call seems to have the data in the options parameter correctly?

I have another page in this project where I am trying to "re-use" an Editor/Controller and it is behaving the same, where one of them is not populating the select list corrrectly.

allan

When is EquipmentOnLoan_LoanRateLinkEditorStandalone created relative to EquipmentOnLoan_LoanRateLinkTableStandalone? If there is a delay, then Editor might miss the xhr triggered by the DataTable, which would cause it to not see the options.

As an experiment to see if this is that case, try adding:

EquipmentOnLoan_LoanRateLinkTableStandalone.ajax.reload();

just after your EquipmentOnLoan_LoanRateLinkEditorStandalone editor initialisation (epic variable names ).

Do the options then appear?

Allan

montoyam

if I put it after the editor but before the dataTable I get this:
Uncaught TypeError: Cannot read property 'ajax' of undefined

If I put it at the very end of the document.ready, no error, but no options still.

montoyam

oh, I have another dataTable that is using that controller/editor as well and the options do not populate:

    var EquipmentOnLoan_AlertsTable = $('#EquipmentOnLoan_Alerts').DataTable({
        dom: 'Bfrtip',
        ajax: 'api/EquipmentOnLoan_Alerts',
        columns: [
            { data: "LOANRESOURCEID", title: "Loan ID" },
            { data: "LOANID", title: "Loan ID" },
            { data: "RESOURCENAME", title: "Resource Name" },
            { data: "DEPTNAME", title: "Department" },
            { data: "LoanStartDate", title: "Loan Start Date" },
            { data: "LoanEndDate", title: "Date Returned" },
            { data: "COMPONENTTYPENAME", title: "Equipment Type" },
            { data: "AlertType", title: "Issue" },
        ],
        select: { style: 'single' },
        lengthChange: false,
        buttons: [
            {
                extend: 'create', editor: EquipmentOnLoan_LoanRateLinkEditorStandalone, text: 'Assign Rate'
            }
        ]
    });

    EquipmentOnLoan_AlertsTable.on('select', function () {
        EquipmentOnLoan_LoanRateLinkTableStandalone.ajax.reload();

I look at the xhr after I select and I do see options listed in the return. They just are not on the editor drop-down.

montoyam

oh, one other note. someone had pointed out that I was not using the html table when defining the editorStandalone (line 17 a couple posts up there). instead i was using the variable. however, when I try changing line 17 to:

table: '#EquipmentOnLoan_LoanRateLinkTableStandalone',

I get: dataTables.editor.min.js:102 Uncaught TypeError: Cannot read property 'oFeatures' of undefined

allan

If I put it at the very end of the document.ready, no error, but no options still.

Yes, it would need to be after the DataTable is initialised, since it uses the DataTable variable. Sorry I didn't make that clear.

I suspect I'm going to need a link to a page showing this error to be able to help solve it, but let's try the debugger first to see if there is anything obvious there. Click the Upload button and then let me know what the debug code is.

Allan

montoyam

sorry, i had to work on another project for a couple days. So, I am back on this one now.

I have clicked the 'Upload' button

tangerine

... and then let me know what the debug code is.

montoyam

ah, thanks. I missed that step:

arokiv

montoyam

again, the options work when used in this parent/child editor: EquipmentOnLoan_LoanRateLinkEditor

But options do not work in the standalone editor, which uses the same controller.

allan

But options do not work in the standalone editor, which uses the same controller.

No they won't. The options in Editor get auto loaded from the options property in the Ajax JSON that the host DataTable has.

Therefore, if there is no host DataTable, the options can't get autoloaded.

Apologies - it hadn't clicked for me that you were using a standalone Editor and that was what the issue was before.

You have two ways in which you can define options for a standalone Editor:

1. Use the options property for the field,
2. Use field().update() to populate the options based an an array / object. That can be fetched by Ajax if you require.

Allan

montoyam

but i made a host dataTableStandalone as well (which eventually I will make hidden).Or do you mean it comes from the DataTable that has the Buttons that is calling the editor, which in this case is the Alerts datatable? code for both Alerts DataTable and StandAlone DataTable are posted above.

But, it sounds easier just to use the field().update() as you mentioned. But what is the syntax to use the results of an ajax code instead of hard coding the array?

montoyam

oh, and you mention to use the options property, but I did (line 23 of the first chuck of code that I posted).

montoyam

my posts above may be a little confusing as to what I have on my page:

1) DataTable (parent): EquipmentOnLoan
2) DataTable (child): EquipmentOnLoan_LoanRateLink which uses EquipmentOnLoan_LoanRateLinkController
with Editor: EquipmentOnLoan_LoanRateLinkEditor which uses EquipmentOnLoan_LoanRateLinkController
**** (the RateID options DO work in this Editor) ****

---

(this will be hidden, I just created it because I am thinking the child above does not get created until you click on the parent row)
3) DataTable: EquipmentOnLoanRateLinkTableStandalone which ALSO uses EquipmentOnLoan_LoanRateLinkController
with Editor EquipmentOnLoan_LoanRateLinkEditorStandalone which ALSO uses EquipmentOnLoan_LoanRateLinkController
**** (the RateID options does NOT work in this Editor) ****

---

4) DataTable: Alerts
has a create button which calls EquipmentOnLoan_LoanRateLinkEditorStandalone mentioned above
**** (the RateID options does NOT work in this Editor) ****

---

I hope this helps.

allan

You are right - I misunderstood your team "standalone". In Editor's lexicon that mean that it is used without a DataTable.

I think realistically I'm going to need a link to a page showing the error to fully get an handle on this one please.

But, it sounds easier just to use the field().update() as you mentioned. But what is the syntax to use the results of an ajax code instead of hard coding the array?

$.getJSON('/url', {}, function (json) {
  editor.field('myField').update(json);
});

where json is an array of objects which contain label / value properties.

Thanks,
Allan

montoyam

was the information sent via the debugger of any assistance?

allan

Unfortunately no, in this case it doesn't provide enough information, since it only shows the Ajax that was loaded.

Actually, loading it now it is 404 so it must have timed out (although I thought I had a month delay on that...).

Allan

montoyam

so here is my final code since i couldn't get the options to show correctly:

    EquipmentOnLoan_LoanRateLinkEditorStandalone.on('opened', function (e, node, data, items, type) {
        $.getJSON('api/EquipmentOnLoan_Rates', {}, function (json) {
            var allItems = [];
            $.each(json.data, function (i, v) {
                var item = {};
                item.value = v.EquipmentOnLoan_Rates.LoanRateID;
                item.label = v.EquipmentOnLoan_Rates.RateName + ' ($' + v.EquipmentOnLoan_Rates.MonthlyRate + ')';
                allItems.push(item);
            });
            EquipmentOnLoan_LoanRateLinkEditorStandalone.field('EquipmentOnLoan_LoanRateLink.RateID').update(allItems);
        });
    });

montoyam

but, i still am not clear, with two editors using the same controller/json data, why does the select box options work in one but not the other.

allan

I don't know why that would happen I'm afraid. I'd need a link to a page showing the issue to be able to diagnose it.

Allan

montoyam

unfortunately it is on an intranet so I am not able to provide a link. I suppose I will have to just live with the extra ajax call to manually populate the options.