Glyphicon on Grid Editor Button

[njaParticipant]

Hey there,
Is it legit to put a glyphicon on a button in the grid?

It shows up, but for some reason the button click stops working. I am not getting any error messages though.

Thanks,
nja

                     {
                         text: 'Notes', datafield: 'Notes', columntype: 'button', hidden: false, width: 80, cellclassname: cellclass,
                         cellsrenderer: function (row, column, value) {
                             if (value){
                                 return "<span class='glyphicon glyphicon-list-alt'></span>";
                             }
                             else {
                                 return "Add Note";
                             }
                         },
                         buttonclick: function (row) {
                             // open the popup window when the user clicks a button.
                             editrow = row;
                             var offset = $("#jqxgrid").offset();
                             $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 600, y: parseInt(offset.top) + 60 } });
                             // get the clicked row's data and initialize the input fields.
                             var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                             $("#Notes").val(dataRecord.Notes);

                             // show the popup window.
                             $("#popupWindow").jqxWindow('open');

                         }
                     },

[DimitarParticipant]

Hi nja,

Here is a workaround you can try: https://www.jseditor.io/?key=jqxgrid-columntype-button-with-image-button-click. Please note that the custom buttonClick function is defined in a script tag inside the grid’s initialization div.

Best Regards,
Dimitar

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

[njaParticipant]

Thanks! That got me started. I did it a little different, but it is working now and I used your work around to get it going.

thanks,
nja

{
	text: 'Notes', datafield: 'Notes', width: 60, hidden: false, cellclassname: cellclass,
	filterable: false, editable: false, groupable: false, draggable: false, resizable: false,
	rendered: function (element) {
		$(element).jqxTooltip({
			position: 'left', opacity: 1, theme: 'darkblue',
			content: "Internal Notes for QCAP Record"
		});
	},
	cellsrenderer: function (row, column, value) {
		if (value) {
			//return "<div style='width: 100%; height: 100%;'><span class='glyphicon glyphicon-list-alt'></span></div>";
			return '<div style="margin-top: 2px; width: 100%; height: 100%; font-size: large; text-align: center; overflow: hidden; text-overflow: ellipsis;" onclick="notesDivClick(' + row + ')"><span class="glyphicon glyphicon-list-alt text-info"></span></div>';
		}
		else {
			return '<div style="margin-top: 2px; width: 100%; height: 100%; font-size: large; text-align: center; overflow: hidden; text-overflow: ellipsis;" onclick="notesDivClick(' + row + ')"><span class="glyphicon glyphicon-unchecked text-muted"></span></div>';
			
		}
	},
},

<script type="text/javascript">
	function notesDivClick(row) {
		// open the popup window when the user clicks a button.
		editrow = row;
		var offset = $("#jqxgrid").offset();
		$("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 600, y: parseInt(offset.top) + 30} });
		// get the clicked row's data and initialize the input fields.
		var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
		$("#Notes").val(dataRecord.Notes);

		// show the popup window.
		$("#popupWindow").jqxWindow('open');

		$("#Notes").focus();
	}
</script>

[BennyParticipant]

Is there any wayaround for angular2/4

[HristoParticipant]

Hello Benny,

You could use the mentioned approach above. In the cellsrenderer callback you should set wanted image or icons (glyphicon) there. Please, take a look at this demo, that you could use as a base:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-popupediting.htm
Instead of “Edit” you could return <div/> container with desired content.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts