PDA

View Full Version : [CLOSED] How to create Multicombo with textbox inside



alscg
Jan 16, 2014, 9:23 AM
Hi ,

We have requirement in our application for a control which should be multicombo with textbox inside multicombo.
Please see below image
7493
We want to type value in a textbox and save against selected value from multicombo.
To meet above requirement, I have implemented following.

MultiComboView :



@{
ViewBag.Title = "MutiCombo with TextBox inside for each value";
}

<h2>MutiComboTextBox</h2>
@model System.Collections.IEnumerable


<style>
.search-item {
font : normal 11px tahoma, arial, helvetica, sans-serif;
padding : 3px 10px 3px 10px;
border : 1px solid #fff;
border-bottom : 1px solid #eeeeee;
white-space : normal;
color : #555;
}

.search-item h3 {
display : block;
font : inherit;
font-weight : bold;
color : #222;
margin :0px;
}

.search-item h3 span {
float : right;
font-weight : normal;
margin : 0 0 5px 5px;
width : 100px;
display : block;
clear : none;
}

p { width: 650px; }

.ext-ie .x-form-text { position : static !important; }
</style>

<h1>ComboBox with Templates and AJAX</h1>

<p>This is a more advanced example demonstrating how to combine Store Paging and a Template to create "live search" functionality.</p>

<div style="width:600px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Search the plants</h3>
@Html.X().ResourceManager()
@(Html.X().MultiCombo()
.DisplayField("Name")
.ValueField("ID")
.Width(500)
.HideBaseTrigger(true)
.MinChars(0)
.TriggerAction(TriggerAction.Query)
.ListConfig(Html.X().BoundList()
.LoadingText("Searching...")
.ItemTpl(Html.X().XTemplate()
.Html(@<text><div><span>{Name}</span></div></text>+"<tpl for='.'><li></li></tpl><input type='number' value='' id='textbox_{ID}'></input>")
)
)
.Store(Html.X().Store()
.AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetPlants"))
.ActionMethods(am => am.Read = HttpMethod.POST)
.Reader(Html.X().JsonReader().Root("data"))
)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("Name"),
Html.X().ModelField().Name("ID")
)
)
)
)
<div style="padding-top:4px;">

</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>



Controller :


#region multicombo with Text box inside example
public ActionResult MutiComboTextBox()
{
return View();
}
public ActionResult GetPlants()
{
List<CommonDTO> Plants = new List<CommonDTO>()
{
new CommonDTO {Name = "Botonical" ,ID= 1},
new CommonDTO {Name = "Common" ,ID= 2},
new CommonDTO {Name = "Small plants" ,ID= 3},
new CommonDTO {Name = "Bigger" ,ID= 4}
};
return this.Store(Plants);
}
#endregion

CommonDTO (Model) :


public class CommonDTO
{
public int ID { get; set; }

public string Name { get; set; }
}


Please provide us a solution for such type of control.
Any guidance will be appreciated.

Thanks.

Daniil
Jan 16, 2014, 1:53 PM
Hi @alscg,

Not a simple task...


Please provide us a solution for such type of control.

We don't have such a control and functionality.


Any guidance will be appreciated.

We would be happy to help. But could you, please, formulate a concrete question? Well, your sample looks good. What are you going to do next?