I am working with igniteUI 13.1 and rendering a grid in a SPA (single page app). The grid is rendering perfectly and works well with all features that I have tested to this point with the exception of SOrting. I can click on the column header and get the grid to sort properly as long as I don't click on the actual header text. If I click on the actual header text, it routes me back to the start page of the App. I tracked this down in the rendered HTML code to an Anchor tag that surrounds the headertext. Such as <a href='#'> <span class=ui-iggrid-headertext" style="width: 100%;" > First Name <span></a>
If I click on the words First Name it routes back to the home page, If I click on the blank space in the header after those words, it sorts properly.
Is there a way to get around this issue?
Hello smaple2dt,
Thank you for contacting Infragistics!
It is possible to override the default behavior when the column header is clicked by calling e.preventDefault(). Overriding the default behavior may prevent the application from being routed back to Home page.
Please let me know if the behavior persists or otherwise.
If you have any questions, please let me know as well.
Tried that, but it did not work. I did find a good solution however:
It was to remove the entire HREF attribute from the <A> tag when it contained just "#".
This bit of Jquery did the trick:
$(document).on("click", ".view a[href^=\'#\']", function (e) {
$(this).removeAttr("href");
});
Hello Mickey,
I tried to reproduce this issue, but with no success. I installed the HotTowel/Durandal template from a nuget package on top of an empty ASP.NET MVC 4 application and used jQuery UI 1.9.2 and Ignite UI version 13.1.20131.2039. I'm interested what build of the Ignite UI are you using, also what version of jQuery UI. Are you reproducing this issue in specific browser or it is across all the browsers.
P.S.: I also tried with Durandal SPA project template and couldn't reproduce it.
Thanks in advance,Martin PavlovInfragistics, Inc.
IgniteUI version 13.1.2039
Other software:
/// <reference path="jquery-ui-1.10.2.js" />
/// <reference path="bootstrap.js" />
/// <reference path="breeze.debug.js" />
/// <reference path="jquery-1.9.1.js" />
/// <reference path="knockout-2.2.1.debug.js" />
/// <reference path="moment.js" />
/// <reference path="q.js" />
/// <reference path="sammy-0.7.4.js" />
/// <reference path="toastr-1.1.5.js" />
It reacts the exact same in IE 10.0, Chrome and Firefox.
Here is my grid def,its being created in the ViewAttached Durandel event:
var viewA = function (view) {
employees = datacontext.getRawEmployeeData();
$("#xgrid1").igGrid({
dataSource: employees,
dataSourceType:
'json',
autoGenerateColumns:
false,
defaultColumnWidth:
"100px",
width:
"100%",
fixedHeaders:
true,
height:
"600px",
columns:
[
{ headerText:
"ID", key: "EmployeeID", dataType: "string", width:"100px"},
"Last Name", key: "LASTNAME", dataType: "string", width: "200px" },
"First Name", key: "FRSTNAME", dataType: "string", width: "200px" },
"Position", key: "Position", dataType: "string", width: "200px" },
"HR Status", key: "HRStatusDescription", dataType: "string", width: "200px" },
"Location", key: "OfficeLocation", dataType: "string", width: "250px" }
],
features:
{ name:
"GroupBy", type: "local"},
"Sorting",
type:
"local",
columnSettings:
{ columnKey:
"EmployeeID", allowSorting: false }
]
},
"Filtering",
filterDropDownItemIcons:
filterDropDownWidth: 200,
"EmployeeID", allowFiltering: false }
{
name:
"Selection",
mode:
"row",
activeRowChanged:
function (evt, ui) {
var a = 1;
}
"Hiding",
"EmployeeID", allowHiding: false, hidden: false },
"FRSTNAME", allowHiding: false },
"LASTNAME", allowHiding: false }
Please let me know if you have any questions.
Hi,
1. When I try to sort the data by clicking on the MVC grid header, the whole data disappears and on clicking on it again displays the data.
I am using IE11 and it is not consistent.
2. When I removed Sorting feature of the MVC grid, the header back ground color is White which is same as the text. I tried changing the Header background color,
it is not getting reflected.
Can you please suggest any thing.
Thanks
Shirisha