jQuery UI Widgets › Forums › Grid › Binding events to grid cells in Server side pagination
Tagged: angular grid, Binding events to grid cells in Server side pagination, cell event, event, grid, jquery grid, jqxgrid, rendered, rendering, server side paging
This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 9 years, 2 months ago.
-
Author
-
Hi Team ,
i have the JQX Grid with editable fields . Generating the id for editable field through rendering property and binding events to the generated ids through the rendered property.
This is working fine with the client side pagination .
To support huge load of data , converting it to server side pagination . Events are not binding which are configured through rendered property.suggest the approach to achieve the binding events .
sample code:
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: source,
pageable: true,
autoheight: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 100 ,edittype: ‘checkbox’ ,
rendering:function(){ // generating uniqueID} ,
rendered: function(){//Binding events for the geneatedID } }
]
});Hi sairam,
Could you, please, share more information about the events you wish to bind to? The code you have implemented in rendering and rendered would also help us understand the issue you experience and give you relevant advice. Please also consider using the built-in events of jqxGrid (as documented here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/HI Dimitar ,
We have customized check boxes in the grid and i have to manipulate other cell values based on this editable column . i have provided the code in detail below .Even noticed the other issue while applying the server side pagination . i am applying the css by using the cellclassname property , which is working fine in client side .
Could you please assist to sort out this issue ..$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: source,
pageable: true,
autoheight: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 100 ,columntype: ‘checkbox’ ,
rendering:function(){ // generating uniqueID
return ‘<div > <label> viewpermission </label> <div id=”viewpermission”> </div></div>’;
} ,
rendered: function(element){ //Binding events for the geneatedIDvar viewpermId = $(element).find(‘#viewpermission’);
$(viewpermId).on(‘change’,function(event){
// if this view is checked or unchecked ,
we are manipulating the other cell values}
);}
,cellclassname: applyasthetics
}
]
});applyasthetics = function(row,column,value,data){
return css class based on the column.
}Thanks
sairam koradaHi sairam korada,
Please note the following:
- There is no column property “rendering” in jqxGrid.
- The rendered column property is called when the column header is rendered. You can use it to set additional settings to the column’s header element.
- To apply custom rendering to cells, please use the cellsrenderer column property (more information).
- We suggest you make use of the built-in
columntype: 'checkbox'
and manipulate other cells on the cellendedit event of the checkbox column.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar ,
Please find the comments below for the above mentioned points. please provide your inputs to achive the expected behaviour .
1: its not the rendering property ,i am using the property renderer.
2: yes my requirement is to determine the state of group checkbox header based on other fields data . using the rendered column property to determine the same .
3: i tried using the cellsrenderer column property , still having the issue in applying the custom logic during the cell redering .
Observation :
In the cellsrenderer call back method (ie showdifference method ), i need to apply the css to a particular cell column , by checking the data of other 2 columns in the corresponding row to identify the applicable CSS .
while debugging , data of the columns returned were not of the corresponding row . ie when the grid is rendering the second row , i am getting the column info of first row . i am trying to implement for a grouping grid and serverside pagination, pls suggest is it due to grouping grid.4: Using the built-in columntype: ‘checkbox’ only , since we have multiple check boxes columns headers , want to generate the unique id for each column header checkbox.
please find the updated code snippet:
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: source,
pageable: true,
autoheight: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘New Permissions’, datafield: ‘firstname’, width: 100 },
{ text: ‘Old Permissions’, datafield: ‘firstname’, width: 100 },
{ text: ‘Modified’, datafield: ‘firstname’, width: 100 },
{ text: ‘PermissionInfo’, datafield: ‘lastname’, width: 100 ,columntype: ‘checkbox’ ,
rendering:function(){ // generating uniqueID
return ‘<div > <label> viewpermission </label> <div id=”viewpermission”> </div></div>’;
} ,
rendered: function(element){ //Binding events for the geneatedIDvar viewpermId = $(element).find(‘#viewpermission’);
$(viewpermId).on(‘change’,function(event){
// if this view is checked or unchecked ,
we are manipulating the other cell values}
);}
,cellsrenderer : showdifference
}
]
});showdifference = function(row,columnfield,value,defaulthtml,columnproperties){
var value1 = $(‘#jqxGrid’).jqxGrid(‘getcellvalue’, row, “New Permissions”);
var value2 = $(‘#jqxGrid’).jqxGrid(‘getcellvalue’, row, “Old Permissions”);
if value1 != value2
apply different css for modfied column
// reading the properties of other comlumns to comparereturn css class based on the column.
}Thanks
sairamHi sairam,
Please share your complete grid initialization code with the actual function implementations and not pseudocode. Preferably, share with us a jsEditor/JSFiddle example that showcases your scenario. Please also note that in your updated code snippet, you are still using the invalid callback “rendering”:
rendering:function(){ // generating uniqueID return '<div > <label> viewpermission </label> <div id="viewpermission"> </div></div>'; } ,
Please also specify what your ultimate goal is and we may think of a better solution and offer it to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.