[jmaraisParticipant]

Thanks for the solution, it work perfect. Maybe you add your answer to your help file?

[jmaraisParticipant]

Of course you are right. My problem is that the grid is in an iframe and when scrolling down the iframe the toolbar and headers disappear. I will have to rethink how to mange the scrolling of the iframe.

[jmaraisParticipant]

Thank you! That was helpful.

It is the additional div with the width and height of 100% that does the trick.

[jmaraisParticipant]

Yes, I use it on a regular basis but it seems that you cannot set the background of the whole cell by using that. It sets the contents of the cell but not the background of the whole cell. You need to be able to set the background of the main div which renders the cell and it seems to me doing that is not possible.

[jmaraisParticipant]

OK, I used the concat statement in the mysql query to combine the name and surname into a single datafield, which resolves the problem in this specific instance but I do have more complex cases where I use the cellsrenderer function to produce the required outcome.

Is there a way of exporting the result of the cellsrenderer function or do I have to rake care of the outcome before I import them with the dataAdapter?

[jmaraisParticipant]

I am glad to hear that.

I looked at the list of added features in the blog but didn’t see it there, I see it is in the documentation of the grid. I also had the impression that it was not a high priority.

Anyway, that will be very helpful!

[jmaraisParticipant]

Maybe I should use overloading to get the desired result? I cannot see that it should violate the EULA? There is a number of default settings/shortcomings in the grid that is pretty problematic for me.

[jmaraisParticipant]

This is a feature that I required in many instances. Without it the presentation looks unprofessional and is in may case actually unusable, unless you make the row heights large enough to ensure it will be sufficient for the largest possible data, which will have its own consequences and it is not an acceptable solution.

I decided to see if I can find a work around and had some success. It displays the first page correctly but upon any adjustments, like scrolling to a new page or should you use a scrollbar, it fails. The reason for it is that I placed part of the work around in the ready callback but that is probably not the correct place. A more suitable place could resolve it, a callback function which is called each time changes are made, like changing the page size, or going to a new page.

I think the current work around will work for static grid displays, with no paging or scrolling. I am posting it below and will appreciate any ideas to improve it, especially where to put the grid updating part. I will appreciate Peter if you can give any input you may have.


var rows = [];
var heights = [];
var wraprenderer = function (row, datafield, value) {
var (needHeightAdjust) {
// Calculate the new height
// One possible way:
// Can put a string (or other content) inside of a
// with the correct attributes (size, font-weight, etc).
// You should then be able to use jQuery to get the width of the span.
// This will give you the size of your string in pixels.
// Use this to calculate the new height of the cell.
// Or use any method to get your desired height.
var height = newHeight;
rows.push(row); // record the row ids of any adjusted rows
heights.push(height);
// Ensure that the content is wrapped.
// This work in most browsers, although it is css3, they say it even works in ie 5.5!!!
// There are plenty of other suggestions on the net how to ensure wrapping.
// You have to set the width, i.e set it to the same size as cell itself, or adjust for pading, etc
return '

'+value+'

';
}
};
$("#jqxgrid").jqxGrid({
ready: function(){
var incHeight = 0;
var oriHeight = 25; // The current height of the rows, replace if different than default
for (var i=0; i<rows.length; i++) {
$('#row'+rows[i]+'jqxgrid').css("height",heights[i]);
incHeight = incHeight+(heights[i]-oriHeight);
}
var contentHeight = $('#contentjqxgrid').height()+incHeight;
var gridHeight = $('#jqxgrid').height()+incHeight;
var offset = $('#pager').position(); // if using paging
var pagerTop = offset.top+incHeight; // if using paging
var offset = $('#horizontalScrollBarjqxgrid').position(); // if applicable
var horizontalScrollBarTop = offset.top+incHeight; // if applicable
$('#contentjqxgrid').css("height", contentHeight);
$('#jqxgrid').css("height", gridHeight);
$('#pager').css("top", pagerTop); // if using paging
$('#horizontalScrollBarjqxgrid').css("top", horizontalScrollBarTop); // if applicable
// also the height of any vertical scrolbar needs adjusting
},
columns: [
{ text: 'Name',
datafield: 'data',
width: 120,
cellsrenderer: wraprenderer
}
]
});

[jmaraisParticipant]

OK, I believe that calling the “hide” method of the validator, together with the “hide” method of the window, is the appropriate way?

[jmaraisParticipant]

I believe that you do respond to feedback from your customers and therefore I just want to add my voice to it.

I believe that it is an important future to add to ensure that the grid provide a complete solution. Other points which was mentioned in other posts is the ability to grow a row to fit the content and to vertical align it, which I also believe is important, as well as the ability to set the height for an individual row.

The lack of some of these features can lead to the result looking less professional. Just my six pence!

[jmaraisParticipant]

I assume that at this stage you cannot use it inside a cell purely to display a rating?

[jmaraisParticipant]

What I meant, is that, say I have 8 tabs, each containing a grid and some other widgets. These grids have edit popups and other additional functionality, making the javascript files long and complex. Now, putting these long and complex code of each tab contents in one file makes it very long and difficult to maintain.

I looked at your theme roller’s code and seems that you initialise each tab’s content in an additional function. I tried that and it tells me that cannot call jqx for undefined in, for example

$var dataAdapter = new $.jqx.dataAdapter(source);

I assume in this case it is not understanding $ and that it can be rectified by ensuring all the necessary files and scripts are called.

I want to do the same but splitting the javascript for each tab into its own file to make it more easy to develop and maintain. I am still learning javascript and it seems to me that it is not the same type of thing that you have in php, i.e. include or include once.

I assume that I can continue on the same basis as your example above but I think that a more advance tab example would be beneficial because you do not want to load all tab content at once or every time you click on a tab and the state principle that you use in the theme roller is the right way (making this rather a tab issue).

[jmaraisParticipant]

By using:
initeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({
source: dataAdpter, // specified earlier
selectedIndex: row // or rather deriving the correct value as discussed in the dropdown list group
});

I was able to get the correct values displayed.

[jmaraisParticipant]

I found this helpful as well and I am glad that it could be included in the next version.

[jmaraisParticipant]

Thank you for the response and I did see in the documentation that you align them either left or right but the suggested example is centring them. I do have a question (sorry if it is a bit elementary) but I do have more and more rendering functions, how much overhead is these renderings putting on the rendering of the grid and the page and possible slowing it down?

[Author]

Posts