This is a migrated thread and some comments may be shown as answers.

Custom Transport - hide Api Url

4 Answers 76 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ruben
Top achievements
Rank 1
Ruben asked on 16 Oct 2017, 04:42 PM

Hi all,

I have a grid with custom transport in an ASP.NET MVC application that calls a Web API by URL. I would like to hide the URL when a user views the page source. Does anyone know of any methods to do this?

 

Best,

Ruben

4 Answers, 1 is accepted

Sort by
0
Ruben
Top achievements
Rank 1
answered on 17 Oct 2017, 12:21 PM
Is it possible to use the WebApi() setting for a kendo grid data source located inside of an MVC application?
0
Alex Hajigeorgieva
Telerik team
answered on 18 Oct 2017, 01:30 PM
Hi, Ruben,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ruben
Top achievements
Rank 1
answered on 18 Oct 2017, 01:59 PM

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!

0
Alex Hajigeorgieva
Telerik team
answered on 20 Oct 2017, 10:52 AM
Hi, Ruben,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Ruben
Top achievements
Rank 1
Answers by
Ruben
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or