I have this control that the user can upload files. If the users upload more then 1 it runs into the next form-group control that is on this view. Is there a way I can get this form-group to grow?
<div class="form-group row">
#Html.LabelFor(model => model.fileManagerIds)
#(Html.Kendo().Upload()
.Name("upImport")
.HtmlAttributes(new { Style = "width: 700px;" })
.Messages(e => e.DropFilesHere("Drop files here")
.Select("Select file"))
.Async(a => a
.Save("Async_Save", "Upload")
.Remove("Async_Remove", "Upload")
.AutoUpload(true)
.SaveField("files")
)
.Events(e => e.Success("upImportSuccess"))
)
#Html.HiddenFor(x => x.fileManagerIds, new { id = string.Format("fileManagerIds"), #name = "fileManagerIds" })
</div>
Related
I am working on a asp.net mvc project and I need to filter dropdownlist according to what user has selected first dropdownlist
This is my first dropdownlist in view:
<div class="form-group">
#Html.LabelFor(m => m.BuildDefinitionName, "Build Definition name", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DropDownListFor(m => m.BuildDefinitionName, new SelectList(Model.BuildData.Select(x => x.Key), "BuildInfo"), "select", new { #class = "form-control" })
</div>
</div>
and this is my second dropdownlist:
<div class="form-group">
#Html.LabelFor(m => m.CurrentBuildNumber, "Current Build", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DropDownListFor(m => m.CurrentBuildNumber, new SelectList(Model.BuildData
.Where(x=>x.Key == "#BuildDefinitionName")
.Select(y => y.Value), "BuildInfo"), "select", new { #class = "form-control" })
</div>
</div>
I have a dictionary that key is string (what the user should chose first dropdown ) and value is IEnumerable ( what it should be filtered by the first dropdown selection).
I am so thanksful for solving my problem.
after applying the answer :
You need to use jquery to modify the second dropdown list.
In your 2nd dropdown list, you need to put all the data of Model.BuildData. So, in your controller, be sure to provide all the records because we will be filtering on client-side.
public ActionResult ControllerName(){
var yourModel = new yourModel();
// Add all the entries to Build Data, we're going to filter it with jquery
yourModel.BuildData = db.BuildData.ToList();
return View(yourModel);
}
In your 2nd dropdown list, we need to put a data attribute on the html. For this example, we're rendering it manually, replace your 2nd dropdown list with the HTML below.
<div class="form-group">
#Html.LabelFor(m => m.CurrentBuildNumber, "Current Build", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<select id="CurrentBuildNumber" name="CurrentBuildNumber" class="form-control">
#foreach(var selectItem in Model.BuildData){
<option data-filter="#selectItem.Key" value="#selectItem.Value">
#selectITEM.Value
</option>
}
</select>
</div>
</div>
Lastly, we need to add an onchange script to the 1st dropdown list that would filter the 2nd dropdownlist.
The code below will loop through all the options in the 2nd dropdown list, and if its data-attribute doesn't match with the selected value, it will hide it.
<script>
$(document).ready(function(){
$(document).on("change","#BuildDefinitionName",function(){
var selected = $(this).val();
$("#CurrentBuildNumber").find("options").each(function(){
if($(this).data("filter")==selected){
// if data-filter is the same as the selected value, show it
$(this).show();
}else{
// if it doesn't match, hide
$(this).hide();
}
});
});
});
</script>
I am trying to position these text fields next to each other and have them in the following format:
(______) _____ - _____
My main problem is getting them to be next to each other. Does anybody have any suggestions on what I should do?
Here is the code I have so far:
<label style="margin: 5px" id="lblPhoneNumber">Phone Number (optional)</label>
<p>
#Html.ValidationMessageFor(model => model.Pharmacy.PhoneNumber)
#Html.TextBoxFor(model => model.Pharmacy.AreaCode, new { style="width:3em", maxlength=3})
#Html.TextBoxFor(model => model.Pharmacy.PhoneNumberFirstThree, new { style="width:3em", maxlength = 3 })
#Html.TextBoxFor(model => model.Pharmacy.PhoneNumberLastFour, new { style="width:4em", maxlength = 4 })
</p>
It will be something like. You need to do it for all three textboxes:
#Html.TextBox("Something", #Model.text, new {style = "display: inline-block;float:left"})
This makes a really nice control. But not if I can't use it. Does it have a feature that lets me set a minimum date as the least date selectable on the control?
<div class="form-group">
#Html.Label("desired ship on:", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.DesiredShipDate, new { #type = "date", #Value=Model.DesiredShipDate.ToString("yyyy-MM-dd") })
</div>
</div>
I am new to CSS and JQuery. I have a C# MVC application that has several forms and I want to use the JQuery datepicker control. What I am seeing is that the datepicker is there, but it is hard to see and is obscured by the other boxes in the form.
All I can do is really describe it, since the site will not allow me to upload images in this question (I keep getting a "Service Unavailable" error). When I click on the editor in the view, I can see the datepicker calendar appear, but it is basically getting all mashed up with the other form boxes below it (to the point where it obscures parts of the calendar).
My markup code is here:
#section Scripts
{
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/cssjqryUi")
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+5",
});
});
</script>
}
<div class="form-group">
<div class="col-md-10">
#Html.LabelFor(model =>
model.ExpiryDate,
"Expiry Date",
htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(m => m.ExpiryDate, new { #class = "datepicker"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
#Html.LabelFor(model =>
model.IssuanceFeeValue,
"Issuance Fee Value",
htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(m => m.IssuanceFeeValue)
#Html.ValidationMessageFor(m => m.IssuanceFeeValue, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-10">
#Html.LabelFor(model =>
model.Tenor,
"Tenor",
htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(m => m.SelectedTenor, Model.TenorList)
#Html.ValidationMessageFor(m => m.SelectedTenor, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-10">
#Html.LabelFor(model =>
model.Tranche,
"Tranche",
htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(m => m.SelectedTranche,Model.TrancheList)
</div>
</div>
I have tried tinkering with the z-index and that did nothing. Note sure what I am missing here.
Any advice would be greatly appreciated.
UPDATE
I have a picture that I can upload of what the markup looks like:
I had the same exact issue a few days ago, this problem is because you are probably missing a jquery-ui.css file.
try adding this file to your page:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css
if(data[keyvar]==false)
{
jQuery('#BtnsaveAjax').prop("disabled", false).removeClass("k-state-disabled");
}
After I execute this statement the function which is present on the save button is not getting called. Do I need to add or remove any more classes to get that function back?
I want to try to answer your question but first what i grasp from your question is
i have a grid.. and to edit it i have a popup window.. on which there
are two buttons.. edit and save.. i have two view modes.. edit and
view.. in edit mode the save button is disabled and in view mode save
button is disabled..
so now when i click "the button" here i think refers to edit button then i want my save button to enable. So far this is what i've got,
first when you click view details you will see save button disabled
while edit button enabled,
then when you click edit button the save button will be enabled
DEMO
This is what my popup looks like.. so now when i click my edit button i want the save button to get enabled.. so buy adding that k-State-disabled i could manage that.. but now when i click my save button.. the click function i have added on save is not firing..
this is my code for that popup page .. and the Editable is a dictionary which contains the disabled value for ta particular kendo widget.
#using Kendo.Mvc.UI;
#using Newtonsoft.Json;
#using SampleUIApp.Areas.AreaOne.Models;
#using SampleUIApp.Common;
#model SampleUIApp.Areas.AreaOne.Models.MemberModel
<script type="text/javascript">
$(document).ready(function ()
{
// For setting control mode
// It is observed that Kendo Multiselect does not accept value through below code
// change mode of multiselect like done below in the same view
var Edit = #(Html.Raw(JsonConvert.SerializeObject((Dictionary<string, bool>)ViewBag.Editable)));
for ( keyVar in Edit )
{
if (keyVar.search("Btn") != -1) {
jQuery('#' + keyVar).attr("disabled", Edit[keyVar]);
} else {
jQuery('#' + keyVar).prop("readonly", Edit[keyVar]);
}
}
var viewMode = #Html.Raw(Json.Encode(ViewBag.ViewMode));
if(viewMode == 'ADD')
{
$("#LoanGrid1").remove();
}
var title = viewMode + ' MEMBER';
setTitle(title);
});
function setViewMode(data) {
//for ( keyVar in data ) {
// if (keyVar.search("Btn") != -1) {
// jQuery('#' + keyVar).attr("disabled", data[keyVar]);
// }
// else {
// jQuery('#' + keyVar).prop("readonly", data[keyVar]);
// }
for ( keyVar in data ) {
if (keyVar.search("Btn") != -1) {
if(data[keyVar]==true){
jQuery('#' + keyVar).prop("disabled", true).addClass("k-state-disabled");
}
else{
jQuery('#' + keyVar).prop("disabled", false).removeClass("k-state-disabled");
}
}
else {
jQuery('#' + keyVar).prop("readonly", data[keyVar]);
}
}
}
function onAdditionalData() {
return {
text: $("#CityName").val()
};
}
function AccessModelDetails() {
var data = #Html.Raw(Json.Encode(this.Model));
alert(data.Remark);
}
function UpdateModelDetails() {
// var model = $('form').serialize();
// var data = Sys.Serialization.JavaScriptSerializer.deserialize(model);
// alert('model: ' + data.Remark);
$("#Remark").val("Remark Updated");
}
function saveDetails() {
alert('Calling : saveDetails');
var model = $("form").serialize();
Save(model); // Save Function is Written On Parent View
}
function Edit() {
var mode = 2; // 2 For Edit
var Fid = 0;
var viewName = 'MemberEditor';
var actionURL = '#Url.Action("setViewMode", "Member")';
$.ajax({
type: "POST",
data: {
Mode: mode,
lFeatureId: Fid,
ViewName: viewName
},
url: actionURL,
success: function (result) {
setViewMode(result);
}
});
}
// This Function will be called when an item is got selected from Multiselect Control
// Used for Member role
// here is a sample methos to get the selected item.
function OnSelectMemberRole(e) {
var dataItem = this.dataSource.view()[e.item.index()];
alert("event :: select (" + dataItem.MemberRoleName + " : " + dataItem.MemberRoleId + ")");
}
</script>
#using (Html.BeginForm())
{
<div class="editor">
<div id="DIV_Line07" class="line">
<div id="DIV_Buttons" class="col100" style="float: right">
#*
1.Below is the kendo button to call server side controller action by using MultiButton Attribute
2. Have to Set HtmlAttributes as follows
* name = Given Name With MutiButton Attribute
* type = "submit",
* value = Given Name With MutiButton Attribute
3. .Name(Given Name With MutiButton Attribute)
4. .Content("Caption Of Button")
*#
#(Html.Kendo().Button()
.Name("BtnEditAjax")
.Content("Edit - AJAX")
.HtmlAttributes(new { style = "float:right", type = "button" })
.Events(ev => ev.Click("Edit"))
)
#* #(Html.Kendo().Button()
.Name("Btnsave")
.HtmlAttributes(new { style = "float:right", name = "Btnsave", type = "submit", value = "save" })
.Content("Save - Server")
)*#
#*
1.Below is the kendo button to call server side controller action by using Javascript Function With Ajax
2. Have to Set HtmlAttributes as follows
* type = "button",
3. .Name(Name Of The Button)
4. .Content("Caption Of Button")
5. Events(ev => ev.Click("Javascript Function Name"))
*#
#(Html.Kendo().Button()
.Name("BtnsaveAjax")
.Content("Save - AJAX")
.HtmlAttributes(new { style = "float:right", type = "button" })
)
#(Html.Kendo().Button()
.Name("AccessModelinJS")
.Content("Access Model In JS")
.HtmlAttributes(new { style = "float:right", type = "button" })
.Events(ev => ev.Click("AccessModelDetails"))
)
#(Html.Kendo().Button()
.Name("UpdateModelinJS")
.Content("Update Model In JS")
.HtmlAttributes(new { style = "float:right", type = "button" })
.Events(ev => ev.Click("UpdateModelDetails"))
)
</div>
</div>
<div id="DIV_Line00" class="line">
<div id="DIV_Fname" class="col33">
#Html.HiddenFor(model => model.MemberId)
<label>
First Name - Upper Case
</label>
#*To make textbox uppercase set style's "text-transform" Attribute's value as "uppercase" in html HtmlAttributes*#
#(Html.Kendo().TextBoxFor(m => m.FirstName)
.Name("FirstName")
.HtmlAttributes(new { #class = "width100", style = " text-transform: uppercase" })
)
</div>
<div id="DIV_MName" class="col33">
<label>
Middle Name - Lower Case
</label>
#*To make textbox lowercase set style's "text-transform" Attribute's value as "lowercase" in html HtmlAttributes*#
#Html.Kendo().TextBoxFor(m => m.MiddleName).Name("MiddleName").HtmlAttributes(new { #class = "width100", style = " text-transform: lowercase" })
</div>
<div id="DIV_LName" class="col33">
<label>
Last Name - Alphabets Only
</label>
#*To make textbox AlphaOnly set pattern Attribute's value as "[A-Za-z\\s]*" in html HtmlAttributes*#
#Html.TextBoxFor(m => m.LastName, new { id = "LastName", #class = "width100 k-textbox", type = "text", pattern = "[A-Za-z\\s]*" })
</div>
</div>
<div id="DIV_Line01" class="line">
<div id="DIV_Height" class="col15">
<label>
DOB - Min & Max
</label>
#Html.ValidationMessageFor(model => model.DateOfBirth)
#(Html.Kendo().DatePickerFor(m => m.DateOfBirth)
.Min(new DateTime(1970, 01, 01))
.Max(new DateTime(2014, 11, 30))
.HtmlAttributes(new { #class = "width100" })
.Format("dd/MM/yyyy")
)
</div>
<div id="DIV_Membe rName" class="col18">
<label>
Age - Integer
</label>
#Html.ValidationMessageFor(model => model.Age)
#Html.Kendo().IntegerTextBoxFor(m => m.Age).HtmlAttributes(new { #class = "width100" })
</div>
<div id="DIV_Age" class="col15">
<label>
Height-Decimal 3
</label>
#*Format as "#.000" specifies that 3 decimals will be displayed, Number of 0s in the format Specifies number of decimals*#
#Html.ValidationMessageFor(model => model.Height)
#Html.Kendo().NumericTextBoxFor(m => m.Height).HtmlAttributes(new { #class = "width100" }).Format("#.000")
</div>
<div id="DIV_Country" class="col18">
<label>
StateAutoComplete
</label>
#* 1.Name Of the autocomplete must be ur property name of the model so that it could bind selected value to model .
2.List for autocomplete will only contains value and does not support Id Value pair pattern(In Used Version of kendo).
*#
#(Html.Kendo().AutoCompleteFor(m => m.StateName)
.Name("StateName")
.DataTextField("StateName")
.BindTo((System.Collections.IEnumerable)ViewData["states"]).HtmlAttributes(new { #class = "width100" })
)
</div>
<div id="DIV_CityServer" class="col33">
<label>
City-AutoComplete Server Filtering
</label>
#* 1.Name Of the autocomplete must be ur property name of the model so that it could bind selected value to model .
2.List for autocomplete will only contains value and does not support Id Value pair pattern(In Used Version of kendo).
*#
#(Html.Kendo().AutoCompleteFor(m => m.CityName)
.Name("CityName")
.DataTextField("CityName")
.MinLength(3)
//.BindTo((System.Collections.IEnumerable)ViewData["cities"]).HtmlAttributes(new { #class = "width100" })
.DataSource(
source =>
{
source.Read(read => { read.Action("GetCities", "Member").Data("onAdditionalData"); });
source.ServerFiltering(true);
})
.HtmlAttributes(new { #class = "width100" })
)
</div>
</div>
<div id="DIV_Line02" class="line">
<div id="DIV_DateOfBirth" class="col33">
<label>
Member Type - DropDownList
</label>
#*
0.List can be bind to DropDownListFor using "BindTo" or using "DataSource".
1.Name Of the DropDownListFor must be ur property name of the model so that it could bind selected value to model .
2.List for DropDownListFor will contains Id Value pair .
3.Selected Value will be Value of DataValueField - ".DataValueField("MemberTypeId")"
4.Selected Value will bind to model property given as name to DropDownListFor
*#
#(Html.Kendo().DropDownListFor(m => m.MemberType)
.Name("MemberType")
.DataTextField("MemberTypeName")
.DataValueField("MemberTypeId")
.HtmlAttributes(new { #class = "width100" })
.Filter("contains")
.BindTo((System.Collections.IEnumerable)ViewData["memberTypes"])
//.DataSource(
// source =>
// {
// source.Read(read => { read.Action("GetMemberTypes", "Member"); });
// })
)
</div>
<div id="DIV_MemberRole" class="col33">
<label>
Member Role - MultiSelect
</label>
#*
0.List can be bind to MultiSelectFor using "BindTo" or using "DataSource".
2.List for MultiSelectFor will contains Id Value pair .
1.Name Of the MultiSelectFor must be ur property name of the model so that it could bind selected values to model.
2.Type of property Specified in Name of MultiSelectFor has to be a collection type for example List<long> or List<string>.
3.Selected Values will be Values of DataValueField - ".DataValueField("MemberRoleId")"
4.Selected Values will bind to model property given as name to MultiSelectFor
*#
#(Html.Kendo().MultiSelectFor(m => m)
.Name("MemberRoleList")
.DataTextField("MemberRoleName")
.DataValueField("MemberRoleId")
.BindTo((System.Collections.IEnumerable)ViewData["memberRoles"])
.Events(e => e.Select("OnSelectMemberRole"))
//.DataSource(
// source =>
// {
// source.Read(read => { read.Action("GetMemberRoles", "Member"); });
// })
)
</div>
<div id="DIV_Mobile" class="col33">
<label>
Mobile - Mobile Mask
</label>
#*
1. Specifying Mask As "0000000000" allows to enter only 10 Digits.
*#
#Html.ValidationMessageFor(model => model.Mobile)
#(Html.Kendo().MaskedTextBoxFor(m => m.Mobile)
.Mask("0000000000")
.HtmlAttributes(new { #class = "width100" })
)
</div>
</div>
<div id="DIV_Line03" class="line">
<div id="DIV_Email" class="col33">
<label>
Email - With Validation
</label>
#*
1. For Email Validation On UI, Use Html.TextBoxFor
2. Set Attributes as follows
* type = "email"
* #class = "k-textbox"
* style = " text-transform: lowercase"
*#
#Html.TextBoxFor(model => model.Email, new { #class = "k-textbox width100", type = "email", style = " text-transform: lowercase" })
</div>
<div id="DIV_PIN" class="col33">
<label>
PIN - Mask
</label>
#*
1. Specifying Mask As "000000" allows to enter only 6 Digits.
*#
#(Html.Kendo().MaskedTextBoxFor(m => m.PIN)
.Mask("000000")
.HtmlAttributes(new { #class = "width100" })
)
</div>
<div id="DIV_Phone" class="col33">
<label>
Phone - Mask
</label>
#*
1. Specifying Mask As "(999) 000-0000" allows to enter Digits within specified mask.
*#
#(Html.Kendo().MaskedTextBoxFor(m => m.Phone)
.Mask("(999) 000-0000")
.HtmlAttributes(new { #class = "width100" })
)
</div>
<div id="DIV_Line05" class="line">
</div>
<div id="DIV_Line06" class="line">
<div id="DIV_Remark" class="col100">
<label>
Remark - Text Area
</label>
#*
To Use Text Area us helper Html.TextAreaFor
2. Set Attributes as follows
* #class = "k-textbox"
* style = " text-transform: lowercase"
* rows = as much U Want
* cols = as much U Want
*#
#Html.TextAreaFor(m => m.Remark, new { #class = "k-textbox width100", rows = "2", cols = "50" })
#Html.HiddenFor(m => m.Remark, new { id = "Remark" })
#* <textarea class="k-textbox" rows="2" cols="50" >
</textarea>*#
</div>
</div>
<div id="DIV_Phone" class="col100">
<label>
Loan Details
</label>
#(Html.Kendo().Grid<LoanModel>()
.Name("LoanGrid1")
.Columns(columns =>
{
columns.Bound(m => m.LoanNumber).Filterable(false).Title("Loan Number").Width("20%").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Bound(m => m.ROI).Filterable(false).Title("ROI").Width("10%").Format("{0:N2}").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Bound(m => m.Period).Filterable(false).Title("Period").Width("10%").Format("{0:N2}").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Bound(m => m.LoanAmount).Filterable(false).Title("Loan Amount").Width("10%").Format("{0:N2}").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Bound(m => m.OtstngAmount).Filterable(false).Title("Outstanding amount").Width("10%").Format("{0:N2}").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Command(cmd => cmd.Destroy());
})
.Pageable()
.Scrollable(config => config.Enabled(false))
.Filterable(config => config.Mode(GridFilterMode.Menu))
.Sortable()
.Resizable(config => { config.Columns(true); })
.Reorderable(config => { config.Columns(true); })
.DataSource(source => source
.Ajax()
.PageSize(5)
.Model(model =>
{
model.Id(m => m.MemberId);
})
.Read(read => read.Action("FetchMemberLoanList", "Member", new { area = "AreaOne" }))
.Destroy(del => del.Action("Destroy", "Member", new { area = "AreaOne" }))
)
)
</div>
</div>
</div>
}