Set optionlabel for Kendo dropdownlist conditionally - asp.net-mvc-4

I have a Kendo dropdownlist like below:
#(Html.Kendo().DropDownListFor(m => m.Country_ID)
.Name("Country_ID")
.DataTextField("COUNTRY_NAME")
.DataValueField("COUNTRY_CODE")
.OptionLabel("Select Country")
.DataSource(source => source.Read(read => read.Action("GetCountry", "Test")).ServerFiltering(true))
)
I need to change the option label text based on when a ID present in viewbag. Can anyone help me with this?

Related

ASP.NET MVC5 setting dropdown list value within a loop on the View

I have a collection that I populate in the controller MenuitemDetails and this populates a property on the view model.
The collection has 3 properties and multiple records
Id, Title and State
State is an integer value which relates to a dropdown list selected value.
The viewmodel also contains a selectList property (stateList) which is used to populate the dropdownlist items on the view.
I'm trying to repopulate the form for an edit action - with the same dropdown item selections
<table>
#for (int counter = 0; counter < Model.MenuitemDetails.Count; counter++)
{
<tr>
<td>
#Model.MenuitemDetails[counter].Title
#Html.DropDownListFor(i => Model.MenuitemDetails[counter].state, Model.stateList)
</td>
<hr />
</tr>
}
</table>
I can't seem to get the values of the dropdown to display the appropriate values selected.
Rather than pass in a select list in the viewmodel it can be created in the razor view and in this way you can use the overload for creating the select list to determine the value to bind.
In the example I am using telerik mvc dropdown list but the same applies in terms of creating the selectList in the razor and with a property to bind to which will determine its state.
#(Html.Kendo().DropDownListFor(m => m.Entity.ProductId)
.DataTextField("Text")
.DataValueField("Value")
.Filter("contains")
.HtmlAttributes(new { #class = "form-control" })
.BindTo(new SelectList(Model.Products, "Id", "FullName", Model.Entity.ProductId)))
You can also try to use an editortemplate for this sort of things like so:
#(Html.Kendo().DropDownListFor(m => m)
.OptionLabel("--Select Value--")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("MethodName", "ControllerName").Data("dataforMethod");
});
})
.Enable(true)
.AutoBind(true)
)
In the .Data() part on the read you dont need to use it only if you have some parameters you need int the funtion to get the dataset

Kendo DropDownListFor in EditorTemplate

