I have a WebAPI method that is returning a List<User>. This WebApi is used be several different applications and APIs, but we're attempting our first MVC app against it. I cannot get the grid to populate unless I add a ModelBinder to the WebAPI to return a DataSourceRequest. This seems rather counter-intuitive. It seems the best part of WebAPI is to accept & return generic JSON that anyone can then consume and use. But by adding the need for the DataSourceRequest, it's no longer a generic API, and will only work with Telerik. (a stretch since the result is just a JSON object with a Data[] holding the actual collection, but either way I just want to use regular ole JSON but still use the Telerik controls. What if I connect to someone elses API that just returns flat generic JSON?
So what can I do to keep my WebAPI generic, continue using JSON, and yet still have the MVC use the data in it's grid?
Here is the only way I was able to get it to work.
WebAPI Controller:
[HttpGet]
[ActionName(
"GetAllActiveUsers"
)]
[EnableCors(
"*"
,
"*"
,
"GET,POST,PUT,DELETE,OPTIONS"
)]
public
DataSourceResult GetAllActiveUsers([ModelBinder(
typeof
(DataSourceRequestModelBinder))] DataSourceRequest request)
{
List<User> allUsers = _manager.GetAllActiveUsers();
return
allUsers.ToDataSourceResult(request);
}
And here is the Grid/CSHTML Code:
@
using
Vensure.Dashboard.Data.DatabaseModels
@{
ViewBag.Title =
"Index"
;
}
@(Html.Kendo().Grid<User>()
.Name(
"ajaxGrid"
)
.Columns(cols =>
{
cols.Bound(c => c.UserId);
cols.Bound(c => c.FirstName);
cols.Bound(c => c.LastName);
cols.Bound(c => c.UserName);
cols.Bound(c => c.Email);
})
.Scrollable(s => s.Height(
"auto"
))
.Sortable()
.Pageable(pageable => pageable
.Refresh(
true
)
.PageSizes(
true
)
.ButtonCount(5))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.AutoBind(
false
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(r => r
.Type(HttpVerbs.Get)
)
.PageSize(20)
.ServerOperation(
false
))
)
<script>
$(function () {
var grid = $(
"#ajaxGrid"
).data(
"kendoGrid"
);
grid.dataSource.transport.options.read.beforeSend = function (xhr) {
xhr.setRequestHeader(
'X-Access-Token'
, getCookie(
'VensureToken'
));
};
grid.dataSource.read();
});
function getCookie(name) {
var value =
"; "
+ document.cookie;
var parts = value.split(
"; "
+ name +
"="
);
if
(parts.length == 2)
return
parts.pop().split(
";"
).shift();
}
</script>
I tried different things, such s ServerOperation both true and false, etc...
Hello,
I'm using Kendo UI MVC to generate a dynamic form.
User fill the form with Name and Las name. And I have a button that adds a template with two DropDownList with cascading behavior.
Each time user clicks on the add button, a couple of DropDownLists is added using template. Everything works fine.
The name and id of those ddl is Articles[0].Name and Articles[0].Quantity each time I add I increment the number between bracket.
The problem is when the user wants to delete one couple of ddl, I find my self with not continuous ids :
Initial :
Articles[0].Name, Articles[0].Quantity
Articles[1].Name, Articles[1].Quantity
Articles[2].Name, Articles[2].Quantity
When user deletes the second one I have :
Articles[0].Name, Articles[0].Quantity
Articles[2].Name, Articles[2].Quantity
This don't work because the mode binder in my action controller will stop at 0 if he doesn't find the index 1.
I tried updating the inputs with jquery, but this breaks the cascading behavior of the kendo DDL.
So is there a way to update the ID and name of a kendo DDL without breaking the cascading behavior ?
Thank you.
Hello,
In the samples I see a lot of static GeoJSON being used to provide shape layer data but none where the layer data is fetched from a service which could query a source and return only the GeoJSON for the current map bounds, perhaps also dependent on the zoom.
My challenge is to integrate a database with plenty of shapes (polygons) in it so querying the database is the only realistic option we have. In the end, new shapes would also be created through the map and saved to the database but for this questions purpose I am only interested in querying and returning the correctly formatted GeoJSON based on the current bounds and zoom.
Does the map control support passing the bound and zoom parameters to the service behind a GeoJSON URL? If so, what are these parameters and would you be able to point me to the related documentation or create a new entry explaining and demonstrating this feature.
Regards,
Aaron
I've got a situation where I want to return data from the controller if there are errors on the file i'm uploading.
For simple messages, i can just do [return Content("error")] which will cause the uploader to show an error message (with relevant error items - red colour, X icon etc).
However, i have a case where i am returning a JSON object with details of all the issues with the uploaded file like so [return Json(returnItem)].
I would expect the upload control to fail (as the documentation states it only accepts an empty string to be the success case) but i am getting the success behaviour from the upload control (green text).
How can i make it so it shows the error state when i am returning a JSON object?
Thanks
Hello,
Is it possible to dynamically toggle the enabled status of multiple ComboBox widgets at once using a Jquery class selector and iterating the results? If this is possible, what is the proper way to accomplish this behavior? My form has multiple ComboBoxes which need to by dynamically enabled or disabled based on user selections.
Using UI for MVC (Q3 2016)
My current attempt at this behavior is as follows:
@(Html.Kendo().ComboBoxFor(Model => Model.InsertStockWeightOption)
.Placeholder("Select Weight Or Specify")
.HtmlAttributes(new { style = "width:100%;", @class = "ComboBoxDisableOnStartup", id="TestCombo" })
.DataSource(source => source.Read("GetStockWeightsForType", "ProjectQuote", new { Type = "Insert" })))
JS Code to disable on document creation:
$(document).ready(function () {
$(".ComboBoxDisableOnStartup").each(function (i, box) { //This code does not function clearly, this is only to convey the attempt to toggle using classes
var obj = box.data("kendoComboBox");
obj.enable(false);
});
var combobox = $("#TestCombo").data("kendoComboBox"); //This code is from the documentation and works for a single ComboBox with an ID
combobox.enable(false);
});
function
resetDateTimePickersToDefaultDateTimeRange() {
var
currentDate =
new
Date(),
yesterdayDate =
new
Date(),
dateTimeFormat =
'MM/dd/yyyy hh:mm tt'
;
yesterdayDate.setDate(yesterdayDate.getDate() - 1);
var
$startDateTimePicker = $(
'#StartDateTimePicker'
).data(
'kendoDateTimePicker'
);
var
$endDateTimePicker = $(
'#EndDateTimePicker'
).data(
'kendoDateTimePicker'
);
$endDateTimePicker.value(kendo.toString(currentDate, dateTimeFormat));
$endDateTimePicker.trigger(
'change'
);
$startDateTimePicker.value(kendo.toString(yesterdayDate, dateTimeFormat));
$startDateTimePicker.trigger(
'change'
);
}
And just for completeness, here are the change events I have wired up for each of the DateTimePicker's:
function
kendoStartDateTimePickerChange() {
var
endPicker = $(
'#EndDateTimePicker'
).data(
'kendoDateTimePicker'
),
startDate = $(
'#StartDateTimePicker'
).data(
'kendoDateTimePicker'
).value();
if
(startDate) {
startDate =
new
Date(startDate);
startDate.setDate(startDate.getDate() + 1);
endPicker.min(startDate);
}
}
function
kendoEndDateTimePickerChange() {
var
startPicker = $(
'#StartDateTimePicker'
).data(
'kendoDateTimePicker'
),
endDate = $(
'#EndDateTimePicker'
).data(
'kendoDateTimePicker'
).value();
if
(endDate) {
endDate =
new
Date(endDate);
endDate.setDate(endDate.getDate() - 1);
startPicker.max(endDate);
if
(endDate < startPicker.value()) {
startPicker.value(endDate);
}
}
}
And here is where I am calling the reset() function:
$(
'#ResetFilterButton'
).click(
function
() {
$(
'#FilterByInput'
).val(
''
);
resetDateTimePickersToDefaultDateTimeRange();
populateGrid($(
'#StartDateTimePicker'
).val(), $(
'#EndDateTimePicker'
).val(), $(
'#FilterByInput'
).val());
});
Hi, I have seen that you have a "theme builder" tool.
It allows customize an existing theme and download it.
I already have customized and downloaded a thema but now I want to make a small modification.
¿I can import / upload my theme to the "theme builder" tool and make a modification?
or
¿I have to re-use an original thema and redo all changes over the original theme?
Hello,
I load the following via ajax and the shown javascript Alert fires proving jquery and javascript are working. Editor Events work but I need to clear the editor contents programmatically. At the console, well after all loaded and completed, $("#editor") is undefined. I am looking at this documentation. http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/editor/overview#existing-instances
<div id="editorWrapper">
@(Html.Kendo().Editor()
.Name("editor")
.HtmlAttributes(new { @class = "desc-editor", name = "Description", id = "Description" })
.Resizable(resizable => resizable.Content(true).Toolbar(true))
.StyleSheets(css => css
.Add(Url.Content("~/Content/editorStyles.css"))
)
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
).Events(events => events
.Change("change")
.Execute("execute")
.Select("select")
.Paste("paste")
).Value(@<text> </text>)
)
<script>
$(function () {
alert($(".input-field").length);
//Notice that the Name() of the Editor is used to get its client-side instance.
var editor = $("#editor").data("kendoEditor");
});
</script>
</div>
I was working on the grid persistence with getOptions and setOptions. I believe I was able to get it to work successfully, but I noticed something on one of filters.
My grid has a dropdown selection, like in the 'Grid / Filter menu customization' demo. After the setOptions is called, the filter dropdown is blank.
We use the asp.net mvc version, but I was able to reproduce this error in the browser using the javascript console on both the asp.net mvc and the kendo ui versions of the 'Grid / Filter menu customization' demo (which has a filter dropdown on the City column).
In my above test of the 'Grid / Filter menu customization' demo, I saw the City filter dropdown go blank after setOptions is called. You are no longer able to select from a dropdown of cities.
Any input would be appreciated!
.Pageable(pager => pager.Enabled(true).PreviousNext(true).PageSizes(new Int32[] {10, 20, 50, 100}))
I just downloaded the latest version of the js files and the Kendo.Mvc.dll
If I remove PageSizes I don't get an error. Any clues?
==========================================================================================
Also, when I add .DataSource binding paging stops working entirely@(Html.Kendo().Grid(Model.AppointmentList).Name("FailedAppointments") .Columns(columns => { columns.Bound(o => o.MemberFirstName).Title("Member First").Width(70); columns.Bound(o => o.MemberLastName).Title("Member Last").Width(80); columns.Bound(o => o.ClientMemberID).Title("Client ID").Width(60); columns.Bound(o => o.ProviderID).Title("Provider ID").Width(60); columns.Bound(o => o.ProviderFirstName).Title("Provider First").Width(70); columns.Bound(o => o.ProviderLastName).Title("Provider Last").Width(100); columns.Bound(o => o.AppointmentDate).Title("Appointment Date").Width(200); columns.Bound(o => o.IHAAppointmentID).Hidden(true); }) .Pageable(page => page.Enabled(true)) .DataSource(source => source.Ajax().Read(read => read.Action("BindFailedAppointments", "AppointmentScheduling")))This is the result:
If I remove the DataSource binding, paging shows but does nothing. What is going on?