Additional data
 Next   Menu    Previous 

Additional column data can be returned as option data attributes by simply defining more than 2 columns. All columns after the first 2 will have their column values stored as attributes on the select options.
Loading...
Last Name First Name Title Title Of Courtesy
Birth Date Hire Date Address City
Region Postal Code Country Home Phone
Extension Reports To
Notes
Razor code

var employeeSelect = new SelectModel(DataSourceType.SQLite, "Northwind", "Employees") { Caption = "Employees",  Layout = LayoutType.Row };
employeeSelect.Columns = new List()
{
    new SelectColumn("EmployeeID"),
    new SelectColumn("coalesce(LastName,'') || ', ' || coalesce(FirstName,'') as full_name"),
    new SelectColumn("LastName"),
    new SelectColumn("FirstName"),
    new SelectColumn("Title"),
    new SelectColumn("TitleOfCourtesy"),
    new SelectColumn("BirthDate"),
    new SelectColumn("HireDate"),
    new SelectColumn("Address"),
    new SelectColumn("City"),
    new SelectColumn("Region"),
    new SelectColumn("PostalCode"),
    new SelectColumn("Country"),
    new SelectColumn("HomePhone"),
    new SelectColumn("Extension"),
    new SelectColumn("Notes"),
    new SelectColumn("ReportsTo") {Lookup = new Lookup("employees","EmployeeID","LastName || ',' || FirstName")}
};

employeeSelect.ClientEvents[SelectClientEvent.OptionSelected] = "showEmployee";

@(await new DbNetSuiteCore.SelectControl(HttpContext).Render(employeeSelect))
<hr />
<table>
    <colgroup>
        <col style="width:10%" />
        <col style="width:15%" />
        <col style="width:10%" />
        <col style="width:15%" />
        <col style="width:10%" />
        <col style="width:15%" />
        <col style="width:10%" />
        <col style="width:15%" />
    </colgroup>
    <tr>
        <td class="label">Last Name</td>
        <td id="lastname"></td>
        <td class="label">First Name</td>
        <td id="firstname"></td>
        <td class="label">Title</td>
        <td id="title"></td>
        <td class="label">Title Of Courtesy</td>
        <td id="titleofcourtesy"></td>
    </tr>
    <tr>
        <td class="label">Birth Date</td>
        <td id="birthdate"></td>
        <td class="label">Hire Date</td>
        <td id="hiredate"></td>
        <td class="label">Address</td>
        <td id="address"></td>
        <td class="label">City</td>
        <td id="city"></td>
    </tr>
    <tr>
        <td class="label">Region</td>
        <td id="region"></td>
        <td class="label">Postal Code</td>
        <td id="postalcode"></td>
        <td class="label">Country</td>
        <td id="country"></td>
        <td class="label">Home Phone</td>
        <td id="homephone"></td>
    </tr>
    <tr>
        <td class="label">Extension</td>
        <td id="extension"></td>
        <td class="label">Reports To</td>
        <td id="reportsto"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td class="label">Notes</td>
        <td id="notes" colspan="7"></td>
    </tr>
</table>

<style>
    td.label {
        font-weight: bold
    }

    td img {
        border: 2pt solid gainsboro;
        border-radius: 5px;
    }

    td {
        vertical-align: top
    }
</style>