Passing selected row to controller throws error

4 posts, 0 answers
  1. John
    John avatar
    9 posts
    Member since:
    Nov 2010

    Posted 10 Jun Link to this post

    I'm trying to pass the selected rows in a grid to a controller action and I keep getting "kendo.grid.min.js:11 Uncaught TypeError: Cannot read property '1' of undefined" as an error.

    I am not 100% sure what is undefined exactly. I have rows selected. If I break out the javascript to see that there are selected items I get them back just fine. The items that are selected have data for all 3 columns as well, so I am kind of lost on to what is undefined. My razor view code is below, thanks.

    001.@model SealRecommendationViewModel
    002. 
    003.@{
    004.    ViewBag.Title = "Recommended Seal Models";
    005.}
    006. 
    007.@{ Html.EnableClientValidation(false); }
    008. 
    009.@using (Html.BeginForm("RecommendedSealModels", "SealRecommendation", FormMethod.Post, new { id = "recommendedSealModels" }))
    010.{
    011.    <div class="separator">
    012.        <h2>Recommended Seal Models</h2>
    013.    </div>
    014.    <div>
    015.        @(Html.Kendo().Grid(Model.SealRecommendationObjects)
    016.                .Name("FilteredGrid")
    017.                .Columns(columns =>
    018.                {
    019.                    columns.Bound(s => s.SealTechnology).Title("Technology").Width(100);
    020.                    columns.Bound(s => s.CategoryCode).Title("Seal Model").Width(100);
    021.                    columns.Bound(s => s.Name).Title("Model Name").Width(100);
    022.                })
    023.                .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
    024.                //.Sortable()
    025.                .DataSource(data => data.Server().Model(m => m.Id(p => p.ProductID)))
    026.                .Events(events => events.Change("selectSealRecommendation"))
    027.        )
    028.        <button id="btnBackBtn" class="buttonLeft" type="button" value="Back" onclick="location.href='@Url.Action("Index", "SealRecommendation")'">Back</button>
    029.        <button id="btnSolution" class="buttonRight" type="submit" value="Next" style="" onclick="submitSelectedSealModels();">Next</button>
    030.    </div>
    031.}
    032. 
    033.<script type="text/javascript">
    034.    $(document).ready(function () {
    035.        //Default functionalities
    036.        var checkSeals = $('input:checkbox[id^="checkedSealModel"]:checked');
    037.        $("#btnBackBtn").click(function () {
    038.            window.location = '@Url.Action("Index", "SealRecommendation")';
    039.        });
    040.        if (checkSeals.length > 0) {
    041.            $('#btnSolution').removeAttr("disabled");
    042.        }
    043.        else {
    044.            $("#btnSolution").attr("disabled", "disabled");
    045.        }
    046.        //CheckBox click event
    047.        $("input[id ^= 'checkedSealModel']")
    048.            .on('click',
    049.                function() {
    050.                    var checkedSeals = $('input:checkbox[id^="checkedSealModel"]:checked');
    051.                    if (checkedSeals.length > 0) {
    052.                        $('#btnSolution').removeAttr("disabled");
    053.                    }
    054.                    if (checkedSeals.length < 1) {
    055.                        $('#btnSolution').attr("disabled", "disabled");
    056.                    }
    057.                    if ($('input:checkbox[id^="checkedSealModel"]').length == checkedSeals.length) {
    058.                        $("#checkAllSealModels").attr("checked", true);
    059.                    } else {
    060.                        $("#checkAllSealModels").attr("checked", false);
    061.                    }
    062.                });
    063.        //CheckAll checkbox click
    064.        $("#checkAllSealModels")
    065.            .on('click',
    066.                function() {
    067.                    if ($("#checkAllSealModels").is(':checked') == true) {
    068.                        $('#btnSolution').removeAttr("disabled");
    069.                        $('input:checkbox[id^="checkedSealModel"]')
    070.                            .each(function() {
    071.                                $(this).attr('checked', true);
    072.                            });
    073.                    } else {
    074.                        $('#btnSolution').attr("disabled", "disabled");
    075.                        $('input:checkbox[id^="checkedSealModel"]')
    076.                            .each(function() {
    077.                                $(this).attr('checked', false);
    078.                            });
    079.                    }
    080.                });
    081.    });
    082. 
    083.    function submitSelectedSealModels() {
    084.        var entityGrid = $("#FilteredGrid").data("kendoGrid");
    085.        var selectedItems = entityGrid.dataItem(entityGrid.select());
    086. 
    087.        var data = selectedItems.toJSON();
    088. 
    089.        var customerForm = new AjaxForm("recommendedSealModels");
    090.        var form = customerForm.getForm(true);
    091. 
    092.        AjaxServiceCall(form.action, form.method, data);
    093.    }
    094. 
    095.    function selectSealRecommendation(arg) {
    096.        var selected = $.map(this.select(), function (item) {
    097.            return $(item).text();
    098.        });
    099.        $('#btnSolution').prop("disabled", false).removeClass("disabled");
    100.    }
    101.</script>

  2. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 14 Jun Link to this post

    Hi John,

    I am afraid I am not aware of such issue and I assume the cause might be the way you retrieve the selected rows. Please try using the following approach to access the selected rows elements and their dataitems of the grid and let me know about the result.
    function item_selected(e) {
        var grid = $("#FilteredGrid").data("kendoGrid");
        var id;
                        
        grid.select().each(function() {
        var dataItem = grid.dataItem($(this));
        id = dataItem.InventoryItemId;
        });
    }

    Regards,
    Kostadin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. John
    John avatar
    9 posts
    Member since:
    Nov 2010

    Posted 14 Jun in reply to Kostadin Link to this post

    I just gave that a shot and I am getting the same error right when it hits this line in the debugger:

     

    grid.select().each(function() {

     

    If I look at what is in grid.select() I am seeing the data for the row, and if I check to see the length, grid.select().length, I am getting the correct count back as well.

  5. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 16 Jun Link to this post

    Hi John,

    Could you please debug the code and let me know when exactly you are receiving the error? As far as I can see your code look correct so I would appreciate if you can provide a small runnable sample in order to investigate it locally.

    Regards,
    Kostadin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready