I used to have the previous version of ignite ui (2012). I had a grid that was functional with no problems.
columns: [ { headerText: headerTextValues[0], key: "cntID", hidden: true }, { headerText: headerTextValues[1], key: "cntAKA", width: 250, template: "<a class='editDialog' href='Home/ManageContact?cntID=${cntID}&command=edit'>${cntAKA}</a>" }, //{ headerText: headerTextValues[2], key: "cntRelation", width: 250, template: "<a href='Home/ManageContact?cntID=${cntID}&command=edit' class='editDialog'>${cntRelation}</a>" }, //{ headerText: headerTextValues[2], key: "cntRelation", width: 250, template: "<a href='javascript;' onclick='return show_more_menu(); class='editDialog'>${cntRelation}</a>" }, { headerText: headerTextValues[2], key: "cntRelation", width: 250, template: "<a href='Home/ManageContact?cntID=${cntID}&command=edit' class='editDialog'>${cntRelation}</a>" },
//{ headerText: headerTextValues[3], key: "cntRelation", hidden: true, width: 250, template: "<a href='FullPage/ManageContactInternal?cntID=${cntID}&command=edit' class='editDialogInternal'>${cntRelation}</a>" }, //{ headerText: headerTextValues[3], key: "hrefUrlTest", width: 250 }, ],
I had a link in the template as shown in the code above.
When I upgraded igniteui to the latest version (2014), the link is no longer functional.
I tried the link as a standalone (outside of the grid template) and it works with no problems but when trying it in the iggrid template it doesn't work.
Sonia
Hello Sonia,
Thank you for using Infragistics forums!
I've tried reproducing the issue you are experiencing with a simple sample but was unable to. Could you please provide more info about your grid's setup (such as the enabled features) and what exactly the the problem with the links is? Is the URL wrong, are they not appearing at all or perhaps they cannot be clicked. A small sample reproducing the issue on your end will help immensely.
I am looking forward to hearing from you!
Best regards,
Stamen Stoychev
Hi Stamen,
Thank you for your prompt answer.
The link and code are correct because I didn't change them. They used to work with no problems before upgrading igniteui.
I wanted to track the error and find where is it exactly and I could identified. The problem is that the link wrote in the template has a class/id, when I try to refer to that class/id from a simple jquery script from outside the definition of the grid, this class/id is not detected.
I attached a sample.
In my example I created a template that calls the http://google.ca (column 1) and another one that calls an action from the controller (column 2)
The links work fine when clicked but the problem is that when I want to refer to the <a></a> tag using its class/id and write a simple alert message (please check the end of the code attached) when that link is clicked, this is not possible. I want to mention again that I start having this problem after upgrading the ignite ui.
Please let me know if I need to explain more.
Regards
I am glad I was able to help! Please, let me know if you have any other questions or concerns!
Thank you.
Yes please. I do have another question.
I have a grid and an editor. I have a drop down list in my editor from where I can choose Mother/Father/Myself.
When I add a new contact using the editor, in the grid a display the relation : Mother/Father/Myself and the name of the contact (grid with two columns). What I would like to achieve is to always display Myself in the first row (line). Which means that no matter how many contacts I add, after adding Myself, I always want to display Myself as the first contact in the grid.
I tried to achieve that using the sorting but I couldn't do it because of the alphabetic order.
Please if you need me to explain more let me know.
Thank you
I can suggest two ways for achieving this. When you are adding the row that has to be on top you could do it with the insertRow method of igDataSource. You then need to call dataBind to rerender the data.
If you are enabling Sorting anyway and you need to have that row stay first no matter of the sorting expressions applied you will have to define a custom sort function. I've implemented a simple one in the sample I am attaching to the post. You may need to modify it to better match your case.
Please, check the attached sample out and if you need help modifying it to match your scenario let me know!
Thank you for your reply.
I applied the same idea to my project but it didn't work.
What I wanted to achieve is always keep "Myself" in the first row not the last one.
I am adding contacts using an external editor.Is this make a difference ?
Please find below the code I implemented in my grid definition.
features: [
{
//Test the custom sorting name: "Sorting", customSortFunction: function (data, fields, dir) {
//the function should return the sorted data return data.sort(function (a, b) {
//this is the compare function used - basically it doesn't care about the sorting expressions that you can find in the fields var. //All it does is check for the "Myself" val and make sure it's always considered higher than the other. Then it sorts by the column property.
if (a.column === "Myself") {
return -1;
}
if (b.column === "Myself") {
return 1; }
if (a.column === b.column) {
return 0; }
return dir === "descending" ? a.column > b.column : b.column > a.column;
});
} ]
Thank you for your help.
I am sorry, I did a mistake in my original sample. The comparison function should always return an integer. Regardless the first two conditions should make sure that if "Myself" is the value of the property "column" (which is a property of my sample's data source and should be changed for your scenario) it is considered lower than the other value. This will always keep the record containing "Myself" as first. If you run my original sample it should work like this.
Please, find a modified sample with the correct sorting function attached. Change "column" with the property holding the values "Myself", "Mother" and "Father" and you should have the row kept first. Alternatively, if you could provide a small sample of your scenario I could take a look and suggest a complete solution. Please, also have in mind that the approach with a custom sort function will require the sort function to be more robust if you want to have real sorting for the other columns of the grid. This one only sorts by a single property of the records.
Sure I will.
I am glad I was able to help. Please, let me know if I can be of further assistance!
Thank you for your response.
It worked as required.
You could use a default sorting expression which will render the grid pre-sorted using it. To apply one add a column setting to your Sorting definition like this:
columnSettings: [ { columnKey: "someColumn", currentSortDirection: "asc" } ]
The column key should match the column you have "Myself" in unless you are using the simple custom sorting function I suggested in which case you can put any of your columns there. The only difference will be for which column the sorting indicator would appear.
I am attaching a modification of my original sample which demonstrates this approach.
I applied the idea to my project and it works. But what I really want to achieve is to have this functionality without the need to click on the header of the column to sort the data.
What I want to achieve is : when the data is binded to the grid after adding/deleting/editing a row using the external editor, the data is automatically sorted, which means the value "Myself " is always placed at the first row. Is this possible to achieve ?
I tried the following but it didn't work : (even with simple alerts to see if I can get the data in the columns so I can sort them, the alerts didn't work as well)
$(document).delegate("#grid", "iggridrowsrendered", function (evt, ui) {
// //return reference to igGrid // var i, w, grid = ui.owner, // //return grid's table body DOM element // tbody = ui.tbody, // ds = grid.dataSource, // data = ds.data(), // dataLength = data.length;
// //var coutRows = ("#grid").data("igGrid").dataSource.dataView().length; // var dataView = $('#grid').data('igGrid').dataSource.dataView(); // var countRows = $("#grid").data("igGrid").dataSource.dataView().length;
// var rows = $("#grid").igGrid("rows");
// if (dataLength >= 1) {
// //if (dataView[0]["Relation"] === "Myself") { // alert(data[0]);
// //} // } // /*else {
// alert("not here"); // }*/
// //alert(dataView[0]["Relation"]);
// //$.each(rows, function (i, val) {
/***********************Find the index of the row and placed at first place***************************/
// // if (dataView[val.index]["Relation"] === "Myself") {
// // alert("found" + val.idex);
// // }
// // //alert("found" + dataview[val.index]["cntID"]);
/***********************Find the index of the row and display it***************************/
// // if (dataView[val.index - 1]["Relation"] === "Myself") {
// // alert(val.index); // // }
// //});
// });
//alert(dataView[0]["Relation"]); //alert(tbody[0]);
//});