Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    onRender callback?

    Was wondering if there is a way to access a callback onRender of an item, in my case a ListGrid?

    I've found that the callback executed when data is returned from a listGrid operation, ie click: function() {...}, that the sort operation does not properly sort. I'm unsure why, so I believe it would beneficial to apply the listGird.sort() operation post-rendering(and, I assume, re-render thereafter). Is that possible?

    To explain the user-case, the problem is that when Adding a new row (actually, INSERTING a row) provided that the server data is perfect, the .sort() method does not properly display. It seems to be leaving the new row just below the previous item.
    Here's some information that may help describing this... (Where "ID" is the primaryKey)

    Table is:
    Code:
    ID	aTitle		SomeStuff
    1	"a"		"stuff for a"
    2	"b"		"stuff for b"
    3	"c"		"stuff for c"
    So I then insert a row "Above selection" of ID 2, So i select 2, and "insert"(via Button click).
    In PHP, this means the NEW data is assigned an ID of 2, and ID 2 & 3 are shifted +1, making the following:
    Code:
    ID	aTitle		SomeStuff
    1	"a"		"stuff for a"
    2	"new"		"new stuff"
    3	"b"		"stuff for b"
    4	"c"		"stuff for c"
    It looks perfect here in theory. And server-side this is completely accurate. ListGrid.invalidateCache() proves this correct, so the data is right, but the Display is NOT.


    Without .sort() i get the following display:
    Code:
    ID	aTitle		SomeStuff
    1	"a"		"stuff for a"
    3	"b"		"stuff for b"
    4	"c"		"stuff for c"
    2	"new"		"new stuff"
    and with sort, i get the following:
    Code:
    ID	aTitle		SomeStuff
    1	"a"		"stuff for a"
    3	"b"		"stuff for b"
    2	"new"		"new stuff"
    4	"c"		"stuff for c"
    The PHP DSRequest provides a DSResponse including JUST
    Code:
    2	"new"	"new stuff"
    as is correct according to documentation for an ADD operation.


    So, therefore, I would like to be able to perform the sort operation POST rendering, such that I can diagnose why this is occurring.
    Assuming .invalidateCache() is a requirement here, I still need a Post-Render callback, because:
    .invalidateCache() executes after .selectSingleRecord() - meaning it (apparently) invalidates the cache, selects the row, and thereafter redraws. Thus -- nothing is selected.
    Even if the order is as follows in the DSResponse button-click callback:
    Code:
    grid.invalidateCache(); // woot it now displays right
    grid.selectSingleRecord(..id..); // Hmm... doesn't appear to select anything at all, regardless of supplied ID. Disabling .invCache shows this works fine, except when executing .invCache
    Is there a post-render callback option in SmartClient 8.1 LGPL?
    Last edited by meowmix; 14 Aug 2011, 09:36. Reason: updated title

    #2
    Unless you've modified all the rows to match the new server state, sort() isn't going to do what you want.

    If you *have* modified all the rows, call sort() right after doing that modification.

    Comment


      #3
      i did modify the rows & execute sort() thereafter, so that must mean the modification is improper if .sort() is working correctly.
      I'd like to mention now that the system I have in place now (described above), works for the very first insertion. .sort() properly shows everything, perfectly. But within that same session if a second item is inserted, though the server-data is right, the display glitches as described. I must be doing something poorly in javascript..


      Hmm perhaps it is that I did not shift the array-rows using javascript -- in array form.
      I mean, the primaryKeys are completely accurate(used as sort field), as described above. So it must mean that I did not switch ID:2 with ID:3 (in the example) in order of array[0] to array[4] (e.g. var temp=a[3];a[3]=a[2];a[2]=temp) - a manual sort, causing it to appear below even though .sort() is called after this update. But that would mean perhaps that my execution of sort is not properly configured for a 2nd insertion:
      Code:
      Grid.setSort([{property: "id",direction: "ascending"}]);

      uggh, im quite unsure & confused. But I'll definitely try that idea out & play with firebug JS breakpoints some more. There must be a reason, client-side.
      Thank you very much for your time.
      Last edited by meowmix; 11 Aug 2011, 20:06.

      Comment


        #4
        I am totally unsure why .sort() performed as described with the data I provided it. I did some quite disturbing permutations of the composite-primaryKey's using ascii conversions in JS, to ensure nothing was wrong(Since .sort(), naturally, places 1.1.10 after 1.1.1 where in my case it should be after 1.1.9), but whatever the issue was... I could not locate it in Firebug with breakpoints on the callback.
        It had something to do with the fact that it was .sort()'ed twice, though I can't imagine what it would be, since i was sorting by primaryKey "id" field.
        The data client-side(in firebug AND displayed in the listGrid) looked perfect everytime, until .sort() was called 2nd time and then the display-of said data became distorted (though said data was STILL accurate in the fields, it was not sorted properly.. very odd indeed).


        So, I wanted to share my custom sort method with everyone, since it has performed flawlessly for me. Surely this is not a preferred method to accomplish this, then again, maybe it is..?


        Here is a potential JSON datasource example using the described composite PK:
        Code:
        [
        	{
        		"id":"1",
        		"pid":"0",
        		"title":"Some Shtuff",
        		"descShort":"A short description",
        		"descLong":"A long description",
        		"comments":"some comments",
        		"children":[
        			{
        				"id":"1.1",
        				"pid":"1",
        				"title":"testing..",
        				"descShort":"A short description",
        				"descLong":"A long description",
        				"comments":"some comments",
        				"children":[
        					{ 
        						"id":"1.1.1",
        						"pid":"1.1",
        						"title":"Bleh",
        						"descShort":"A short description",
        						"descLong":"A long description",
        						"comments":"some comments"
        					},
        					{
        						"id":"1.1.2",
        						"pid":"1.1",
        						"title":"Bleeep",
        						"descShort":"A short description",
        						"descLong":"A long description",
        						"comments":"some comments"
        					},
        					{
        						"id":"1.1.3",
        						"pid":"1.1",
        						"title":"Blooop",
        						"descShort":"A short description",
        						"descLong":"A long description",
        						"comments":"some comments"
        					}
        				]
        			},
        			{
        				"id":"1.2",
        				"pid":"1",
        				"title":"Stuff",
        				"descShort":"test",
        				"descLong":"A long description",
        				"comments":"some comments"
        			}
        		]
        	},
        	{
        		"id":"2",
        		"pid":"0",
        		"title":"More Shtuff",
        		"descShort":"A short description",
        		"descLong":"A long description",
        		"comments":"some comments"
        	}
        ]

        And an "Insert Above" button defined w/ the following on click, in the client javascript( to support row insertion of a listGrid); where "insert above" means to set the new row ID equivalent to selected ID, and push the rest down the stack, using the above composte-PK format... Wow that's a mouthfull.
        Code:
        click: function() {
        	var record=myGrid.getSelectedRecord();
        	var s_id=record.id;
        	var s_pid=record.pid;
        	var idOrig=myGrid.getRecordIndex(record);
        	myGrid.addData({
        		title: "newTitle",
        		descShort: "newshort",
        		descLong: "newlong",
        		comments: "newcomments"
        	},function (dsResponse, data, dsRequest) {
        		
        		var at=idOrig+1; // start just after the selectionID
        		var p_rPrev=myGrid.data.localData[idOrig]; // used as post-insertion buffer, push the original item down initially
        			var rID=(""+p_rPrev.id).split("."); // the FULL composite record id
        			var iChild=(rID.length-1); // child(field)-id array index
        			var childID=(parseInt(rID[iChild],10)); // actual child(field)-id
        			rID[iChild]=""+(childID+1) // save child ID as 1up.
        			p_rPrev.id=rID.join(".");
        		var temp=0; // used for "switcheroo"
        		
        		while (temp=myGrid.data.localData[at]) { // ensure we have another record to process, and do so..
        			myGrid.data.localData[at]=p_rPrev; // insert previous item 1down.
        			
        			// if this row is the LAST one, it is therefore the newly added row.
        			// and so we must assign its values to the original[selected] item(data already pushed down).
        			if (!myGrid.data.localData[at+1]) {
        				myGrid.data.localData[idOrig]=temp;
        				break; // would therefore be pointless(and incorrect) to increment childID of temp, so break loop (though execution would have no effect if not broken).
        			}
        			// increment the temp ID client-side to match server-side
        			rID=(""+temp.id).split(".");iChild=(rID.length-1);
        			childID=(parseInt(rID[iChild],10));
        			rID[iChild]=""+(childID+1) // save child ID as 1up.
        			temp.id=rID.join(".");
        			p_rPrev=temp; // save the record for the next run.
        			at++;
        		}
        		
        		// myGrid.selectSingleRecord(myGrid.getRecord(idOrig));
        	},
        	{
        		params: {
        			"_sel_pid":s_pid,
        			"_sel_id":s_id,
        			"_to":"above"  // flag used by PHP to process the item properly, effectively performing the exact same as above, except in PHP arrays(and of course thereafter saved to JSON in datasource file/sql-database)
        		}
        	});
        }
        Works great for inserting above and below an item, slightly altered to support below insertion in a similar onClick func.
        Am open to feedback if anyone disagrees with my approach or has an opinion, but mostly wanted to share it and notify my issue as resolved.
        Last edited by meowmix; 14 Aug 2011, 09:35.

        Comment

        Working...
        X