jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • September 11, 2014 at 7:39 am in reply to: how can i show something in the grid cell how can i show something in the grid cell #59404

    daydreamer
    Participant

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

    September 10, 2014 at 10:59 am in reply to: how can i show something in the grid cell 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.

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)