jQWidgets Forums

This topic contains 6 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 2 months ago.

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

Author

Grid – cell rendering Posts

April 19, 2013 at 2:34 am Grid – cell rendering #19589

Participant

Hi,

I need to display a column value which gets generated at the DB upon clicking ‘Add’ in Grid. This happens to be the last column in row.
i want to display this implicitly by calling some Grid render function.

The column value appears once i press ‘F5’ explicitly, ( i have all the conversion methods working properly on server side for this column)

i tried calling ‘render / refresh’ methods in Grid , but it’s not working.

I have pasted code below, it’s the ‘Timestamp’ column which i need to display as explained.

Please help, as i need this very urgently.

Thanks,

Keshavan

<html>
<head>
    <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons.
        To save the changes, click the 'Save' button in the popup dialog. To cancel the
        changes click the 'Cancel' button in the popup dialog.</title>
    <link rel="stylesheet" href="/JqWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/JqWidgets/jqwidgets/styles/jqx.ui-smoothness.css" type="text/css" />
    <link rel="stylesheet" href="/JqWidgets/jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
    <link rel="stylesheet" href="/Content/Site.css" type="text/css" />
    <script type="text/javascript" src="/JqWidgets/Scripts/gettheme.js"></script>
    <script type="text/javascript" src="/JqWidgets/Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare sample data.
            var data = {};
            var tt;
            var generaterow = function (id) {
                var row = {};
                row["GroupCompanyId"] = id,
                row["GroupName"] = " ";
                row["Miscellaneous1"] = " ";
                row["Culture"] = " ";
                row["Timestamp"] = " ";
                return row;
            }
            var source =
            {
                datatype: "json",
                datafields: [
                        { name: 'GroupCompanyId' },
                        { name: 'GroupName' },
                        { name: 'Miscellaneous1' },
                        { name: 'Culture' },
                        { name: 'Timestamp' }
                        ],
                id: 'GroupCompanyId',
                url: 'GroupCompany/GetGroupCompanies',
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
                    $.ajax(
                    {
                        cache: false,
                        dataType: 'json',
                        url: 'GroupCompany/Add',
                        data: rowdata,
                        tt: rowdata.Timestamp,
                        type: "POST",
                        success: function (data, status, xhr) {
                            // insert command is executed.
                            commit(true);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(errorThrown);
                            commit(false);
                        }
                    });
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    $.ajax({
                        dataType: 'json',
                        cache: false,
                        url: '/GroupCompany/Delete/5',
                        type: "POST",
                        success: function (data, status, xhr) {
                            // delete command is executed.
                            commit(true);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(jqXHR.statusText);
                            commit(false);
                        }
                    });
                },
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    {
                        alert("Inside Update .... ");
                        alert("GroupCompanyId value is  " + rowdata.GroupCompanyId);
                        alert("GroupName value is  " + rowdata.GroupName);
                        alert("Misc1 value is  " + rowdata.Miscellaneous1);
                        alert("Culture value is  " + rowdata.Culture);
                        alert("Timestamp value is  " + rowdata.Timestamp);
                        $.ajax(
                                 {
                                     cache: false,
                                     dataType: 'json',
                                     url: 'GroupCompany/Update',
                                     tt: rowdata.Timestamp,
                                     data: rowdata,
                                     type: "POST",
                                     success: function (data, status, xhr) {
                                         // update command is executed.
                                         alert("GroupCompanyId value is  " + rowdata.GroupCompanyId);
                                         alert("GroupName value is  " + rowdata.GroupName);
                                         alert("Misc1 value is  " + rowdata.Miscellaneous1);
                                         alert("Culture value is  " + rowdata.Culture);
                                         alert("Timestamp value is  " + rowdata.Timestamp);
                                         alert('success');
                                         commit(true);
                                     },
                                     error: function (jqXHR, textStatus, errorThrown) {
                                         /*         alert("GroupCompanyId value is  " + rowdata.GroupCompanyId);
                                         alert("GroupName value is  " + rowdata.GroupCompanyName);
                                         alert("Misc1 value is  " + rowdata.Miscellaneous1);
                                         alert("Culture value is  " + rowdata.Culture);
                                         alert("Timestamp value is  " + rowdata.Timestamp); */
                                         alert("Fails ... ");
                                         alert(errorThrown);
                                         commit(false);
                                     }
                                 }
                             );
                    }
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid<a href="../../JqWidgets/index.htm">../../JqWidgets/index.htm</a>
            $("#jqxgrid").jqxGrid(
            {
                width: 950,
                source: dataAdapter,
                theme: 'ui-sunny',
                pageable: true,
                autoheight: true,
                editable: true,
                editmode: 'click',
                selectionmode: 'selectedcell',
                columns: [
                { text: 'Group', datafield: 'GroupName', width: 370 },
                { text: 'Other Info ', datafield: 'Miscellaneous1', width: 370 },
                { text: 'Culture', datafield: 'Culture', width: 120 },
                { text: 'Version', datafield: 'Timestamp', sortable: false, hidden: false, editable: false,
                    width: 120
                }
                ]
            });
            $("#addrowbutton").jqxButton();
            $("#deleterowbutton").jqxButton();
            $("#updaterowbutton").jqxButton();
            // update row.
            $("#updaterowbutton").bind('click', function () {
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                    $('#jqxGrid').jqxGrid('render');
                }
            });
            // create new row.
            $("#addrowbutton").bind('click', function () {
                var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                var rowscount = datainformation.rowscount;
                editrow = rowscount + 1;
                var datarow = generaterow(rowscount + 1);
                $("#jqxgrid").jqxGrid('addrow', rowscount + 1, generaterow(), 'top');
                
            });
            //new code ends
            // delete row.
            $("#deleterowbutton").bind('click', function () {
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    $("#jqxgrid").jqxGrid('deleterow', id);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div style="margin-left: 5px;">
        <div>
            <input id="addrowbutton" type="button" style="margin-top: 10px;" value=" (+) record" />
            <input id="deleterowbutton" type="button" style="margin-top: 10px;" value=" (-) record" />
            <input id="updaterowbutton" type="button" style="margin-top: 10px;" value=" Edit/Save" />
        </div>
    </div>
    <br />
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

April 19, 2013 at 8:47 am Grid – cell rendering #19605

support

Participant

Hi Keshavan,

Please take a look at the following example at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsrendering.htm If you have any questions do not hesitate to contact is.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

April 19, 2013 at 9:00 am Grid – cell rendering #19609

Keshavan

Participant

Hi Peter,

Hi,

1) I have implemented ‘Timestamp’ column in grid.

2) I have with out any issues completed the corresponding server side code.

