jQWidgets Forums

jQuery UI Widgets Forums Grid HTML in column, causes wrong data after applying filter

This topic contains 5 replies, has 2 voices, and was last updated by  monahan7 9 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • monahan7
    Participant

    I have a grid, that holds events. Users mark the event ass attending, or not attending. The default is N/A. I have a grid in a modal window, that shows all users. There are 3 radio buttons above the grid for attending, not attending, N/A. One of the columns in the grid shows the user’s email address. A user can declare their profile information (email and phone number) as public or hidden. If the profile is not public, I return [private] from the database, else I return the email and phone number.

    C# code

                                           if(item.IsPublic == false)
    					{
    						item.Email = "[private]";
    						item.PhoneNumber = "[private]";
    					}
    					else
    					{
    						item.Email = "<a href='mailto:" + item.Email + "'>" + item.Email + "</a>";
    					}
    

    I am returning HTML for the email address, so the link is clickable to open email.

    Here are some screen shots.
    1) Attending filter. (Only 1 person currently attending. He has a public profile) Attending screen shot

    2) Not Attending filter: Not Attending screen shot

    3) N/A filter: (Only 1 person, travis, has a public profile) N/A screen shot

    If I click on Not Attending, then N/A, everything is ok. If I click on Attending, and then click on N/A – the email column gets bad data.

    N/A_After_Clicking_Attending screen shot

    NOW – if I return the email as text, and not HTML, this issue goes away.
    C# code

                                           if(item.IsPublic == false)
    					{
    						item.Email = "[private]";
    						item.PhoneNumber = "[private]";
    					}
    
                                            //simply return item.Email - not HTML
    					//else
    					//{
    					//	item.Email = "<a href='mailto:" + item.Email + "'>" + item.Email + "</a>";
    					//}
    

    Ever seen this? Any ideas?


    monahan7
    Participant

    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);
            }
    
        };

    monahan7
    Participant

    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


    Christopher
    Participant

    Hi monahan7,

    you need to reconfigure your custom renderer function for the email column in order to visualize it properly. You can make a custom renderer function just for the email column or modify the one you already use for all of the columns (‘columnsrenderer’). Your code is correct, the return type for the email column will be “string” but you need to modify the renderer to visualize the values correctly. Here is a demo that demonstrates exactly what you are trying to accomplish:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customcolumn.htm?light

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com


    monahan7
    Participant

    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>';
    
        }
    }
    

    monahan7
    Participant

    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 },
    
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.