4 Answers, 1 is accepted

It is possible to use a WebApi() data source configuration for a Kendo UI Grid data source which is set in an MVC application.
I suppose that you would like to have the data source issue requests as expected by the Web API configuration cross-origin. If this is correct, then the Web API service should be configured to accept these types of requests.
Here is more information regarding binding to WebAPI:
https://docs.telerik.com/aspnet-mvc/helpers/grid/editing/webapi-editing
Here is a demo which shows the "webapi" data source type:
http://demos.telerik.com/aspnet-mvc/grid/webapi
As far as hiding the URLs, you may check tinyurl.com or similar services.
Let me know if you encounter any difficulties and provide a more detailed explanation on the structure of the Kendo UI Grid and data source so I can advise as soon as possible. Relevant code snippets or an isolated runnable project can be really helpful
Regards,
Alex Hajigeorgieva
Progress Telerik

Hi Alex ,
Thank you for your time. So, maybe I should provide a couple examples to make my question a little more clear. So, I have an MVC application which has a controller such as this:
MVC Controller:
public class AgeGroupController : Controller
{
public ActionResult Index()
{
return View("~/Views/DataManagement/AgeGroup/Index.cshtml");
}
}
The MVC Controller returns a view where my grid is defined.
MVC grid:
@(Html.Kendo().Grid<
ERMgtProgram.Models.DataManagementModels.ProductViewModels.AgeGroupViewModel
>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.AgeGroup1).Width(140);
columns.Bound(c => c.Active).Visible(ViewBag.IsAdmin).Width(46);
columns.Command(command => { command.Edit(); command.Destroy(); }).Hidden(ViewBag.ReadOnly).Width(180);
})
.Editable(editable =>
{
if (!ViewBag.ReadOnly)
{
editable.Mode(GridEditMode.PopUp);
}
})
.ToolBar(toolbar =>
{
if(!ViewBag.ReadOnly)
{
toolbar.Create().Text("Add new age group");
}
})
.HtmlAttributes(new { style = "height: 700px;" })
.Scrollable(s => s.Height(700))
.Groupable()
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn);
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new int[] { 10, 20, 50, 100, 250, 1000 })
.ButtonCount(5))
.Navigatable()
.Filterable()
.Events(e => e.Edit("hideActiveField"))
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Multiple);
selectable.Type(GridSelectionType.Row);
})
.Filterable()
.Scrollable()
.DataSource(dataSource => dataSource
.Custom()
.Batch(true)
.PageSize(250)
.Events(events => events.Error("errorHandler").RequestEnd("onRequestEnd"))
.Schema(schema =>
{
schema.Model(m =>
{
m.Id(p => p.AgeID);
m.Field(p => p.Active).DefaultValue(true);
});
})
.Transport(transport =>
{
if (ViewBag.IsAdmin)
{
transport.Read(read =>
read.Url("http://localhost/DataMgtWebApi/AgeGroup/all")
.DataType("json")
.Type(HttpVerbs.Get)
);
}
else
{
transport.Read(read =>
read.Url("http://localhost/DataMgtWebApi/AgeGroup")
.DataType("json")
.Type(HttpVerbs.Get)
);
}
if (!ViewBag.ReadOnly)
{
transport.Create(create =>
create.Url("http://localhost/DataMgtWebApi/AgeGroup/create")
.DataType("json")
.Type(HttpVerbs.Post)
.ContentType("application/json; charset=utf-8")
);
transport.Update(update =>
update.Url("")
.DataType("json")
.Type(HttpVerbs.Put)
.ContentType("application/json; charset=utf-8")
);
transport.Destroy(destroy =>
destroy.Url("")
.DataType("json")
.Type(HttpVerbs.Put)
.ContentType("application/json; charset=utf-8")
);
transport.ParameterMap("parameterMap");
}
})
)
)
So, my grid has a custom transport that calls a WebApi by URL. The WebApi controller has action methods that look like this:
WebApi Controller action:
// GET agegroup/all
[HttpGet]
[Route("all")]
public IQueryable<
AgeGroup
> GetAll()
{
return db.AgeGroups;
}
So, my MVC application and Web API are not cross-origin. I suppose my more specified question is: Can I use the Web API data source configuration to hook up to my Web API (e.g. using controller and action namse versus url). If the answer is yes, would I be able to keep my Web API the same, or would I need to include Kendo configuration on the Web API side as well. (e.g. would my Web Api need to look like th Web Api in the demos)
Demo Web API example:
// GET api/product
public DataSourceResult Get([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
{
return service.Read().ToDataSourceResult(request);
}
Thanks for all the help!
Thank you for clarifying the scenario.
It is possible to keep the Web API as it is if you do not wish to use the .ToDataSourceResult() method. The reason the model binder is needed is that most of our clients prefer to use the ToDataSourceResult() method because it creates and executes the query and returns the data which is requested out of the box.
The ToDataSourceResult() method will page, sort, filter, and group the collection that is passed to it. If this collection is already paged, the method returns
As of the Kendo UI R1 2017 SP1 release, you can use the ToDataSourceResultAsync extension method to provide the asynchronous functionality of ToDataSourceResult by leveraging the async and await features of the .NET Framework.
If you prefer to perform your own queries, then you can use the ActionName, ContrllerName, object route values syntax of the CustomDataSourceBuilder, for example:
.DataSource(dataSource => dataSource
.Custom()
.Transport(t=>t.Read(r=>r.Action(
"Index"
,
"AgeGroup"
)))
)
For more information, you can check the documentation article at:
https://docs.telerik.com/aspnet-mvc/getting-started/custom-datasource#custom-datasource
Let me know how you get on and if you have any issues with the implementation or if you need further help.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik