Empty and refill grid from server code

[jlwarranty]

On my page I have an input box that the user can type a search term into, and it will return a data entry for it. 

Each data entry has a 1-many relationship with another table, which I would like to populate into a grid.

An example is type in a persons name, it returns their 1 address, and many phone numbers (home, mobile, office, etc.)

I have the grid working well enough to display the data, but only if I specify which data to return in the code, which gets returned when the page loads.

index.vbhtml:

<div class="row" id="userLookup">

    <input type="text" id="username" name="username" /> <button onclick="getUser()">Get User Info</button>

    <div id="userInfo"></div>

</div>

<div class="row">

    @Html.EJS().Grid("Grid").DataSource(Function(datamanager As DataManagerBuilder) ({datamanager.Json(ViewBag.DataSource.ToArray()).InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor")})).Columns(Function(col As Object) {

                            col.Field("ID").HeaderText("ID").IsPrimaryKey(True).Visible(False).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(),

                            col.Field("Phone").HeaderText("Phone Num").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(),

                            col.Field("Type").HeaderText("Phone Type").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add()

                        }).EditSettings(Function(edit) {edit.AllowAdding(True).AllowEditing(True).AllowDeleting(True).ShowDeleteConfirmDialog(True).Mode(Syncfusion.EJ2.Grids.EditMode.Normal)}).Toolbar(New List(Of String)({"Add", "Edit", "Delete", "Update", "Cancel"})).Render();

</div>

<script>

    function getUser() {

        var user = $("#username").val();

        $.get("/Home/GetUser", { username: user }, function (data) {

            var json = "<h3>" + data.Username + "</h3><br><b>Address:</b>" + data.Address + "<br>"

            $("#userInfo").html(json);

        });

    }

</script>

HomeController.vb

Imports Microsoft.AspNetCore.Mvc

Public Class HomeController

    Inherits System.Web.Mvc.Controller

    Private lines As List(Of PhoneLine)

    Function Index() As Mvc.ActionResult

        Try

            Dim dc As New DataClass("Select * From PhoneLines Where userID = 158368", False)

            lines = New List(Of PhoneLine)

            For Each r As DataRow In dc.Rows

                lines.Add(New PhoneLine (r("ID"), r("PhoneNum"), r("Type")))

            Next

            ViewBag.DataSource = lines

        Catch ex As Exception

        End Try

        Return View()

    End Function

    Function GetUser(username As String) As Mvc.ActionResult

        Dim output As Mvc.ActionResult = Nothing

        Try

            Dim sSql As String = "Select * From users Where Username like '" & username & "'"

            Dim dataReader As System.Data.SqlClient.SqlDataReader = Reader(sSql)

            If dataReader.Read Then

                Dim j = New With {

                    .ID = dataReader.GetValue(0),

                    .Username = dataReader.GetValue(1),

                    .Address = dataReader.GetValue(2)

                    }

                output = New JsonResult With {.Data = j, .JsonRequestBehavior = JsonRequestBehavior.AllowGet}

            Else

                Dim j = New With {

                    .Error = "User not found."

                    }

                output = New JsonResult With {.Data = j, .JsonRequestBehavior = JsonRequestBehavior.AllowGet}

            End If

        Catch ex As Exception

            Throw ex

        End Try

        Return output

    End Function

How do I fill the grid from the getUser function, or alternately, what is the better way to accomplish this?
Thanks!

[Ajith Govarthan]

Hi jlwarranty, 

  

Thanks for contacting syncfusion support. 

  

Query: An example is type in a persons name, it returns their 1 address, and many phone numbers (home, mobile, office, etc.) I have the grid working well enough to display the data, but only if I specify which data to return in the code, which gets returned when the page loads. 

  

Based on your attached code example, we found that you have used the RemoteSaveAdaptor in your Grid application. By default, in our EJ2 Grid you can use the fields which are available in the grid dataSource to display the data in the Grid component. 

  

Similarly, for the RemoteSaveAdaptor the data will be bound with the help of the json property of the datamanager and the Grid will display the column data based on the fields available in the data bound to the grid component, which is the default, behavior of our EJ2 Grid component. 

  

As per your requirement we suspect that you want to display data from multiple datasource. So, in our EJ2 Grid we have feature called foreignkey column, using the foreignkey column you can display the data from other datasources by using the common field for both Grid and foreignkey datasource. For your convenience we have attached the documentation and sample browser links, please refer them for reference. 

  

UG-link: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#foreign-key-column 

  

SB-Link: https://ej2.syncfusion.com/aspnetmvc/Grid/ForeignKey#/material 

  

If we misunderstood your query, then please share more details on your requirement to provide you the prompt solution. 

  

Please get back to us if you need any further assistance. 

  

Regards, 

Ajith G.