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?
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
Hello smaple2dt,
Please let me know if you have any questions.
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 }
});
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.
Thank you for the update.
I am glad you are able to move forward with your application.
If you have any questions, please let us know.