[Solved] Get Values from checkboxes in grid from popup form

[StevenDale]

I have a page that has 2 dropdowns and a grid. The results in the grid are first filtered by the selection in the dropdowns. The grid contains checkboxes so you can select which users you want to send an email. I also have a edit form on the page which the user can open with a button using javascript and enter email details. When the user clicks sends it calls the action in my controller like it is supposed to. However, I need the values of the checked rows in my grid from the first form on the page. I cannot figure out how to get my values from the one form to the other. Any help would be appreciated. Below is my page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<HealthRiskAnalyzer.Models.GroupQuestionairreStatusModel>" %>

<%@ Import Namespace="HealthRiskAnalyzer.Models" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Questionnairre Status
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% using (Html.BeginForm())
       {%>
    <table style="width: 100%">
        <tr>
            <td>
                <table style="width: 100%">
                    <tr>
                        <td>
                            <div class="editor-label">
                                <%: Html.LabelFor(model => model.SelectedGroup) %>
                            </div>
                            <div>
                                <%= Html.Telerik().DropDownList()
                                      .Name("SelectedGroupDropDown")
                                      .ClientEvents(events => events.OnChange("filterGrid"))
                                      .HtmlAttributes(new { style = "width: 250px;" })
                                      .BindTo(new SelectList(Model.Groups, "Id", "Name"))
                                %>
                            </div>
                        </td>
                        <td>
                            <div class="editor-label">
                                <%: Html.LabelFor(model => model.SelectedTest) %>
                            </div>
                            <div>
                                <%= Html.Telerik().DropDownList()
                                      .Name("SelectedTestDropDown")
                                      .ClientEvents(events => events.OnChange("filterGrid"))
                                      .HtmlAttributes(new { style = "width: 250px;" })
                                      .BindTo(new SelectList(Model.Tests, "Id", "TestName"))
                                %>
                            </div>
                        </td>
                        <td>
                            <input type="button" value="Send Message" onclick="javascript:openWindow();" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <%= Html.Telerik().Grid<UserQuestionnairreStatusModel>()
                             .Name("Groups")
                             .DataKeys(keys => keys.Add(um => um.User.Id).RouteKey("userId"))
                             .DataBinding(dataBinding => dataBinding.Ajax().Select("GetSelectedGroup", "Group", Model))
                             .ClientEvents(events => events.OnDataBinding("Grid_OnDataBinding"))
                             .Pageable(paging => paging.PageSize(5))
                             .Scrollable(scrolling => scrolling.Height(555))
                             .Sortable()
                             .Columns(columns =>
                            {
                                columns.Bound(um => um.IsSelected).ClientTemplate("<input type='checkbox' id='IsSelected' name='IsSelected' <#= IsSelected? \"checked='checked'\" : \"\" #> />").Width(40);
                                columns.Bound(um => um.User.FirstName);
                                columns.Bound(um => um.User.LastName);
                                columns.Bound(um => um.User.UserName);
                                columns.Bound(um => um.Status);
                            }).ToHtmlString()
                %>
            </td>
        </tr>
    </table>
    <% } %>

    <%
        Html.Telerik().Window().Name("NotificationWindow")
        .Title("Email Message")
        .Modal(true)
        .Width(430)
        .Height(385)
        .Visible(false)
        .Content(() =>
         {%>
    <% using (Html.BeginForm("SendEmail", "Group", FormMethod.Post, new { id = "NotificationForm" }))
       {%>
    <fieldset>
        <input type="hidden" id="groupId" name="groupId" />
        <%: Html.ValidationSummary(true, "Invitation was not sent due to the following error(s).") %>
        <%--<%: Html.EditorForModel() %>     --%>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Subject) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Subject)%>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.EmailMessage) %>
        </div>
        <div class="editor-field">
            <%: Html.Telerik().EditorFor(model => model.EmailMessage)%>
        </div>
    </fieldset>
    <p align="right">
        <button type="button" class="t-button" onclick="submitData()">Save</button>
    </p>
    <% }%>

    <% })
        .Render();
    %>

    <script type="text/javascript">
        function Grid_OnDataBinding(e) {
            //if ($("#SelectedGroup").val() != null && $("#SelectedTest").val() != null)
            if ($("#SelectedGroupDropDown").data("tDropDownList") != null && $("#SelectedTestDropDown").data("tDropDownList") != null)
            {
                e.data =
                {
                    SelectedGroup: $("#SelectedGroupDropDown").data("tDropDownList").value(),
                    SelectedTest: $("#SelectedTestDropDown").data("tDropDownList").value(),
                };
            }
        }
        function filterGrid() {
            var grid = $("#Groups").data("tGrid");
            grid.ajaxRequest();
        }
        function openWindow() {
            var editWindow = $("#NotificationWindow").data("tWindow");
            var form = $(editWindow.element).find('#NotificationForm');
            //clear previous data
            form[0].reset();
            //set the id so it will be added when posting the data
            //form.find("#groupId").val(id);
            //open window
            editWindow.center().open();
        }
        function submitData() {
            var form = $('#NotificationForm');
            if (form.valid()) {
                var data = form.serialize();
                var url = form[0].action;
                $.post(url, data, function () {
                    //close window after the request have been made
                    var editWindow = $("#NotificationWindow").data("tWindow");
                    editWindow.close();
                });
            }
        }
    </script>
</asp:Content>

[Petur Subev]

Hello Billy,

You should use the dataItem of the Grid and pass to it the closest tr element to that checkbox. Here is a similar code library project.

Regards,
Petur Subev
the Telerik team