Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - qfinsoft

Pages: [1]
1
Thanks, that last bit helped!  Have it working nicely now as per your advice, other than the ability to cancel a check/uncheck via the row-level rollback.  Can you provide any advice there?

2
Unfortunately, it seems that type: 'checkbox' doesn't render checkboxes in the cell.  Rather, it just shows true or false.  Do I have to implement a custom editor to render a checkbox in the cell?

3
I've noticed that when introducing a checkbox column (using type=checkBoxSelection), setting editable: false on the colModel does not prevent the user from checking or unchecking the box in the cell.  Normally, setting editable: false on a column prevents the user from editing the value in that column without first going into edit mode (I am using row-level editing).  The purpose of this particular checkbox column simply editing a true/false value, and not intended to act as a selector for the entire row.  Any advice to prevent the user from changing the checked/unchecked state of the column value until the user enters edit mode on the row?

4
Help for ParamQuery Pro / Re: Custom Column Editor Help
« on: June 20, 2015, 03:20:14 am »
I was able to get in-line editing of JSON objects and arrays working nicely using Treema, by using the following approach for in-line editing of remote data (row based editing):

1) Display the treema-ized version of the cell data using the colModel's render function to build the treema object for that cell, but making the column editable = false so the user can't modify the data using Treema editor within the cell itself  (in-cell editing using Treema editor was very problematic to implement fully).  Also, during the render function, hide the '.treema-add-child' element and append a custom 'edit x' button to the treema object in the cell (but make it hidden as well).

2) When the user clicks the row's edit button, unhide the 'edit x' buttons that were created within the various column render functions.

3) When the user clicks on the 'edit x' button in a particular 'treema-ized' cell, run a function that dynamically creates a modal popup dialog, (re)building the treema object editor for that particular cell as you had done in the render function using the treema.build() method. 

4)  When the user accepts the popup dialog, save the values from the treema editor instance to the grid's dataModel's data as required, and set the cells to dirty (i.e. adding class 'pq-cell-dirty'), and then finally refreshView.

5)  On the row's update button click event, check validity of the row, but don't check for grid.isDirty (you shouldn't need to anyhow).  I wasn't able to figure out how to tell the grid that it is now dirty, but if you can, you may also check for it.  If you do, please let me know the way to set isDirty.
 
 :D

5
Help for ParamQuery Pro / Custom Column Editor Help
« on: June 18, 2015, 09:24:05 pm »
I'm currently trying to implement a custom editor for a few columns in my grid (the grid is using inline editing of remote data).  The columns in question hold array or object values.  I've been playing with Treema (http://codecombat.github.io/treema/), and I believe I am most of the way there to having it working nicely within the grid as a custom editor of json objects or arrays.   

Anyhow, with those details in mind, I need to modify a column's custom editor's return value to rowData.  A couple of issues I need help with resolving to get it 100% of the way there:

1)  When using a column editor's getData property (defined as a function), its return value gets put into the 'root' of rowData.  In the case of an object, returning something like
Code: [Select]
{ foo1: foo1val, foo2: foo2val } from getData ends up creating rowData.foo1 and rowData.foo2.  However, I'd like to actually have an object (for instance 'foos') with two properties (i.e. foo1 and foo2) end up in the root of rowData instead.  Is there a way to return an object to rowData that will allow this to happen?

2)  When implementing a column editor's getData function for more than one column in the grid, it appears that only the getData function of the last column that was edited actually gets fired when clicking the row's 'Update' button.  Shouldn't every column's editor.getData fire when a row's update is called?  (if such a function is defined for that column)  Or perhaps I'm not understanding how a column editor's getData is designed to function?  In actuality, I'd prefer to modify rowData values much earlier than getData currently fires.  It currently fires when the row's Update button is clicked, but would rather have this happen when finished column editing, such as during the editorEnd event.  However, I'm having difficulty accessing the column's old values AND new values in the editorEnd event.  The changes aren't returned via getChanges, and I'm not seeing them in the function's ui object either.   

