Grid cellsrenderer pagination cell value undefined

[dan123Participant]

In this grid i have created a cellsrenderer for ‘Quantity’ column with a input text. Currently by default the pagination is set as 10. In order to see if the right data is being fetched, I am using standard ‘alert’ to verify if that the cellsrenderer input text is correctly fetching the quantity value that i an entering in. The ‘alert’ even is triggered on the “Update Stock” button which checks what i entered into the input text box.

Since by default pagination is set as 10, the first page is correctly fetching the quantity value. Perfect this works. But when i clicked on the next page, the records are showing the cellsrenderer input textbox that good, but when i tried to enter in a value and click Update Stock button it would fetch the value and alert as “undefined”

$(“#stockadder”).jqxGrid(
{
width: ‘100%’,
autoheight: true,
source: dataAdapter3,
filterable: true,
sortable: true,
editable: false,
showfilterrow: true,
altrows: true,
enablehover: true,
pageable: true,
rowsheight: 40,
showtoolbar: true,
columnsresize: true,
columnsreorder: true,
enablehover: false,
enablebrowserselection: true,
selectionmode: ‘singlerow’,
columns: [
{ text: ‘??’, datafield: ‘addedbyuser’, width: 100, hidden: true},
{ text: ‘ID’, datafield: ‘storeid’, width: 100, hidden: true},
{ text: ‘Product Name’, datafield: ‘product_name’, resizable:false, cellclassname: cellclassname},
{ text: ‘Category’, datafield: ‘category’, filtertype: ‘checkedlist’, resizable:false, cellclassname: cellclassname},
{ text: ‘Subcategory’, datafield: ‘subcategory’, filtertype: ‘checkedlist’, resizable:false, cellclassname: cellclassname},
{ text: ‘Store Name’, datafield: ‘store_name’, resizable:false, cellclassname: cellclassname},
{ text: ‘Quantity’, datafield: ‘quantity’, width: ‘12%’, resizable:false, editable: false, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
return ‘<input class=”consume_qty” name=”consume_qty” type=”number” value=”1″ min=”1″ style=”height: 40px; width: ‘ + columnproperties.width + ‘px; position: absolute; z-index:1; color: black;”/>’;
}
},

{ text: ‘Actions’, datafield: ‘actions’, editable: false, filterable: false, columntype: ‘button’,
cellsrenderer: function(row, columnfield, value, defaulthtml, columnproperties) {
return “Update Stock”
},
buttonclick: function (row) {
var rowdata = $(“#stockadder”).jqxGrid(‘getrowdata’, row);
var textValue = $(“.consume_qty:eq(” + row + “)”).val();
alert(textValue)
$.ajax({
url: “updateproduct.php”,
type: “POST”,
async: false,
data: {
“done”: 1,
“id”: rowdata.id,
“product_name”: rowdata.product_name,
“consume_qty” : textValue,
“user_name”: rowdata.user_name,
“store_name”: rowdata.store_name,
},
success: function(data){
$(“#stockhistory”).jqxGrid(‘updatebounddata’, ‘data’);
$(“.consume_qty:eq(” + row + “)”).val(‘1’);
$(“#products”).jqxGrid(‘updatebounddata’, ‘data’);
}

})
}
}

]
});

[dan123Participant]

2nd problem below still needs suggestion:
Trial:
1. In any page, edit the quantity value for any row. Do not click ‘Update Stock’ (Example: Edited first row quantity value as 5)
2. Click next page arrow
3. Click previous page arrow
4. You will see the edited row’s quantity value has been gone back to ‘1’

I want the values that have been edited to stay during page changes. (Exampla: The first row should be showing quantity value 5)

1st problem Resolved below: Done
Figured out what was wrong with the row not fetching correct value.

Ok I created a example jsfiddle:
http://jsfiddle.net/VRYVU/209/

[StanislavParticipant]

Hello dan123,

How about save/load state?
Here is the demo on our website: Link

You can save the current(visible) state of the grid and load it later on when you need it.
Here is a topic from the forums, on how to save multiple states, from different views of the grid: Link

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[dan123Participant]

I tried the loadstate and savestate using keyup event. It still reset the input textbox to 1.

I noticed the input textbox value changes to 1 on these events
1. cell edits
2. sorting
3. pagination
3. filtering

http://jsfiddle.net/VRYVU/238/

[StanislavParticipant]

Hello dan123,

This is because cellsrenderer is indicated every time the grid is updated.
Which means, every time you change the page, the cellsrenderer will be initiated again.

I would suggest you take a look at createeditor and initeditor.
Whit createeditor, you initate the widget in the cell once, and then with the inieditor you just re-use it.

There is also geteditorvalue to manipulate the grid as well.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[dan123Participant]

I think this way may work using createwidget. But i noticed the sorting doesn’t seem to work for the Quantity column which has the widget. Its probably something to do with initwidget. Will appreciate if any work around

Here is my example:
http://jsfiddle.net/VRYVU/272/

[HristoParticipant]

Hello dan123,

It is not an appropriate approach to change the HTML element.
This does not affect the Grid’s values (cells).
You could try another approach. I would suggest you try to use setcellvalue method when click on the “Update Sock” then use it this method.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts