jQuery UI Widgets › Forums › Grid › Get cell value through a widget or another means.
This topic contains 5 replies, has 2 voices, and was last updated by Hristo 3 years, 7 months ago.
-
Author
-
Hi Team
I have a jqxGrid with an int column in which I display 4 buttons (images for Create, Read, Update and Delete operations).
The result of clicking such buttons will set the security level a role will have in an application.
The values may range between 0-15 (where Create = 8, Read = 4, Update = 2, Delete = 1). The buttons can be set to “ON” or “OFF” with a click.I created such buttons in a column by using the createwidget function because it allows me to add HTML code inside a cell.
So my code looks like this:source = { datatype: "json", datafields: [ { name: 'moduleID', type: 'int' }, { name: 'moduleName', type: 'string' }, { name: 'pageID', type: 'int' }, { name: 'pageName', type: 'string' }, { name: 'formID', type: 'int' }, { name: 'formName', type: 'string' }, { name: 'access', type: 'int' }, ], localdata: response, }; $("#grid").jqxGrid({ source: source, width: '100%', altrows: true, enabletooltips: true, showstatusbar: true, columns: [ { datafield: 'moduleID', hidden: true }, { text: 'Module', datafield: 'moduleName', width: 285 }, { datafield: 'pageID', hidden: true }, { text: 'Page', datafield: 'pageName', width: 285 }, { datafield: 'formID', hidden: true }, { text: 'Form', datafield: 'formName', width: 285 }, { text: 'Access', datafield: 'access', cellsalign: 'right', width: 132, createwidget: function (row, column, value, htmlElement) { // Creating the buttons with the images var str = ''; str += (value >= 8) ? '<a data-value="8" class="linkBtn createBtn btnOn" title="Create"></a>' : '<a data-value="0" class="linkBtn createBtn" title="Create"></a>'; str += ([4, 7, 12, 15].includes(value)) ? '<a data-value="4" class="linkBtn readBtn btnOn" title="Read"></a>' : '<a data-value="0" class="linkBtn readBtn" title="Read"></a>'; str += ([2, 3, 6, 7, 10, 11, 14, 15].includes(value)) ? '<a data-value="2" class="linkBtn updateBtn btnOn" title="Update"></a>' : '<a data-value="0" class="linkBtn updateBtn" title="Update"></a>'; str += (value % 2 != 0) ? '<a data-value="1" class="linkBtn deleteBtn btnOn" title="Delete"></a>' : '<a data-value="0" class="linkBtn deleteBtn" title="Delete"></a>'; // Add the buttons to the cell. $(htmlElement).append(str); }, initwidget: function (row, column, value, htmlElement) { var str = ''; }, }, ], });
Everything works perfectly, but I am not able to set the respective cell value.
How can I set the value if the widget makes the cell Read-Only?
Is there another way to put HTML in a cell, evaluate it and set the cell value?I was using this function before, but it does not work because it throws the error Uncaught TypeError: this.source._source is undefined :
$('#grid').on('click', '.linkBtn', function (event) { var value = 0; var access = 0; if ($(this).hasClass('btnOn')) { $(this).removeClass('btnOn'); } else { if ($(this).hasClass('createBtn')) { value = 8; access += value; } if ($(this).hasClass('readBtn')) { value = 4; access += value; } if ($(this).hasClass('updateBtn')) { value = 2; access += value; } if ($(this).hasClass('deleteBtn')) { value = 1; access += value; } $(this).addClass('btnOn'); } $(this).attr('data-value', value); // This is the way I found to get the row id // because from this function I cannot get it // in any other way. var r = $(this).parent().parent().attr('id'); r = r.match(/\d+/); var rowId = parseInt(r[0]); var id = $("#grid").jqxGrid('getrowid', rowId); // The next line does not work. $('#grid').jqxGrid('setcellvalue', rowId, "access", access); });
Hello jgarcias,
I would like to suggest you check our forum for similar discussions.
For example, please, take a look at this topic below which could be useful:
https://www.jqwidgets.com/community/topic/have-a-rowindex-instead-row-in-initwidget/
Theinitwidget
callback is needed to be implemented because after the creating of the widgets inside the jqxGrid from the first view then they should be updated on the same position on the next page or next scroll.
Also, I would like to suggest to you another approach that you could try that you could use to easily implement the actions over the buttons.
Please, take a look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/popupediting.htm?lightBest Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHi Hristo
Your second suggestion definitely is not something I would like to implement, as it does not reflect the buttons that are ON or OFF. They should always be present in every row.
There is no paging on my grid, for the rows to show are not many, so I use scroll.
I am not clear enough about what should be implemented in theinitwidget
callback in order to update the cell value. Do you have any example of an update to the cell value from that callback?Cheers.
Hello jgarcias,
Please, take a look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light
You could update the widget in this callback.
I hope this will help.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHi Hristo
Yes I’d already seen that example in the demo page, but it doesn’t help me because I do not see the cell value being updated anywhere.
I am a bit in a hurry with this, so I ended up using a HTML table and adding scroll capability with CSS and jQuery to manage the events.Thanks.
Hello jgarcias,
You could use the
begincelledit
method to start editing a specific cell.
More details about this and other methods could find on the API Documentation page.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.