Set Selected Item on Load

3 posts, 1 answers
  1. Joel
    Joel avatar
    206 posts
    Member since:
    Jun 2018

    Posted 14 May 2020 Link to this post

    I have a grid that lists people.  When it loads, I need to select a row matching the key I submit and then ensure the row is visible in the window.  How do I do this?  My attempt (based on what I know of the TreeList):

    @(Html.Kendo().Grid<Person>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Command(command => command
                .Custom("Select")
                .Click("goDetail"))
                .Width(Glossary.Portal.ButtonWidth);
            columns.Bound(p => p.FirstName)
                .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                    .ShowOperators(false)
                    .SuggestionOperator(FilterType.Contains)));
            columns.Bound(p => p.LastName)
                .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                    .ShowOperators(false)
                    .SuggestionOperator(FilterType.Contains)));
        })
        .Pageable()
        .Selectable(s => s.Mode(GridSelectionMode.Single))
        .Sortable()
        .Scrollable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("IndexJson", "Patients").Data("getData"))
        ).Events(e => e.DataBound("onGridDataBound")))

     

    Script:

    function onGridDataBound(e) {
        // Handle the dataBound event.
        var grid = e.sender;
        alert(grid == null);
     
        var personId = $("#personId").val();
        alert(personId);
     
        if (grid != null)
        {
            var dataItem = grid.dataSource.get(personId);
            alert(dataItem == null);
     
            if (dataItem != null)
            {
                var row = $("tr[data-uid='" + dataItem.uid + "']");
                alert(row == null);
     
                if (row != null)
                {
                    grid.select(row);
                    row[0].scrollIntoView();
                }
            }
        }
    }

     

     

     

  2. Answer
    Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 18 May 2020 Link to this post

    Hello, Joel,

    Thank you for the provided code snippets. 

    The get() method depends on the Model.Id of the data source. What I have noticed is that in the current declaration, Model.Id is missing. Could you add it and let me know if the issue persists?

            .Model(model => model.Id(p => p.ProductId))
    

    Looking forward to your reply.

     

    Kind Regards,
    Anton Mironov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Joel
    Joel avatar
    206 posts
    Member since:
    Jun 2018

    Posted 18 May 2020 in reply to Anton Mironov Link to this post

    You are correct, sir.  Thanks for your help.
Back to Top