JQuery - Selector only getting value of first grid within kendo tabbed strip

Question

I have 5 grids all placed within different kendo tab strips. What I'm trying to achieve is when I update, I need to alert the user to check at least one checkbox. However, my selector only seems to be getting the first grid's check boxes when I click edit. Nothing happens for the other ones.

Here is the first tab of my grid-

<div id="tabstrip-left-A">
    <ul>
        <li class="k-state-active">
            Diagnostic
        </li>
        <li>
            Referrals
        </li>

    </ul>
    <div>
 <div id="tabstrip-left-B">
            <ul>
                <li class="k-state-active">
                    SubTypes
                </li>
                <li>
                    Categories
                </li>
                <li>
                    Statuses
                </li>


            </ul>
            <div>


                @*Diagnostic*@
                @(Html.Kendo().Grid<OSH.Domain.Models.TPSWork.ExcludeFrom>()
        .Name("DiagnosticGrid")
        .Columns(columns =>
        {
            columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(180);
            columns.Bound(e => e.TPSDiagExclusionID).Width(150).Hidden();

            columns.ForeignKey(p => p.OrdConceptID, (System.Collections.IEnumerable)ViewData["OrdConceptShortNameID"], "OrdConceptID", "OrdConceptShortName").Title("Order Concept").EditorTemplateName("OrdConceptID");

            columns.Bound(e => e.ExcludeFromReportlist).Width(200);
            columns.Bound(e => e.ExcludeFromWorklist).Width(200);
        })
        .ToolBar(toolbar => { toolbar.Create().Text("Add New Diagnostic Code"); })

        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Sortable()
        .Pageable()
        .Scrollable()
        .ColumnMenu()
        .Filterable()
        .HtmlAttributes(new { style = "height:520px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Model(model =>
            {
                model.Id(p => p.TPSDiagExclusionID);
            })
                    .Read(read => read.Action("ReadDiagnosticCode", "TPSAdmin").Data("FilterOrdConcept"))
                    .Create(update => update.Action("CreateDiagnosticCode", "TPSAdmin").Data("InsertAdditionalData"))
                    .Update(update => update.Action("UpdateDiagnosticCode", "TPSAdmin").Data("AdditionData"))
                    .Destroy(update => update.Action("DeleteDiagnosticCode", "TPSAdmin"))
                    .Events(events => events.Error("onError").Sync("sync_handler"))
                    )
                .Pageable(x => x.PageSizes(new List<object> { 5, 10, 15, 20, "all" }).Refresh(true))
               .Events(e => e.Edit("onDiagnosticGridEdit"))
               .Filterable(ftb => ftb
            .Extra(false)
            .Operators(operators => operators
            .ForString(str => str.Clear()
                .Contains("Contains")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
            )
    .Sortable()
    .Groupable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
                )
            </div>
            <div>
                @*Categories*@
                @(Html.Kendo().Grid<OSH.Domain.Models.TPSWork.ExcludeFromDiagCategories>()
        .Name("DiagCategoriesGrid")
        .Columns(columns =>
        {
            columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(180);
            columns.Bound(e => e.ID).Width(150).Hidden();
            columns.ForeignKey(p => p.OrdCategoryID, (System.Collections.IEnumerable)ViewData["DiagCategDescID"], "OrdCategoryID", "OrdCategoryDesc").Title("Category").EditorTemplateName("OrdDiagCategID");

            columns.Bound(e => e.ExcludeFromReportList).Width(200);
            columns.Bound(e => e.ExcludeFromWorkList).Width(200);
        })
        .ToolBar(toolbar => { toolbar.Create().Text("Add New Category"); })

        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Sortable()
        .Pageable()

        .Scrollable()
        .ColumnMenu()
        .Filterable()
        .HtmlAttributes(new { style = "height:520px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Model(model =>
            {
                model.Id(p => p.OrdCategoryID);
            })
                    .Read(read => read.Action("ReadDiagCategories", "TPSAdmin").Data("FilterDiagCategories"))
                    .Create(update => update.Action("CreateDiagCategories", "TPSAdmin").Data("InsertDiagCategData"))
                    .Update(update => update.Action("UpdateDiagCategories", "TPSAdmin").Data("AdditionData"))
                    .Destroy(update => update.Action("DeleteDiagCategories", "TPSAdmin"))
                    .Events(events => events.Error("onError").Sync("sync_handler"))
                    )
                .Pageable(x => x.PageSizes(new List<object> { 5, 10, 15, 20, "all" }).Refresh(true))
               .Events(e => e.Edit("onDiagCategGridEdit"))
               .Filterable(ftb => ftb
            .Extra(false)
            .Operators(operators => operators
            .ForString(str => str.Clear()
                .Contains("Contains")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
            )
    .Sortable()
    .Groupable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
                )
            </div>
            <div>
                @*Statuses*@
            @(Html.Kendo().Grid<OSH.Domain.Models.TPSWork.ExcludeFromDiagStatuses>()
        .Name("DiagStatusesGrid")
        .Columns(columns =>
        {
            columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(180);
            columns.Bound(e => e.ID).Width(150).Hidden();

            columns.ForeignKey(p => p.StatusID, (System.Collections.IEnumerable)ViewData["StatusNameID"], "StatusID", "StatusName").Title("Status Name").EditorTemplateName("DiagStatusExclusionEdit");

            columns.Bound(e => e.ExcludeFromReportList).Width(200);
            columns.Bound(e => e.ExcludeFromWorkList).Width(200);
        })
        .ToolBar(toolbar => { toolbar.Create().Text("Add New Status Type"); })

        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Sortable()
        .Pageable()
        .Scrollable()
        .ColumnMenu()
        .Filterable()
        .HtmlAttributes(new { style = "height:520px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Model(model =>
            {
                model.Id(p => p.ID);
            })
                    .Read(read => read.Action("ReadDiagStatuses", "TPSAdmin").Data("FilterDiagStatuses"))
                    .Create(update => update.Action("CreateDiagStatus", "TPSAdmin").Data("InsertDiagStatusData"))
                    .Update(update => update.Action("UpdateDiagStatus", "TPSAdmin").Data("AdditionData"))
                    .Destroy(update => update.Action("DeleteDiagStatus", "TPSAdmin"))
                    .Events(events => events.Error("onError").Sync("sync_handler"))
                    )
                .Pageable(x => x.PageSizes(new List<object> { 5, 10, 15, 20, "all" }).Refresh(true))
               .Events(e => e.Edit("onDiagnosticStatusEdit"))
               .Filterable(ftb => ftb
            .Extra(false)
            .Operators(operators => operators
            .ForString(str => str.Clear()
                .Contains("Contains")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
            )
    .Sortable()
    .Groupable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
            )
        </div>
    </div>

Here is my AdditionData function -

function AdditionData() {

        var grid = $("table[role='grid'").data("kendoGrid");
        var reportList = $("table[role='grid'] input[name='ExcludeFromReportlist'][type='hidden']").val();
        var workkList = $("table[role='grid'] input[name='ExcludeFromWorklist'][type='hidden']").val();

        if (reportList == "false" && workkList == "false") {

            alert("One checkbox must be checked.")
            return;
        }

        else {
            return {
                OrdConceptIDData: $("#OrdConceptID").val(),
                OrdCategoryIDData: $("#OrdDiagCategID").val(),
                DiagStatusID: $('#StatusID').val(),
                RefAuthTypeID: $("#ReferralAuthorizationTypeID").val(),
                RefStatusIDData: $("#ReferralAuthorizationStatusID").val(),
                RefSubTypeIDData: $("#SpecialtyID").val()
            }
        }
    }

This only gives me the first grid's checkbox values when I click "Update". But for the other tabs nothing happens. This is the part that has me stuck.

Thanks!

Answer 1

That is because you're getting only the first grid actually:

var grid = $("table[role='grid'").data("kendoGrid");

The code above - besides the typo - returns only the first grid, even if your selector matches more than one element.

Try a loop:

function AdditionData() {
    var checkBoxes = true;

    $("table[role='grid']").each(function() {
        var subCheckBoxes = false,
            grid = $(this).closest(".k-grid"); // Get the real grid wrapper element

        $("input[name='ExcludeFromReportlist'][type='hidden'], input[name='ExcludeFromWorklist'][type='hidden']", grid).each(function() {               
            if (!$(this).is(":checked")) {
                // If ANY checkbox is checked, then it is valid.
                subCheckBoxes = true;
                return false; // Exits loop
            }
        });

        // If ANY grid has no checkboxes checked, then it is invalid.
        if (!subCheckBoxes) {
            checkBoxes = false;
            return false; // Exits loop
        }
    });

    if (!checkBoxes) {
        alert("One checkbox must be checked.")
        return;
    }
    else {
        return {
            OrdConceptIDData: $("#OrdConceptID").val(),
            OrdCategoryIDData: $("#OrdDiagCategID").val(),
            DiagStatusID: $('#StatusID').val(),
            RefAuthTypeID: $("#ReferralAuthorizationTypeID").val(),
            RefStatusIDData: $("#ReferralAuthorizationStatusID").val(),
            RefSubTypeIDData: $("#SpecialtyID").val()
        }
    }
}

Demo

Also, use is() to check whether a checkbox is checked or not. Source.