jQuery UI Widgets Forums Grid how can i show something in the grid cell

This topic contains 4 replies, has 2 voices, and was last updated by  daydreamer 9 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • how can i show something in the grid cell #59334

    daydreamer
    Participant

    Hi,
    here is my problem,there are a lot of cells in a jqxgrid and every cell has it’s attribute,i put the attribute into a HTML DOM ,then put cell data and the HTML element together as my localdata. i got a three checkbox on my page,every cell’s attribute depend on the each checkbox.i suppose to checking the checkbox and show the attribute what is related.But when i’m scolling horizontally,jqxgrid will refresh the data.The showing attribute controled by the css. what can i do ? Here is a piece of my code. Expect for your help!

    for(var i=0;i<tableData.length;i++){
    floor = tableData[i].FLOOR_LIST[0].item;
    room = floor[a].ROOM_LIST[0].item;
    roomNum = room.length;
    if(typeof(roomNum) != “undefined”){
    for(var j=0;j<roomNum;j++){
    var ymsdt1020 = new YMSDT1020(“”,””,””,””,””,””,””,””,””,””,””,””,””,””,””,””,””,””,””,””);
    ymsdt1020.LCXH = floor[a].LCXH;
    ymsdt1020.LCXHT = floor[a].LCXHT;
    ymsdt1020.FJBM = room[j].FJBM;
    ymsdt1020.FJBMT = room[j].FJBMT;
    ymsdt1020.DYHS = room[j].DYHS;
    ymsdt1020.HXBM = room[j].HXBM;
    ymsdt1020.HXBMT = room[j].HXBMT;
    ymsdt1020.XSTAY = room[j].XSTAY;
    ymsdt1020.XSTAYT = room[j].XSTAYT;
    ymsdt1020.XTAY = room[j].XTAY;
    ymsdt1020.JZTYP = room[j].JZTYP;
    ymsdt1020.JZTYPT = room[j].JZTYPT;
    ymsdt1020.XKTYP = room[j].XKTYP;
    ymsdt1020.YHB = room[j].YHB;
    ymsdt1020.XHB = room[j].XHB;
    ymsdt1020.HBNUM = room[j].HBNUM;
    ymsdt1020.BDJ = room[j].BDJ;
    ymsdt1020.BZJ = room[j].BZJ;
    ymsdt1020.ROOMJ = room[j].ROOMJ;
    ymsdt1020.SERNR = room[j].SERNR;
    arr.push(room[j].FJBMT+”<span name=’area’ style=’display:none’>”+room[j].XKTYP+”</span>”);
    objY.push(ymsdt1020);
    }
    }else{
    var ymsdt1020 = new YMSDT1020(“”,””,””,””,””,””,””,””,””,””,””,””,””,””,””,””,””,””,””,””);
    ymsdt1020.LCXH = floor[a].LCXH;
    ymsdt1020.LCXHT = floor[a].LCXHT;
    ymsdt1020.FJBM = room.FJBM;
    ymsdt1020.FJBMT = room.FJBMT;
    ymsdt1020.DYHS = room.DYHS;
    ymsdt1020.HXBM = room.HXBM;
    ymsdt1020.HXBMT = room.HXBMT;
    ymsdt1020.XSTAY = room.XSTAY;
    ymsdt1020.XSTAYT = room.XSTAYT;
    ymsdt1020.XTAY = room.XTAY;
    ymsdt1020.JZTYP = room.JZTYP;
    ymsdt1020.JZTYPT = room.JZTYPT;
    ymsdt1020.XKTYP = room.XKTYP;
    ymsdt1020.YHB = room.YHB;
    ymsdt1020.XHB = room.XHB;
    ymsdt1020.HBNUM = room.HBNUM;
    ymsdt1020.BDJ = room.BDJ;
    ymsdt1020.BZJ = room.BZJ;
    ymsdt1020.ROOMJ = room.ROOMJ;
    ymsdt1020.SERNR = room.SERNR;
    arr.push(room.FJBMT);
    objY.push(ymsdt1020);
    }

    }
    arrData.push(arr);
    source =
    {
    localdata: arrData,
    datafields: arrDataField,
    datatype: “array”,
    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.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’);
    commit(true);
    }

    };

    dataAdapter = new $.jqx.dataAdapter(source);
    $(“#jqxgrid”).jqxGrid(
    {
    width: “100%”,
    source: dataAdapter,
    selectionmode: ‘multiplecells’,
    pageable: true,
    editable: true,
    altrows: true,
    columns: arrClumn,
    scrollmode:’logical’,
    columngroups: arrGroup
    });

    $(“#inlineCheckbox3”).click(function(){
    if($(“#inlineCheckbox3”).is(“:checked”)){
    $(“span[name=’area’]”).each(function(){
    $(this).show();
    // $(this).css(“display”,”inline”);

    });
    }else{
    $(“span[name=’area’]”).each(function(){
    $(this).hide();
    // $(this).css(“display”,”none”);
    });
    }
    });

    how can i show something in the grid cell #59355

    Dimitar
    Participant

    Hello daydreamer,

    I am not sure I understand your scenario. Please clarify and share a complete example, including your HTML. Remember to format your code by selecting it an pressing the code button from the toolbar.

    Best Regards,
    Dimitar

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

    how can i show something in the grid cell #59368

    daydreamer
    Participant

    Hello Dimitar,
    Sorry about the excursive code. The scenario is I already draw a grid on my JSP,the i Here is a complete code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example shows how to create a Grid from XML string.
        </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.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.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/customers.xml";
    
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                        { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                        { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                        { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                        { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                        { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                    ],
                    root: "entry",
                    record: "content",
                    id: 'm\\:properties>d\\:CustomerID',
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // Create jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    columnsresize: true,
                    columns: [
                      { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                      { text: 'Contact Name', datafield: 'ContactName', width: 250 },
                      { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                      { text: 'City', datafield: 'City', width: 120 },
                      { text: 'Postal Code', datafield: 'PostalCode', width: 90 },
                      { text: 'Country', datafield: 'Country', width: 100 }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
    <div>
    		<label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1">
                      Attribute1 </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" id="inlineCheckbox2" value="option2">
                      Attribute2 </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" id="inlineCheckbox3" value="option3">
                      Attribute3</label>
    	</div>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    I want to set three attributes to every grid cell and whenever i click the checkbox the attribute will show in the grid cell. Just like i click the Attribute1 button,every cell who has the attribute1 will show attribute1 in the cell. The first row and forth column is Berlin, ‘German’,’Beauty’,’Kind’ are it’s attributes and correspond Attribute1, Attribute2 and Attribute3. When Attribute1 checkbox is checked, the ‘German’ will show under Berlin. And most important is when i scroll horizontally, the showed attribute won’t be gone. The other two checkboxes will be work as Attribute1 checkbox.

    how can i show something in the grid cell #59370

    Dimitar
    Participant

    Hi daydreamer,

    Assuming you can associate these attributes to the cells, you can display them using cellsrenderer. You can call the grid refresh method to repaint the grid (automatically calling cellsrenderer) when another checkbox has been clicked.

    Best Regards,
    Dimitar

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

    how can i show something in the grid cell #59404

    daydreamer
    Participant

    Hi Dimitar,
    Thanks for your helping, i already solve the problem!

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

You must be logged in to reply to this topic.