jQWidgets Forums

jQuery UI Widgets Forums Grid Grid | Problem in custom row selection

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 11 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Grid | Problem in custom row selection #26718

    rskbuvan
    Spectator

    Hi,

    Can anyone help me on the following issue?

    I’m highlighting the row in different background color using the row index by adding one class name on the fly to each cell as below,

    $(‘#row’+index+’user_summary_grid’).find(‘.jqx-grid-cell’).addClass(‘rowNoAcces’);

    When I select any other row, the previous highlighted row background color is getting changed i.e. the class name which I added is getting removed.

    Can anyone suggest me a solution? What is causing the issue?

    Because I checked the “cellvaluechanged” method where I’m highlighting only the selected row alike the example given in this website.

    I look for a reply.

    Thanks & Cheers,
    \_rssb

    Grid | Problem in custom row selection #26722

    Dimitar
    Participant

    Hello rssb,

    We would need a code sample to determine the source of the issue.

    Please also check the Cells Styling and Edited Rows Rendering demos. We hope they are helpful to you.

    Best Regards,
    Dimitar

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

    Grid | Problem in custom row selection #26728

    rskbuvan
    Spectator

    Hi Dimitar,

    As requested, please find the below code snippet for your reference,

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    <![CDATA[
    /*-----------------------------------------------------------------
    Locallization to support multi-lingual
    Set column names for Manage User Summary Grid
    Note: Column name variables are prefixxed according to the grid names.
    For Example: Manange User i.e. "mu_"
    -------------------------------------------------------------------*/
    var mu_username = "User Name", mu_company = "Company", mu_email = "Email", mu_accounts = "Accounts", mu_services = "Services", mu_updatedon = "Updated On", mu_updatedby = "Updated By";
    $(document).ready(function (){
    /*-----------------------------------------------------------------------------------------------
    Global Declarations for regions & form components starts here
    -----------------------------------------------------------------------------------------------*/
    theme = getDemoTheme('');
    $('#userTab').jqxSplitter({ width: outerPercentage,height:outerPercentage, theme: theme, panels: [{ size: 225, collapsible: false, min:225 }, { size: "70%"}] });
    $('#userTab').jqxSplitter('collapse');
    /*-----------------------------------------------------------------------------------------------
    Global Declarations for regions ends here
    -----------------------------------------------------------------------------------------------*/
    var url = "jqwidgets/sampledata/usersummary.xml";
    /*-----------------------------------------------------------------------------------------------
    Prepare the data
    -----------------------------------------------------------------------------------------------*/
    var source =
    {
    datatype: "xml",
    mtype: 'GET',
    datafields: [
    { name: 'CheckRow', type: 'bool'},
    { name: 'USERNAME', type: 'String'},
    { name: 'COMPANYNAME', type: 'String' },
    { name: 'EMAILADDRESS', type: 'String' },
    { name: 'Accounts', type: 'String' },
    { name: 'Services', type: 'String' },
    { name: 'UPDATEDATE', type: 'date' },
    { name: 'LASTMODIFIER', type: 'String' },
    { name: 'HASACCESS', type: 'String' },
    { name: 'TYPEOFUSER', type: 'String' },
    { name: 'TABACCESS', type: 'String' }/*,
    { name: 'URL', type: 'String' }*/,
    { name: 'consumerID', type: 'String' },
    { name: 'action', type: 'String' }
    ],
    root: "Users",
    record: "User",
    id: 'UserID',
    url: url,
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send update command
    commit(true);
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var columnCheckBox = null, selectedRowsCount = 0;
    var updatingCheckState = false;
    /*-----------------------------------------------------------------------------------------------
    Initialize jqxGrid. Disable the built-in selection.
    -----------------------------------------------------------------------------------------------*/
    $("#user_summary_grid").jqxGrid(
    {
    width: outerPercentage,
    height:"100%",
    source: dataAdapter,
    theme: theme,
    pageable: true,
    pagesize: 20,
    //autoheight: true,
    showfilterrow: true,
    filterable: true,
    sortable: true,
    altrows: true,
    pagesizeoptions: ['10', '20', '50'],
    showfiltermenuitems:false,
    enabletooltips: true,
    columnsmenu: false,
    editable: true,
    //selectionmode: 'multiplerowsextended',
    selectionmode: 'none',
    columnsresize: true,
    columns: [
    {
    text: '', menu: false, sortable: false,
    datafield: 'CheckRow', columntype: 'checkbox', width: '5%',filterable: false,
    renderer: function () {
    return '<div style="margin-left: -10px; margin-top: -7px;position:absolute;left:50%;top:50%;"></div>';
    },
    rendered: function (element) {
    $(element).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
    columnCheckBox = $(element);
    $(element).on('change', function (event) {
    var checked = event.args.checked;
    var pageinfo = $("#user_summary_grid").jqxGrid('getpaginginformation');
    var pagenum = pageinfo.pagenum;
    var pagesize = pageinfo.pagesize;
    var accessFlag;
    if (checked == null || updatingCheckState) return;
    $("#user_summary_grid").jqxGrid('beginupdate');
    // select all rows when the column's checkbox is checked.
    if (checked) {
    $("#user_summary_grid").jqxGrid('selectallrows');
    accessFlag = 'true';
    }
    // unselect all rows when the column's checkbox is checked.
    else if (checked == false) {
    accessFlag = 'false';
    $("#user_summary_grid").jqxGrid('clearselection');
    columnCheckBox.jqxCheckBox({ checked: false });
    }
    // update cells values.
    var startrow = pagenum * pagesize;
    for (var i = 0; i < pagesize; i++) {
    // The bound index represents the row's unique index.
    // Ex: If you have rows A, B and C with bound indexes 0, 1 and 2, afer sorting, the Grid will display C, B, A i.e the C's bound index will be 2, but its visible index will be 0.
    // The code below gets the bound index of the displayed row and updates the value of the row's available column.
    var boundindex = $("#user_summary_grid").jqxGrid('getrowboundindex', i);
    var rowVal = $("#user_summary_grid").jqxGrid('getrowdata', boundindex);
    var checkAccess = rowVal.HASACCESS;
    if(checkAccess != 'No') //if user has access
    {
    $("#user_summary_grid").jqxGrid('setcellvalue', boundindex, 'CheckRow', event.args.checked);
    }
    else if(checkAccess == 'No' && checked ==true)
    {
    accessFlag="null";
    $("#user_summary_grid").jqxGrid('unselectrow', boundindex);
    }
    else if(checkAccess == 'No' && checked ==false)
    {
    accessFlag="false";
    $("#user_summary_grid").jqxGrid('unselectrow', boundindex);
    }
    }
    if(accessFlag=="null")
    {
    columnCheckBox.jqxCheckBox({ checked: null });
    }
    else if(accessFlag=="false")
    {
    columnCheckBox.jqxCheckBox({ checked: false });
    }
    $("#user_summary_grid").jqxGrid('endupdate');
    });
    return true;
    }
    },
    { text: mu_username, editable: false, datafield: 'USERNAME',filtertype: 'textbox', width: "12%",minwidth: 200},
    { text: mu_company, editable: false, datafield: 'COMPANYNAME',filtertype: 'checkedlist', width: "10%"},
    { text: mu_email, editable: false, datafield: 'EMAILADDRESS',filtertype: 'list', width: "12%"},
    { text: mu_accounts, editable: false, datafield: 'Accounts', filterable: false, width: "10%"},
    { text: mu_services, editable: false, datafield: 'Services', filterable: false, width: "10%"},
    { text: mu_updatedon, editable: false, datafield: 'UPDATEDATE',filtertype: 'date', cellsformat: 'MM.dd.yyyy HH:MM', width: "12%"},
    { text: mu_updatedby, editable: false, datafield: 'LASTMODIFIER',filtertype: 'textbox', width: "12%"},
    { text: 'Action', editable: false, datafield: 'RowAction',filterable: false}
    ],
    ready: function () {
    }
    });
    /*-----------------------------------------------------------------------------------------------
    Hide a particular column during Grid Binding Complete event; For binding link to a particular cell
    -----------------------------------------------------------------------------------------------*/
    $("#user_summary_grid").bind("bindingcomplete", function(event) {
    $(this).jqxGrid('hidecolumn','HASACCESS');
    $(this).jqxGrid('hidecolumn','TYPEOFUSER');
    $(this).jqxGrid('hidecolumn','consumerID');
    $(this).jqxGrid('hidecolumn','action');
    });
    var updatePageState = function (pagenum) {
    var datainfo = $("#user_summary_grid").jqxGrid('getdatainformation');
    var pagenum = datainfo.paginginformation.pagenum;
    var pagesize = datainfo.paginginformation.pagesize;
    var startrow = pagenum * pagesize;
    // select the rows on the page.
    $("#user_summary_grid").jqxGrid('beginupdate');
    var checkedItemsCount = 0;
    for (var i = 0; i < pagesize; i++) {
    var boundindex = $("#user_summary_grid").jqxGrid('getrowboundindex', i);
    var value = $("#user_summary_grid").jqxGrid('getcellvalue', boundindex, 'CheckRow');
    if (value) checkedItemsCount++;
    if (value) {
    $("#user_summary_grid").jqxGrid('selectrow', boundindex);
    }
    else {
    $("#user_summary_grid").jqxGrid('unselectrow', boundindex);
    }
    }
    $("#user_summary_grid").jqxGrid('endupdate');
    if (checkedItemsCount == pagesize) {
    columnCheckBox.jqxCheckBox({ checked: true });
    }
    else if (checkedItemsCount == 0) {
    columnCheckBox.jqxCheckBox({ checked: false });
    }
    else {
    columnCheckBox.jqxCheckBox({ checked: null });
    }
    }
    /*-----------------------------------------------------------------------------------------------
    Update the selection after sort.
    -----------------------------------------------------------------------------------------------*/
    $("#user_summary_grid").on('sort', function (event) {
    updatePageState();
    });
    /*-----------------------------------------------------------------------------------------------
    Update the selection after page change.
    -----------------------------------------------------------------------------------------------*/
    $("#user_summary_grid").on('pagechanged', function (event) {
    updatePageState();
    });
    /*-----------------------------------------------------------------------------------------------
    Select or Un-Select rows when a checkbox is checked or unchecked.
    -----------------------------------------------------------------------------------------------*/
    $("#user_summary_grid").on('cellvaluechanged', function (event) {
    if(event.args.datafield=='CheckRow'){
    if (event.args.value) {
    $("#user_summary_grid").jqxGrid('selectrow', parseInt(event.args.rowindex));
    }
    else {
    $("#user_summary_grid").jqxGrid('unselectrow', parseInt(event.args.rowindex));
    }
    var datainfo = $("#user_summary_grid").jqxGrid('getdatainformation');
    var pagesize = datainfo.paginginformation.pagesize;
    var checkedItemsCount = 0;
    for (var i = 0; i < pagesize; i++) {
    var boundindex = $("#user_summary_grid").jqxGrid('getrowboundindex', i);
    var value = $("#user_summary_grid").jqxGrid('getcellvalue', boundindex, 'CheckRow');
    if (value) checkedItemsCount++;
    /*if(checkedItemsCount > 1)
    {
    alert('more than one checkbox selected');
    }*/
    }
    // update the state of the column's checkbox. When all checkboxes on the displayed page are checked, we need to check column's checkbox. We uncheck it,
    // when there are no checked checkboxes on the page and set it to intederminate state when there is at least one checkbox checked on the page.
    if (columnCheckBox) {
    var datainfo = $("#user_summary_grid").jqxGrid('getdatainformation');
    var pagesize = datainfo.paginginformation.pagesize;
    var pagenum = datainfo.paginginformation.pagenum;
    var selectedRows = $("#user_summary_grid").jqxGrid('getselectedrowindexes');
    var state = false;
    var count = 0;
    $.each(selectedRows, function () {
    if (pagenum * pagesize <= this && this < pagenum * pagesize + pagesize) {
    count++;
    }
    });
    if (count != 0) state = null;
    if (count == pagesize) state = true;
    if (count == 0) state = false;
    updatingCheckState = true;
    $(columnCheckBox).jqxCheckBox({ checked: state });
    updatingCheckState = false;
    }
    }
    });
    /*Testing for custom row selection - different bg*/
    $("#selectrowbutton").click(function () {
    var index = parseInt($("#rowindexinput").val());
    if (!isNaN(index)) {
    $("#user_summary_grid").jqxGrid('selectrow', index);
    var rowindex = $("#user_summary_grid").jqxGrid('getselectedrowindex');
    var data = $("#user_summary_grid").jqxGrid('getrowdata', rowindex);
    //alert(rowindex);
    $('#row'+index+'user_summary_grid').find('.jqx-grid-cell').addClass('rowNoAcces');
    }
    });
    });
    ]]>
    </script>
    <style type="text/css">
    div.jqx-grid-content .jqx-grid-cell.rowNoAcces.jqx-fill-state-pressed{background-color:#fadcd9;}
    </style>
    </head>
    <body>
    <div class="jqx-hideborder" style="border:0;height:100%;position:relative;">
    <div id="userTab" class="jqx-hideborder">
    <div class="tabContentLeft jqx-hidescrollbars contentContainer">
    <div class="jscustomHeaderPane customPanelHeader">
    <div class="floatLeft">
    <div class="btnLeft">
    <input type="button" value="Add New" class='jqxButton btnPositive btnBlueBg' id="addNewUser" />
    <input type="button" value="Block / Remove" class='jqxDisabledButton' id="blockUser" />
    <input type="text" class="inputText" id="rowindexinput" />
    <input type="button" value="Select Row" class='jqxButton' id="selectrowbutton" /> <!-- -->
    </div>
    </div>
    </div>
    <div class="middleContent borderTB">
    <div id="user_summary_grid" class="noBorder">
    </div>
    </div>
    <div class="jscustomFooterPane customPanelFooter">
    <input type="button" value="Export" class='jqxButton' />
    </div>
    </div>
    <div class="tabContentRight" id="tabContentRight">
    <div class="empty-content-placeholder">
    <span>No Data to Display</span>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    I look for your reply.

    Thanks & Cheers,
    \_rssb

    Grid | Problem in custom row selection #26875

    Dimitar
    Participant

    Hi rssb,

    The issue comes from the CSS definition:

    <style type="text/css">
    div.jqx-grid-content .jqx-grid-cell.rowNoAcces.jqx-fill-state-pressed
    {
    background-color: #fadcd9;
    }
    </style>

    As I understand it, only items with the three classes – jqx-grid-cell, rowNoAcces and jqx-fill-state-pressed should have a changed background colour. However, when you select another row, the previous one does not have the class jqx-fill-state-pressed any more and the background colour is reverted to its original state.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.