Open Closed

Question: How do you add an action to a Navigation Property Picker / Modal Ui #192

sean.alford created

How do you add a new action like (+ New Entity) to the Navigation Property picker, and it's modal picker so the user can create a new Entity if the one they're looking for doesn't exist?

Fianlly, how do you render multiple properties on the modal picker?

For example, Name, Surname, Phone

3 Answer(s)
  • 0
    alper created
    Support Team

    MVC / Angular?

  • 0
    sean.alford created

    @alper, MVC

  • 0
    cotur created
    Support Team

    Hi @sean.alford,

    You can use abp.ModalManager javascript library to open a new modal easily.

    Consider that, I want to place a button on my Index.cshtml Razor Page.

    <button id="MyBtn">My Action</button> <!-- Place this button wherever you want at your page -->

    And my javascript codes

    // abp.appPath + "Test/CreateModal" => TestApp.Web / Pages / Test / CreateModal.cshtml
    var createModal = new abp.ModalManager(abp.appPath + "Test/CreateModal");
    $('#MyBtn').click(function (e) {
            ... // your codes
  ; // Without parameters

    and if you want to send parameters while opening modal, just send a javascript object as a parameter of open function.{ name: "John Doe" }); // With parameters

    For second question, I think you use DataTables, and it is really easy to show different values on table.

    For example; I have an endpoint that retuns ContactDto list. ContactDto contains Name, surname, Phone etc.


    public class ContactDto : FullAuditedEntityDto<Guid>
            public string Name { get; set; }
            public string Surname { get; set; }
            public string CellPhone { get; set; }
            public string Phone { get; set; }
            public string Email { get; set; }
            public string Title { get; set; }
            public string Note { get; set; }
            public Guid AccountId { get; set; }
            public AccountDto Account { get; set; } // This Dto has Name property

    My table:

    <abp-table striped-rows="true" id="ContactsTable">

    And my javascript codes,

     var dataTable = $("#ContactsTable").DataTable(abp.libs.datatables.normalizeConfiguration({
            processing: true,
            serverSide: true,
            paging: true,
            ajax: abp.libs.datatables.createAjax(, // .getList is auto generated javascript proxy of my AppService
            columnDefs: [
                    rowAction: {
                                    text: l("Edit")
                                    text: l("Delete")
    			{ data: "name" },
    			{ data: "surname" },
    			{ data: "cellPhone" },
    			{ data: "phone" },
    			{ data: "email" },
    			{ data: "title" },
    			{ data: "note" },
                { data: "" }

    I hope this will help you. But I suggest you to check EasyCRM sample that created to show ABP and ABP Commercial features.