In our ignite grid we have multiple selection is on and edit functionality is also availabel. But while editing any row user cannot copy the value from the cell. Currently we have upgraded the version from 13.2 to 19.2. In lower version this was working on internet explorer. but now it is not workin on either chrome or IT.
Please help me to enable the copy functionality while edit is enable. also please find attached file with the grid html code
<!-- Ignite UI Required Combined CSS Files --> <link href="~/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="~/IgniteUI/css/structure/infragistics.css" rel="stylesheet" /> <script src="~/Scripts/modernizr-2.8.3.js"></script> <script src="~/Scripts/jquery-1.11.3.min.js"></script> <script src="~/Scripts/jquery-ui.min.js"></script> <!-- Ignite UI Required Combined JavaScript Files --> <script src="~/IgniteUI/js/infragistics.core.js"></script> <script src="~/IgniteUI/js/infragistics.lob.js"></script> <script src="~/IgniteUI/js/modules/infragistics.util.js"></script> <script src="~/IgniteUI/js/modules/infragistics.datasource.js"></script> <script src="~/IgniteUI/js/modules/infragistics.ui.shared.js"></script> <script src="~/IgniteUI/js/modules/infragistics.ui.editors.js"></script> <!-- Used to add modal loading indicator for igGrid --> <script src="~/IgniteUI/grid-modal-loading-inicator.js"></script> @(Html.Infragistics() .Grid(Model) .ID("Grid") .Height("600px") .Width("1200px") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .RenderCheckboxes(true) .PrimaryKey("BreakID") .FixedHeaders(false) .Columns(column => { column.For(x => x.SourceCode).HeaderText("Source").Width("70px"); column.For(x => x.ReasonCode).HeaderText("Reason").Width("70px"); column.For(x => x.Comments).HeaderText("Comment").Width("200px"); column.For().HeaderText().Width("70px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${IocCode}</div>{{else}}${IocCode} {{/if}}"); ; column.For().HeaderText("Transaction").Width("130px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${TransactionNumber}</div>{{else}}${TransactionNumber}{{/if}}"); ; ; column.Unbound("Details").Template("<input type='button' onclick='showDetails(${BreakID})' value='Detail' class='btn btn-xs'/>").HeaderText("Details").Width("60px"); column.For(t).HeaderText("").Width("90px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Account}</div>{{else}}${Account} {{/if}}"); ; ; column.For().HeaderText("").Width("50px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Age}</div>{{else}}${Age} {{/if}}"); ; ; column.For().HeaderText("").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${CSD}</div>{{else}}${CSD} {{/if}}"); ; ; column.For().HeaderText("").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${ISIN}</div>{{else}}${ISIN} {{/if}}"); ; ; column.For().HeaderText("").Width("60px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${TrnType}</div>{{else}}${TrnType} {{/if}}"); ; ; column.For().HeaderText("").Width("60px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Location}</div>{{else}}${Location} {{/if}}"); ; ; column.For().HeaderText("Enter Date").Width("140px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${CREATED_TS}</div>{{else}}${CREATED_TS} {{/if}}"); column.For().HeaderText("").Width("60px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Checked}</div>{{else}}${Checked} {{/if}}"); ; ; column.For().HeaderText("Age>=30").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Age30DAYS}</div>{{else}}${Age30DAYS} {{/if}}"); ; ; column.For().HeaderText("High Risk ").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${HighRiskBIM}</div>{{else}}${HighRiskBIM} {{/if}}"); ; ; column.For().HeaderText("Medium Risk ").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${MediumRiskBIM}</div>{{else}}${MediumRiskBIM} {{/if}}"); ; ; column.For().HeaderText("Name").Width("150px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${ClientServiceManager}</div>{{else}}${ClientServiceManager} {{/if}}"); ; ; column.For().HeaderText("Multiple").Width("70px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${MultipleUpdates}</div>{{else}}${MultipleUpdates} {{/if}}"); ; ; column.For().HeaderText("Verified").Width("70px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${VerifiedIndicator}</div>{{else}}${VerifiedIndicator} {{/if}}"); column.For().HeaderText("Break ID").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${BreakID}</div>{{else}}${BreakID} {{/if}}"); ; ; }) .Features(f => { f.Tooltips().Visibility(TooltipsVisibility.Always).ColumnSettings(settings => settings.ColumnSetting().ColumnKey("Comments").AllowTooltips(true)).ShowDelay(100); }) .Features(feature => { feature.Updating().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("Details").ReadOnly(true); cs.ColumnSetting().ColumnKey("BreakID").ReadOnly(true); cs.ColumnSetting().ColumnKey("IocCode").ReadOnly(true); cs.ColumnSetting().ColumnKey("ClientServiceManager").ReadOnly(true); cs.ColumnSetting().ColumnKey("CREATED_TS").ReadOnly(true); cs.ColumnSetting().ColumnKey("TransactionNumber").ReadOnly(true); cs.ColumnSetting().ColumnKey("TrnType").ReadOnly(true); cs.ColumnSetting().ColumnKey("Location").ReadOnly(true); cs.ColumnSetting().ColumnKey("MultipleUpdates").ReadOnly(true); cs.ColumnSetting().ColumnKey("Account").ReadOnly(true); cs.ColumnSetting().ColumnKey("Age").ReadOnly(true); cs.ColumnSetting().ColumnKey("Age30DAYS").ReadOnly(true); cs.ColumnSetting().ColumnKey("HighRiskBIM").ReadOnly(true); cs.ColumnSetting().ColumnKey("MediumRiskBIM").ReadOnly(true); cs.ColumnSetting().ColumnKey("Checked").ReadOnly(true); cs.ColumnSetting().ColumnKey("VerifiedIndicator").ReadOnly(true); cs.ColumnSetting().ColumnKey("CSD").ReadOnly(true); cs.ColumnSetting().ColumnKey("ISIN").ReadOnly(true); cs.ColumnSetting().ColumnKey("SourceCode").ReadOnly(true); cs.ColumnSetting().ColumnKey("ReasonCode").ReadOnly(true); cs.ColumnSetting().ColumnKey("Comments").ReadOnly(true); }).EnableAddRow(false).EnableDeleteRow(false); feature.Sorting(); feature.Resizing(); feature.Paging().PageSize(50); feature.Filtering().Mode(FilterMode.Simple); }) .DataSourceUrl(Url.Action("GetFreeOfPayment")) .UpdateUrl(Url.Action("FreeOfPaymentSaveData")) .DataBind() .Render() ) }
Hello Niranjan,
For Selection feature to work we have to disable cell text selection. This is described as a known issue in our help documentation:
Text selection is not working when Selection feature is enabled. There's also a workaround described there, but might now work for some cases. Please try it and let me know if this works for you.
Best regards, Martin Pavlov Infragistics, Inc.
Hi Vasil,
Thanks for your reply.
Unfortunately I am not able to recreate the issue in the sample you have provided.
But one thing is clear that we have multiple row selection enabled in our grid.
Also I want to ask is there any property which is enable that is stopping user to copy the value.
Also I found that class ".ui-iggrid-canceltextselection" are getting applied to the table from infragistics.css
.ui-iggrid-canceltextselection {-moz-user-select: noneuser-select: none;}
This could be the reason that user is not able to select the value.
Could you please investigate more and help me to resolve
I tried reproducing the issue in an isolated code sample on my side, but I was not able to. I have attached the project as a zip file. It consists of an igGrid that uses a configuration similar to the one you have provided, and one of the columns, “ProductName” is ReadOnly. I am able to select and copy the text (and paste it in the next column “ProductCategory”. Here is the sample:
MVCGridCopyPaste.zip
Please test it on your side; whether or not it works correctly may help indicate the nature of this problem - if it shows the Updating feature working correctly, this indicates a possible problem in the code of your application. It will help if you could provide a small, isolated sample application that demonstrates the behavior you are seeing.
Or, if this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
I look forward to your reply.
Please see my answer to your questions
Ans 1: Yes it is 2019.1. I apologize
Ans 2: No I cannot even copy the column value. I cannot see the copy many when I right click on the cell or I cannot select the value.
Ans 3: I have attached my complete cshtml file for your reference
@using Infragistics.Web.Mvc @model IQueryable<CEMT.Common.DomainModel.SearchResults.ExceptionsFreeOfPayment> @{ ViewBag.Title = "Search Exceptions - Free of Payment"; } <!-- Ignite UI Required Combined CSS Files --> <link href="~/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="~/IgniteUI/css/structure/infragistics.css" rel="stylesheet" /> <script src="~/Scripts/modernizr-2.8.3.js"></script> <script src="~/Scripts/jquery-1.11.3.min.js"></script> <script src="~/Scripts/jquery-ui.min.js"></script> <!-- Ignite UI Required Combined JavaScript Files --> <script src="~/IgniteUI/js/infragistics.core.js"></script> <script src="~/IgniteUI/js/infragistics.lob.js"></script> <script src="~/IgniteUI/js/modules/infragistics.util.js"></script> <script src="~/IgniteUI/js/modules/infragistics.datasource.js"></script> <script src="~/IgniteUI/js/modules/infragistics.ui.shared.js"></script> <script src="~/IgniteUI/js/modules/infragistics.ui.editors.js"></script> <!-- Used to add modal loading indicator for igGrid --> <script src="~/IgniteUI/grid-modal-loading-inicator.js"></script> <style type="text/css"> input.button-style { margin-top: 10px; } </style> <h2>Free Of Payment Search Results</h2> <span><i>If you are redirected back to the intial search screen this is because your search criteria session store has expired, please re-establish your search critieria and continue.</i></span> @if ((bool)@ViewData["ReadOnly"] == false) { @(Html.Infragistics() .Grid(Model) .ID("Grid") .Height("600px") .Width("1200px") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .RenderCheckboxes(true) .PrimaryKey("BreakID") .FixedHeaders(false) .Columns(column => { column.For(x => x.SourceCode).HeaderText("Source").Width("70px"); column.For(x => x.ReasonCode).HeaderText("Reason").Width("70px"); column.For(x => x.Comments).HeaderText("Comment").Width("200px"); column.For(x => x.UpdateMethod).Hidden(true); column.For(x => x.Researched).Hidden(true); column.For(x => x.IocCode).HeaderText("Admin").Width("70px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${IocCode}</div>{{else}}${IocCode} {{/if}}"); ; column.For(x => x.TransactionNumber).HeaderText("Transaction").Width("130px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${TransactionNumber}</div>{{else}}<span style='-moz-user-select:all !important; user-select:all !important'>${TransactionNumber}</span> {{/if}}"); ; ; column.Unbound("Details").Template("<input type='button' onclick='showDetails(${BreakID})' value='Detail' class='btn btn-xs'/>").HeaderText("Details").Width("60px"); column.For(x => x.Account).HeaderText("Account").Width("90px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Account}</div>{{else}}${Account} {{/if}}"); ; ; column.For(x => x.Age).HeaderText("Age").Width("50px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Age}</div>{{else}}${Age} {{/if}}"); ; ; column.For(x => x.CSD).HeaderText("CSD").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${CSD}</div>{{else}}${CSD} {{/if}}"); ; ; column.For(x => x.ISIN).HeaderText("ISIN").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${ISIN}</div>{{else}}${ISIN} {{/if}}"); ; ; column.For(x => x.TrnType).HeaderText("Type").Width("60px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${TrnType}</div>{{else}}${TrnType} {{/if}}"); ; ; column.For(x => x.Location).HeaderText("Loc").Width("60px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Location}</div>{{else}}${Location} {{/if}}"); ; ; column.For(x => x.CREATED_TS).HeaderText("Enter Date").Width("140px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${CREATED_TS}</div>{{else}}${CREATED_TS} {{/if}}"); column.For(x => x.Age30DAYS).HeaderText("Age>=30").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Age30DAYS}</div>{{else}}${Age30DAYS} {{/if}}"); ; ; column.For(x => x.HighRiskBIM).HeaderText("High Risk BIM").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${HighRiskBIM}</div>{{else}}${HighRiskBIM} {{/if}}"); ; ; column.For(x => x.MediumRiskBIM).HeaderText("Medium Risk BIM").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${MediumRiskBIM}</div>{{else}}${MediumRiskBIM} {{/if}}"); ; ; column.For(x => x.ClientServiceManager).HeaderText("Name").Width("150px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${ClientServiceManager}</div>{{else}}${ClientServiceManager} {{/if}}"); ; ; column.For(x => x.Checked).HeaderText("CHK").Width("60px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Checked}</div>{{else}}${Checked} {{/if}}"); ; ; column.For(x => x.MultipleUpdates).HeaderText("Multiple").Width("70px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${MultipleUpdates}</div>{{else}}${MultipleUpdates} {{/if}}"); ; ; column.For(x => x.VerifiedIndicator).HeaderText("Verified").Width("70px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${VerifiedIndicator}</div>{{else}}${VerifiedIndicator} {{/if}}"); column.For(x => x.BreakID).HeaderText("Break ID").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${BreakID}</div>{{else}}${BreakID} {{/if}}"); ; ; }) .Features(f => { f.Tooltips().Visibility(TooltipsVisibility.Always).ColumnSettings(settings => settings.ColumnSetting().ColumnKey("Comments").AllowTooltips(true)).ShowDelay(100); }) .Features(feature => { feature.Updating().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("Details").ReadOnly(true); cs.ColumnSetting().ColumnKey("BreakID").ReadOnly(true); cs.ColumnSetting().ColumnKey("IocCode").ReadOnly(true); cs.ColumnSetting().ColumnKey("ClientServiceManager").ReadOnly(true); cs.ColumnSetting().ColumnKey("CREATED_TS").ReadOnly(true); cs.ColumnSetting().ColumnKey("TransactionNumber").ReadOnly(true); cs.ColumnSetting().ColumnKey("TrnType").ReadOnly(true); cs.ColumnSetting().ColumnKey("Location").ReadOnly(true); cs.ColumnSetting().ColumnKey("MultipleUpdates").ReadOnly(true); cs.ColumnSetting().ColumnKey("Account").ReadOnly(true); cs.ColumnSetting().ColumnKey("Age").ReadOnly(true); cs.ColumnSetting().ColumnKey("Age30DAYS").ReadOnly(true); cs.ColumnSetting().ColumnKey("HighRiskBIM").ReadOnly(true); cs.ColumnSetting().ColumnKey("MediumRiskBIM").ReadOnly(true); cs.ColumnSetting().ColumnKey("Checked").ReadOnly(true); cs.ColumnSetting().ColumnKey("VerifiedIndicator").ReadOnly(true); cs.ColumnSetting().ColumnKey("CSD").ReadOnly(true); cs.ColumnSetting().ColumnKey("ISIN").ReadOnly(true); cs.ColumnSetting().ColumnKey("SourceCode").Required(true).EditorType(ColumnEditorType.Combo).ComboEditorOptions(co => co.DropDownWidth(300).DataSource(ViewBag.SourceCodes).ID("comboEditorSourceCode").ValueKey("SourceCode").TextKey("SourceCodeDescription").Mode(ComboMode.DropDown).EnableClearButton(false).AddClientEvent("selectionChanged", "selChanged")); cs.ColumnSetting().ColumnKey("ReasonCode").Required(true).EditorType(ColumnEditorType.Combo).ComboEditorOptions(co => co.DropDownWidth(300).DataSource(ViewBag.ReasonCodes).ValueKey("ReasonCode").TextKey("ReasonCodeDescription").Mode(ComboMode.DropDown).EnableClearButton(false)); cs.ColumnSetting().ColumnKey("Comments").Required(false).EditorType(ColumnEditorType.Text).Validation(true).TextEditorOptions(o => o.MaxLength(255).TextMode(TextEditorTextMode.Multiline)); }).EnableAddRow(false).EnableDeleteRow(false); feature.Selection().Mode(SelectionMode.Row).MultipleSelection(true).Activation(true); feature.Sorting(); feature.Resizing(); feature.Paging().PageSize(50).AddClientEvent("pageIndexChanging", "CheckUnSaved"); ; feature.Filtering().Mode(FilterMode.Simple); }) .DataSourceUrl(Url.Action("GetFreeOfPayment")) .UpdateUrl(Url.Action("FreeOfPaymentSaveData")) .DataBind() .Render() ) <input type="button" id="saveChanges" class="button-style" value="Save Changes" /> <input type="button" id="undo" class="btn btn-sm btn-default" value="Undo Unsaved Changes" /> <!--<input type="button" id="redo" class="btn btn-sm btn-default" value="Redo" />--> <div> <div class="row"> <div class="col-sm-3"> <h5>Source Code</h5> @(Html.Infragistics().Combo() .ID("igComboSourceCode") .DropDownWidth(300) .ValueKey("SourceCode") .TextKey("SourceCodeDescription") .AddClientEvent("selectionChanged", "igComboSourceCodeSelectionChanged") .DataSource(ViewBag.SourceCodes) .DataBind() .Render()) </div> <div class="col-sm-3"> <h5>Reason Code</h5> @(Html.Infragistics().Combo() .ID("igComboReasonCode") .ValueKey("ReasonCode") .DropDownWidth(300) .TextKey("ReasonCodeDescription") .DataBind() .Render()) </div> <div class="col-sm-3"> <h5>Comments</h5> @(Html.Infragistics().TextEditor() .ID("igTextboxComment") .MaxLength(255) .TextMode(TextEditorTextMode.Multiline) .Render()) </div> <div class="col-sm-3"> <input type="button" id="MultipleUpdate" class="btn btn-sm btn-default" value="Multiple Update" /> <input type="button" id="Researched" class="btn btn-sm btn-default" value="Researched" /> </div> </div> </div> } else { @(Html.Infragistics() .Grid(Model) .ID("Grid") .Height("600px") .Width("1200px") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .RenderCheckboxes(true) .PrimaryKey("BreakID") .FixedHeaders(false) .Columns(column => { column.For(x => x.SourceCode).HeaderText("Source").Width("70px"); column.For(x => x.ReasonCode).HeaderText("Reason").Width("70px"); column.For(x => x.Comments).HeaderText("Comment").Width("200px"); column.For(x => x.IocCode).HeaderText("Admin").Width("70px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${IocCode}</div>{{else}}${IocCode} {{/if}}"); ; column.For(x => x.TransactionNumber).HeaderText("Transaction").Width("130px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${TransactionNumber}</div>{{else}}<span style='-moz-user-select:all !important; user-select:all !important'>${TransactionNumber}</span> {{/if}}"); ; ; column.Unbound("Details").Template("<input type='button' onclick='showDetails(${BreakID})' value='Detail' class='btn btn-xs'/>").HeaderText("Details").Width("60px"); column.For(x => x.Account).HeaderText("Account").Width("90px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Account}</div>{{else}}${Account} {{/if}}"); ; ; column.For(x => x.Age).HeaderText("Age").Width("50px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Age}</div>{{else}}${Age} {{/if}}"); ; ; column.For(x => x.CSD).HeaderText("CSD").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${CSD}</div>{{else}}${CSD} {{/if}}"); ; ; column.For(x => x.ISIN).HeaderText("ISIN").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${ISIN}</div>{{else}}${ISIN} {{/if}}"); ; ; column.For(x => x.TrnType).HeaderText("Type").Width("60px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${TrnType}</div>{{else}}${TrnType} {{/if}}"); ; ; column.For(x => x.Location).HeaderText("Loc").Width("60px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Location}</div>{{else}}${Location} {{/if}}"); ; ; column.For(x => x.CREATED_TS).HeaderText("Enter Date").Width("140px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${CREATED_TS}</div>{{else}}${CREATED_TS} {{/if}}"); column.For(x => x.Checked).HeaderText("CHK").Width("60px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Checked}</div>{{else}}${Checked} {{/if}}"); ; ; column.For(x => x.Age30DAYS).HeaderText("Age>=30").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${Age30DAYS}</div>{{else}}${Age30DAYS} {{/if}}"); ; ; column.For(x => x.HighRiskBIM).HeaderText("High Risk BIM").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${HighRiskBIM}</div>{{else}}${HighRiskBIM} {{/if}}"); ; ; column.For(x => x.MediumRiskBIM).HeaderText("Medium Risk BIM").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${MediumRiskBIM}</div>{{else}}${MediumRiskBIM} {{/if}}"); ; ; column.For(x => x.ClientServiceManager).HeaderText("Name").Width("150px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${ClientServiceManager}</div>{{else}}${ClientServiceManager} {{/if}}"); ; ; column.For(x => x.MultipleUpdates).HeaderText("Multiple").Width("70px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${MultipleUpdates}</div>{{else}}${MultipleUpdates} {{/if}}"); ; ; column.For(x => x.VerifiedIndicator).HeaderText("Verified").Width("70px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${VerifiedIndicator}</div>{{else}}${VerifiedIndicator} {{/if}}"); column.For(x => x.BreakID).HeaderText("Break ID").Width("100px").Template("{{if ${VerifiedIndicator}=='Y'}}<div style='background-color:#52D017'>${BreakID}</div>{{else}}${BreakID} {{/if}}"); ; ; }) .Features(f => { f.Tooltips().Visibility(TooltipsVisibility.Always).ColumnSettings(settings => settings.ColumnSetting().ColumnKey("Comments").AllowTooltips(true)).ShowDelay(100); }) .Features(feature => { feature.Updating().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("Details").ReadOnly(true); cs.ColumnSetting().ColumnKey("BreakID").ReadOnly(true); cs.ColumnSetting().ColumnKey("IocCode").ReadOnly(true); cs.ColumnSetting().ColumnKey("ClientServiceManager").ReadOnly(true); cs.ColumnSetting().ColumnKey("CREATED_TS").ReadOnly(true); cs.ColumnSetting().ColumnKey("TransactionNumber").ReadOnly(true); cs.ColumnSetting().ColumnKey("TrnType").ReadOnly(true); cs.ColumnSetting().ColumnKey("Location").ReadOnly(true); cs.ColumnSetting().ColumnKey("MultipleUpdates").ReadOnly(true); cs.ColumnSetting().ColumnKey("Account").ReadOnly(true); cs.ColumnSetting().ColumnKey("Age").ReadOnly(true); cs.ColumnSetting().ColumnKey("Age30DAYS").ReadOnly(true); cs.ColumnSetting().ColumnKey("HighRiskBIM").ReadOnly(true); cs.ColumnSetting().ColumnKey("MediumRiskBIM").ReadOnly(true); cs.ColumnSetting().ColumnKey("Checked").ReadOnly(true); cs.ColumnSetting().ColumnKey("VerifiedIndicator").ReadOnly(true); cs.ColumnSetting().ColumnKey("CSD").ReadOnly(true); cs.ColumnSetting().ColumnKey("ISIN").ReadOnly(true); cs.ColumnSetting().ColumnKey("SourceCode").ReadOnly(true); cs.ColumnSetting().ColumnKey("ReasonCode").ReadOnly(true); cs.ColumnSetting().ColumnKey("Comments").ReadOnly(true); }).EnableAddRow(false).EnableDeleteRow(false); feature.Sorting(); feature.Resizing(); feature.Paging().PageSize(50); feature.Filtering().Mode(FilterMode.Simple); }) .DataSourceUrl(Url.Action("GetFreeOfPayment")) .UpdateUrl(Url.Action("FreeOfPaymentSaveData")) .DataBind() .Render() ) } <input type="button" id="buttonDataBind" value="Refresh Grid" /> @Html.ActionLink("Export Search Results", "Export") <div id="EditDiv" class='modal fade in'> <div class="modal-dialog"> <div class="modal-content"> <div id='myModalContent'> </div> </div> </div> </div> <script src="~/igniteui/js/modules/i18n/regional/infragistics.ui.regional-en-GB.js"></script> <script> $("#buttonDataBind").igButton({ labelText: $("#buttonDataBind").val(), click: function (e) { $("#Grid").igGrid("dataBind"); } }); function showDetails(pid) { var ph = $("#EditDiv"); ph.load("/FreeOfPaymentSearch/Details?breakID=" + pid, function () { ph.dialog({ modal: true, closeOnEscape: true, width: 900, height: 800, title: "Free of payment", resizable: true, buttons: [ { text: "Ok", icon: "ui-icon-heart", click: function () { $(this).dialog("close"); } } ] }); }); } function igComboSourceCodeSelectionChanged(evt, ui) { var selectedSourceCode = ui.items[0].data.SourceCode; var url = "/FreeOfPaymentSearch/reasonCode-combo-dataCodes"; var editor = $("#igComboReasonCode"); $.ajax({ url: url, type: "POST", data: { sourceCode: selectedSourceCode }, success: function (data) { editor.igCombo("option", "dataSource", data); editor.igCombo("dataBind"); //editor.index(0); } }); } function selChanged(evt, ui) { var selectedSourceCode = ui.items[0].data.SourceCode; var url = "/FreeOfPaymentSearch/reasonCode-combo-dataCodes"; var editor = $("#Grid").igGridUpdating("editorForKey", "ReasonCode").data("igCombo"); $.ajax({ url: url, type: "POST", data: { sourceCode: selectedSourceCode }, success: function (data) { editor.options.dataSource = data; editor.dataBind(); //editor.index(0); } }); } function CheckUnSaved(evt, ui) { var grid = $("#Grid") if (grid != null) { var changes = grid.data('igGrid').pendingTransactions(); if (changes.length != 0) { if (!confirm('You are going to lose any unsaved changes. Are you sure?')) { evt.preventDefault(); } } } }; </script> <script src="~/IgniteUI/js/modules/infragistics.gridexcelexporter.js"></script> <script src="~/IgniteUI/js/modules/infragistics.documents.core_core.js"></script> <script src="~/IgniteUI/js/modules/infragistics.excel_core.js"></script> <script> //$.ig.loader({ // scriptPath: "~/IgniteUI/js", // cssPath: "~/IgniteUI/css", // resources: 'igGrid,' + // 'modules/infragistics.documents.core.js,' + // 'modules/infragistics.excel.js,' + // 'modules/infragistics.gridexcelexporter.js' //}); function wireUpEvents() { // Check for grid changes before page unload window.onbeforeunload = function (e) { var changes = $("#Grid").data('igGrid').pendingTransactions(); if (changes.length != 0) { // if (!confirm('You are going to lose any unsaved changes. Are you sure?')) { // e.preventDefault(); var dialogtext = 'You are going to lose any unsaved changes. Are you sure?'; e.returnValue = dialogtext; return dialogtext; } } } // Wire up the events as soon as the DOM is ready $(document).ready(function () { wireUpEvents(); }); var updates, customersLookup = [], loadingIndicator; $(function () { var grid = $("#Grid"), comboDataSource = {}; //comboDataSource = grid.data("igGridUpdating").options.columnSettings[2].editorOptions.dataSource; //for (var i = 0; i < comboDataSource.length; i++) { // customersLookup[comboDataSource[i].ID] = comboDataSource[i]; //} $("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: true }); $("#undo").igButton({ labelText: $("#undo").val(), disabled: true }); //$("#redo").igButton({ labelText: $("#redo").val(), disabled: true }); loadingIndicator = new GridModalLoadingIndicator(grid); grid.on("iggriddatabinding", function (e, args) { loadingIndicator.show(); }); grid.on("iggriddatabound", function (e, args) { loadingIndicator.hide(); }); grid.on("iggridupdatingrowdeleted", function (e, args) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); }); grid.on("iggridupdatingrowadded", function (e, args) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); }); grid.on("iggridupdatingeditrowended", function (e, args) { if (args.update) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); } }); $("#undo").on('igbuttonclick', function (e, args) { updates = $.extend({}, grid.data('igGrid').pendingTransactions()); $.each(updates, function (index, transaction) { //this was grid.igGrid("rollback", transaction.rowId, true); but it keeps blowing up as the infragistics framework cannot find the row, so we roll back and then refresh the whole grid as below grid.igGrid("rollback", transaction.rowId, false); }); //this refresh is due to an issue with the ui update on the infragistics grid. $("#Grid").igGrid("dataBind"); //$("#redo").igButton("option", "disabled", false); $("#undo").igButton("disable"); $("#saveChanges").igButton("disable"); return false; } ); $("#redo").on('igbuttonclick', function (e) { $.each(updates, function (index, transaction) { switch (transaction.type) { case "row": grid.igGridUpdating('updateRow', transaction.rowId, transaction.row, null, false); break; case "newrow": grid.igGridUpdating('addRow', transaction.row, false); break; case "deleterow": grid.igGridUpdating('deleteRow', transaction.rowId, false); break; } }); $(this).igButton("disable"); $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); } ); $("#saveChanges").on('igbuttonclick', function (e) { grid.igGrid("saveChanges", function saveSuccess() { loadingIndicator.hide(); $("#Grid").igGrid("dataBind"); }); loadingIndicator.show(); $("#undo").igButton("disable"); $(this).igButton("disable"); return false; } ); grid.on("iggridupdatingdatadirty", function (event, ui) { grid.igGrid("commit"); //saving local changes to the datasource when sorting return false; }); }); </script> <script> $("#MultipleUpdate").on("click", function () { var defaultSourceCode = $("#igComboSourceCode").igCombo("value"); var defaultReasonCode = $("#igComboReasonCode").igCombo("value"); var comments = $("#igTextboxComment").igTextEditor("value"); var selectedRows = $("#Grid").igGrid("selectedRows"); var multiUpdate = 'Y'; for (var i = 0; i < selectedRows.length; i++) { var row = selectedRows[i]; $("#Grid").igGridUpdating("updateRow", row.id, { 'ReasonCode': defaultReasonCode, 'SourceCode': defaultSourceCode, 'Comments': comments, 'MultipleUpdates': multiUpdate, 'UpdateMethod': 'MultipleMethod' }); // in the last 2 columns } $("#saveChanges").igButton("option", "disabled", false); $("#undo").igButton("option", "disabled", false); }); $("#Researched").on("click", function () { var selectedRows = $("#Grid").igGrid("selectedRows"); var researched = 'Y'; for (var i = 0; i < selectedRows.length; i++) { var row = selectedRows[i]; $("#Grid").igGridUpdating("updateRow", row.id, { 'VerifiedIndicator': researched, 'Researched': 'Researched' }); // in the last 2 columns } $("#saveChanges").igButton("option", "disabled", false); $("#undo").igButton("option", "disabled", false); }); </script>
Please let me know if you need more information?
Thank you for posting in our forum.
Since I want to be sure I understand your question correctly, some additional information regarding your scenario would be much appreciated:
Providing me those details would be greatly appreciated and would allow me to give you a more precise answer.
I look forward to hearing from you.