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!

Where is your edit button? Do all your grids have different id's? — Keith, Oct 31 '17 at 23:17
@Keith you see where it says Column.Edit(“ “). That’s where the update option is. So when you click update, it’ll automatically render check boxes for the ExcludeFromReportList and WorkList fields Because those are Boolean values. And yes all of the grids have different id’s. — Krazy Dev, Oct 31 '17 at 23:20
So you've debugged the javascript and you are not hitting that function or it is returning wrong values? Off the top of my head I would say it could be related to how the tabs are loaded. When you change the DOM via AJAX the events are lost for the parts inserted. — Steve Greene, Nov 01 '17 at 13:36

DontVoteMeDown · Answer 1 · 2017-11-01T14:06:31.370

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.

This is working for all of the grids but what is happening now is that if one check box is checked and the other isn't then it still says "one check box must be checked". — Krazy Dev, Nov 01 '17 at 14:58

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

1 Answers1