jQuery UI Widgets › Forums › Grid › how can i show something in the grid cell
Tagged: attribute, Cell, cellsrenderer, grid, horizontal, jqxgrid, scroll
This topic contains 4 replies, has 2 voices, and was last updated by daydreamer 10 years, 2 months ago.
-
Author
-
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”);
});
}
});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
codebutton from the toolbar.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/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.
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,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thanks for your helping, i already solve the problem! -
AuthorPosts
You must be logged in to reply to this topic.