Additional data
 Next   Menu    Previous 
Docs

Additional column data can be returned as option data attributes by simply defining more than 2 columns.
Loading...
Last Name First Name Title Title Of Courtesy
Birth Date Hire Date Address City
Region Postal Code Country Home Phone
Extension Reports To
Photo 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("Photo"),
    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">Photo</td>
        <td id="photo"></td>
        <td class="label">Notes</td>
        <td id="notes" colspan="5"></td>
    </tr>
</table>

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

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

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