jQuery UI Widgets › Forums › Grid › Rating within jqxGrid Cell
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 3 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
Hello,
I have a number in a column of a grid that represents the rating on a scale of 1-5. Is there a way I can integrate jqRatings within the jqxgrid cell?
In case an editable field is not supported, is there a way to just represent the ratings in read only mode?Thanks,
Kaustav GhoshalHello Kaustav Ghoshal,
You can implement jqxRating as a column’s custom editor. Here is an example, based on the demo Custom Column Editor:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxrating.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; // prepare the data var data = generatedata(200); var source = { localdata: data, datatype: "array", updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command // call commit with parameter true if the synchronization with the server is successful // and with parameter false if the synchronization failder. commit(true); }, datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'date', type: 'date' } ] }; var dataAdapter = new $.jqx.dataAdapter(source); var getEditorDataAdapter = function (datafield) { var source = { localdata: data, datatype: "array", datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'date', type: 'date' } ] }; var dataAdapter = new $.jqx.dataAdapter(source, { uniqueDataFields: [datafield] }); return dataAdapter; } // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 685, source: dataAdapter, editable: true, theme: theme, selectionmode: 'singlecell', columns: [ { text: 'First Name', columntype: 'template', datafield: 'firstname', width: 80, createeditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. var inputElement = $("<input/>").prependTo(editor); inputElement.jqxInput({ source: getEditorDataAdapter('firstname'), displayMember: "firstname", width: width, height: height, theme: theme }); }, initeditor: function (row, cellvalue, editor, celltext, pressedkey) { // set the editor's current value. The callback is called each time the editor is displayed. var inputField = editor.find('input'); if (pressedkey) { inputField.val(pressedkey); inputField.jqxInput('selectLast'); } else { inputField.val(cellvalue); inputField.jqxInput('selectAll'); } }, geteditorvalue: function (row, cellvalue, editor) { // return the editor's value. return editor.find('input').val(); } }, { text: 'Last Name', datafield: 'lastname', columntype: 'template', width: 80, createeditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. var inputElement = $("<input/>").prependTo(editor); inputElement.jqxInput({ source: getEditorDataAdapter('lastname'), displayMember: "lastname", width: width, height: height, theme: theme }); }, initeditor: function (row, cellvalue, editor, celltext, pressedkey) { // set the editor's current value. The callback is called each time the editor is displayed. var inputField = editor.find('input'); if (pressedkey) { inputField.val(pressedkey); inputField.jqxInput('selectLast'); } else { inputField.val(cellvalue); inputField.jqxInput('selectAll'); } }, geteditorvalue: function (row, cellvalue, editor) { // return the editor's value. return editor.find('input').val(); } }, { text: 'Products', columntype: 'template', datafield: 'productname', createeditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. editor.jqxDropDownList({ checkboxes: true, source: getEditorDataAdapter('productname'), displayMember: 'productname', valueMember: 'productname', width: width, height: height, theme: theme, selectionRenderer: function () { return "Please Choose:"; } }); }, initeditor: function (row, cellvalue, editor, celltext, pressedkey) { // set the editor's current value. The callback is called each time the editor is displayed. var items = editor.jqxDropDownList('getItems'); editor.jqxDropDownList('uncheckAll'); var values = cellvalue.split(/,\s*/); for (var j = 0; j < values.length; j++) { for (var i = 0; i < items.length; i++) { if (items[i].label === values[j]) { editor.jqxDropDownList('checkIndex', i); } } } }, geteditorvalue: function (row, cellvalue, editor) { // return the editor's value. return editor.val(); } }, { text: 'Quantity', width: 200, columntype: 'custom', datafield: 'quantity', createeditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. editor.jqxRating(); }, initeditor: function (row, cellvalue, editor, celltext, pressedkey) { // set the editor's current value. The callback is called each time the editor is displayed. var value = parseInt(cellvalue); if (isNaN(value)) value = 0; editor.jqxRating('setValue', value); }, geteditorvalue: function (row, cellvalue, editor) { // return the editor's value. var value = editor.jqxRating("val"); return value; } } ] }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.