I have a Kendo ComboBox in an EditorTemplate: it looks like this:
#(Html.Kendo().ComboBox()
.HtmlAttributes(new { style = "font-size:10px; background-color: #f4f4f4;" })
.Name("myBox" )
.Placeholder("Choose a value...")
.DataTextField("Name")
.DataValueField("Value")
.DataSource( source =>
{
source.Read( read => read.Action( "GetItems", "MyBoxController" ) )
.Events( e => e.Change( "ComboBoxChanged" ) );
} )
)
The ComboBoxChanged function couldn't be simpler:
function ComboBoxChanged(e) {
var value = this.value();
}
but, as the template comes up, it throws an error, "Object doesn't support property or method 'value'". [This indicates to me that, at least the data-binding is working, causing some item in the ComboBox to be selected.] What am I missing? This looks just like all the examples to me, except, as I said, I'm in an EditorTemplate, rather than a main View.
The ComboBoxChanged should be wired to the ComboBox Events, not the ComboBox DataSource Events.
Related
I have the following grid with a date picker:
#(Html.Kendo().Grid<ScheduleViewModel>()
.Name("ScheduleGrid")
.AutoBind(true)
-
)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Columns(columns =>
{
columns.Bound(s => s.Name).Title("Schedule").Filterable(true).Width(150).HtmlAttributes(new { style = "text-align: left" });
columns.Bound(s => s.StartTime).Width(100).Title("Start Time").ClientTemplate((
#Html.Kendo().DatePicker()
.Name("StartTimePicker")
.Value("#=StartTime#")
//.Format("{0:dd/MM/yyyy}")
.ToClientTemplate()).ToHtmlString());
columns.Bound(s => s.Enabled).Width(100).ClientTemplate("<input type='checkbox' #=Enabled ? checked='checked' : '' # class='sda-checkbox' />").HtmlAttributes(new { #class = "text-center" });
columns.Command(command => command.Custom("Save").Click("saveSchedules")).Width(80).HtmlAttributes(new { #class = "text-center" });
})
However, the date picker doesn't display correctly. Instead it is just a text box. What am I doing wrong?
EDIT (and I also switched to use a Time Picker instead of a Date Picker):
I did as #FrozenButcher suggested, but this still doesn't work. This is what happens now:
Bring up page and you get this, which does not LOOK like a Time Picker, but is. No clock icon, and you can't see the value:
Click in the box and you get this:
Obviously you can now see the time, but no clock icon.
Finally, click in the Time Picker on the second line and you get this:
Any help in resolving this is greatly appreciated.
You have to ensure unique ids for your inputs, wrapper for datepicker is defined through the name property.
change it to a dynamic name .Name("StartTimePicker"+ lineNumber)
I have a Kendo MVC hierarchy grid. My example is simplified for readability.
#(Html.Kendo().Grid<LeagueViewModel>(Model.Leagues)
.Name("grid_#=LeagueTypeId#")
.Columns(columns => { })
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add New League(Window)");
})
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("LeagueEdit")
.Window(w =>
{
w.Position(p => p.Top(200)); // position not working, need to center more vertically
w.Width(800);
}
)
)
.Events(e => e.Edit("leagueEdit"))
.DataSource(dataSource => dataSource
.Server()
.Model(model =>
{
model.Id(p => p.LeagueID);
model.Field(l => l.strSportId).DefaultValue("#=SportId#"); // set default value with parent grid data
model.Field(l => l.strLeagueTypeId).DefaultValue("#=LeagueTypeId#"); // set default value with parent grid data
}
)
.Read(read => read.Action("Bound_League_Read", "Configuration", new { _leagueTypeId = "#=LeagueTypeId#" }))
.Create(create => create.Action("League_Create", "Configuration"))
)
)
Here is my javascript event handler. When observing the e.model object from the handler after the create button is clicked i have the default values i set earlier with in the grid with DefaultValue("#=ParentProperty#").
function leagueEdit(e) {
// setting these with default value on model,
// had to have string variants to pass over because template expression syntax
e.model.SportId = parseInt(e.model.strSportId);
e.model.LeagueTypeId = parseInt(e.model.strLeagueTypeId);
}
LeagueEdit.cshtml
When my popup template opens, the model has no data. How do i get data into the model? I have elements in the popup editor that need the values from the parent grids.
<p>sport: #Model.SportId</p> <!-- value does not carry over -->
<p>leaguetype: #Model.LeagueTypeId</p> <!-- value does not carry over -->
In your Edit event try to find the control in popup using its Id and set the value. For example in the below code am finding a datepicker inside my popup and setting its value to the model property.
function LeagueEditEdit(e) {
var val1 = e.container.find("input[name=CallDate]").data("kendoDatePicker");
val1.value($('#CallDate').attr('value'));
e.model.CallDate = val1._value;
}
i found a couple examples on how to do this, and none of them are working for me.
Here is my Telerik MVC grid:
#(Html.Kendo().Grid<PlayerStatsViewModel>()
.Name("PlayerStats")
.Columns(columns =>
{
columns.Bound(o => o.PlayerId);
columns.Bound(o => o.FirstName);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.PlayerId))
.Read(read => read.Action("PlayerStats_Read_Bound", "Contest").Data("getPlayerId"))
).AutoBind(false)
)
Open modal with my grid
I set autobind(false) which prevents page load. After a user clicks a link i open a modal with my grid, and need to pass in a parameter.
// open modal
$(document).on("click", "#openStatsModal", function () {
playerId = $(this).data('id'); // get parameter from click
loadPlayerStats();
});
function getPlayerId() {
return {
playerId: playerId
}
}
Make ajax call?
My click method works and i get my player id. Then i try and make my grid call.
function loadPlayerStats() {
var grid = $("#PlayerStats").data("playerStats");
alert(grid); // returns undefined
//grid.ajaxRequest(); this didnt work either
grid.dataSource.read(); // Cannot read property 'dataSource' of undefined
}
Action method
Never gets called unless i turn off autobind
public ActionResult PlayerStats_Read_Bound([DataSourceRequest]DataSourceRequest request, int playerId)
{
// some code
return Json(result)
}
Just try:
var grid = $("#PlayerStats").data("kendoGrid");
and then:
grid.dataSource.read();
I have a kendo dropdownlist and want to add a property to it but only if some condition is met. It that possible and, if so, what is the syntax? Below is the concept that I have in mind.
#(Html.Kendo().DropDownList()
.Name("My Dropdown List")
.Value(Model.xxx)
If (some condition){
.Height(1000)
}
.DataTextField("MYDESCRIPTIEN")
.DataValueField("MYFIELD")
.HtmlAttributes(new { style = "width:300px" })
)
Update: With regard to the Height, I am afraid you are out of luck, as the Height() method expects a non-null integer value that will be always serialized to the client. The only option is to use two different widget declarations inside an external conditional statement.
===
Each fluent method expects a value of a certain type, or an expression that returns a value of this type. In addition, each configuration setting has a default value.
So you have a couple of options:
use a ternary operator that returns different values, depending on the condition. In one case it may return the property's default value
use an auxiliary variable, that is assigned the appropriate value in advance
Fluent methods that expect an action can be managed differently and you can use standard conditional statements, instead of ternaries.
Here is an example for all above scenarios:
#{
bool myCondition = false;
}
#(Html.Kendo().DropDownList()
.HtmlAttributes(myCondition ? new { style = "width: 100%" } : new object { /* empty object */ } )
.Events(e => {
if (myCondition)
{
// nothing here this time
}
else
{
e.DataBound("onDataBound");
}
})
)
<script>
function onDataBound(e) {
console.log("dataBound");
}
</script>
Hi there you should be able to add Events like so:
#(Html.Kendo().DropDownList()
.Name("My Dropdown List")
.Value(Model.xxx)
.DataTextField("MYDESCRIPTIEN")
.DataValueField("MYFIELD")
.HtmlAttributes(new { style = "width:300px" })
.Events(e => e.Change("OnDropDownChanged"));
)
JAVASCRIPT
function OnDropDownChanged(e)
{
//Do stuff to meet condition
}
I don't really know how to achieve my requirement which is:
Allowing users to user sorting/filtering on complete dataset
Server Side intially default filter
So basically I want to set the client filter control to a server side defined value. After page load the user could overwrite this setting and retrieve a list of the complete data set.
I am using following Grid:
#(Html.Kendo().Grid<SubscriptionViewModel>()
.DataSource(dataSource => dataSource
...
.ServerOperation(true)
)
.Name("subscriptionsGrid")
.Columns(columns =>
{
...
columns.Bound(p => p.SubscriptionValidStatus).Filterable(filterable=>filterable.UI("subscriptionStatusFilter")).HeaderHtmlAttributes(new { style = "white-space: normal; vertical-align: top" });
....
})
.Scrollable(a => a.Height("700px"))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
)
...
.Sortable()
.Filterable(filterable => filterable
.Extra(false)
)
)
thx for your possible solution Dinglemeyer
I just figured out how to do it server side; by adding:
.Filter(factory => factory.Add(model=> model.SubscriptionValidStatus).IsEqualTo("Aktiv"))
to datasource!
Rather than a server side default filtering, you could have a client side event add the filter on page load... The practical effect will be your filter in place, at which point a user could select the filter widget in the column header to remove it, or they could add more filters to other columns. I've taken some of my code that I use to do this and renamed it for your grid's name.
Try this out!
In your grid definition, add a events like the following:
.Events(events => events.DataBound("dataBoundSetFilter"))
Then have a javascript function to set the filter of a column with your preferred filtering:
<script type="text/javascript">
// hasBound variable set on page load to false, will be set true after Grid databound event
var hasBound = false;
function dataBoundSetFilter(e) {
// If the grid has not yet been data-bound, apply this here filter
if (hasBound === false) {
//alert("Start");
// Get a reference to the grid
var grid = $("#subscriptionsGrid").data("kendoGrid");
// Apply a filter to the grid's datasource
grid.dataSource.filter({ field: "SubscriptionValidStatus", operator: "eq", value: true });
// Set hasBound = true so this won't be triggered again...
hasBound = true;
}
}
</script>
I was looking for row filter, and add multiple filters in it. I found the following article very helpful. It is using [Kendo.Mvc.CompositeFilterDescriptor] to filter
https://www.telerik.com/forums/how-do-i-use-compositefilterdescriptor-to-set-the-initial-datasource