I have one database with three columns named id.name, mobile_no.
I want to display mobile no as tooltip in dropdownlist items. Dropdownlist item showing name.
Tooltip showing mobile number which is in database so fetch from database.
How it is?
Since you talk about a dropdownlist, I'm assuming this is ASP.NET. Here's how:
Private Sub loadDropDown
Dim personDataTable As DataTable
Dim personDataRow As DataRow
Dim personListItem As ListItem
' Data access stuff to get data from DB goes here
For Each personDataRow In personDataTable.Rows
personListItem = New ListItem
With personListItem
.Text = personDataRow.Item("Name").ToString
.Value = personDataRow.Item("Id").ToString
.Attributes.Add("title", personDataRow.Item("mobile_no").ToString)
End With
PeopleDropDownList.Items.Add(personListItem)
Next
End Sub
Related
I have a ListBox implemented as below.
#if (Model.SelectListVendorBranchSearched != null )
{
#Html.ListBoxFor(model => model.SelectedVendorBranchLeft, Model.SelectListVendorBranchSearched, new {#class="listbox", #size ="10" })
}
But when the form is posted back the viewModel object does not have the original Data Source that the list was bound to. But it has the selected items posted back.
Is that the right behavior?
Let me try to explain what I am trying to achive.
I am trying to implement the following in ASP.NET MVC.
I have a search functionality that populates a list box say List box A. Now I need to select some items in the List Box A and move the items to another List Box say List Box B. Then do another search that refreshes the List Box A with fresh results. Then again select some more items in the List Box A and append to the items already in List Box B. In the end get the items in the List Box B and save it to DB. How can I do this without any JavaScript?
I am wondering if there is a way to create multiple DropDownLists on the client side from one source in the model.
The background is I need to create a view that contains about 30 DropDownLists. The DropDownLists are identical to one another, and each contains about 400 entries. My model contains one
List<SelectListItem> StandardProductTypes
to hold all entries for each DropDownList.
Here is what is in my current view:
#for (int i = 0; i < Model.Mappings.Count; i++)
{
#Html.DropDownListFor(model => model.Mappings[i].SelectedStandardProductTypeKey,
new SelectList(Model.StandardProductTypes, "Value", "Text", Model.Mappings[i].SelectedStandardProductTypeKey))
}
As you can see, this is returning 30 x 400 = 12000 entries from the sever, and the page loads rather slowly.
All that is really required is only 400 entries transferred and they are replicated 30 times on the client side in the browser. Is there a way to achieve that? Any reference to reading materials or tutorials will be good.
Thanks in advance.
Nay
how about copy with jQuery?
$('#myDropDownlist1 option').clone().appendTo('#myDropDownlist2');
Ok firstly you have no need to create a new SelectList for every DropDownList as the source. The DropDownListFor method just requires an IEnumerable<SelectListItem> as a source, which you already have (and the selected value is determined by the property value it is for normally, so you don't need to pass this in explicitly for the selected value.
Ie given "StandardProductTypes" is already IEnumberable<SelectListItem> you can simplify your DropDownListFor from
#Html.DropDownListFor(model => model.Mappings[i].SelectedStandardProductTypeKey,
new SelectList(Model.StandardProductTypes, "Value", "Text", Model.Mappings[i].SelectedStandardProductTypeKey))
To
#Html.DropDownListFor(model => model.Mappings[i].SelectedStandardProductTypeKey,
Model.StandardProductTypes)
Also I would generally NOT put stuff like a List<SelectListItem> in the model, because you don't need to pass it back after postback. Having it in the Viewbag is fine.
However that's just good practice, and besides the point, as the HTML here will still include all the options for all the dropdowns. TO solve your issue you want to return it only once, and then use some client side jQuery/javascript to replicate it
EG:
use
#Html.DropDownListFor(model => model.Mappings[i].SelectedStandardProductTypeKey, new List<SelectListItem>())
#Html.Hidden(String.Format("Mappings[{0}].SelectedStandardProductTypeKey_Initial",i), Model.Mappings[i].SelectedStandardProductTypeKey)
in place of the dropdown (so you have the correct initial value)
Then a bit of script at the end to fill the dropdownlists:
<script>
var ddlVals= new Array();
#foreach(var item in Model.StandardProductTypes) // get all the select list items into a javascript array
{
#Html.Raw(String.Format("ddlVals.push(['{0}','{1}']);", item.Key, item.Value))
}
$('input[type="select"][name$="SelectedStandardProductTypeKey"]').each(function()
{
var initValue $("name='" + $(this).attr("name") + "_Initial'").val();
foreach(var item in ddlVals)
{
var html = '<option value="' + item[0] + '"'
if (item[0] == initValue){ html = html + ' selected="selected"'}
html = html + '>' + item[1] + '</option>';
$(this).append(html);
}
}
</script>
EDIT
May be quicker using the idea in Edi G's answer
But you'd still need to select the correct initial value.
So keep the hidden fields and dropdowns above, but instead of the previous script how about:
<!-- a template dropdownlist - hidden from view -->
#Html.DropdownList("ddlTemplate", Model.StandardProductTypes, new {id = "ddlTemplate", style="display:none;"})
<script>
$('input[type="select"][name$="SelectedStandardProductTypeKey"]').each(function()
{
$('#ddlTemplate option').clone().appendTo($(this));
var initValue $("name='" + $(this).attr("name") + "_Initial'").val();
$(this).val(initValue);
}
</script>
EDIT 2
If you still find the page to be unresponsive when the javascript is populating the dropdowns after trying the script in the edit above then I have another possible solution.
You would basically need to populate each dropdown with a source as a new List<SelectListItem> - each containing just the single selected option.
Populate an array of values (as per the original script), but then instead of immediately populating all the dropdowns have some javascript that populates the remaining values from the array when you drop the dropdownlist for the first time.
That way you only load the full list of 400 items once, and client side javascript only needs to do work when you click a dropdown, rather than all 30 dropdowns at page load time.
When we click on the Add New or Edit button using Kendo UI Grid, how do we set the default value for any model field?
For example I have two view models City and State. City view model contains the StateID as the foreign key to the City model.
Let's assume that I have a view page where I select from a State dropdownlist to get a Kendo Grid populated with the list of cities for that state. Now I want to create a new city within that state so I need to set the StateID value to the selected value from the dropdownlist.
How do I achieve this functionality?
Well I spent quite some time to figure out the above issue till I stumbled upon this link. And the solution was pretty easy.
All I need to do is add "Edit" event and specify the javascript function which will be called on edit for the Kendo UI grid. Then we can set the default value on the javascript function.
#(Html.Kendo().Grid()
.Events( e => e.Edit("onEdit") )
)
<script type="text/javascript">
function onEdit(e) {
var stateID = $("#hfStateID).val(); // I have set the dropdownlist selected value to //the hidden field
//check if record is new
if (e.model.isNew()) {
//set the default value for StateID
e.model.set("StateID", stateID );
}
}
</script>
Thought it might help someone.
Thanks.
Agree with the ajexpess.
I also had to remove the Required DataAnotation.
For example Remove: [Required(ErrorMessage = "Value should not be empty")] from the property you are trying to set.
I have a dev express grid with 3 columns in it and I want the 3rd column to be editable.
When a user clicks on edit then a drop down list should display for that row (only in the 3rd column), but each row should have a different drop down list as I want to pull data from different stored procedures based on the field name.
So, I am able to get a grid with 3 columns and first two columns are non-editable and also, I have a drop down for the 3rd column but I do not know how to display the data in the drop down for each row. That is where I am stuck.
This is what I have written so far :-
Partial View :-
settings.Columns.Add(col =>
{
col.FieldName = "DefaultValue";
col.Caption = "Rule Type Value";
col.Width = 300;
col.ColumnType = MVCxGridViewColumnType.DropDownEdit;
col.SetEditItemTemplateContent(column =>
{
Html.DevExpress().DropDownEdit(c =>
{
c.Name = "ddlName";
c.SetDropDownWindowTemplateContent("WHAT GOES HERE!?!?!");
}).Render();
});
});
It would be great if anybody can help me on that.
If I have not given adequate information to explain this question then please let me know.
For your dropdownedit you want to add items this way:
c.Properties.Items.Add("Item 1");
c.Properties.Items.Add("Item 2");
I have a Telerik grid in my asp.net mvc application that looks something like:
Now it lists all the regions in a zone selected from the list placed just above the grid. zoneid is foreign key in the grid. Now I want that when I add new region in the grid the zoneID should be taken from the list instead of what is present in zone column of the grid because that value is just to display the zone and that can also be removed from the grid as it as apparent from the list which zone the listed regions belong to.
I understand that I could have used editor templates to show this list inside the grid on edit but I prefer it to be outside the grid and provide some filtering on basis of the zone as we are likely to have many regions per zone. so my concern here, now, is how can I set ZoneID of a region (edited or newly added) equal to selected value of list that shows just above the grid control.
When you click on the AddNewRecord button, why don't you set the Value of your zone equals to the zoneId selected in the combobox value ?
I've done something a little similar, but I had to get the value from a Treeview.
private void btnAddContact_Click(object sender, EventArgs e)
{
Int64 companyId = Int64.Parse(treeCompany.SelectedNode.Name);
dsSociete.ContactRow newContact = dsSociete.Contact.NewContactRow();
newContact.SocieteId = societeId;
dsSociete.Contact.AddContactRow(newContact);
}
And once i add a new Contact, it gets automatically its Company (Societe is Company in French) set.
I did it in Winform, but I guess you can do the same in Web?
I solved this problem by hooking the onSave event of Telerik grid like
<%
Html.Telerkik.Grid<xyz.company>()
.Name("name")
.// other properties
.Events(even=>even.onSave("onSave")
.Render();%>
Inside onSave event handler in JS I have written something like
function onSave(e)
{
var data = e.values;
data["companyID"] = $("#CompanySelectList").val();
e.values = data;
return true;
}
onSave event adds the companyID at companyID index of json that will be submitted to the server and modelbinder will bind it with concerning property name of model.