1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    26
    Vote Rating
    0
    BastianKrones is on a distinguished road

      0  

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

    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;">männlich</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
    31
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      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
    BastianKrones is on a distinguished road

      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.


Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi