[Solved] Find controls / update values in selected row

[Darren du Preez]

Hi

I am using the Telerik MVC 3 Grid (Telerik.Web.Mvc 2011.1.414.340)  with in-line cell editing/batch editing mode. I have two checkbox columns/fields, "AcceptSuggestedValue" and "AcceptOriginalValue", that should behave as two radio buttons would i.e. checking one should uncheck the other. In addition, depending on which checkbox is checked, the text field/column "ActualValue" should be populated with the relevant value from either the "OriginalValue" or "PossibleValue" field/column.
Here is the code for my grid;

<%= Html.Telerik().Grid<Frontline.ETL.Models.DTO.RuleConflictDTO>()
    .Name("RuleConflictGrid")
    .DataKeys(keys => keys.Add(model => model.RuleConflictId))
    .Editable(editing => editing.Mode(GridEditMode.InCell))
    .Selectable()
    .ToolBar(commands =>
    {
        commands.SubmitChanges();
    })
    .Pageable(paging => paging
        .PageSize(30)
        .Style(GridPagerStyles.NextPreviousAndNumeric)
        .Position(GridPagerPosition.Bottom))
    .Columns(columns =>
    {
        columns.Bound(model => model.UnderlyingTableColumnId).Visible(false);
        columns.Bound(model => model.QID).Title("QID").ReadOnly();
        columns.Bound(model => model.DataRuleName).Title("Rule Name").ReadOnly();
        columns.Bound(model => model.UnderlyingFieldName).Title("Field").ReadOnly();
        columns.Bound(model => model.Question).Title("Question").ReadOnly();
        columns.Bound(model => model.OriginalValue).Title("Original Value").ReadOnly();
        columns.Bound(model => model.PossibleValue).ClientTemplate("<#= PossibleValue#>").Width(150);

        columns.Bound(model => model.AcceptSuggestedValue)
            .ClientTemplate("<input type='checkbox' name='AcceptSuggestedValue' value='<#= AcceptSuggestedValue #>' />");

        columns.Bound(model => model.AcceptOriginalValue)
            .ClientTemplate("<input type='checkbox' name='AcceptOriginalValue' value='<#= AcceptOriginalValue #>' />");

        columns.Bound(model => model.ActualValue).Title("Actual Value").ReadOnly();

    })
    .ClientEvents(events => events.OnDataBinding("Grid_onDataBinding").OnError("Grid_onError").OnRowSelect("Grid_onRowSelected").OnEdit("Grid_onRowEdit"))
    .DataBinding(dataBinding =>
        dataBinding.Ajax()
        .Select("_SelectBatchEditing", "Transform")
        .Update("_SaveBatchEditing", "Transform")
    )
%>

I have tried a number of options for obtaining the selected row, and within that row, the various controls so that I may perform comparisons and checks and set values but I haven't had any success yet and I am more confused than ever after searching online and in the forums.
Some of the things I have tried -

As you can see from above I have subscribed to a number of client-side grid events. In the onRowEdit event handler -

function Grid_onRowEdit(e) {
     var dataItem = e.dataItem;
     dataItem.ActualValue = dataItem.AcceptSuggestedValue ? dataItem.PossibleValue : dataItem.OriginalValue;
  }

although I am able to succesfully modify/set the ActualValue on the dataItem, the change is not reflected in the grid. And besides, this wouldn't help me with toggling the state of the other checkbox, since how would I know which one to toggle?

In terms of toggling the checkbox states, I tried to wire up the client-side onclick event to the individual checkboxes within the ClientTemplate declaration but I couldn't get SetActualValue to fire.

columns.Bound(model => model.AcceptSuggestedValue)
    .ClientTemplate("<input type='checkbox' name='AcceptSuggestedValue'
    value='<#= AcceptSuggestedValue #>' onclick='SetActualValue()'/>");

I also tried an example I found that "listens" for the change event of all checkboxes within the grid, as follows;

//wire up checkboxes.
$('#RuleConflictGrid :checkbox').live('change', function (e) {
    var myval;

    var fieldId;
    var $selectedRows = $("#RuleConflictGrid tr.t-state-selected");

    var $check = $(this);
    var $checkAlt;
    if (this.name == 'AcceptOriginalValue') {
        $selectedRows.each(function () {
            var row = this;
            var dataItem = $("#RuleConflictGrid").data("tGrid").dataItem(row);
            //Unsure of how to find the other checkbox in the currently selected row here
            $checkAlt = row.$find("AcceptSuggestedValue");
        });
    }
    else {
        $selectedRows.each(function () {
            var row = this;
            var dataItem = $("#RuleConflictGrid").data("tGrid").dataItem(row);
            //Unsure of how to find the other checkbox in the currently selected row here
            $checkAlt = row.$find("AcceptOriginalValue");
        });
    }
    //Toggle other checkbox checked state
    $checkAlt.checked = $check.checked;

    //Could use similar logic to set ActualValue here
    //.....

});

But there are two issues with this;

The row is not set as selected, unless you first select the row and then check the checkbox. I have tried using

1. function Grid_onRowEdit(e) {
    this.click();
   }

   without any effect.
2. Also, I cannot find row-specific controls, as I have attempted to and had hoped to (see my comments in the code).

At this stage I am unsure of how to proceed, or which methodology/approach would be best and how to make it work.
Any assistance, advice, pointers to other threads or sample, would be greatly appreciated.

Many thanks!

[jay]

I am curious if you ever found a way to do this?  We have a grid that has several columns that interact with each other as well and are trying to update those cells in the grid when we are in cell edit mode.

[Ian]

Hi Jay

I never managed to get it to work in cell edit/batch edit mode, I eventually implemented a solution using the row edit functionality as detailed below, hope it helps;
My view (the javascript/jQuery);

<script type="text/javascript">

    var conflicts = [];

    $(document).ready(function () {

        // Ian van der Walt: Function to select multiple checkboxes for full grid page of results
        function ToggleCheckBoxes(isChecked) {
            var grid = $('#RuleConflictGrid').data('tGrid');
            var inputSuggested = $("[name$='AcceptSuggestedValue']");
            var inputOriginal = $("[name$='AcceptOriginalValue']");
            var txtActual = $("[name$='ActualValue']");

            conflicts.length = 0;

            // Ian van der Walt: Toggle the AcceptSuggestedValue and AcceptOriginalValue checkboxes, set the value
            // of the ActualValue field based on the checkbox selection
            $.each(inputSuggested, function (index, chkBox) {
                chkBox.checked = isChecked;
                SetActualValue(grid.data[index]['RuleConflictId'], txtActual[index], chkBox.checked,
                    grid.data[index]['SuggestedValue'], grid.data[index]['OriginalValue']);
            });

            $.each(inputOriginal, function (index, chkBox) {
                chkBox.checked = !isChecked;
            });
        }

        // Ian van der Walt: Call the ToggleCheckBoxes function when the "Select/Deselect All" checkbox checked status changes
        $('#chkToggleSelectAll').change(function () {
            var chkBox = $get("chkToggleSelectAll");
            isChkd = chkBox.checked;
            ToggleCheckBoxes(isChkd);
        });

        refreshGrid = function () {
            var grid = $("#RuleConflictGrid").data('tGrid');
            var ruleConflictFilter = $("#RuleConflictFilter > option:selected").attr("value");
            grid.rebind({ ruleConflictFilter: ruleConflictFilter });
            UpdateConflictCounts();
        };

    });

        // Ian van der Walt: Re-enable the "Select/Deselect All" checkbox after editing a single row
        function Grid_onSave(e) {
            var chkBoxAll = $get("chkToggleSelectAll");
            chkBoxAll.disabled = false;
            var ruleConflictFilter = $("#RuleConflictFilter > option:selected").attr("value");
            e.values = $.extend(e.values, { ruleConflictFilter: ruleConflictFilter });
            UpdateConflictCounts();
        }

        function Grid_onDelete(e) {
            var ruleConflictFilter = $("#RuleConflictFilter > option:selected").attr("value");
            e.values = $.extend(e.values, { ruleConflictFilter: ruleConflictFilter });
        }

        function Grid_onDataBinding(e) {
            var ruleConflictFilter = $("#RuleConflictFilter > option:selected").attr("value");
            e.data = { ruleConflictFilter: ruleConflictFilter};
        }

        function Grid_onDataBound(e) {
            UpdateConflictCounts();
        }

        function Grid_onRowDataBound(e) {
            if (e.dataItem.IsUserReviewed == true) {
                e.row.style.backgroundColor = "lightblue";
            }
        }

        function UpdateConflictCounts() {
            UpdateLabelValueFromAJAXJSONResult("lblResolvedConflictsCount", "/transform/GetRuleConflictCount?isResolved=1&nocache=" + (new Date).getTime().toString() );
            UpdateLabelValueFromAJAXJSONResult("lblUnResolvedConflictsCount", "/transform/GetRuleConflictCount?isResolved=0&nocache=" + (new Date).getTime().toString());
            UpdateLabelValueFromAJAXJSONResult("lblTotalConflictsCount", "/transform/GetRuleConflictCount?isResolved=-1&nocache=" + (new Date).getTime().toString());
            // Ian van der Walt - 22/09/2011: This works in Firefox, but not IE?
//            var lblResolvedConflictsCount = $("#lblResolvedConflictsCount");
//            var ResolvedConflictsCount = 0;
//            if (lblResolvedConflictsCount.text().toString().replace(" ", "").length > 0 && !isNaN(parseInt(lblResolvedConflictsCount.text())))
//                ResolvedConflictsCount = parseInt(lblResolvedConflictsCount.text());

//            var lblUnResolvedConflictsCount = $("#lblUnResolvedConflictsCount");
//            var UnResolvedConflictsCount = 0;
//            if (lblUnResolvedConflictsCount.text().toString().replace(" ", "").length > 0 && !isNaN(parseInt(lblUnResolvedConflictsCount.text())))
//                UnResolvedConflictsCount = parseInt(lblUnResolvedConflictsCount.text());

//            var lblTotalConflictsCount = $("#lblTotalConflictsCount");
//            var TotalConflictsCount = parseInt(ResolvedConflictsCount) + parseInt(UnResolvedConflictsCount);
//            lblTotalConflictsCount.html(TotalConflictsCount.toString());
        }

function UpdateLabelValueFromAJAXJSONResult(control, url, async) {
    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: url,
        data: "{}",
        dataType: "json",
        async: async,
        error: function () {
            $("#" + control).text();
        },
        success: function (data) {
            if (data != undefined) {
                $("#" + control).text(data);
            } else {
                $("#" + control).text('');
            }
        }
    });
}

        // Ian van der Walt: Function to set the ActualField value and populate the in-memory jscript array
        // that will be posted via an ajax Json call to a controller action method
        function SetActualValue(ruleConflictId, txtActual, acceptSuggested, possibleVal, origVal) {

            // Ian van der Walt: Need to determine whether value is being set from a bulk "Select All"
            // or an individual row edit - the "txtActual" object type is different for each and uses
            // either a method or a property to get/set the value.
            if (txtActual.value == undefined) {
                txtActual.val(acceptSuggested ? possibleVal : origVal);
                var conflictObj = {
                    "ConflictId":ruleConflictId,
                    "ActualValue":txtActual.val()
                };

                var confindex = -1;
                $.each(conflicts, function (index, confObj) {
                    if (confObj["conflictId"] == conflictObj["conflictId"]){
                        confindex = index;
                       }
                });

                //remove the row from the list, it's being updated individually and will be removed anyway
                if (confindex > -1) {
                    conflicts.splice(confindex, 1)
                }
                else {
                    conflicts.push(conflictObj);
                }
            }
            else {
                txtActual.value = acceptSuggested ? possibleVal : origVal;
                var conflictObj = {
                    "ConflictId":ruleConflictId,
                    "ActualValue":txtActual.value
                };

                conflicts.push(conflictObj);
            }
        }

        // Ian van der Walt: Disable the "Select/Deselect All" checkbox if editing a single row,
        // Toggle the AcceptSuggestedValue and AcceptOriginalValue checkboxes, set the value
        // of the ActualValue field based on the checkbox selection
        function Grid_onEdit(e) {

            var chkBoxAll = $get("chkToggleSelectAll");
            chkBoxAll.disabled = true;

            $(e.form).find(".t-grid-cancel").click(function () {
                chkBoxAll.disabled = false;
            });

            var txtOriginal = $(e.form).find("#OriginalValue");
            txtOriginal.attr('readonly', 'readonly');
            var cmbPossible = $(e.form).find("#SuggestedValue");
            var txtActual = $(e.form).find("#ActualValue");
            txtActual.attr('readonly', 'readonly');

            $(e.form).find("#AcceptSuggestedValue").click(function () {

                var chkOrig = $(e.form).find("#AcceptOriginalValue");
                chkOrig.attr('checked', !this.checked);
                e.dataItem.AcceptSuggestedValue = this.checked;
                e.dataItem.AcceptOriginalValue = !e.dataItem.AcceptSuggestedValue;
                SetActualValue(e.dataItem.RuleConflictId, txtActual, e.dataItem.AcceptSuggestedValue, cmbPossible.val(), e.dataItem.OriginalValue);
            });

            $(e.form).find("#AcceptOriginalValue").click(function () {

                var chkSugg = $(e.form).find("#AcceptSuggestedValue");
                chkSugg.attr('checked', !this.checked);
                e.dataItem.AcceptOriginalValue = this.checked;
                e.dataItem.AcceptSuggestedValue = !e.dataItem.AcceptOriginalValue;
                SetActualValue(e.dataItem.RuleConflictId, txtActual, e.dataItem.AcceptSuggestedValue, cmbPossible.val(), e.dataItem.OriginalValue);
            });
        }

        // Ian van der Walt: Function to pass selected row's UnderlyingTableColumnId to the controller
        // method for populating the SuggestedValue combo (list of PossibleValues).
        function onPossibleValuesComboBinding(e) {
            var fieldId;
            var $editRows = $("#RuleConflictGrid tr.t-grid-edit-row");
            $editRows.each(function () {
                    var row = this;
                    var dataitem = $("#RuleConflictGrid").data("tGrid").dataItem(row);
                    fieldId = dataitem.UnderlyingTableColumnId;
                });
            e.data = $.extend({}, e.data, { underlyingFieldId: fieldId });
        }

        // Ian van der Walt: Function to post bulk rule conflict changes back to a controller method
        // via ajax Json for saving.
        saveRuleConflicts = function () {
            var data = JSON.stringify({ "ResolvedRuleConflictList": conflicts });

            $.ajax({
                url: '/Transform/SaveResolvedRuleConflicts/',
                data: data,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (data) {
                    var grid = $('#RuleConflictGrid').data('tGrid');
                    grid.ajaxRequest();
                }

            });
        }

        // Ian van der Walt: Function to "launch" (unhide) Telerik "Process busy" notification window
        // on form submit.
        $(document).submit(function (event) {
            var window = $("#Window").data("tWindow");
            window.center().open();
        });

    </script>

