Results 1 to 3 of 3

Thread: Multi-select in combobox with ASP.NET WEB API

  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    26
    Vote Rating
    0
      0  

    Default Unanswered: Multi-select in combobox with ASP.NET WEB API

    Hey all,
    this time i got almost all functions i need to get worked with the grid ( CRUD ) and a variaty of fields ( text, number, checkbox, radio, combobox )

    Now i want to work with a multi-select combobox and i don't know how to handle it cleverly.

    In my grid will be a combobox filled with contacts ( their names ), identified by their id in background.
    It should be possible to select more contacts.

    Does anynone have a great example solving this problem?

    Maybe there are more ways to solve it.

    Just to mention ( I use the ASP.NET MVC WEB-API )
    So just one API-controller will listen to it.

    By the way: What should be the correct solution in my database:
    using 2 databases, thee second one to have a relation to customers?

    An example for a solution would be very usefull.

    Thanks alot.

    Just in case:
    tbl_user:
    Code:
    public partial class user    {
            public int userID { get; set; }
            public string name { get; set; }
            public string emailAddress { get; set; }
            public Nullable<int> age { get; set; }
            public Nullable<System.DateTime> birthdate { get; set; }
            public string gender { get; set; }
            public Nullable<bool> getNewsletter { get; set; }
            public Nullable<int> contactFK { get; set; }
        }
    tbl_contact:
    Code:
    public partial class tbl_Contact    {
            public int ContactID { get; set; }
            public string Name { get; set; }
            public int SourceContactID { get; set; }
            public int CustomerFK { get; set; }
            public System.DateTime DateCreated { get; set; }
            public double BasePriority { get; set; }
            public string Enabled { get; set; }
        }
    API-controller [PUT]
    Code:
    public HttpResponseMessage Putuser(int id, user user)        {
                if (ModelState.IsValid && id == user.userID)
                {
                    db.Entry(user).State = EntityState.Modified;
    
    
                    try
                    {
                        db.SaveChanges();
                    }
                    catch (DbUpdateConcurrencyException)
                    {
                        return Request.CreateResponse(HttpStatusCode.NotFound);
                    }
    
    
                    return Request.CreateResponse(HttpStatusCode.OK);
                }
                else
                {
                    return Request.CreateResponse(HttpStatusCode.BadRequest);
                }
            }
    ContactsStore [Sencha]
    Code:
    Ext.define('MyApp.store.Contacts', {    extend: 'Ext.data.Store',
    
    
        requires: [
            'MyApp.model.Contact'
        ],
    
    
        constructor: function(cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.apply({
                autoLoad: true,
                autoSync: true,
                model: 'MyApp.model.Contact',
                storeId: 'MyJsonStore1',
                proxy: {
                    type: 'ajax',
                    url: 'http://localhost/sencha/api/contact',
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                }
            }, cfg)]);
        }
    });
    UsersStore [Sencha]
    Code:
    Ext.define('MyApp.store.Users', {    extend: 'Ext.data.Store',
    
    
        requires: [
            'MyApp.model.User'
        ],
    
    
        constructor: function(cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.apply({
                autoLoad: true,
                autoSync: true,
                model: 'MyApp.model.User',
                storeId: 'UserStore',
                pageSize: 5,
                proxy: {
                    type: 'rest',
                    url: 'http://localhost/sencha/api/user'
                }
            }, cfg)]);
        }
    });
    Full View [Sencha]:
    Code:
    Ext.define('MyApp.view.MyViewport', {    extend: 'Ext.container.Viewport',
    
    
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'gridpanel',
                        frame: true,
                        id: 'gridPanelId',
                        autoScroll: true,
                        store: 'Users',
                        columns: [
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'userID',
                                text: 'ID'
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'name',
                                text: 'Name',
                                flex: 4,
                                editor: {
                                    xtype: 'textfield',
                                    maxLength: 20,
                                    minLength: 3
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'emailAddress',
                                text: 'E-Mail',
                                flex: 4,
                                editor: {
                                    xtype: 'textfield',
                                    vtype: 'email'
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                    if (value > 33) {
                                        return '<span style="color:green;font-weight: bold">' + value + '</span>';
                                    } else if (value <= 33) {
                                        return '<span style="color:red;font-weight: bold">' + value + '</span>';
                                    }
                                    return value;
                                },
                                width: 55,
                                align: 'center',
                                dataIndex: 'age',
                                text: 'Alter',
                                editor: {
                                    xtype: 'numberfield',
                                    decimalPrecision: 0
                                }
                            },
                            {
                                xtype: 'datecolumn',
                                align: 'center',
                                dataIndex: 'birthdate',
                                text: 'Geburtstag',
                                format: 'd.m.Y',
                                editor: {
                                    xtype: 'datefield',
                                    format: 'd.m.Y'
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                    if (value == 'M') {
                                        return '<span style="color:green;font-weight: bold;">mnnlich</span>';
                                    } else if (value  == 'F') {
                                        return '<span style="color:red;font-weight: bold;">weiblich</span>';
                                    }
                                    return value;
                                },
                                width: 65,
                                align: 'center',
                                dataIndex: 'gender',
                                groupable: true,
                                text: 'Geschlecht'
                            },
                            {
                                xtype: 'gridcolumn',
                                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                    if(value === true)
                                    {
                                        return '<input type="checkbox" name="getNewsletter" checked="checked" />';
                                    } else if (value === false)
                                    {
                                        return '<input type="checkbox" name="getNewsletter" />';
                                    }
                                },
                                width: 65,
                                align: 'center',
                                dataIndex: 'getNewsletter',
                                text: 'Newsletter',
                                editor: {
                                    xtype: 'checkboxfield',
                                    name: 'getNewsletter'
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                width: 60,
                                align: 'center',
                                dataIndex: 'contactFK',
                                menuText: '',
                                text: 'Kontakt',
                                editor: {
                                    xtype: 'combobox',
                                    displayField: 'ContactID',
                                    forceSelection: true,
                                    store: 'Contacts',
                                    valueField: 'ContactID'
                                }
                            },
                            {
                                xtype: 'actioncolumn',
                                id: 'delete',
                                width: 25,
                                items: [
                                    {
                                        handler: function(view, rowIndex, colIndex, item, e, record, row) {
                                            var user = Ext.getStore('Users');
                                            user.remove(record);
                                        },
                                        icon: 'resources/icons/fam/delete.gif'
                                    }
                                ]
                            }
                        ],
                        items: [
                            {
                                xtype: 'combobox',
                                width: 100,
                                fieldLabel: 'Label',
                                displayField: 'Name',
                                forceSelection: true,
                                store: 'Contacts',
                                valueField: 'ContactID'
                            }
                        ],
                        plugins: [
                            Ext.create('Ext.grid.plugin.RowEditing', {
                                clicksToEdit: 1
                            })
                        ],
                        dockedItems: [
                            {
                                xtype: 'toolbar',
                                dock: 'top',
                                items: [
                                    {
                                        xtype: 'button',
                                        handler: function(button, event) {
                                            // Create a model instance
                                            var r = Ext.create('MyApp.model.User', {
                                                name: 'Mostly Shady',
                                                emailAddress: 'example@example.com',
                                                age: Ext.Date.clearTime(new Date()),
                                                birthdate: false,
                                                gender: 'M',
                                                getNewsletter: false,
                                                contactFK: 8300
                                            }),
                                            usersGrid = this.up('#gridPanelId');
    
    
                                            usersGrid.getStore('UserStore').insert(0, r);
    
    
                                            usersGrid.getPlugin('CellEditing').startEditByPosition({row: 0, column: 0});
                                        },
                                        text: 'Add User'
                                    }
                                ]
                            }
                        ],
                        listeners: {
                            select: {
                                fn: me.onGridPanelIdSelect,
                                scope: me
                            }
                        }
                    },
                    {
                        xtype: 'panel',
                        itemId: 'detailUser',
                        tpl: [
                            'Name: <span style="color:#209cdf;font-weight:bold;">{name}</span><br>',
                            'E-Mail: <span style="color:#209cdf;">{emailAddress}</span><br>',
                            'Alter: <span style="color:#209cdf;">{age}</span><br>',
                            'Newsletter: <span style="color:#209cdf;">{getNewsletter}</span><br>',
                            'geschlecht: <span style="color:#209cdf;">{gender}</span><br>',
                            'Geburtstag: <span style="color:#209cdf;">{birthdate}</span><br>',
                            'Kontakt: <span style="color:#209cdf;">{contactFK}</span>'
                        ],
                        width: 100,
                        layout: {
                            type: 'fit'
                        },
                        bodyPadding: 20,
                        title: 'My Panel'
                    }
                ]
            });
    
    
            me.callParent(arguments);
        },
    
    
        onGridPanelIdSelect: function(rowmodel, record, index, eOpts) {
            var detailUser = this.child('#detailUser');
            detailUser.update(record.data);
        }
    
    
    });

  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Answers
    32
    Vote Rating
    88
      0  

    Default

    For multi-select, just add multiSelect: true to your combobox configuration.

    Re: database, for a many-to-many relationship, I would use a link table between your User and Contact tables.

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    26
    Vote Rating
    0
      0  

    Default

    Thank you for your reply existdissolve,
    now i guess i need to ask someone how to handle the jason responseat the serverside using WEB-API.
    So the client-side is fine now ( i get a json-result-set atleast
    )

    I need to look around how to work with 2 tables in one ( tbl_user and tbl_contact ).

    Does anyone have experience with ASP.NET MVC WEB-API and could give me an example here ?

    Thanks again.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •