jQWidgets Forums
jQuery UI Widgets › Forums › Grid › HTML in column, causes wrong data after applying filter
Tagged: angular grid, bootstrap grid, javascript grid, jquery grid, jqwidgets grid, jqxgrid, wrong data
This topic contains 5 replies, has 2 voices, and was last updated by monahan7 9 years ago.
-
Author
-
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 shot2) 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# codeif(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?
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); } };
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
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?lightBest Regards,
ChristopherjQWidgets Team
http://www.jqwidgets.comChristopher,
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>'; } }
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 },
-
AuthorPosts
You must be logged in to reply to this topic.