[MarcParticipant]

Hi Peter,

Thank you for this answer.

No problems. jqWidget is very powerful as it is, and has some very elegant and efficient design. This is the reason why I choosed it over other products aiming at similar goals.

As a jqWidget user, my contribution is to suggest enhancements when I see opportunities. What I can’t see is the level of impact it’d have on the current design. So “good idea but we can’t do it because impacts would be too big” is perfectly acceptable.

As far as I’m concerned, now I wrote some grids that works, with crud capabilities, dropdown lists, master-detail, etc., I’m starting to write a function that encapsulate the repetitive code, with a set of input parameters, in such a way that any grid in the app will be a mere call to this function, preceeded by input parms setup. This will replace for each grid a couple of pages of code by a few lines.

So that will take care of the dropdown list code – relative – complexity anyway.

Best regards.

Marc.

[MarcParticipant]

Hi,

I also noted this “return false” instruction when implementing a context menu.

Maybe wrongly, I thought it was standard HTML5 event..

BRgds…

[MarcParticipant]

Hi,

In fact, it does not work exactly as expected. In this fiddle, which doesn’t quite work, the height is computed like this :

function gridHeight() {
  return columnsHeight + pageSize * rowsHeight + pagerHeight;
};

A minor fix is required, as demonstrated by this almost identical fiddle. The fix is :

function gridHeight() {
  return columnsHeight + pageSize * rowsHeight + pagerHeight + 4;
};

Any idea why ?

Anyway, the code does the trick. It even works when the page size is changed.
Except, to be quite complete, that the offset depends on the theme. For the “Orange” theme, for example, the required offset (the minimal value that works) is 2, not 4. Has to do with the borders size, maybe ? Weird…

Best regards.

[MarcParticipant]

Hi Pete,

Thank you for the answer. As said in my initial post :

Certainly, my code can compute <header height> + n x <row height> + <pager height>, since my grid is simple (eg. no variable height rows, no rows details…), but it would obviously be more efficient to reuse the value computed by the grid – don’t recode what already exists.

and since the grid itself has to compute its own total height, I was wondering if I could get the grid’s computed value, rather than re-computing it myself.

You confirm that it is not possible, thank you. Even if not necessarily my prefered one, it’s an answer anyway. “Dura lex sed lex” (Law is tough, but that’s law)

Best regards

[MarcParticipant]

Hi Peter,

Sure, I have no problem with :

$('#myGrid').jqxGrid({ height: someValue });

The question is : how (and incidentally where in the code ?) do I get the correct height value (someValue in the above snippet) ? Given :

• a theme
• a single header + ten single-line rows + 1 footer

how do I determine the resulting height ?

Thank you Pete, and sorry if it is a bit difficult, for me to explain the question, and for readers to understand it.

Brgds.

[MarcParticipant]

. . . last note, about the following sentence in my previous post :

[…] how do I get rid of the unelegant orange area […]

Please note, obviously, the orange area would still be acceptable for the last page (and only this one), in order to keep the height fixed, and therefore the pager always at its same place.

[MarcParticipant]

Hi again,

Thinking again about this discussion, I think there is an information I omitted to mention. The grid that I’m thinking of is meant to be kept very simple, just like in the fiddle I referred to above :

• Header always présent, fixed height
• Fixed height rows : one single line of text per row
• Pager (footer) always present, fixed height

The only variation may be a change in the number of rows per page, which can be trapped, as I said, through the pagesizechanged event .

Therefore, I really need to have a fixed height grid. The only concern is : how do I get rid of the unelegant orange area between the last line and the footer, that is displayed in the fiddle ?

Does that make my question easier to understand ?

Thanks and best regards.

[MarcParticipant]

Hi Dimitar,

Thank you for this very clear and detailed answer.

Best regards.

Marc.

[MarcParticipant]

Hi Pete,

Sure, I agree. But with fixed height, is there a way that, except for the last page, the grid’s height is set to exactly its actual height, with no extra space ? That’s my point : I can’t figure out how to achieve this. At least simply, without recomputing manually the sum of the height of all grid’s elements (header, row, footer…).

Am I missing something ?

Thank you.

[MarcParticipant]

Thank you, I understand it is not a supported feature.

Is it possible then to include to the grid’s wish list any mechanism that would prevent the pager to jump up and down, when the user navigates between pages ?

Thanks and best regards.

Marc.

[MarcParticipant]

Great job Peter, thousand thanx !

I had checked the code dozens times without noticing the missing ‘l’.

Best regards.

[MarcParticipant]

Hi Yogesh,

More experienced forum participants may give you a more complete answer, but in the meantime, does this post help ?

Best regards

[MarcParticipant]

Hi Pete,

Thank you very much, that fixed half of the issue : the values now get correctly displayed when the grid is rendered.

However, when changing the selected value in the dropdown list, the udpate is triggered with wrong values : CustomerID contains the label, which should normally be in CustomerFullName. While CustomerFullName’s value is “” (empty string).

I’ll try to investigate it later, but if you have an easy fix, or a pointer to the doc, it would certainly be very helpful.

