[monahan7Participant]

I should mention that I used this as a cellrenderer, not a column renderer.

{ text: 'Email', datafield: 'Email', width: 240, cellsalign: 'center', cellsrenderer: emailrenderer, hidden: IsHidden },

[monahan7Participant]

Christopher,

Thank you so much!!! I had tried everything to fix this!

For anyone else trying to format email addresses in a column – here is the renderer code:

var emailrenderer = function (row, column, value) {
    if (value.indexOf('@') >= 0) {

        //apply format only to email addresses, not [private]
        var html = "<a href='mailto:" + value + "'>" + value + "</a>";
        return '<div style="text-align: center; margin-top: 5px;">' + html + '</div>';

    } else {

        return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';

    }
}

[monahan7Participant]

Here is something else. If I make the email column filterable, this is what happens.

1) Everything is fine at first. Before screen shot

2) Then I type letters into the filter row for email. The column filters properly. Still all good. During screen shot

3) When I backspace to remove the email filter – data is wrong. After screen shot

And again, this issue doesn’t occur if I return text for the email from the DB, instead of HTML

[monahan7Participant]

My Javascript code:

var GetAttendeeGridData = function (theme, EventId) {
        // prepare the data
        var return_data = null;

        var dataValue = {
            EventId: EventId,
        };

        //get main grid data
        Stomper.ajax({
            url: '/Api/EventAttendees',
            method: 'Post',
            data: dataValue,
            success: function (json) {

                return_data = Stomper.CheckForError(json);

            },
            error: function (msg) {
                Stomper.ShowErrorBox(msg.responseJSON.Message);
                LoadAttendeeGrid(theme, null);
            }
        }).done(function () {
            Stomper.HideLoading();
            LoadAttendeeGrid(theme, return_data);
        });
    };

    var LoadAttendeeGrid = function (theme, data) {

        //rebuild controls, because height is set to auto. Content added before grid built.
        $('#jqxradiobuttonYes').jqxRadioButton({ checked: true });
        $('#jqxgridAttendee').jqxGrid('destroy');
        $('#AttendeeGridParent').after('<div id="jqxgridAttendee" style="width:100%;margin-top:4px;"></div>');

        var source =
        {
            localdata: data,
            datatype: 'json',
            datafields:
                [
                    { name: 'UserNameInfo', type: 'string' },
                    { name: 'Alias', type: 'string' },
                    { name: 'SignupDate', type: 'date' },
                    { name: 'IsAttendingString', type: 'string' },
                    { name: 'IsStomper', type: 'bool' },
                    { name: 'IsSplit', type: 'bool' },
                    { name: 'IsSupport', type: 'bool' },
                    { name: 'Email', type: 'string' },
                    { name: 'PhoneNumber', type: 'string' },
                    { name: 'StomperSplitSupport', type: 'string' },
                ],
        };
        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function (data) {  },
            loadError: function (xhr, status, error) { }
        });

        var SetFilter = function (which) {
            var attendingFilterGroup = new $.jqx.filter();
            var filter_or_operator = 0; //1 is for OR. 0 is for AND
            var filtervalue = which;
            var filtercondition = 'EQUAL'; //NOT_EQUAL
            var attendingFilter1 = attendingFilterGroup.createfilter('stringfilter', filtervalue, filtercondition);
            attendingFilterGroup.addfilter(filter_or_operator, attendingFilter1);
            $('#jqxgridAttendee').jqxGrid('addfilter', 'IsAttendingString', attendingFilterGroup);
            $('#jqxgridAttendee').jqxGrid('applyfilters');
            
        };

        $('#CloseAttendee').jqxButton({ theme: theme });
        $('#jqxradiobuttonYes').jqxRadioButton({ theme: theme });
        $('#jqxradiobuttonNo').jqxRadioButton({ theme: theme });
        $('#jqxradiobuttonNA').jqxRadioButton({ theme: theme });

        $('#jqxradiobuttonYes').bind('change', function (event) {
            var checked = event.args.checked;
            if (checked) {
                $('#jqxradiobuttonNo').jqxRadioButton({ checked: false });
                $('#jqxradiobuttonNA').jqxRadioButton({ checked: false });
                SetFilter('YES');
            }
        });
        $('#jqxradiobuttonNo').bind('change', function (event) {
            var checked = event.args.checked;
            if (checked) {
                $('#jqxradiobuttonYes').jqxRadioButton({ checked: false });
                $('#jqxradiobuttonNA').jqxRadioButton({ checked: false });
                SetFilter('NO');
            }
        });
        $('#jqxradiobuttonNA').bind('change', function (event) {
            var checked = event.args.checked;
            if (checked) {
                $('#jqxradiobuttonYes').jqxRadioButton({ checked: false });
                $('#jqxradiobuttonNo').jqxRadioButton({ checked: false });
                SetFilter('NA');
            }
        });

        //must be done before initializing grid
        $('#jqxgridAttendee').bind('bindingcomplete', function () {
            var localizationobj = {};
            localizationobj.filterchoosestring = 'ALL';
            $('#jqxgridAttendee').jqxGrid('localizestrings', localizationobj);
        });

        var IsHidden = false;
        var IsMobile = Stomper.IsMobile();
        if (IsMobile == true) {
            IsHidden = true;
        }

        $('#jqxgridAttendee').jqxGrid(
        {
            source: dataAdapter,
            editable: false,
            theme: theme,
            pageable: false,
            sortable: true,
            autoheight: true,
            autowidth: true,
            altrows: true,
            columnsresize: true,
            enabletooltips: true,
            filterable: true,
            showfilterrow: true,
            ready: function () {
                SetFilter('YES');
            },
            columns: [
                { text: 'Name', datafield: 'UserNameInfo', width: 310, cellsalign: 'center', renderer: columnsrenderer },
                { text: 'Type', datafield: 'StomperSplitSupport', width: 80, filtertype: 'list', renderer: columnsrenderer },
                { text: 'Email', datafield: 'Email', width: 240, cellsalign: 'center', renderer: columnsrenderer, hidden: IsHidden, filterable: false },
                { text: 'PhoneNumber', datafield: 'PhoneNumber', width: 160, cellsalign: 'center', renderer: columnsrenderer, hidden: IsHidden, filterable: false },
                { text: 'Attending?', datafield: 'IsAttendingString', columntype: 'checkbox', width: 0, cellsalign: 'center', filtertype: 'boolean', renderer: columnsrenderer, hidden: true },
            ],
        });
        $("#jqxgridAttendee").jqxGrid('setcolumnproperty', 'IsAttendingString', 'width', 0);
        if (IsMobile == true) {
            $("#jqxgridAttendee").jqxGrid('setcolumnproperty', 'Email', 'width', 0);
            $("#jqxgridAttendee").jqxGrid('setcolumnproperty', 'PhoneNumber', 'width', 0);
        }

    };

[Author]

Posts