the HTML;

<h2>Transform Data - Run Rules</h2>
    <% using (Html.BeginForm())
    {
        if (Model.CurrentProjectId.HasValue && Model.CurrentProjectId.Value > 0)
        { %>
            <fieldset>
            <div class="editviewleftcolumn">
                    <label for="CurrentMonthName">Current Month:</label>
            </div>
            <div class="editviewrightcolumn">
                    <%= Html.TextBoxFor(model => model.CurrentMonthName, new { @readonly = true })%>
            </div>
            <div class="space-line"></div>
            <div class="space-line"></div>

            <%= Html.ValidationSummary(true)%>

            <div class="space-line"></div>
            <%// Ian van der Walt - 17/03/2011: Check whether selected project has already been extracted
            if (Model.CurrentProjectETLStatusId.HasValue &&
                Model.CurrentProjectETLStatusId != Guid.Empty)
            {
                if (Model.CurrentProjectETLStatusId.Equals(Frontline.ETL.Data.EntityClasses.ProjectEtlstatusEntity.Values.ExtractCompleted) ||
                Model.CurrentProjectETLStatusId.Equals(Frontline.ETL.Data.EntityClasses.ProjectEtlstatusEntity.Values.ExportToCSVCompleted))
               //if (1==2)
                {%>
                    <div class="editviewleftcolumn">
                        <input type="submit" name="runrulesbutton" value="Run Rules" />
                    </div>
                    <div class="space-line"></div>
                    <div class="editviewleftcolumn">
                        The data for the selected project has been successfully extracted. Click the "Run Rules" button to run fact rule and dimension checks and display any data conflicts.
                    </div>
                <%}
                else
                {
                    if (Model.CurrentProjectETLStatusId.Equals(Frontline.ETL.Data.EntityClasses.ProjectEtlstatusEntity.Values.RuleCheckingInProgress))

                    {%>
                        <%--//Display data conflict grid--%>
                        <div class="editviewthreecolumnleftcolumn">
                            <label for="chkToggleSelectAll">DeSelect / Select All <%= Html.CheckBox("chkToggleSelectAll", false)%></label>
                        </div>
                        <div class="editviewthreecolumnmiddlecolumn">
                            Filter: <%= Html.DropDownList("RuleConflictFilter", ViewData["RuleConflictFilter"] as SelectList, new { style = "width: 220px;"}) %>
                        </div>
                         <div class="editviewthreecolumnrightcolumn">
                            <input type="button" name="btnRefreshGrid" onclick="refreshGrid();" value="Refresh Grid" />
                        </div>

                        <div class="space-line"></div>

                        <div class="space-line"></div>
                        <div class="space-line"></div>
                        <div class="editviewfourcolumncolumnone">
                            <input type="button" name="btnsavechanges" onclick="saveRuleConflicts();" value="Save Changes" />
                        </div>
                        <div class="editviewfourcolumncolumntwo">
                            Resolved Conflicts: <label id="lblResolvedConflictsCount"></label>
                        </div>
                        <div class="editviewfourcolumncolumnthree">
                            Unresolved Conflicts: <label id="lblUnResolvedConflictsCount"></label>
                        </div>
                        <div class="editviewfourcolumncolumnfour">
                            Total Conflicts: <label id="lblTotalConflictsCount" ></label>
                        </div>
                        <div class="space-line"></div>
                        <div class="space-line"></div>
                       <%= Html.Telerik().Grid<Frontline.ETL.Models.DTO.RuleConflictDTO>()
                        .Name("RuleConflictGrid")
                        .DataKeys(keys => keys.Add(model => model.RuleConflictId))
                        .DataBinding(dataBinding =>
                        {
                            dataBinding.Ajax()
                                .Select("_SelectAjaxEditing", "Transform")
                                .Update("_SaveAjaxEditing", "Transform");
                        })
                        .Columns(columns =>
                        {
                            columns.Bound(model => model.UnderlyingTableColumnId).Visible(false);
                            columns.Bound(model => model.Qid).Title("QID").ReadOnly();
                            columns.Bound(model => model.DataRuleName).Title("Rule Name").ReadOnly();
                            columns.Bound(model => model.UnderlyingFieldName).Title("Field").ReadOnly();
                            columns.Bound(model => model.QuestionDescription).Title("Question").ReadOnly();

                            columns.Bound(model => model.OriginalValue).Title("Original Value")
                                .ClientTemplate("<input type='text' disabled='disabled' name='OriginalValue' value='<#= OriginalValue #>' size='10'/>").Width(220)
                                .HtmlAttributes(new { style = "text-align:center" });

                            columns.Bound(model => model.SuggestedValue).ClientTemplate("<#= SuggestedValue #>").Width(220).HtmlAttributes(new { style = "text-align:center" });

                            columns.Bound(model => model.AcceptSuggestedValue).Title("Accept\nSuggested\nValue")
                                .ClientTemplate("<input type='checkbox' disabled='disabled' name='AcceptSuggestedValue' value='<#= AcceptSuggestedValue #>' />")
                                .HeaderHtmlAttributes(new { style = "white-space:pre;height:60px;" })
                                .Width(80)
                                .HtmlAttributes(new { style = "text-align:center" });

                            columns.Bound(model => model.AcceptOriginalValue).Title("Accept\nOriginal\nValue")
                                .ClientTemplate("<input type='checkbox' disabled='disabled' name='AcceptOriginalValue' value='<#= AcceptOriginalValue #>' />")
                                .HeaderHtmlAttributes(new { style = "white-space:pre;height:60px;" })
                                .Width(70)
                                .HtmlAttributes(new { style = "text-align:center" });

                            columns.Bound(model => model.ActualValue).Title("Actual Value")
                                .ClientTemplate("<input type='text' disabled='disabled' name='ActualValue' value='<#= ActualValue #>' />").Width(220)
                                .HtmlAttributes(new { style = "text-align:center" });

                            columns.Command(commands =>
                            {
                                commands.Edit().ButtonType(GridButtonType.Text);
                            })
                            .Width(180).Title("Commands");

                        })
                        .Editable(editing => editing.Mode(GridEditMode.InLine))
                        .Resizable(resizing => resizing.Columns(true))
                        .Pageable(paging => paging
                            .PageSize(30)
                            .Style(GridPagerStyles.NextPreviousAndNumeric | GridPagerStyles.PageInput | GridPagerStyles.PageSizeDropDown)
                            .Position(GridPagerPosition.Bottom)
                            )
                        .HtmlAttributes(new { style = "height:600px;" })
                        .Scrollable(scrolling => scrolling.Height(510))
                        .Selectable()
                        .ClientEvents(events => events
                            .OnEdit("Grid_onEdit")
                            .OnSave("Grid_onSave")
                            .OnDelete("Grid_onDelete")
                            .OnDataBinding("Grid_onDataBinding")
                            .OnDataBound("Grid_onDataBound")
                            .OnRowDataBound("Grid_onRowDataBound")
                        )
                        .Groupable(grouping => grouping.Groups(groups =>
                        {
                            groups.Add(model => model.Qid);
                        }))
                    %>

                    <%
                        }
                    else
                    {
                        if (Model.CurrentProjectETLStatusId.Equals(Frontline.ETL.Data.EntityClasses.ProjectEtlstatusEntity.Values.RuleCheckingCompleted))
                        {%>
                        <div class="editviewleftcolumn">
                            <input type="submit" name="runrulesbutton" value="Run Rules" />
                        </div>

                        <div class="space-line"></div>
                            <div class="editviewleftcolumn">
                                The selected project's data has already been extracted and transformed and is ready to be loaded into the warehouse.
                                Please use the menu above to perform the final Load. Alternately, you may run the rules again if you wish.
                            </div>
                        <%}
                        else
                        {
                            if (Model.CurrentProjectETLStatusId.Equals(Frontline.ETL.Data.EntityClasses.ProjectEtlstatusEntity.Values.LoadCompleted))
                            {%>
                                <div class="editviewleftcolumn">
                                    The selected project's data has already been extracted, transformed and loaded successfully. Please use the menu above if you wish to repeat the process.
                                </div>
                            <%}
                            else
                            { %>
                                <div class="editviewleftcolumn">
                                    The selected project's data still needs to be extracted before it can be transformed and validated. Please use the menu above to perform the Extract.
                                </div>
                                <%}
                            }
                        }
                    }

              }
            %>
                </fieldset>
            <%
        }
        else
        { %>
            Please select a Current Project.
        <%}
    }//Html.BeginForm%>
    <% Html.Telerik().Window()
             .Name("Window")
             .Title("Frontline ETL - Transforming staging data")
             .Draggable(true)
             .Visible(false)
             .Resizable(resizing => resizing
                 .Enabled(false)
                 .MinHeight(100)
                 .MinWidth(250)
                 .MaxHeight(500)
                 .MaxWidth(500)
                 )
            .Scrollable(false)
            .Modal(true)
            .Buttons(b => b.Close())
            //.LoadContentFrom(Url.Action("LoadingExternalPage", "Window", "http"))
            .Content(() =>
            {%>
            <p style="text-align: center">
            <img src="<%= Url.Content("/Images/loading_lightblue.gif")%>" alt="Transforming..." />
            <br />
            Transforming...
            </p>
            <%})
            .Width(330)
            .Height(100)
            .Render();
            %>

[jay]

thanks for sharing!  I will take a look and see if there is anything helpful to us.