Thanks and regards.

[MarcParticipant]

and just in case it helps, here my implementation custom diagram. Almost exactly the same as the previous one, except for some fields and variables names : Customer ID instead of countryCode, Customerfn (standing for CustomerFullName) instead of Country, etc.

Best regards

[MarcParticipant]

To complete the previous post, even if I doubt it’s really useful, due to its size, here is the relevant part of my code.

`$(document).ready(function () {

// Customer Dropdown List – Source and DataAdapter
//——————————————————

var ddSrcCustomer =
{
datatype: “json”,
datafields: [
{ name: ‘CustomerID’ },
{ name: ‘CustomerFullName’ }
],
id: ‘CustomerID’,
url: ‘Customer/GetCustomers’
};

// create a new instance of the jqx.dataAdapter.
var ddDaCustomer = new $.jqx.dataAdapter(ddSrcCustomer, {
autoBind: true
});

// Grid – Date Format
//——————-
var dateFormat = “dd-MM-yyyy”;

// Grid – Source and DataAdapter
//——————————
var gSrcMission =
{
datatype: “json”,
datafields: [
{ name: ‘MissionID’ },
{ name: ‘Name’ },
{ name: ‘DateStart’, type: ‘date’, format: dateFormat },
{ name: ‘DateEnd’, type: ‘date’, format: dateFormat },
// {name: ‘DateStart’, type: ‘date’ },
// { name: ‘DateEnd’, type: ‘date’ },
{ name: ‘EmployeeID’ },
{ name: ‘CustomerID’, value: ‘CustomerID’, values: { source: ddDaCustomer.records, value: ‘CustomerID’, name: ‘CustomerFullName’} },
{ name: ‘CustomerFullName’ }
],

sortcolumn: ‘MissionID’,
id: ‘MissionID’,
url: ‘Mission/GetMissions’,
// update the grid and send a request to the server.
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘Mission/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.
commit(true, data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
$.ajax({
dataType: ‘json’,
cache: false,
url: ‘Mission/Delete/’ + rowid,
data: rowid,
type: “POST”,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.statusText);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
if (rowdata.DateStart != null) {
rowdata.DateStart = gDaMission.formatDate(rowdata.DateStart, dateFormat);
}
if (rowdata.DateEnd != null) {
rowdata.DateEnd = gDaMission.formatDate(rowdata.DateEnd, dateFormat);
}

$.ajax({
cache: false,
dataType: ‘json’,
url: ‘Mission/Update/’ + rowid,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
}
};

var gDaMission = new $.jqx.dataAdapter(gSrcMission);

// Initialize Grid
//—————-

$(“#gMissions”).jqxGrid(
{
width: 750,
source: gDaMission,
filterable: true,
sortable: true,
autoheight: true,
pageable: true,
editable: true,
selectionmode: ‘singlerow’,
rendergridrows: function (obj) {
return obj.data;
},
theme: ‘ui-sunny’,
columns: [
{ text: ‘ID’, datafield: ‘MissionID’, width: 50 },
{ text: ‘Mission’, datafield: ‘Name’, width: 250 },
{ text: ‘Début’, datafield: ‘DateStart’, width: 100, cellsformat: dateFormat },
{ text: ‘Fin’, datafield: ‘DateEnd’, width: 100, cellsformat: dateFormat },
// { text: ‘Début’, datafield: ‘DateStart’, width: 150, cellsformat: dateFormat, columntype: ‘datetimeinput’ },
// { text: ‘Fin’, datafield: ‘DateEnd’, width: 150, cellsformat: dateFormat, columntype: ‘datetimeinput’ },
// { text: ‘Collaborateur’, datafield: ‘EmployeeID’, width: 0 },
{text: ‘Client’,
datafield: ‘CustomerID’,
displayfied: ‘CustomerFullName’,
width: 250,
columntype: ‘dropdownlist’,

createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({
source: ddDaCustomer,
valueMember: “CustomerID”,
displayMember: “CustomerFullName”
}); // Closing editor
}, // Closing createditor function

initeditor: function (row, cellvalue, editor) {
// alert(“initeditor”);
} // Closing initeditor function
} // Closing CustomerID definition
] // Closing columns property list
}); // Finally, closing mission grid definition

// Setup a selectedRow object, to be used below
//———————————————-
var selectedRow = {};
selectedRow.Index = -1;
selectedRow.ID = -1;

// CRUD Buttons
//——————-
$(“#btnAdd”).jqxButton({ theme: ‘ui-sunny’, width: ’60px’, height: ’18px’ });
$(“#btnUpdate”).jqxButton({ theme: ‘ui-sunny’, width: ’60px’, height: ’18px’ });
$(“#btnDelete”).jqxButton({ theme: ‘ui-sunny’, width: ’60px’, height: ’18px’ });

// ————- CRUD buttons code goes here / Removed for the sake of readability ————–

// Context CRUD menu
// —————–

// ————- Context CRUD menu code goes here / Removed for the sake of readability ————–

});

[Author]

Posts