I've got a Kendo Scheduler and I want something simple: to select a day and to get that selection information.
Here's the Scheduler:
#(Html.Kendo().Scheduler<MyProj.Models.ScheduleInspectionModel>()
.Name("scheduler")
.Views(views =>
{
views.MonthView(mv => mv.Selected(true));
views.AgendaView();
})
.Events(e => e.Change("test")) <------------------------
.Timezone("Etc/UTC")
.Selectable(true)
.DataSource(d => d
.Read("GetScheduleInspections", "ControllerName")
)
)
the Javascript function that is fired when a day is selected:
function test(e) {
alert("hey");
}
The function is called and the alert is shown. I want to be able to do something like e.date to access the current date, for example. There is no intellisense and I can't find any API documentation to follow.
To get the date in change function of scheduler use :
var date = e.start;
Yes, you are correct that intellisense is not available for this. So use can use client side debugging(for example using developers tool) to get all the available data.
Related
I want to add a change event to all cells in a specified column using Kendo UI. Something like:
this.myGridVariable.table.on("change", "--InsertMyColumnNameHere--", (e) => { this.doStuff(e) });
I thought this worked:
this.myGridVariable.table.on("change", "[name=ColumnName]", (e) => { this.doStuff(e) });
but it doesn't, at least not with the latest update.
You need to specify what change event you mean:
The HTMLElement change event in JavaScript, which is fired for <input>, <select>, and <textarea>, but not a table cell, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
The Kendo Model or DataSource change event documented here: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/events/change
I believe you'll want the second one. You can't bind it to a single field, but it has e.field and you can execute code depending on its value.
add .Events(e => { e.Change("onEdit"); }) under .DataSource(dataSource => dataSource
onEdit is a javascript function. In this function add this code -->
function onEdit(e) { if (e.action == "itemchange") { doStuff } }
I have a project which uses Telerik Kendo.
In the Kendo Grid, we need to make the first row editable so the user can type inside it to use it to search the data. Actually, the Kendo grid provides this functionality when you click on the header of the of the grid, but my requirement is to provide this functionality.
I searched the web for hours, without reaching any Result.
I do not think I need to provide any code here, because I really do not know the way to go.
The project is ASP.NET MVC, and I am using Telerik MVC wrapper.
I used the row-filter feature which provided by Telerik, and it was good for me.
but I have small problem.
here it is what I used,
function templateMethod (args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
dataTextField: "color",
dataValueField: "color",
valuePrimitive: true
});
}
The previous example is from documentation of the Telerik from here
Keep in mind that the passed dataSource instance may still not be populated at the time the template function is called, if the Grid uses remote binding.
I am really using remote binding, and the data is NOT coming ,as the documentation state, the problem is that the documentation warned from this problem but it did not provide any solution for it.
How can I repupolate the kendoDropDownList again, after the data is coming from the remote server?
#(Html.Kendo().Grid<SomeClassName>()
.BTGrid(GridName)
.Resizable(e => e.Columns(true))
.Filterable(e => e.Mode(GridFilterMode.Row))
.Columns(columns =>
{
columns.Bound(x => x.VardiyaGrubu).Filterable(e => e.Cell(r => r.Template("templateMethod").ShowOperators(false).Operator("contains").SuggestionOperator(FilterType.Contains) ));
})
.Groupable(config => config.Enabled(true))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Model(x => x.Id(r => r.RefKey))
.Events(ev => ev.RequestEnd("onRequestEnd"))
.Read(read => read.Action("CevrimZamaniRaporu", "Raporlar").Data(GridName + "_LoadData"))))
I tried to set ServerOperation to true and false in both cases it does not change.
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
i have used kendo scheduler like this
#(Html.Kendo().Scheduler<myEntity>()
.Name("scheduler")
.Date(currentDateTime)
//.Events(e => { e.Error("error_handler"); })
);
now i want to retrieve the same instance and add another property to it say Events
as in
.Events(e => { e.Error("error_handler"); })
dynamically. how can i do this
You can do it in JavaScript (only):
var scheduler = $("#scheduler").data('kendoScheduler');
scheduler.bind("error", error_handler);
If you wanna set not event property you should find correct method to do it in kendo documentation and api reference
There is also .setOptons('name', value) method in most of kendo components but unfortunately it usually just change value of property and does not render comonent again with new options.
I am using Kendo UI autocomplete in my asp.net mvc application, Kendo autocomplete callbacks the server method on each key strock which over heads the server requests. Is there any way to manually callback the server using autocomplete to get the data source.
My code is as below
#(Html.Kendo().AutoComplete()
.Name("patientSearch")
.DataTextField("patientSearch")
.MinLength(2)
.Placeholder("Search by Lastname, Firstname or DOB")
.HtmlAttributes(new { id = "textPatientSearch" })
.Template("<B>${data.LastName}, ${data.FirstName} </B> - ${ kendo.toString(kendo.parseDate(data.DateOfBirth),'MM/dd/yyyy') } ")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetFilteredPatient", "Order").Data("onAdditionalData");
})
.ServerFiltering(true);
}))
I have found the jquery solution for check that user stops typing, the code is as below:
$(function(){
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in 3 ms
//on keyup, start the countdown
$('#textPatientSearch').keyup(function(e){
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
//on keydown, clear the countdown
$('#textPatientSearch').keydown(function(){
clearTimeout(typingTimer);
});
//user is "finished typing," do something
function doneTyping () {
**//WHAT TO DO HERE**
}
});
I don't know how to manually server filter the autocomplete on doneTyping function, Please help.
Finally, I have found the solution, The Kendo UI provides the Delay (default: 200) method which accepts the integral value in milliseconds, which waits for the next user strock from last keystrokes in specified milliseconds, if the user fails to send the keystroke in specified delay time, the kendo autocomplete fires the server filtering automatically.