[Derek BroughtonParticipant]

I know this is an old post, but since I’m looking for the same information, I thought I’d add my understanding of Peter’s response.

From his example, if you’d used:

var cellclass = function (row, columnfield, value) {
                return columnfield+'-'+row;
            }

you will get the classnames UnitsInStock#0 to UnitsInStock#9 added on all of those cells, then you can have Selenium select those specific classes. Getting Row1Column2 is a little more complicated, but it’s just a lookup of the name properties of source.datafields[]

[Derek BroughtonParticipant]

Never mind… your fiddle at http://jsfiddle.net/jqwidgets/skzmE/ (using the begincelledit method) demonstrated it was possible, and in the javascript console, I can set the focus where I want it, so I must have something else interfering.

[Derek BroughtonParticipant]

If I hard-code the select list, I can put it before the <jqx-grid>, but it really doesn’t help as there doesn’t seem to be a way to get the jqxDropDownList defined before the grid is instantiated, which seems to be why I must have both the init-editor and cells-renderer callbacks defined.

What I think I really need is some callback that’s invoked before rendering begins on the grid, and I don’t see such an option.

[Derek BroughtonParticipant]

jqxlistbox and jqxdropdownlist are the last two scripts referenced in the code I originally posted. There are no error messages.

I have a working dropdownlist, I’m just trying to find a way to actually do this with the tag helper, and not use the cellsrenderer callback that you say I don’t need.

Now, it’s possible that the real issue is that I can’t manage to define my eventCodes
<select id="EventCodes" style="display:none" class="form-control" asp-items="Model.Events"></select>
–which I use to create the jqxDropDownList instance–before the jqxGrid. The moment I place that tag before the <jqx-grid> tag, the grid’s source adapter gets created with a missing field value (var source = { id: 'EventId', dataFields: [ { name: 'EventId', ...}], dataType: 'array', localData: [{ 'EventId': ... 'Tow': '', 'EventType': }, { 'EventId': ...) [Note, there’s no value for EventType; Tow and EventType are object references in the model. I have no use for them here, but getting them out of the model would be more trouble than it’s worth. It’s a bug in the tag helper, because it should always provide some value for each field].

I should try hard-coding my EventCodes array, so that it has no relationship to the model, and defining it before the grid.

[Derek BroughtonParticipant]

Actually, I was wrong. The code still isn’t right with the null; statement added, it’s just syntactically correct and can be made to work by defining a function nul() in my script! Even if the intention is that the argument should just be the name of a function to call (which is odd, since all the column helpers use anonymous functions), it’s truncating the text you give it.

[Derek BroughtonParticipant]

As you can see, I already have create-editor in the script. As I have it currently implemented, I have the init-editor and cells-renderer defined using the tag helper. The problem is that I can’t find a way to create a working drop-down list entirely using the tag helper, or even one that has the column defined correctly, so I have to do some really ugly hacking in the script. It’s not as ugly as the script above, but it still can’t be right. And you said I shouldn’t need cells-renderer, so how do I get around it?

<div class="container">
    <form asp-action="Edit">
        @{
            var towEvent = Model.Tow.DataEntryEvent.FirstOrDefault();
            if (towEvent == null)
            {
                towEvent = new uk.ac.sahfos.cpr.console.web.Models.DataEntryEvent();
            }
        }
        <div class="row">
            <div class="col-md-12">
                <jqx-grid alt-rows="true"
                          editable="true"
                          source-id-for="@(towEvent.EventId)"
                          selection-mode="singlerow"
                          theme="bootstrap"
                          edit="@Url.Action("Edit", "TowEvent")"
                          auto-height="true"
                          show-status-bar="true"
                          source="Model.Tow.DataEntryEvent"
                          id="jqxgrid">
                    <jqx-grid-columns>
                        <jqx-grid-column datafield-for="@(towEvent.EventDate)"
                                         column-type="datetimeinput"
                                         width="150"
                                         create-editor="function(row, cellvalue, editor){editor.jqxDateTimeInput({showTimeButton: true});}"
                                         cells-format="yyyy-MM-dd HH:mm" text="Date / Time"></jqx-grid-column>
                        <jqx-grid-column datafield-for="@(towEvent.EventCode)"
                                         display-field="Event_Type"
                                         column-type="dropdownlist"
                                         init-editor="function(row_ix, value, editor){
                                           // value is ALWAYS blank coming in...
                                           value = adapter.records[row_ix].EventCode;
                                           editor.jqxDropDownList('selectItem',value);
                                         }"
                                         cells-renderer="function (row_ix, columnfield, value, defaulthtml, columnproperties, row){
                                           value = row.EventCode;

                                           var codes = $('select#EventCodes,select#EventCodes_jqxDropDownList');
                                           codes.val(value)
                                           var retval = codes.find(':selected').text();
                                           return $(defaulthtml).text(retval)[0].outerHTML;
                                         }"
                                         text="Type"></jqx-grid-column>
                        <jqx-grid-column datafield-for="@(towEvent.Comments)"></jqx-grid-column>
                    </jqx-grid-columns>
                </jqx-grid>
                <select id="EventCodes" style="display:none" class="form-control" asp-items="Model.Events"></select>
            </div>
@section Scripts {
<script>
jQuery(function ($) {
    // fix the dropdownlist 
    var eventCodes = $("#EventCodes").jqxDropDownList({ autoBind: true }).jqxDropDownList('source');
    var fields = adapter._source.datafields;
    var evtcode = fields.find(function (e) { return e.name == 'EventCode' });
    evtcode.name = 'Event_Type';
    evtcode.type = '';
    evtcode.value = 'EventCode';
    evtcode.values = { source: eventCodes, value: 'value', name: 'label' };
    var evttype = grid.jqxGrid('getcolumn', 'EventCode');
    evttype.datafield = 'EventCode';
    evttype.createeditor = function (row, value, editor) {
        editor.jqxdropdownlist({ source: eventCodes, displaymember: 'label', valuemember: 'value' });
    };
}
</script>
}

[Derek BroughtonParticipant]

Sorry, I never saw this response because your forums make no attempt to inform a user when there’s a response to their posts… and I had a workable, though complicated, solution.

What I’m trying to do is to make the “EventCode” column use a dropdown list, populated from the contents of the <select id="EventCodes"> tag, which was itself populated from the Model (so I’m always open to a simpler way to use it, too):
<select id="EventCodes" style="display:none" class="form-control" asp-items="Model.Events"></select>

I still see no solution that doesn’t involve the cells-renderer callback. If I omit the create-editor, init-editor, and cells-renderer callbacks, the grid initially displays with the cell showing the display value of the EventCode, but it’s not an editable dropdown. If I omit cells-renderer it’s a dropdown, but the default value is never set.

[Derek BroughtonParticipant]

Well, that’s what I said So, there’s no way to actually retrieve the current displayed row index.

Why deprecate a perfectly useful API in favor of using an awkward loop?

[Derek BroughtonParticipant]

Adding

                             init-editor="function(row_ix, value, editor){
                                value = $('#jqxgrid').jqxGrid('source').records[row_ix].EventCode;
                                editor.jqxDropDownList('selectItem',value);
                             }"

to the column definition fixes the initialization of the dropdownlist (the problem seems to be that value is always null when the editor is initialized).

Adding

                             cells-renderer="function (row_ix, columnfield, value, defaulthtml, columnproperties, row){ 
                                value = row.EventCode;
                                var codes = $('select#EventCodes,select#EventCodes_jqxDropDownList');
                                codes.val(value)
                                var retval = codes.find(':selected').text();
                                return $(defaulthtml).text(retval)[0].outerHTML;
                             }"

