Selecting First Row in Grid Automatically

3 posts, 0 answers
  1. Eli
    Eli avatar
    10 posts
    Member since:
    Feb 2019

    Posted 02 Jul Link to this post

    I have a RadGrid that i use to select records then display said record in a different frame/page. this is working exactly as i want it to.

    Starting off, the grid is empty. the customer makes a search and it is then populated with the relevant data.

    i need to be able to automatically select the first row and it then fire off the "OnSelectedIndexChanged" function i have created.

    i have tried using the

    grid.MasterTableView.Items[0].Selected = true;

    in my codebehind. and while it does highlight the first row, it does not select/click on it to fire off the "OnSelectedIndexChanged" function.

    i have also tried the clientevents options of ongridcreated, ondatabound, etc and they dont work as intended. when the page loads, before the grid is populated these client events keep firing over and over.

    i need it to only fire once, when the grid is populated after a search.

     

    I am really stumped here, and could use assistance.

  2. Attila Antal
    Admin
    Attila Antal avatar
    428 posts

    Posted 04 Jul Link to this post

    Hi Eli,

    Assuming you have the following event handler for the SelectedIndexChanged event:

    protected void RadGrid1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Label1.Text += "Selected Index Changed fired<br />";
    }

    Then a Post Back has happened due to filtering and you are currently on the server-side. The easiest and recommended way would be to use the FireCommandEvent() method of the Grid and fire the "Select" command.

    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        RadGrid grid = (sender as RadGrid);
        if (grid.MasterTableView.Items.Count > 0)
        {
            GridItem item = grid.MasterTableView.Items[0];
            item.Selected = true; // mark the item as selected
            item.FireCommandEvent("Select", string.Empty); // command to make the grid fire the SelectedIndexChanged server event
        }
    }

    Alternatively, you can call the SelectedIndexChanged method directly. Since you are on the server call this method directly, there is no need to wait for the grid to finish rendering and making another round-trip to the server. 

    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        RadGrid grid = (sender as RadGrid);
        if (grid.MasterTableView.Items.Count > 0)
        {
            GridItem item = grid.MasterTableView.Items[0];
     
            item.Selected = true; // mark the item as selected
            RadGrid1_SelectedIndexChanged(sender, new EventArgs()); // call the Event handler directly
        }
    }

    It is, of course, possible using the Client-Side APIs. Have a condition that checks whether there are Items in the grid and none of them are selected, then fire the Command Select from the client by using the fireCommand() client-side method. The problem with this, is that the Grid will first load, then do a Post Back due to the selection. If AJAX is not enabled, it will be flickering/reloading when the selection happens.

    <script type="text/javascript">
        function OnGridCreated(sender, args) {
            var grid = sender;
            var masterTable = grid.get_masterTableView();
     
            if (masterTable.get_selectedItems().length < 1 && masterTable.get_dataItems().length > 0) {
                var firstItem = masterTable.get_dataItems()[0];
                masterTable.fireCommand("Select", firstItem.get_itemIndexHierarchical());
            }
        }
    </script>

    I hope this will be helpful!

    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Eli
    Eli avatar
    10 posts
    Member since:
    Feb 2019

    Posted 05 Jul Link to this post

    Awesome! Thank you very much! you help has been invaluable!
Back to Top