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 - jowliwon

Pages: [1]
1
Help for ParamQuery Pro / Re: Nested grid with track and shared source?
« on: May 16, 2014, 09:49:30 pm »
Yes. Makes sens. Thank you.

2
Help for ParamQuery Pro / Re: Nested grid with track and shared source?
« on: May 16, 2014, 12:10:36 pm »
Thank you, but this only updates the dirty-state of the presentation of the data.
that's why I had the two lines

 $('#templateDataGrid').pqGrid("updateRow", { rowIndx: parseInt(masterIndexNr), row: { 'Name': rowDataMain.Name + ' ' } });
 $('#templateDataGrid').pqGrid("updateRow", { rowIndx: parseInt(masterIndexNr), row: { 'Name': rowDataMain.Name } });

In the code to make the data get marked valid for a commit regarding an update later on sent to the actual database.
Only way to solve this a local object with data?

3
Help for ParamQuery Pro / Re: Nested grid with track and shared source?
« on: May 15, 2014, 12:34:34 am »
Hi again have stripped down my current code a bit.  And this can replicate the problem with posting a update from the detail view.
Have "faked" the remote call by loading a .json file.

What you have to do to test this is, expand to a detail view of one of the rows. Do a change on it and press enter. It will now update the data, but the UI gets kind of messed up.


Code: [Select]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PQtest</title>
<link rel="stylesheet" href="pqgrid.dev.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4.custom.js"></script>
<script src="pqgrid.dev.js"></script>

<script>

