jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Dynamic Buttons in a Grid Row

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 6 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Dynamic Buttons in a Grid Row Posts
  • August 14, 2018 at 10:07 am Dynamic Buttons in a Grid Row #101521

    Mr.Moo
    Participant

    I have a grid where each row has a set of buttons that execute a specific task when clicked, however due to they way I have implemented them using :

    
{ text: ‘Telemetrey’, datafield: 'View', width: buttonSize, cellsalign: 'center', renderer: columnsrenderer,  columntype: 'button', cellsrenderer: function() { return 'Show' ; }, buttonclick: function(row) {
    // Cut for brevity
}},
{ text: ‘Results’, datafield: ‘Download’, width: buttonSize, cellsalign: 'center', renderer: columnsrenderer,  columntype: 'button', cellsrenderer: function() { return ‘Download’ ; }, buttonclick: function(row) {
    // Cut for brevity
}},
…

    Within my $(‘#master’).jqxGrid()’s constructor I can’t see any obvious way to toggle change the title of a button from Show to Hide and vice versa. I would also like to have the buttons disabled initially then when the row’s data model observable state value changes it (the button) auto enables / disables itself subject to the applied logic.

    Is any of this even possible? If so I would be grateful for an insight on how I could achieve this.

    August 20, 2018 at 1:29 pm Dynamic Buttons in a Grid Row #101600

    Hristo
    Participant

    Hello Mr.Moo,

    Please, take a look at this example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
			var data = generatedata(200);
			var source =
				{
				  localdata: data,
				  datatype: "array",
				  datafields:
				  [
					{ name: 'firstname', type: 'string' },
					{ name: 'lastname', type: 'string' },
					{ name: 'productname', type: 'string' },
					{ name: 'quantity', type: 'number' },
					{ name: 'price', type: 'number' }
				  ],
				  updaterow: function (rowid, rowdata, commit) {
					// synchronize with the server - send update command
					// call commit with parameter true if the synchronization with the server is successful 
					// and with parameter false if the synchronization failder.
					commit(true);
				  }
				};

			var dataAdapter = new $.jqx.dataAdapter(source);
			var editrow = -1;
			// initialize jqxGrid
			$("#grid").jqxGrid({
			  source: dataAdapter,
			  pageable: true,
			  autoheight: true,
			  columns: [
				{ text: 'First Name', datafield: 'firstname', width: 500 },
				{ text: 'Edit', datafield: 'Edit', columntype: 'button', 
				 cellsrenderer: function (row) {
				   if(editrow != -1 && row == editrow)
					 return "Edited";

				   return "Edit";
				 }, buttonclick: function (row) {
				   // open the popup window when the user clicks a button.
				   editrow = row;
				   $("#grid").jqxGrid('refresh');
				 }
				}
			  ]
			});

        });
    </script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.