Issue.

1) When ‘addrow’ is invoked, the value for the said column gets generated properly in SQL server table by the Db.

2) When i press ‘F5’ explicitly, the value appears in Grid.

3) I need to bring that value in to the Timestamp column of grid , each time update is called. ( without using F5).

Thanks,

Keshavan

April 19, 2013 at 10:07 am Grid – cell rendering #19619

Keshavan

Participant

Hi Peter,

I am struck for over a week now, need some solution for my problem above.

Thanks,

Keshavan

April 19, 2013 at 10:15 am Grid – cell rendering #19623

Peter Stoev

Keymaster

Hi Keshavan,

As my colleague Marya already posted – to customize cells rendering you should use the column’s cellsrenderer callback. If you want to update a certain cell value, you may use the “setcellvalue” method or even the “updaterow” method. I do not have anything more to add here. As a final note, the Forum is for the Community and you should expect assistance only from your peers in the Forum.

Best Regards,
Peter Stoev

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

April 19, 2013 at 10:51 am Grid – cell rendering #19633

Keshavan

Participant

Hi Peter,

Will the support be on the same lines, once i become a licensed user ?

Thanks,

Keshavan

April 19, 2013 at 10:53 am Grid – cell rendering #19634

Peter Stoev

Keymaster

Hi Keshavan,

What do you mean by “same lines”? Support for licensed developers is through e-mail and the response time depends on the type of license.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.