This is what I tried:
#Html.TextBoxFor(model => model.EntryDate, new { style="width:90px;",((_new || _modify) ? #disabled="disabled":"") }) #Html.ValidationMessageFor(model => model.EntryDate)
The following will work because there is only one html attribute
#Html.TextBoxFor(m => m.EntryDate, (_new || _modify)
? new { #disabled = "disabled" }
: null)
However once you add the style attribute, this will generate an error because there is no implicit conversion between new { #disabled = "disabled", #Style="width:90px;" } and new { #Style="width:90px;" } so you need to do this in an if block
#if(_new || _modify) {
#Html.TextBoxFor(m => m.EntryDate, new { #disabled = "disabled", style="width:90px;")}
} else {
#Html.TextBoxFor(m => m.EntryDate, new { style="width:90px;" })
}
Edit
Casting the html dictionary to object seems to work but I've not fully tested this (and I'm not sure that its "a simple and elegant way to to it")
#Html.TextBoxFor(m => m.EntryDate, (_new || _modify)
? (object)new { #disabled = "disabled", style="width:90px;" }
: (object)new { style="width:90px;" })
I am not sure but try this one:
#Html.TextBoxFor(model => model.EntryDate, (_new || _modify) ? new{ #Style="width:90px;", #Disabled="disabled"} : new{ #Style="width:90px;"})
Related
I have the below code in CSHTML but seems like the dropdown is not getting disabled
#Html.DropDownListFor(x => x.Task_Status_Code, Model.TaskStatus, new { #class = "form-control", #disabled = "disabled" })
I want to disable it but it is not working.
#Html.DropDownListFor(
x => x.Task_Status_Code,
Model.TaskStatus,
new { #class = "form-control", disabled = "disabled" })
Removed the # sign before the disabled property name.
You need to add the # character before any dotnet keywords like class. Custom properties do not need to have # prefix.
Please check with below snippet !
#Html.DropDownListFor(
x => x.ReminderTime,
Model.RemindersList,
new { disabled = "disabled" }
)
#Html.DropDownListFor(x => x.Task_Status_Code, Model.TaskStatus, new { disabled = "disabled" })
That will work as well unless you define css form control with in then
#Html.DropDownListFor(x => x.Task_Status_Code, Model.TaskStatus, new { #class="form-control", disabled = "disabled" })
Remember not to put #sign before disabled
I want the disabled attribute be added to a textbox based on a condition
#Html.TextBoxFor(m => m.kidsNumber, new { (Model.kidsDropDown != "2") ? "#disabled" : ""})
Use
#Html.TextBoxFor(m => m.kidsNumber, Model.kidsDropDown != "2" ? new {disabled = "disabled"} : null )
Note also if you need to add multiple attributes, then it needs to be in the format (where the attributes are cast to object
#Html.TextBoxFor(m => m.kidsNumber, Model.kidsDropDown != "2" ? (object)new { #disabled = "disabled", #class="form-control" } : (object)new { #class="form-control" })
If you have multiple textboxes that use the same sets of attributes, you can assign these to variables in the view
#{
object number = new { #type = "number", #class="form-control" };
object disabledNumber = new { #disabled = "disabled", #class="form-control" };
}
and in the form
#Html.TextBoxFor(m => m.kidsNumber, Model.kidsDropDown != "2" ? disabledNumber : number)
#Html.TextBoxFor(m => m.anotherProperty, AnotherCondition ? disabledNumber : number)
.....
You have not said which attribute you want to set ::
you code is without attribute and you should use
use readonly instead because disabled fields are not posted on form submit
#Html.TextBoxFor(m => m.kidsNumber, new { (Model.kidsDropDown != "2") ? "#disabled" : ""})
For Disabled attribute Use::
#Html.TextBoxFor(m => m.kidsNumber, Model.kidsDropDown != "2" ? new {disabled = "disabled"} : null )
For readonly Use something like::
#Html.TextBoxFor(m => m.kidsNumber, new { #readonly= (Model.kidsDropDown != "2" ? "readonly" : "")})
I have the following DropDownListFor that displays a list of states for the user to choose from. How can I default the dropdown to be empty. It currently defaults to the first state in alphabetical order ("Alaska")
#Html.DropDownListFor(m => m.User.StateID,
new SelectList(Model.User.States.Where(filter => filter.Active && (filter.CountryID == 1))
.Select(item => new
{
ID = item.StateProvinceID,
Description = item.Name
}),
"ID",
"Description",
Model.User.StateID),
new { #data_bind = "value: user.StateID, enable:!isSiteUser()", tabindex = "10" })
I figured out that one of the posted questions did have the correct answer for my problem. I was just trying to do use it incorrectly. I was adding "string.Empty" to the wrong location. This is the solution.
#Html.DropDownListFor(m => m.User.StateID,
new SelectList(Model.User.States.Where(filter => filter.Active && (filter.CountryID == 1))
.Select(item => new
{
ID = item.StateProvinceID,
Description = item.Name
}),
"ID",
"Description",
Model.User.StateID),
string.Empty,
new { #data_bind = "value: user.StateID, enable:!isSiteUser()", tabindex = "10" })
I've got a Telerik MVC Grid and I am trying to have the grid rebind after deleting an item.
here is my grid:
#(Html.Telerik().Grid(Model.Item).Name("Items").Sortable().Scrollable(x => x.Height(400)).Filterable().Pageable(x => x.PageSize(20))
.Pageable()
.Columns(columns =>
{
columns.Bound(x => x.Equipment.Location.Building.Name).Title("Building");
columns.Bound(x => x.Equipment.Location.Room).Width(150);
columns.Bound(x => x.Number).Title("Number").Width(150);
columns.Command(commands =>
{
if (Model.CanViewHistory)
{
commands
.Custom("ViewHistory")
.Text("History")
.ButtonType(GridButtonType.Text)
.SendState(false)
.DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
.Action("Index", "ItemHistory");
}
if (Model.CanEdit)
{
commands
.Custom("Edit")
.Text("Edit")
.ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { #class = "t-icon t-edit t-test" })
.DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
.SendState(false)
.Action("Save", "Items");
commands
.Custom("Delete").HtmlAttributes(new { onclick = "return confirm('Are you sure you want to delete this item?')" })
.Text("Delete").Ajax(true)
.ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { #class = "t-icon t-delete t-test" })
.DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
.SendState(false)
.Action("Delete", "Items", new { Area = "Apps" });
}
}).Title("Actions");
}).ClientEvents(events => events.OnComplete("onComplete")))
And my method to call after delete executes is:
<script type="text/javascript">
function onComplete() {
$("#Items").data("tGrid").rebind();
}
</script>
Action:
public ActionResult Delete(Guid id)
{
Item item = _itemService.GetOne(x => x.Id == id);
_itemService.Delete(item);
return RedirectToAction("Index");
}
The action works, the item does actually get deleted, but the grid does not refresh, only after manually reloading the page will the deleted item be gone. In my console when I click the delete button I get the following error:
Uncaught ReferenceError: xhr is not defined telerik.grid.min.js:1
What am I doing wrong?
Edit: Using Kirill's method below removes my error, but the grid still doesn't refresh, the javascript is sucessfully being called and getting to the rebind() command though.
You should not return ViewResult from this method. You should return JsonResult.
public JsonResult Delete(Guid id)
{
try
{
Item item = _itemService.GetOne(x => x.Id == id);
_itemService.Delete(item);
return Json(new { result = true });
}
catch
{
return Json(new { result = false });
}
}
And onComplete should be:
function onComplete(e) {
if (e.name == "Delete") {
var result = e.response.result;
if(result==true)
$("#Items").data("tGrid").rebind();
else{
alert("Error on deleting")
}
}
}
UPDATE
This works with Ajax binding.
#(Html.Telerik().Grid<ItemType>.Name("Items")
.Sortable().Scrollable(x => x.Height(400))
.Filterable().Pageable(x => x.PageSize(20))
//you should add this line:
.DataBinding(dataBinding => dataBinding.Ajax().Select("Select", "Items"))
.Columns(columns =>
{
columns.Bound(x => x.Equipment.Location.Building.Name).Title("Building");
columns.Bound(x => x.Equipment.Location.Room).Width(150);
columns.Bound(x => x.Number).Title("Number").Width(150);
columns.Command(commands =>
{
if (Model.CanViewHistory)
{
commands.Custom("ViewHistory")
.Text("History")
.ButtonType(GridButtonType.Text)
.SendState(false)
.DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
.Action("Index", "ItemHistory");
}
if (Model.CanEdit)
{
commands.Custom("Edit")
.Text("Edit")
.ButtonType(GridButtonType.Image)
.ImageHtmlAttributes(new { #class = "t-icon t-edit t-test" })
.DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
.SendState(false)
.Action("Save", "Items");
commands.Custom("Delete")
.HtmlAttributes(new { onclick = "return confirm('Are you sure you want to delete this item?')" })
.Text("Delete")
.Ajax(true)
.ButtonType(GridButtonType.Image)
.ImageHtmlAttributes(new { #class = "t-icon t-delete t-test" })
.DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
.SendState(false)
.Action("Delete", "Items", new { Area = "Apps" });
}
}).Title("Actions");
})
.ClientEvents(events => events.OnComplete("onComplete")))
and you should add action to get data to grid:
[GridAction]
public JsonResult GetChangeHistory(Guid stockCompanyId)
{
IEnumerable<ItemType> items = ... //code to get items.
return Json(new GridModel<ItemType>(items));
}
I assume that element of items collection is of type ItemType.
I am trying to create a master/detail Telerik MVC grid with Ajax binding. When I select a detail row to update, click "Edit", edit the value, then click "Update", the value is not updated on the client side. I see in the debugger that the model is not updated when I call TryUpdateModel. Here is the view:
#(Html.Telerik().Grid<FeeSrcMstrDteViewModel>()
.Name("FeeSourceConfirmMasterGrid")
.Columns(columns =>
{
columns.Bound(m => m.FEE_SRC_NME).Width(65).Title(#FeeBuilderResource.FeeSourceName);
columns.Bound(m => m.PUBLISHING_ENTITY_NME).Width(45).Title(#FeeBuilderResource.PublishingEntity);
columns.Bound(m => m.FEE_SRC_SRVC_CATEGORY_NME).Width(55).Title(#FeeBuilderResource.ServiceTypeCategory);
columns.Bound(m => m.FEE_SRC_PUBLISHED_DTE).Width(45).Title(#FeeBuilderResource.PublishedDate).Format("{0:d}");
columns.Bound(m => m.YEAR).Width(30).Title(#FeeBuilderResource.Year);
if (Model.FeeSourceMasterDate.GEO_LOC_ID == 1 || Model.FeeSourceMasterDate.GEO_LOC_ID == 4)
{
columns.Bound(m => m.STATE).Width(50).Title("State or carrier locality");
}
else
{
columns.Bound(m => m.CARRLOC).Width(50).Title("State or carrier locality");
}
//columns.Command(commands => commands.Custom("ExportToExcel").Text("Export to Excel")
//.DataRouteValues(route => route.Add(m => m.FeeSourceMasterDate.FEE_SRC_MSTR_ID).RouteKey("FEE_SRC_MSTR_ID"))
//.Ajax(false).Action("_ConfirmMasterExportXlsAjax", "FeeSrcFlatRate", new { feeSourceServiceMasterDateId = "<#= FEE_SRC_MSTR_ID #>" }))
//.HtmlAttributes(new { style = "text-align: center" }).Width(50).Title(#FeeBuilderResource.Actions);
})
//.ClientEvents(events => events.OnSave("FeeSourceTestGrid_OnSave"))
.DetailView(details => details.ClientTemplate(
Html.Telerik().Grid<FeeSourceFlatRateCommentsViewModel>()
.Name("FeeSourceHome_<#= FEE_SRC_MSTR_ID #>")
.DataKeys(keys => keys.Add(m => m.CommentId))
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("_GetFeeSourceDetailDataAjax", "FeeSrcFlatRate")
.Update("_UpdateFeeSourceDetailDataAjax", "FeeSrcFlatRate")
)
.Columns(columns =>
{
columns.Bound(m => m.CommentId).Width(200).Hidden();
columns.Bound(m => m.FeeSourceDescription).Width(200).Title("Fee source description");
columns.Bound(m => m.FeeSourceComments).Width(200).Title("Fee source comments");
columns.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.ImageAndText);
}).Width(75);
})
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("_GetFeeSourceDetailDataAjax", "FeeSrcFlatRate", new { id = "<#= FEE_SRC_DTE_ID #>" }))
.Editable(editing => editing.Mode(GridEditMode.InLine).InsertRowPosition(GridInsertRowPosition.Top))
.Footer(false)
.ToHtmlString()
))
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("_GetFeeSourceDataAjax", "FeeSrcFlatRate"))
.Pageable(paging => paging.PageSize(20))
//.Scrollable(scrolling => scrolling.Height(580))
.Sortable()
)
The select methods work great, but not the update method. I would expect the model to be updated when i call TryUpdateModel in my controller, but I do not see that. Here is my controller code:
[HttpPost]
[GridAction]
public ActionResult _UpdateFeeSourceDetailDataAjax(int id)
{
FeeSourceFlatRateViewModel modelTest = new FeeSourceFlatRateViewModel();
List<FeeSourceFlatRateCommentsViewModel> commentsList = new
List<FeeSourceFlatRateCommentsViewModel>();
// get the model by id
IFeeSourceMstrRepository repo = new FeeSourceMstrRepository();
IList<FeeSrcMstrDteViewModel> modelTestList = repo.GetFeeSrcMstrDteViewModel((int)id);
FeeSrcMstrDteViewModel modelTestChange = modelTestList[0];
//Perform model binding (fill the product properties and validate it).
if (TryUpdateModel(modelTestChange))
{
var testy = modelTestChange;
// set the comments
FeeSourceFlatRateCommentsViewModel modelComments = new FeeSourceFlatRateCommentsViewModel
{
CommentId = id,
FeeSourceDescription = modelTestChange.FEE_SRC_DESC,
FeeSourceComments = modelTestChange.FEE_SRC_COMMENTS
};
commentsList.Add(modelTestChange);
// save the object
repo.SaveFeeSrcUOW(saveModel);
OperationStatus opStatus = repo.Save();
}
TempData["FeeSourceFlatRateModel"] = modelTestChange;
return View(new GridModel(commentsList));
}
What am I missing? Thanks for the help!
I got some help from the Telerik site. As it turns out, I was trying to update the incorrect model. My master grid is bound to FeeSrcMstrDteViewModel, but my detail grid, which I want to update, is bound to FeeSourceFlatRateCommentsViewModel.
The fix was to call TryUpdateModel on the FeeSourceFlatRateCommentsViewModel.