Hi All,
I am new to Infragistics in MVC.I need to set first column of the grid should not be movable from first position.I tried "ColumnMoving" property by setting allowMoving and enable property to false.I was not able to move the column by dragging but using 'Moving options' property I can able to move second column to first position and I can able to move other columns to first position.Please let me know your suggestions.
Please find the code given below.
$.ig.loader({
scriptPath: "@Url.Content("~/Content/Scripts")",
cssPath: "@Url.Content("~/Content/css")",
resources: 'igGrid.*',
ready: function () {
$.getJSON("@Url.Content("~/ProviderInquiry/GetAll")", JSON.stringify(dataResponse), function (data) {
var headerTextValues = ["ID", "Suffix", "NPI", "Title", "Address Line1", "Status"];
$('#employeeGrid').igGrid({
expandCollapseAnimations: true,
animationDuration: 1000,
expandTooltip: "Expand to View Details",
collapseTooltip: "Hide details",
height: "35%",
width: "100%",
dataSource: data,
responseDataKey: "Records",
dataSourceType: "json",
autoGenerateLayouts: false,
autoGenerateColumns: false,
rowEditDialogContainment: "owner",
showReadonlyEditors: false,
columns: [
{
headerText: headerTextValues[0], key: "ProviderID", width: 100,
template: "<a href='@Url.Content("~/Provider/Provider?ProviderInternalNum=${ProviderInternalNum}")' target='_blank'>${ProviderID}</a>"
},
{ headerText: headerTextValues[1], key: "ProviderSuffix", width: 70 },
{ headerText: headerTextValues[2], key: "NPI", width: 100 },
{ headerText: headerTextValues[3], key: "ProviderTitle", width: 155 },
{ headerText: headerTextValues[4], key: "ProviderAddress1", width: 165 },
{ headerText: headerTextValues[5], key: "ProviderStatus" }
],
features: [
name: "ColumnMoving",
columnSettings: [
columnKey: "ProviderID",
allowMoving: false,
Enable: false
}
]
)}
Thanks,
Pradeep
Hello Pradeep,
Thank you for posting in our forum.
You can prevent a specific column to be moved via the allowMoving option via the column settings:
However that will only prevent the specific column to be moved, while all other columns can be rearranged in any order.
If you’d like to prevent any other columns from taking the first position I suggest you use the columnMoving event and cancel it in all cases when the args.targetIndex is 0. This will ensure that moving any other column to index 0 will be canceled.
Example:
$(document).delegate(".selector", "iggridcolumnmovingcolumnmoving", function (evt, args) {
if(args.targetIndex === 0){
return false;
});
Let me know if you have any questions.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://ko.infragistics.com/support
Hi Maya,
Could you post me the entire code so that it will be useful.
Regards,
Hello Pradeep ,
Could you describe what issues you have with the sample and what's the environment on which you’re testing it?
It works as expected on my side when opened in Chrome, Firefox or IE11.
I have done the code changes as you suggested in sample but the first column was able to moved by movable options property.
I have used the following css and javascript for loading the grid.
"~/Content/css/jquery-ui-1.10.4.css",
"~/Content/css/jquery-ui.min.css",
"~/Content/Scripts/jquery-1.10.2.js",
"~/Content/Scripts/jquery-ui-1.10.4.js",
"~/Content/Scripts/jquery-1.8.2.js",
"~/Content/Scripts/jquery-ui-1.8.24.min.js",
"~/Content/Scripts/infragistics.loader.js",
"~/Content/Scripts/dialog.js"
Apart from this I have shared my code in earlier post.
PLease let me know I have missed any reference.How to resolve this issue?.
Please help me as urgent.
I’m just following up to see if you’ve been able to resolve your issue.
If you have any questions or concerns or if you need further assistance please let me know.
Hi Team,
I have tried the sample tutorial given in the above blog.But the first column is able to move in one scenario.Initially when we drag any other column and place it in first column.The first column is able to move.Is there any solution for resolving this issue.
Please try to resolve this issue as soon as possible.
Pradeep SE
I tried the sample to block the action. Have placed an alert just to see if the check is acting, but it doesn't stops column from moving. I am using version 16.2
columnMoving: function(evt, args) {
if (args.targetIndex < 2) {
alert("Cannot move columns to 1st post"); return false; }},
I have to stop it from coming to less than 3rd position (have buttons for initial columns). The alert message does come, but the column does get moved successfully !