jQWidgets Forums

Tagged: Cell, cellsrenderer, DropDownList, editor, grid, jqxgrid, renderer, value

This topic contains 2 replies, has 2 voices, and was last updated by steveclay 10 years, 1 month ago.

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

Author

Correct way to use reference table or dictionary for display of values Posts

April 23, 2015 at 1:25 pm Correct way to use reference table or dictionary for display of values #70199

Participant

New user alert! This is really a combination of a jqxDropDownList question and a dataAdapter question, but I’m trying to make it happen in a grid, so I’ll ask here.

I have the following JSON data:

[{“id”:”111″,”dayOfWeek”:”1″,”start”:”02:00″,”end”:”02:30″}]

I want an editable grid row that looks like this:
111 Sunday 02:00 02:30

And I want the second column to be a drop-down with all of the days of the week in it. But I want the data for “dayOfWeek” to continue to be loaded in and sent back as an integer. Do I have to create an entire dataAdapter for the “days of the week” reference table? (I’ve done that, and can get “Sunday” to appear in the grid, but there are no other entries in the drop-down list, plus the data gets sent back to the server as “Sunday”.)

I can try to pare my work down into a fiddle if that would be helpful; otherwise, any pointers to using reference tables/dictionaries for the display of integer data items would be appreciated. Thanks!

-steve

April 23, 2015 at 1:58 pm Correct way to use reference table or dictionary for display of values #70200

Dimitar

Participant

Hello steve,

Here is how to achieve your requirement. Although the day names are displayed, the actual cell values of the “Day” column in this case will be numeric.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [{ dayOfWeek: 1, weather: 'sunny' }, { dayOfWeek: 2, weather: 'cloudy'}];

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'dayOfWeek', type: 'int' },
                    { name: 'weather', type: 'string' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                autoheight: true,
                source: dataAdapter,
                columnsresize: true,
                editable: true,
                columns: [
                  { text: 'Day', datafield: 'dayOfWeek', width: 250, columntype: 'dropdownlist',
                      cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                          return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + days[value - 1] + '</span>';
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxDropDownList({ source: ['1', '2', '3', '4', '5', '6', '7'],
                              renderer: function (index, label, value) {
                                  return days[value - 1];
                              },
                              selectionRenderer: function (htmlString) {
                                  return days[parseInt(htmlString.text()) - 1];
                              }
                          });
                      }
                  },
                  { text: 'Weather', datafield: 'weather', width: 250 }
              ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

April 23, 2015 at 2:21 pm Correct way to use reference table or dictionary for display of values #70204

steveclay

Participant

Dimitar: Thanks! This was perfect. Thanks for walking me through it.

-steve

Author

Posts

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

You must be logged in to reply to this topic.