Newbie trying to add Grid to VB webforms

Suite and Optimus Suite 5
#1

Hi,
Ive used DHTMLX before in MVC and it works great, I’m so grateful to have these tools.

But now its a Grid that will replace the built in Gridview in asp.net VB webforms. The grid will need a textbox at the top of each column to filter with, and a way to add a new row at the bottom.

Matching up the data Im trying to solve, sorry for the formatting
<asp:GridView ID=“GridView1” runat=“server” AllowPaging=“True”
AllowSorting=“True” OnSorting
=“GridView1_Sorting”
CurrentSortField=“” AllowCustomPaging=“True” CellPadding=“4”
ForeColor=“#333333” GridLines=“None”>

        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
         
        <Columns>
             <asp:CommandField />
         </Columns>`  ETC...

and then a manual grid frame is defined:

     <br />
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 875pt">
        <colgroup>
            <col style="mso-width-source: userset; mso-width-alt: 10678;" />
            <col style="mso-width-source: userset; mso-width-alt: 10057;" />
            <col style="width:48pt" width="64" />
        </colgroup>
        <tr height="20">
            <td class="auto-style3" height="20">Field</td>
            <td class="auto-style2">Search/Filter</td>
            <td class="auto-style1">Select One</td>
        </tr>
 and 15 more  <tr>'s are defined for all of the columns.  On the code side, just a standard Page Load query to 
 SQL to pull in the data, it displays fine.  I created a manual sorting method that works, but DHTMLX has 
 everything in a nicer looking package
   
    protected Sub Page_Load(ByVal sender........)

           GridView1.DataSource = myTable
           GridView1.DataBind()
           ViewState("tables") = myTable
    End Sub

So the page connects to a SQL connection, ends up with myTable then does the bind and it displays just fine

But how can the DHTMLX grid be put in there instead?
Thanks!

#2

I have what should be the css and .js for the grid in the head section of the page.

The problem is how to format the data from the raw sql output into the? JSON? format the grid needs?

Right now the grid is invisible.

#3

I have the grid showing because the download & instructions did not work. I found other instructions and files from other downloads years ago, now I have the dhtmlx features in the web page

<!-- Latest compiled and minified CSS -->
<link href="Content/codebase/dhtmlx.css" rel="stylesheet" />
<script src="Content/codebase/dhtmlx.js"></script>
<!-- Latest compiled and minified JavaScript -->
<link href="Content/suite.css" rel="stylesheet" />
<link href="Content/common/index.css" rel="stylesheet" />
<link href="Content/Common/grid.css" rel="stylesheet" />

so NOW i have a grid,
< div class="container col-lg-12 />
< div style=“width:90%;nav-left:initial” id=“gridbox”> < /div>

<p><a href="javascript:void(0)" onclick="mygrid.addRow((new Date()).valueOf(), 
   [0,'','','',false,'na',false,''],mygrid.getRowIndex(mygrid.getSelectedId()))">Add row</a></p>
 <p><a href="javascript:void(0)" onclick="mygrid.deleteSelectedItem()">Remove Selected Row</a></p>

 <script>
      //init grid and set its parameters (this part as always)
      mygrid = new dhtmlXGridObject('gridbox');
      mygrid.setHeader(".......

And I setup the column headers, size, but I still need data. I found an article on .NET CONNECTORS but all code is in c# and this is VB webforms. I have a SQL database that works, but need to somehow get data from there into the DHTMLX grid

Ive read the instructions almost 10 times for a couple days now, I cannot get this to work

HOW TO get SQL data into this grid? I know it has to be JSON format, but I have the table adapter and connection string etc, fills the data table and a data view. how to transfer, translate, move, shift data into this DHTMLX grid?

any ideas, thanks