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 2 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • jgarcias
    Participant

    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);
       });

    Hristo
    Participant

    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/
    The initwidget 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?light

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    jgarcias
    Participant

    Hi 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 the initwidget callback in order to update the cell value. Do you have any example of an update to the cell value from that callback?

    Cheers.


    Hristo
    Participant

    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 Hristov

    jQWidgets team
    https://www.jqwidgets.com


    jgarcias
    Participant

    Hi 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.


    Hristo
    Participant

    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 Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.