Here is my kendo grid,
#(Html.Kendo().Grid<example.Web.Areas.Models.PredictedValues>()
.Name("MyGrid")
.Columns(column =>
{
column.Bound(p => p.Rlno).Title("Roll no").HtmlAttributes(new { #class = "someclass" });
column.Bound(p => p.stdname).Width(60).Title("Std name").HtmlAttributes(new { style = "text-align:right;" });
column.Bound(p => p.school).Width(50).Title("School").HtmlAttributes(new { style = "text-align:right;" });
})
))
I need to apply some stylings through class to the header names. the included #class is not working for the header. Instead, it is bounding to the table rows. How do i do? Any idea?
Did you try:
column.Bound(p => p.Rlno).Title("Roll no").HeaderHtmlAttributes(new { #class = "someclass" });
.HeaderHtmlAttributes adds a class to the header only.
To add a css class to the gridcell - as an example here I am targetting the Status column - you want to style the grid values... you want to do this instead.
columns.Bound(m => m.Status).Title("Status").HtmlAttributes(new { #class = "someclass" });
Related
Let's say I have the following.
#Html.DropDownListFor(m => m.MyWebPage, Model.FruitsList, "Select", htmlAttributes: new { #class = "form-select detailsInfo" })
And within this drop down menu I have a selection that says "Custom" and right after that drop down I have a textbox that is autopopulated with the user's already selected option
#Html.TextBoxFor(m => m.MyWebPage, htmlAttributes: new { #class = "form-control", id="CustomFruitTextBox"})
What would I have to call in order to disable the text box if the drop down selection is not currently selected to "Custom"?
Would this require javascript or could I do this in the razor file manually?
You can try to use js to check the selected value of the dropdown:
view:
#Html.DropDownListFor(m => m.MyWebPage, Model.FruitsList, "Select", htmlAttributes: new { #class = "form-select detailsInfo" #onchange="check()" })
js:
<script>
$(function () {
check();
})
function check() {
if ($("#MyWebPage").val() != "Custom") {
$("#CustomFruitTextBox").attr("disabled", "disabled");
} else{
$("#CustomFruitTextBox").removeAttr("disabled");
}
}
</script>
how to adjust textbox width in razor code? My code below does not work:
#Html.EditorFor(model => model.PDFLink, new { htmlAttributes = new {#class = "form-control",style="width:300px" } })
Thanks.
You can create a class with the Width you want and use that class for all text box you want. Something like below.
.setWith {
max-width: 350px;
}
#Html.EditorFor(model => model.PDFLink, "", new { #class = "form-control setWith", placeholder = "If You want Any.." })
I did something like this and it works.
#Html.EditorFor(model => model.PDFLink, new { htmlAttributes = new { #class = "form-control",#style="100% !important; min-width:600px;" } })
I am trying to disable/enable an #Html.TextBoxFor in razor using an #Html.CheckBoxFor
I have defined my CheckBoxFor in this manner:
#Html.CheckBoxFor(m => m.ResYearChecked, new { Name = "ResYearChecked", id = "ResYearChecked" })
#Html.TextBoxFor(m => m.SearchResYear, new { Name = "SearchResYear", id = "SearchResYear" })
and I am trying to call the script:
<script>
$('ResYearChecked').change(function () {
$("SearchResYear").prop("disabled", !$(this).is(':checked'));
});
</script>
Do I need to add the onclick attribute to the CheckBoxFor?
I was able to figure out the solution. I enabled the attribute readonly for the #Html.TextBoxFor. I then removed the readonly attribute once the #Html.CheckBoxFor was checked.
Here is the code for my #Html.CheckBoxFor and #Html.TextBoxFor
#Html.CheckBoxFor(m => m.ResYearChecked, new { Name = "ResYearChecked", id = "ResYearChecked" })
#Html.TextBoxFor(m => m.SearchResYear, new { Name = "SearchResYear", id = "SearchResYear", #readonly = "readonly" })
Here is the JavaScript
<script>
$('#ResYearChecked').change(function () {
if ($(this).is(":checked")) {
$("#SearchResYear").removeAttr("readonly");
$("#SearchResYear").focus();
} else {
$("#SearchResYear").attr("readonly", "readonly");
}
});
</script>
I have this snippet :
<p>
#Html.LabelFor(m => m.address, new { style="vertical-align: middle;" }) #Html.TextAreaFor(m => m.address, new { #class = "addition ", value = "",rows="4", required = "required" })
</p>
I get this result :
I need to put the label in the middle.
How can I change the code above to accomplish this task ?
add vertical-align:middle to text area too.
<p>
#Html.LabelFor(m => m.Address, new { style = "vertical-align: middle;" })
#Html.TextAreaFor(m => m.Address, new { #class = "addition ", style = "vertical-align: middle;", value = "", rows = "4", required = "required" })
</p>
I've been struggling with the Kendo dropdownlist for 2 days now and just can't seem to get it configured correctly.
How do I get the Kendo Dropdownlist to show the current item of the #Model? This is my code:
#Html.TextBoxFor(model => model.ShortDescription, new { #class="wide200;" })
#(Html.Kendo().DropDownList()
.Name("importance")
.HtmlAttributes(new { style = "width: 250px" })
.DataTextField("Name")
.DataValueField("ID")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetImportanceList", "Home");
})
.ServerFiltering(true);
})
.SelectedIndex(0)
)
And in my controller:
public ActionResult GetImportanceList()
{
GenericRepository<Importance> _repository = new GenericRepository<Importance>(_context);
IEnumerable<ImportanceViewModel> list = _repository.Get().ConvertToViewModelList();
return Json(list, JsonRequestBehavior.AllowGet);
}
Problem is with SelectedIndex(0) which is set to the first item. How can I set it to whatever is in the model? It's very simple to do for the textbox (first line in the code): model => model.ShortDescription. But how does this work for the dropdownlist?
I don't just want to set it upon the showing of the editor, but also want the grid to know what the new selection is after I click the Update button.
Note that this is in a custom template for the grid popup editor.
Try this,
You have to pass DropDownListId in model and ListItems.
#(Html.Kendo().DropDownListFor(m=>m.DropDownListId)
.Name("importance")
.HtmlAttributes(new { style = "width: 250px" })
.DataTextField("Name")
.DataValueField("ID")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetImportanceList", "Home");
})
.ServerFiltering(true);
})
.SelectedIndex(0)
)
I asked this question to Telerik. Apparently the Name mustn't be assigned.