Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Niranjan Vesikar
30
How to allow column value copy functionality
posted

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

CopyPasteIssue.txt 
 <!-- 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()
    )
}

Parents
No Data
Reply
  • 485
    Offline posted

    Hello Niranjan,

     

    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:

     

    1. By “upgraded the version from 13.2 to 19.2” I guess you actually mean either version 19.1 or 18.2? Which one of the two are you using at the moment?
    2. All columns have been set as “ReadOnly” in the Updating feature settings in the provided configuration. That means you could copy the value of a given cell, but you would not be able to paste it into another. Is that the problem that you have, or you cannot copy the value of a cell at all? If you have a problem with pasting the copied value into another cell, removing the ReadOnly from the ColumnSettings would allow you to do that.
    3. You said you use multiple selection, but it has not been enabled in the configuration that you have provided – do you use this option in your application? I am asking you, because that might turn out to be important while I am testing in an isolated sample on my side.

     

    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.

Children
  • 30
    Offline posted in reply to Vasil Pavlov

    Thanks for 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

    1321.CopyPasteIssue.txt 
    @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?