Grid button icon not scrolling up in grid

[WeibingParticipant]

I implemented a Note column in a grid, which is essentially a button. This column will display one of two icons indicating if there is a note associated with the row of data. I wrote a createwidget: function to do this. Works great if the autoHeight of the grid is set to true. If I set a height:900, then I have to scroll through all the rows, which is fine, but when I do this, the little note icon just stays in the same place. It doesn’t scroll up. The code below is just the note column function. Perhaps I just need to leave the autoheight to true, but I was wondering if there is anything that jumps out as being incorrect.

Thanks for any assistance.

	  { text: 'Note', datafield: 'Note',width: 50, 
	  
	  				createwidget: function (row, column, value, htmlElement) {
						var rowData = row.bounddata;
						//THIS DETERMINES IF COMMENT BUTTON IS PENCIL OR QUOTE ICON
							if(rowData.has_note){
							  var fontAwesome = 'fa fa-comments fa-lg';
							}else{
							   var fontAwesome = 'fa fa-pencil-square-o fa-lg';
							  }
				var button = $("<i style='padding-top:8px;margin-top:-2px;' class='" + fontAwesome + "' aria-hidden='true'></i>");
				 $(htmlElement).append(button);
				button.jqxButton({ template: "default", height: '100%', width: '100%' });
	
							  
},
				initwidget: function (row, column, value, htmlElement) {}
	  },

[MartinParticipant]

Hello Weibing,

I don’t see anything wrong in the code that you have sent.
If you would like you can send a whole example, where the issue can be seen, so we can check it.

Best Regards,
Martin

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

[WeibingParticipant]

Thanks Martin,

I’m looking at one of the demo examples and it appears I’m missing some code in the initwidget function. The code below is from the demo, and I basically have nothing in my initwidget function. When I comment this portion out in the demo, the same behavior is replicated. I’m a newbie, so I’ll have to figure out how to modify this code to fit my grid.

                      initwidget: function (row, column, value, htmlElement) {
                          var imgurl = 'images/' + value.toLowerCase() + '.png';
                          $(htmlElement).find('.buttonValue')[0].innerHTML = value;
                          $(htmlElement).find('img')[0].src = imgurl;
                      }

Demo URL: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light

[WeibingParticipant]

Notice the images don’t remain associated with the row. I have to figure out how to use this initwidget callback.

https://www.jqwidgets.com/angular/angular-grid/angular-grid-widgetcolumn.htm

[MartinParticipant]

Hello Weibing,

Yes, this is a known issue in the grid’s Angular demo.
You can see the fix in this forum Topic.

Best Regards,
Martin

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

[Author]

Posts