Forum Replies Created

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts

  • Derek Broughton
    Participant

    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[]

    • This reply was modified 4 years, 2 months ago by  Derek Broughton. Reason: Obviously, putting a # in a classname is a Bad Idea
    in reply to: Set focus WITHIN the grid Set focus WITHIN the grid #98711

    Derek Broughton
    Participant

    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 Broughton
    Participant

    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 Broughton
    Participant

    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.

    in reply to: Bug in tag helper Bug in tag helper #98608

    Derek Broughton
    Participant

    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 Broughton
    Participant

    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 Broughton
    Participant

    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.

    in reply to: Get Displayed Row index Get Displayed Row index #98382

    Derek Broughton
    Participant

    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 Broughton
    Participant

    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 Broughton
    Participant

    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 Broughton
    Participant

    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 Broughton
    Participant

    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 Broughton
    Participant

    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 Broughton
    Participant

    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 Broughton
    Participant
Viewing 15 posts - 1 through 15 (of 17 total)