Plans for jqxRating in a Grid Cell?

[jmaraisParticipant]

Do you plan to implement the jqxRating as an editor in the grid?

[Peter StoevKeymaster]

Hi Johan,

We don’t have plans to add a rating editor. I will create a new work item regarding this feature.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jmaraisParticipant]

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

[christianm_hzMember]

Hi Johan, hi Peter,

I’ll hope you understand my english ;o)

I’d like also to have a jqxRating inside a grid and I can’t believe your statement, Peter. ;o)
So I spent a day to resolve this problem, here is my solution:

The data for my grid comes out a database, one column contains the value (1 to 5) for the rating:


var source =
{
datatype: "json",
datafields: [
{ name: 'id', type: 'int' },
{ name: 'foo' },
{ name: 'bar' },
{ name: 'rating', type: 'int'}
],
id: 'id',
url: "ajx/ajx.php?action=getTable",
root: 'data'
};


To fill the rating-div’s with the rating stars I need an additional JS-object and a function that I execute several times:


var arr_rating = new Object();

function rate(id,val,theme){
$("#jqxRating_"+id).jqxRating({ width: 350, height: 35, theme: theme, value: val});
$("#jqxRating_"+id).bind('change', function (event) {
$.ajax({
type: 'POST',
url: "ajx/ajx.php?action=setRating",
data: {pk: id, key: "rating", val: event.value}
});
});
}


Now I create the Grid object:

var theme = 'fresh';
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid(
{
theme: theme,
source: dataAdapter,
editable: true,
pageable: true,
sortable; true,
columns: [
{ text: 'Ser.No.', dataField: 'id', width: 50,cellsformat: 'n', editable:false },
{ text: 'Foo', datafield: 'foo' },
{ text: 'Bar', datafield: 'bar' },
{ Text: 'Rating', datafield: 'rating', columntype: 'rating', width:100,align:'center',cellsalign:'center'
, editable: false // Note: the row must NOT be editable !
, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
// In my case I must use id of the data row, maybe you can use the id of grid row
pk = $('#jqxgrid').jqxGrid('getcellvalue', row, "id");
// Filling the object with id as key and the rating data als value
arr_rate[pk] = value;
// Returning the jqxRating div, the id of div is extended with the data id to be unique
str = '

';
return str;

}
}
]
,ready: function(){
// Iterate through the object to create the rating stars
for(var value in arr_rate){
rate(value,arr_rate[value],theme);
}
}
});


I also use the possibility of sorting und paging the grid. Therefore I also must bind following events:


$("#jqxgrid").bind("sort", function (event) {
for(var value in arr_rate)
rate(value,arr_rate[value],theme);
});
$("#jqxgrid").bind("pagechanged", function (event) {
for(var value in arr_rate)
rate(value,arr_rate[value],theme); }
});


I’ll hope my solution works because I extract the code from my source and this works fine.

Regards
Christian

[christianm_hzMember]

Corrections of my listing above, because i can’t editing:

the return string in grid -> cellsrenderer is str = “<div id=’jqxRating_”+pk+”‘ style=’margin-top:3px’></div>”;

in ready: function is a } too much.

Why there is no preview at this forum? :o(

[Peter StoevKeymaster]

You can learn how to format your code here: http://www.jqwidgets.com/community/topic/code-formatting/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[christianm_hzMember]

Thanks a lot Peter,

next time i’ll know how to format, but now I can’t editing my posts.

@all: sorry for the inconvenience to read my code.

[Author]

Posts