$(document).ready(function () {

/////// Put this in a file named "template.json" in the same directiry ////////////
// [
// { "ID": 11, "Name": "Test 1", "Attributes": [{"ID": "txt11" }, {"ID": "txt12" } ,{"ID": "txt13" }] },
// { "ID": 22, "Name": "Test 2", "Attributes": [{"ID": "txt21" }, {"ID": "txt22" } ,{"ID": "txt33" }]  },
// { "ID": 33, "Name": "Test 3", "Attributes": [{"ID": "txt31" }, {"ID": "txt32" } ,{"ID": "txt33" }]  }
// ]


    var localTemplates = new Array;
            var newItemRowID = 0;

var colTemplateModel = [
{ title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable: false },
{ title: "DbID", width: 30, dataType: "integer", dataIndx: "ID", editable: false, hidden: true },
{ title: "Name", minWidth: 150, dataType: "string", resizable: true, dataIndx: "Name", editable: true }
];

var $grid = $("#templateDataGrid").pqGrid({
        width: 700,
        height: 400,
        dataModel: {
        dataType: "JSON",
            location: "remote",
            recIndx: "ID",
            url: "template.json",
            getData: function (response) {
                //console.log(response);
                return { data: response };
            } 
    },
        colModel: colTemplateModel,
        flexHeight: true,
        wrap: false,
        //flexWidth: true,
        selectionModel: {
            type: ''
        },
        scrollModel: {
            //autoFit: true
        },
        hoverMode: 'cell',
        editModel: {
            saveKey: $.ui.keyCode.ENTER
        },
        title: "Templates",
        track: true,
   
   
       
        toolbar: {
            items: [
                {
                    type: 'button', icon: 'ui-icon-minus', label: 'Apply', listeners: [
                        {
                            "click": function (evt, ui) {
                                var $grid = $(this).closest('.pq-grid');
                               // AcceptTemplateChanges($grid);
                            }
                        }
                    ]
                }         
           ]
        },

        detailModel: {
        cache: true,
            collapseIcon: "ui-icon-plus",
            expandIcon: "ui-icon-minus",
            init: function (ui) {
                var rowDataMain = ui.rowData,
                    templateID = rowDataMain["ID"],
                    rowIndxMain = ui.rowIndx,
                        uiMain = ui;

                localTemplates.push(rowDataMain);
                //console.log(ui);

                //Attributes
                var colAttribModel = [
                    { title: "Attribute name", width: 150, dataType: "string", dataIndx: "ID" },
                    { title: "Default data", width: 200, dataType: "string", dataIndx: "Data" },
                    { title: "", editable: false, width: 63, sortable: false, render: function (ui) { return "<button type='button' class='delete_attrib'>Delete</button>"; } }
                ];
                var dataAttribModel = { data: rowDataMain["Attributes"], location: "local" };

                var $attribGrid = {
                    width: 500, height: 200,
                    dataModel: dataAttribModel,
                    colModel: colAttribModel,
                    flexHeight: true,
                    title: "Attributes",
                    scrollModel: {
                        autoFit: true,
                        lastColumn: "auto"
                    },
                    wrap: false,
                    showTop: true,
                    showBottom: false,
                    collapsible: false,
                    showTitle: false,
                    oddRowsHighlight: true,

                    hoverMode: 'cell',
                    editModel: {
                        saveKey: $.ui.keyCode.ENTER
                    },
                    track: true, //to turn on the track changes.

                    cellSave: function (event, ui) {
                        //console.log(event);
                        //console.log(rowDataMain);


                        //Used for setting local changes data.
                        var rowData = ui.rowData;
                        delete rowData.pq_rowselect;

                        var found = false;
                        if (localTemplates.length > 0) {
                            localTemplates.forEach(function (templ) {
                                if (templateID == templ["ID"]) {

                                    var data = { Data: "", ID: "" };

                                    if (ui.dataIndx == "ID") {
                                        data.ID = rowData.ID;
                                    }
                                    else if (ui.dataIndx == "Data") {
                                        data.Data = rowData.Data;
                                    }




                                    if (ui.rowIndx > templ.Attributes.length - 1) {
                                        templ.Attributes.push(data);
                                    }
                                    else {
                                        //console.log(templ.Attributes[ui.rowIndx]);
                                        //console.log(rowData);
                                        templ.Attributes[ui.rowIndx][rowData] = rowData[ui.rowIndx];
                                    }
                                }
                            });



                            // console.log(localTemplates);


                            //Used for updating data grid with latest data and med it marked for change
                            var detailIndx = $(this).closest('.pq-grid').parent().parent().attr("pq-row-indx");
                            var masterIndx = $('#templateDataGrid').find("tr.pq-detail-master[pq-row-indx=" + detailIndx + "]");
                            var masterIndexNr = $(masterIndx).attr('pq-row-indx');

                            $('#templateDataGrid').pqGrid("updateRow", { rowIndx: parseInt(masterIndexNr), row: { 'Name': rowDataMain.Name + ' ' } });
                            $('#templateDataGrid').pqGrid("updateRow", { rowIndx: parseInt(masterIndexNr), row: { 'Name': rowDataMain.Name } });
                            //console.log(uiMain);
                            //console.log(ui);

                        }

                    },

                    toolbar: {
                        items: [
                            {
                                type: 'button', icon: 'ui-icon-plus', label: 'Add attribute', listeners: [
                                  {
                                      "click": function (evt, ui) {
                                          var $grid = $(this).closest('.pq-grid');
                                          //append empty row at the end.                           
                                          var rowDataEmpty = {}; //empty row
                                          var rowIndx = $grid.pqGrid("addRow", { rowData: rowDataEmpty });
                                          $grid.pqGrid("goToPage", { rowIndx: rowIndx });
                                          $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
                                      }
                                  }
                                ]
                            }
                        ]
                    },
                    refresh: function () {
                        //debugger;
                        var $grid = $(this);
                        if (!$grid) {
                            return;
                        }
                        //delete button
                        $grid.find("button.delete_attrib").button({ icons: { primary: 'ui-icon-close' } })
                        .unbind("click")
                        .bind("click", function (evt) {
                            var $grid = $(this).closest('.pq-grid');
                            if (isEditing($grid)) {
                                return false;
                            }
                            var $tr = $(this).closest("tr"),
                                rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
                            DeleteDetailRow(rowIndx, $grid, localTemplates, templateID);
                        });

                        //rows which were in edit mode before refresh, put them in edit mode again.
                        var rows = $grid.pqGrid("getRowsByClass", { cls: 'pq-row-edit' });
                        if (rows.length > 0) {
                            var rowIndx = rows[0].rowIndx;
                            //editRow(rowIndx, $grid);
                        }
                    }
                };

                var $grid = $("<div></div>").pqGrid($attribGrid);
                return $grid;
            }
        }
       
       
    });

});

</script>

</head>
<body class="Test">

<div id="templateDataGrid" class="templateManagerGrid" style="overflow: hidden; " >

</div>

</body>
</html>

4
Help for ParamQuery Pro / Re: Nested grid with track and shared source?
« on: May 14, 2014, 01:46:20 am »
Thank you for the help. And it works, almost.. :]

