jQuery UI Widgets › Forums › Grid › Issue grid in combination with embedded jqxButton
Tagged: grid widget
This topic contains 2 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 1 month ago.
-
Author
-
Hi community,
now I have an issue with jqxGrid combined with jqxButton.
I have an normal editable, sortable, pageable grid. One column contains a jqxButton for each row inserted via cellsrenderer function. The click-binding occurs in the rendered function of the grid.
Well, if the page is fresh loaded the jqxButton works well. But when I first edit the value of a cell of the grid the jqxButton loose its function and css style.
Ok, I added the cellendedit function to the grid wich rerender the grid. Now the jqxButton gets back its css style and functionalality, but the recently edited value of the cell gets back its old value, whether or not I rebind the dataAdapter or call the functions ‘updatebounddata’ or ‘refreshdata’.
In summery, either I get the new value of the edited cell and loss button style and functionality or loss the new value and get the button css and functionality.
Is there a solution ?
Thanks a lot.
Here is the code:
var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid({ theme: theme, height: 339, width: 1098, source: dataAdapter, columnsresize: true, editable: true, pageable: true, sortable: true, columns: [ { text: 'id', datafield: 'embryo_id', width: 50, hidden:true }, { text: 'Nr.', datafield: 'embryo_kreuz_nr', width: 30, editable:false }, { text: 'Messung 1', datafield: 'messung_1', width: 100,columntype: 'numberinput', cellsformat: 'd2' ,cellendedit: function (row, datafield, columntype, oldvalue, newvalue) { var pk = $("#jqxgrid").jqxGrid('getcellvalue',row, "embryo_id"); $.ajax({ type: 'POST', url: "ajx/ajx.php?action=setEmbryoValue", data: {pk: pk, key: datafield, val: newvalue}, async: false, success: function(transport){ if(transport != 0){ alert("FEHLER!\nBitte korrigieren Sie Ihre Eingaben"); }// dataAdapter_emb.dataBind();// $("#jqxgrid").jqxGrid('updatebounddata');// $("#jqxgrid").jqxGrid("render"); } }); $("#jqxgrid").jqxGrid('refreshdata');// $("#jqxgrid").jqxGrid('updatebounddata');// $("#jqxgrid").jqxGrid('render'); } }, { text: 'Beurteilung', width: 100, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties){ var pk = $("#jqxgrid").jqxGrid('getcellvalue', row, "embryo_id"); str = "<div style='margin-top:3px;margin-left:5px'><input type='button' value='Beurteilung' id='jqxButton_"+pk+"_1' name='jqxButton_"+pk+"_1'/></div>"; return str; } } ], rendered: function() { $("[name^='jqxButton_']").jqxButton({ width: '90', height: '20', theme: theme, roundedCorners: 'all' }); $("[name^='jqxButton_']").css('font-size', '10px'); $("[name^='jqxButton_']").bind('click', function () { // some code here }); }});$("#jqxgrid").bind('cellendedit', function (event) {// $("#jqxgrid").jqxGrid("refresh");// $("#jqxgrid").jqxGrid("render");});
Additional informations:
in Firebug I get the following error:
TypeError: this.editcell is null...endTo(this.table);g[0].id="dropdownlisteditor"+this.element.id+d.datafield;var v...jqxgrid.edit.js (Zeile 7)
Hi christianm_hz,
It is not possible to add widgets to the jqxGrid. The provided code is not expected to work. jqxGrid can display widgets only as editors in the way demonstrated in the Cells Editing and Popup Editing samples.
Calling of “refreshdata”, “updatebounddata” or “render” in the “cellendedit” should not be done in that way. In case you wish to refresh the Grid, do it outside its own event handlers and callbacks.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.