3)  Number 2 could potentially be related to this, but at least initially seems to be a separate issue.  Upon editing a column's value using a custom editor, the cell's 'pq-cell-dirty' is not applied.  Is there a best practice for doing this for custom editors?  Should this be done in the editorEnd or cellBeforeSave method (for instance)?  In any case, I would need to be able to check the cell's previous value against its newVal to ensure it has in fact changed before making it dirty.  The first challenge at the moment is to ensure that ui.newVal is populated when cellBeforeSave event fires on a column with a custom editor.  Currently, it is undefined.

Please help!  I'm so close, yet so far.   



 

6
I currently have export to excel functionality working for the most part, except for one or two issues.

First, in the case of exporting a grid to excel, where a column's cell is rendered to display text different than it's value (in this case, displays the territory name rather than territory id), it exports the id rather than the rendered text.  Is this by design?  Is there a way to export what has been rendered in the cells, rather than its stored 'value'?  Keep in mind I need to keep column filtering working

Here is the colModel for the column I am referring to:

Code: [Select]
{
                    title: "Territories",
                    width: 85,
                    dataType: "string",
                    dataIndx: "territories",
                    editable: false,
                    render: function(ui) {
                        if (ui.rowData.territories !== undefined) {
                            var terrDisplay = "";

                            for (var i = 0, len = ui.cellData.length; i < len; i++) {
                                terrDisplay += territoryLookup[ui.cellData[i]];
                                if (i+1 < len) { terrDisplay += ","; }
                            }

                            return terrDisplay;
                        }
                    },
                    filter: {
                        type: 'select',
                        listeners: ['change'],
                        labelIndx: 'name',
                        valueIndx: '_id',
                        options: localstorage.territories,
                        prepend: {"": ""}
                    }
},

On a somewhat related note, cells in other columns (not necessarily the territories column above) with empty values are currently being exported with value 'undefined'.  Is there a simple way around this little quirk as well?

Thanks!

7
I'm currently trying to bind a column to a nested JSON object within rowData's data.  (this also happens to be a detail-level grid column, but I don't think that matters)

Here is the desired colModel declaration for this particular 'altitude' column (note dataIndx in particular):

Code: [Select]
{ title: "Altitude", dataType: "string", width: 60, editable: false, sortable: false, dataIndx: "data.altitude"}
The above code doesn't display any data in the column.  That said, I can get the column to render the data using the code below, but doing it this way doesn't seem to allow column level sorting to work etc., so I'd like for dataIndx alone to be able to populate the altitude column without resorting to using a render function.

Code: [Select]
{ title: "Altitude", dataType: "string", width: 60, editable: false,
     render: function(ui) {
          return ui.rowData.data.altitude;
     }
},

Any suggestions?

8
Sure did help.  Excellent!  Thanks for the demo! ;D

9
I'm a new user of pqGrid...so far so good!  I'm using inline editing and I do have a question regarding interdependent dropdowns (i.e. interdependent 'select' column editors).  For example, I have a 'country' column using a 'select' type editor containing a list of valid countries (i.e. "name").  Predictably, I would then like to have a 'region' column whose valid select options are dependent on the country that has been chosen.  Currently, I'm referencing an array of JSON countryRegion objects (example entries shown below) to populate the country select options, and hopefully the corresponding region dropdown options as well.

Code: [Select]
myJSNamespace.countryRegions = [
{name: "Canada", id:"CA", regions:"Alberta|British Columbia|Manitoba|New Brunswick|Newfoundland|Northwest Territories|Nova Scotia|Nunavut|Ontario|Prince Edward Island|Quebec|Saskatchewan|Yukon Territory"},
{name: "Virgin Islands, U.S.",id:"VI",regions:"St. Thomas|St. John|St. Croix"}


How would one best accomplish this desired functionality?  FYI, here are the correspoding colModel entries as they stand (with working country select editor, but no interdependent region select):

Code: [Select]
var colModel = [
{
                    title: "country",
                    width: 150,
                    dataType: "string",
                    dataIndx: "country",
                    editor: {
                        type: "select",
                        options: myJSNamespace.countryRegions,
                        mapIndices: {name: "country"},
                        labelIndx: "name",
                        valueIndx: "name"
                    }
 },
 {
                    title: "region",
                    width: 150,
                    dataType: "string",
                    dataIndx: "region"
 },
]

Pages: [1]