fixes the cell rendering, though it’s awfully circuitous, and I needed two different selectors because the renderer gets called both before and after the jqxdropdownlist gets built on the select list!

[Derek BroughtonParticipant]

Actually, it is.

<jqx-grid-column datafield-for="@(...)" 
                             column-type="date" 
                             create-editor="function(row, cellvalue, editor){
                                $(editor).prop('type', 'datetime-local');
                             }"
                             cells-format="yyyy-MM-dd HH:mm" ></jqx-grid-column>

[Derek BroughtonParticipant]

But how? I haven’t found a single one of your examples that shows an updateRow callback actually doing anything (they just contain comments and then commit(true)), and I can’t work it out from your constructed code, because the debugger just dumps me into the middle of an unreadable string.

I need to be able to figure out what your updateRow() function is doing before I can figure out how to modify it.

[Derek BroughtonParticipant]

That’s not very helpful, since the construction of the updateRow callback is hidden (and minified) when generated from the TagHelper. Could you give me a clue?

[Derek BroughtonParticipant]

Peter, you may think it’s OK, but those of us who are new to the product don’t have a clue where these things are. Your API documentation is practically opaque! And I’m not the first to think so. It’s especially difficult since I’m working with the .Net Core Tag Helper, which doesn’t even make it entirely clear that <jqx-grid-column> translates to the columns property in the API, nor how to hyphenate tag attributes to map to the correct API properties.

Regardless, the documentation should NOT be pointing to jquery.global.js, since it’s not in your package, and it’s not easily available on the net, while globalize is not only easy to find… you’ve included it!

[Derek BroughtonParticipant]

Actually, I do see that info if I browse the source code of the page, but I can’t imagine what link I’d have to click on to make it visible!

Also, FYI, it says (even in the recently downloaded api examples) that the datetimeinput column-type requires jquery.global.js (a long-dead project!), while the examples for the jqxDateTimeInput show it using globalize.js

[Derek BroughtonParticipant]

FYI: I don’t see any of that information in http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

[Author]

Posts