This is the code I use to update the master-grid row by changing data in the nested detail grid and post it as a change.

                            var detailIndx = $(this).closest('.pq-grid').parent().parent().attr("pq-row-indx");
                            var masterIndx = $('#templateDataGrid').find("tr.pq-detail-master[pq-row-indx=" + detailIndx + "]");
                            var masterIndexNr = $(masterIndx).attr('pq-row-indx');

                            $('#templateDataGrid').pqGrid("updateRow", { rowIndx: parseInt(masterIndexNr), row: { 'Name': rowDataMain.Name + ' ' } });
                            $('#templateDataGrid').pqGrid("updateRow", { rowIndx: parseInt(masterIndexNr), row: { 'Name': rowDataMain.Name } });



 This is the way I do it because the "ui" in the init:function dose not contain a "rowIndx"

        detailModel: {
            cache: true,
            collapseIcon: "ui-icon-plus",
            expandIcon: "ui-icon-minus",
            init: function (ui) {
            .....
            .....

Anyways. It works regarding applying the change. However. The UI seems to get a bit messed up as it now. Shows two rows, as the row was changed. You cant expand the details anymore for this row. and I get this message in the console
"Uncaught Error: cannot call methods on pqScrollBar prior to initialization; attempted to call method 'option' "

As I said it works regarding the change. Because you can commit the change and do a

 $grid.pqGrid("refreshDataAndView");

and it looks like it should with the correct changes both in master rows and the nested detail rows.

Any ideas?

Thanks again for your help. :)

5
Help for ParamQuery Pro / Re: Nested grid with track and shared source?
« on: May 13, 2014, 12:34:34 am »
Ok, so you would do something like this to force an update?
Have this code put in the "deatil" area of a pqGrid.

1.     var detailIndx = $(this).closest('.pq-grid').parent().parent().attr("pq-row-indx");
2.     var masterIndx = $('#templateDataGrid').find("tr.pq-detail-master[pq-row-indx=" + detailIndx + "]");
4.     var masterIndxNr = $(masterIndx).attr('pq-row-indx');
5.     var tpRowData = $('#templateDataGrid').pqGrid('getRowData', { rowIndxPage: masterIndxNr });
6.     $('#templateDataGrid').pqGrid("updateRow", { rowIndx: masterIndxNr, row: tpRowData });

maybe?

As 'getRowData' should be able to collect the current data found in grid for repost?
Either way, getRow or getRowData dose not seem to return any data. only returns reference to the pqGrid designated html area or areas.
Missing something as row 5 and 6 dose not seem to coop right now?

6
Help for ParamQuery Pro / Re: Nested grid with track and shared source?
« on: May 10, 2014, 01:12:53 am »
What to thank you for the previous tips.
There is still one thing I wonder about and that is the last part regarding the isDirty part. Theres no problem in getting the UI marked for the dirty state, but the datasource is not effected by this as there are no changes in the "updateList". Is there a good way to get the data it self to be marked as changed not only visually? Or do I have to edit the updateList for that?

7
Help for ParamQuery Pro / Rows marked for delete?
« on: May 05, 2014, 11:38:26 pm »
Hi again.

As a grid can get tracked for changes width both "add", "update" and "delete". Is it possible to have a row marked for "delete" as it is a change waiting to happen when finally committed?
In other words, have a row still visible as it is set for delete until committed.

8
Help for ParamQuery Pro / Re: Nested grid with track and shared source?
« on: May 03, 2014, 02:24:51 am »
Ok, thanks for the tips.
Will check it out.

9
Help for ParamQuery Pro / Re: Nested grid with track and shared source?
« on: May 02, 2014, 03:52:23 am »
Ok.  Ill try to make a better example.

What I have or would like to have is a bunch of data that looks something that looks something like this.

class Template{
  String TemplateName;
  String[] TemplateAttributes;
}

List<Template> templateList;


"templateList" would be the data that can bee collected from the database by ajax.

So in a nested grid, "Name" would be in the main grid rows.
The "Attributes" be in the details rows.

As I have already tried out creating and modifying the main grid I know edited rows will be marked as dirty with the "track" option set to true.
The two things I wonder is if its possible to get the main grid rows set as dirty if a belonging TemplateAttributes located in the "details" grid would be changed? Might be kind of good for the user experience.
And second question as there would be several templates to be loaded and outputted in the nested grid. I wonder if it would be a shared array of data between the main-grid and the inner details grid. As they kind of stick together. Only showing different parts of the same classes. As it might be good being able to change main grid row with out losing added, changed or removed details.

Want to be able to edit a grid in both main and details grid, and when done post all the changes made in both parts hopefully with one post.

Hope that might be a better explanation. :)

10
Help for ParamQuery Pro / Nested grid with track and shared source?
« on: May 01, 2014, 03:39:21 pm »
Hi. I have a the follow question.

Is it possible to have a tracked nested grid with a shared data source between the main and detail grid?

So you could have like

Item-1
 -Atrib1-1
 -Atrib1-2

Item-2
 -Attrib2-1
 -Attrib2-2
 -Attrib2-3

And here by share the same data source as the attributes belong to the items?
And question two, is it also possible to some how track the "isDirty" state of the details and even get it marked on the item/parent?

Pages: [1]