I am creating a Dynamic Kendo Grid using GridBoundColumnBuilder().
I loop through all of the controls on the previous page to create the grid.
For example with myTextbox(), myCheckbox(), etc.
These create columns in the grid. I have all of the columns creating and populating with data.
My issue is with the Dropdownlist and the Multiselect list, they populate with data but do not display the correct data when the grid is created.
The dropdown list displays the value, not the text of the previous control:
1 = My
2 = Data
The Dropdownlist will display 1 instead of My. And, the Multiselect only displays [object Object].
When you click on either of the controls in the grid it switches to show the proper text, but loses it when you click off.
Any ideas of what I am doing wrong?
foreach (ControlBase control in flatColumns)
{
GridBoundColumnBuilder<dynamic> thisColumn;
if (control.Lookups != null && control.Lookups.Any())
{
if (!control.IsMultiSelect){
thisColumn = column.Bound(control.ControlType, control.ColumnName).Title(control.Description);
thisColumn.EditorTemplateName("DropDownList");
thisColumn.Width(250);
}
else
{
thisColumn = column.Bound(control.ControlType, control.ColumnName).Title(control.Description);
thisColumn.EditorTemplateName("MultiDropDownList");
thisColumn.Width(250);
}
}
}
Dropdown Template
#(Html.Kendo().DropDownListFor(m => m).HtmlAttributes(new { #class = "form-control" })
.BindTo((IEnumerable) ViewData[currentColumn + "List"])
.DataTextField("Text")
.DataValueField("Value")
.ValuePrimitive(true)
.Text("Value")
Multiselect Templage
#(Html.Kendo().MultiSelectFor(m => m)
.HtmlAttributes(new { #class = "form-control" })
.BindTo((IEnumerable)ViewData[currentColumn + "List"])
.DataTextField("Text")
.DataValueField("Value")
Have you tried changing the .Text to display the Text rather than the Value?
.DataTextField("Text")
.DataValueField("Value")
.ValuePrimitive(true)
.Text("Text")

asp mvc dropdown list default value does not bound

in controller I have :
ViewBag.ActivityTypeID = new SelectList(activityTypes, "ActivityTypeID","Name"
,workFlowDetail.ActivityTypeID);
and in view :
#Html.DropDownListFor(model => model.ActivityTypeID,new SelectList(ViewBag.ActivityTypeID,"Value","Text"), String.Empty)
#Html.ValidationMessageFor(model => model.ActivityTypeID)
The default value which is (workFlowDetail.ActivityTypeID) does not selected by dropdown in my edit view
how can I do that?
thanks
This Problem generally occurs in MVC because model.ActivityTypeID and ViewBag.ActivityTypeID have ActivityTypeID in common that is why problem occur,just change Viewbag name and problem will be resolved..
This will work :-
Controller :
ViewBag.ActivityType = new SelectList(activityTypes, "ActivityTypeID","Name"
,workFlowDetail.ActivityTypeID);
View :
#Html.DropDownListFor(model => model.ActivityTypeID,new SelectList(ViewBag.ActivityType,"Value","Text"), String.Empty)
#Html.ValidationMessageFor(model => model.ActivityTypeID)
Just use the following in your view:
#Html.DropDownList("ActivityTypeID", ViewBag.ActivityTypeID as SelectList)
#Html.ValidationMessageFor(model=>model.ActivityTypeID)

How to display values in a Kendo UI Grid custom popup template

I have a MVC View with a simple Kendo UI Grid:
#(Html.Kendo().Grid(Model.Positions)
.Name("Test")
.Columns(columns =>
{
columns.Bound(p => p.Name);
columns.Command(command => { command.Edit(); });
})
.Editable(ed=>ed.Mode(GridEditMode.PopUp).TemplateName("Position").Window(w => w.Width(600)).Window(w => w.Title("ByrÄ")))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model => model.Id(p => p.Id))
.Update(update => update.Action("Update", "Office"))
.Read(read => read.Action("Get", "Office")
)
)
)
Under Shared/EditorTemplate I have added Postion.cshtml under Shared/EditorTemplates. The edit open as it shoulds and everything is fine if I use for example:
#Html.TextBoxFor(model => model.Name)
However, I can't use LabelFor since that will display the name of the property and not the value. It also seems like the grid instantiate the popup together with the grid. The values in TextBoxFor is updated when I click on Edit, but if I use #Model.Name it does not. It will always be empty.
I also tried and hide some fields depending on the value of one of the fields, but since I can't use #Model it wont work.
Anyone know how to get around this?
One of Kendo's answers to me was something like this. I haven't got it to work in my case yet, but it might help you. If you came up with a different solution to this issue could you share it?
In you custom editor.
text/javascript
function sendName() {
var grid = $('.k-grid').data().kendoGrid;
var tr = grid.tbody.find('.k-grid-edit-row');
var model = grid.dataItem(tr);
var result = {
name: model.Name
};
return result;
}
They are inspecting the html and assigning first the grid, then the selected row of the grid then mapping the fields of the row to the columns of the Grid.

kendo mvc grid with different column settings

I have a kendo mvc grid which is basically like this:
#(Html.Kendo().Grid<baseballViewModel>()
.Name("baseball")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Index", "baseball"))
.ServerOperation(false)
)
.HtmlAttributes(new { style = "height:175px;" })
.Columns(col => {
col.Bound(player=> player.Date).Width(85);
col.Bound(player=> player.Year).Width(55);
col.Bound(player=> player.Name).Width(150);
col.Bound(player=> player.team).Width(120);
}).Sortable()
.Scrollable()
.Pageable()
)
Now, Im trying to insert a new column with button(on each row). Each button when clicked fires an event which passes player name to a controller. I have tried using col.Template() after the fourth column. But, no luck with that. Is there any way to do this?
I used this way to achieve this.
{
field: "Image", title: "#Application.Instance.Strings.Event_Grid_More", width: "60px", template: "<img src='/Content/Themes/Default/images/Door.png' onclick='showDetails()' id='door' width='20' height='20'/><div id='cardholderdetails' class='popup'></div>"
}
I am not using htmlhelpers though.
try to use custom command........
http://demos.kendoui.com/web/grid/custom-command.html