Custom Transport - hide Api Url

5 posts, 0 answers
  1. Ruben
    Ruben avatar
    22 posts
    Member since:
    Sep 2017

    Posted 16 Oct 2017 Link to this post

    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

  2. Ruben
    Ruben avatar
    22 posts
    Member since:
    Sep 2017

    Posted 17 Oct 2017 Link to this post

    Is it possible to use the WebApi() setting for a kendo grid data source located inside of an MVC application?
  3. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1016 posts

    Posted 18 Oct 2017 Link to this post

    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.
  4. Ruben
    Ruben avatar
    22 posts
    Member since:
    Sep 2017

    Posted 18 Oct 2017 Link to this post

    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!

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1016 posts

    Posted 20 Oct 2017 Link to this post

    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.
Back to Top