jQuery UI Widgets Forums Grid Binding events to grid cells in Server side pagination

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

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

  • sairam
    Participant

    Hi Team ,

    i have the JQX Grid with editable fields . Generating the id for editable field through rendering property and binding events to the generated ids through the rendered property.
    This is working fine with the client side pagination .
    To support huge load of data , converting it to server side pagination . Events are not binding which are configured through rendered property.

    suggest the approach to achieve the binding events .

    sample code:

    $(“#jqxgrid”).jqxGrid(
    {
    width: 670,
    source: source,
    pageable: true,
    autoheight: true,
    columns: [
    { text: ‘First Name’, datafield: ‘firstname’, width: 100 },
    { text: ‘Last Name’, datafield: ‘lastname’, width: 100 ,edittype: ‘checkbox’ ,
    rendering:function(){ // generating uniqueID} ,
    rendered: function(){//Binding events for the geneatedID } }
    ]
    });


    Dimitar
    Participant

    Hi sairam,

    Could you, please, share more information about the events you wish to bind to? The code you have implemented in rendering and rendered would also help us understand the issue you experience and give you relevant advice. Please also consider using the built-in events of jqxGrid (as documented here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm).

    Best Regards,
    Dimitar

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


    sairam
    Participant

    HI Dimitar ,

    We have customized check boxes in the grid and i have to manipulate other cell values based on this editable column . i have provided the code in detail below .Even noticed the other issue while applying the server side pagination . i am applying the css by using the cellclassname property , which is working fine in client side .
    Could you please assist to sort out this issue ..

    $(“#jqxgrid”).jqxGrid(
    {
    width: 670,
    source: source,
    pageable: true,
    autoheight: true,
    columns: [
    { text: ‘First Name’, datafield: ‘firstname’, width: 100 },
    { text: ‘Last Name’, datafield: ‘lastname’, width: 100 ,columntype: ‘checkbox’ ,
    rendering:function(){ // generating uniqueID
    return ‘<div > <label> viewpermission </label> <div id=”viewpermission”> </div></div>’;
    } ,
    rendered: function(element){ //Binding events for the geneatedID

    var viewpermId = $(element).find(‘#viewpermission’);

    $(viewpermId).on(‘change’,function(event){
    // if this view is checked or unchecked ,
    we are manipulating the other cell values

    }
    );

    }
    ,cellclassname: applyasthetics
    }
    ]
    });

    applyasthetics = function(row,column,value,data){
    return css class based on the column.
    }

    Thanks
    sairam korada


    Dimitar
    Participant

    Hi sairam korada,

    Please note the following:

    • There is no column property “rendering” in jqxGrid.
    • The rendered column property is called when the column header is rendered. You can use it to set additional settings to the column’s header element.
    • To apply custom rendering to cells, please use the cellsrenderer column property (more information).
    • We suggest you make use of the built-in columntype: 'checkbox' and manipulate other cells on the cellendedit event of the checkbox column.

    Best Regards,
    Dimitar

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


    sairam
    Participant

    Hi Dimitar ,

    Please find the comments below for the above mentioned points. please provide your inputs to achive the expected behaviour .

    1: its not the rendering property ,i am using the property renderer.
    2: yes my requirement is to determine the state of group checkbox header based on other fields data . using the rendered column property to determine the same .
    3: i tried using the cellsrenderer column property , still having the issue in applying the custom logic during the cell redering .
    Observation :
    In the cellsrenderer call back method (ie showdifference method ), i need to apply the css to a particular cell column , by checking the data of other 2 columns in the corresponding row to identify the applicable CSS .
    while debugging , data of the columns returned were not of the corresponding row . ie when the grid is rendering the second row , i am getting the column info of first row . i am trying to implement for a grouping grid and serverside pagination, pls suggest is it due to grouping grid.

    4: Using the built-in columntype: ‘checkbox’ only , since we have multiple check boxes columns headers , want to generate the unique id for each column header checkbox.

    please find the updated code snippet:

    $(“#jqxgrid”).jqxGrid(
    {
    width: 670,
    source: source,
    pageable: true,
    autoheight: true,
    columns: [
    { text: ‘First Name’, datafield: ‘firstname’, width: 100 },
    { text: ‘Last Name’, datafield: ‘firstname’, width: 100 },
    { text: ‘New Permissions’, datafield: ‘firstname’, width: 100 },
    { text: ‘Old Permissions’, datafield: ‘firstname’, width: 100 },
    { text: ‘Modified’, datafield: ‘firstname’, width: 100 },
    { text: ‘PermissionInfo’, datafield: ‘lastname’, width: 100 ,columntype: ‘checkbox’ ,
    rendering:function(){ // generating uniqueID
    return ‘<div > <label> viewpermission </label> <div id=”viewpermission”> </div></div>’;
    } ,
    rendered: function(element){ //Binding events for the geneatedID

    var viewpermId = $(element).find(‘#viewpermission’);

    $(viewpermId).on(‘change’,function(event){
    // if this view is checked or unchecked ,
    we are manipulating the other cell values

    }
    );

    }
    ,cellsrenderer : showdifference
    }
    ]
    });

    showdifference = function(row,columnfield,value,defaulthtml,columnproperties){
    var value1 = $(‘#jqxGrid’).jqxGrid(‘getcellvalue’, row, “New Permissions”);
    var value2 = $(‘#jqxGrid’).jqxGrid(‘getcellvalue’, row, “Old Permissions”);
    if value1 != value2
    apply different css for modfied column
    // reading the properties of other comlumns to compare

    return css class based on the column.
    }

    Thanks
    sairam


    Dimitar
    Participant

    Hi sairam,

    Please share your complete grid initialization code with the actual function implementations and not pseudocode. Preferably, share with us a jsEditor/JSFiddle example that showcases your scenario. Please also note that in your updated code snippet, you are still using the invalid callback “rendering”:

    rendering:function(){ // generating uniqueID
    return '<div > <label> viewpermission </label> <div id="viewpermission"> </div></div>';
    } ,

    Please also specify what your ultimate goal is and we may think of a better solution and offer it to you.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.