Cellrenderer w/rowdetails

[tlewisParticipant]

Is there an example of how to use cellrenderer to format a datetime field using jqxGrid and rowdetails? I’m very new to jqwidgets. I’ve looked at the posted example and and it adds this information to a column, but the data I’m trying to format is not one of the main columns and is located on a tab in the rowdetail. So where and how would I apply the cellrenderer in this case?

[tlewisParticipant]

My Code:

<script type="text/javascript">
        $(document).ready(function() {
            
            var source = {
                type: 'GET',
                dataType: 'xml',
                contentType: 'application/json; charset=utf-8',
                datafields: [
                    { name: 'patient_id', type: 'string' },
                    { name: 'episode_id', type: 'string' },
                    { name: 'patient_name', type: 'string' },
                    { name: 'clinician_name', type: 'string' },
                    { name: 'proc_code', type: 'string' },
                    { name: 'status', type: 'string' },
                    { name: 'duration_type', type: 'string' },
                    { name: 'proc_duration', type: 'int' },
                    { name: 'proc_chron', type: 'datetime' },
                    { name: 'proc_chron_end', type: 'datetime' },
                    { name: 'place_of_service', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'axis_I_II_1', type: 'string' }
                ],
                async: true,
                record: 'Table',
                url: 'PCITMetrics.aspx/MonthlyMetricSummary'
                //pagesize: 20
            };

            var initrowdetails = function (index, parentElement, gridElement, datarecord) {
                var tabsdiv = null;
                var procedure = null;
                var diagnosis = null;
                tabsdiv = $($(parentElement).children()[0]);
                if (tabsdiv != null) {
                    procedure = tabsdiv.find('.procedure');
                    diagnosis = tabsdiv.find('.diagnosis');
                    var client = tabsdiv.find('.client');
                    client.text("Procedure Info");
                    var container = $('<div style="margin: 5px;"></div>');
                    container.appendTo($(procedure));
                    var proleftcolumn = $('<div style="float: left; width: 45%;"></div>');
                    var prorightcolumn = $('<div style="float: left; width: 40%;"></div>');
                    container.append(proleftcolumn);
                    container.append(prorightcolumn);
                    var durationType = "<div style='margin: 10px;'><b>Duration Type:</b> " + datarecord.duration_type + "</div>";
                    var procDuration = "<div style='margin: 10px;'><b>Duration:</b> " + datarecord.proc_duration + "</div>";
                    var procStart = "<div style='margin: 10px;'><b>Start:</b> " + datarecord.proc_chron + "</div>";
                    var procEnd = "<div style='margin: 10px;'><b>End:</b> " + datarecord.proc_chron_end + "</div>";
                    $(proleftcolumn).append(durationType);
                    $(proleftcolumn).append(procDuration);
                    $(proleftcolumn).append(procStart);
                    $(proleftcolumn).append(procEnd);
                    var clinician = "<div style='margin: 10px;'><b>Clinician:</b> " + datarecord.clinician_name + "</div>";
                    var placeOfService = "<div style='margin: 10px;'><b>Place of Service:</b> " + datarecord.place_of_service + "</div>";
                    var location = "<div style='margin: 10px;'><b>Location:</b> " + datarecord.location + "</div>";
                    $(prorightcolumn).append(clinician);
                    $(prorightcolumn).append(placeOfService);
                    $(prorightcolumn).append(location);
                    var dContainer = $('<div style="margin: 5px;"></div>');
                    dContainer.appendTo($(diagnosis));
                    var diagleftcolumn = $('<div style="float: left; width: 45%;"></div>');
                    dContainer.append(diagleftcolumn);
                    //var diagrightcolumn = $('<div style="float: left; width: 40%;"></div>');
                    var procDiagnosis = "<div style='margin: 10px;'><b>Diagnosis Code:</b> " + datarecord.axis_I_II_1 + "</div>";
                    $(diagleftcolumn).append(procDiagnosis);
                    $(tabsdiv).jqxTabs({ theme: 'dark', width: 750, height: 170 });
                 }
            }

            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                    // data is loaded.
                }
            });
            
            $('#jqxgrid').jqxGrid({
                width: '100%',
                height: '600px',
                source: dataAdapter,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='client'></li><li>Diagnosis</li></ul><div class='procedure'></div><div class='diagnosis'></div></div>", rowdetailsheight: 200, rowdetailshidden: true },
                initrowdetails: initrowdetails,
                theme: 'dark',
                columns: [
                    { text: 'Patient ID', datafield: 'patient_id', width: '10%' },
                    { text: 'Episode ID', datafield: 'episode_id', width: '10%' },
                    { text: 'Patient', datafield: 'patient_name', width: '25%' },
                    { text: 'Clinician', datafield: 'clinician_name', width: '25%' },
                    { text: 'Procedure Code', datafield: 'proc_code', width: '20%' },
                    { text: 'Status', datafield: "status", width: '10%' },
                ]
            });
    </script>

[HristoParticipant]

Hello tlewis,

I would like to ask you for few things, could you clarify what you want to achieve?
If you want to format the type of the date (ex. dd/MM/yyy), you could use cellsformat: 'D' member.
In case that the text content is not aligned, you could do it with the “cellsrenderer” there is ‘defaultHtml’ argument that could use.
I would like to suggest you look at this tutorial:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsrendering.htm?search=grid

About the initrowdetails and rowdetails is used when you want to show an additional detail about rows.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts