Installer and VS Extensions for ASP.NET Core

Visual Studio Integration Overview
A new article on how to enhance your experience in developing web applications with ASP.NET Core.

Downloading New Versions
A new article on how to keep your projects updated when using Telerik UI for ASP.NET Core.

Creating Projects
A new article on how to create a new Telerik UI for ASP.NET Core application.

Telerik Team,

We are working on the ASP.NET Core web application development and planning to use Kendo UI ASP.NET Core Components. Currently I am evaluating the ASP.NET Core Components for usage in our application. While going thru the demos, I have observed that the ASP.NET Core Components comes in two versions: ASP.NET MVC and HTML/JavaScript. After looking at the demos, I understand that the HTML/JavaScript version involves writing lot of HTML/JavaScript code, where was the ASP.NET MVC version code is compact. I would like to know what are the pros and cons of one over the other. Please provide any document or URL which gives the differences between these two versions and which one will be the better option to use in ASP.NET Core web application. Thanks in advance.

Regards,

Naga

I am trying to implement a grid with a foreign key Column.

I am using your example

http://demos.telerik.com/aspnet-core/grid/foreignkeycolumn

I am trying to understand the right way to implement the editor template, unfortunately you didn't provide a full working example.

this is the error:

An unhandled exception occurred while processing the request.
ArgumentNullException: Value cannot be null.
Parameter name: items
.ctor

And this is the view

@(Html.Kendo().Grid<TraderMade.Models.Market>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name).Width(200);
            columns.ForeignKey(p => p.CountryId, (System.Collections.IEnumerable)ViewData["countries"], "Id", "Name")
          .Title("Nazione").Width(150);
            columns.Bound(c => c.City).Title("Città").Width(150);
            columns.Bound(c => c.MIC).Title("Codice").Width(80);
            columns.Bound(c => c.WebSiteUrl).Title("Web site").Width(250);
            columns.Command(command => command.Destroy()).Width(110);
        })
        .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
        .HtmlAttributes(new { style = "height: 380px;" })
        .ToolBar(toolbar =>
        {


            toolbar.Create();
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Scrollable()
        .Groupable()
        .Sortable()


        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.Id))
        .Create("Countries_Create", "Home")
        .Read("Countries_Read", "Home")
        .Update("Countries_Update", "Home")
        .Destroy("Countries_Delete", "Home")
        ).Deferred()
)

this is the relevant part of the controller

 private void PopulateCountries()
        {
            var countries = _context.Countries.ToList();
            ViewData["countries"] = countries;
            ViewData["defaultCountry"] = countries.First();
        }


        public IActionResult Index()
        {
            PopulateCountries();
            return View();
        }

 public ActionResult Countries_Read([DataSourceRequest] DataSourceRequest request)
        {
            var markets = _context.Markets;
            DataSourceResult result = markets.ToDataSourceResult(request);


            return Json(result);



        }

I have read somewhere that I need to create a folder in views\shared\EditorTemplates, in this folder I have created

GridForeignKey.cshtml

@model object

@(
 Html.Kendo().DropDownListFor(m => m)
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
        .ValuePrimitive(true)
)

here the model:

  public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }

        public string CodeAlpha2 { get; set; }

        public string CodeAlpha3 { get; set; }
        public int CodeNumeric { get; set; }


        public ICollection<Market> Markets { get; set; }
    }

 public class Market
    {
        public int Id { get; set; }
        public string MIC { get; set; }
        public string Code { get; set; }
        public string Name { get; set; }
        public string City { get; set; }
        public string WebSiteUrl { get; set; }
        public string Notes { get; set; }
        public bool IsEnabled { get; set; }
        public int CountryId { get; set; }
        [ForeignKey("CountryId")]
        public Country Country { get; set; }


    }

I have tried to use ViewModel instead of model, but no matter what i write in  columns.ForeignKey  I have always the same error.

thank you for the support

Telerik Team,

I am evaluating the ASP.NET Core Components for usage in our project development. I do not find the (generic) TextBox control in your widgets list. Could you please let me know if the TextBox control is available. If not, please let me know any alternative control to be used.

Thanks,

Naga

I am an intern programmer working on an already existing and expansive model. This is my first experience with Kendo UI. What I can say is that, the current model (coded by a previous programmer), seems to be in working order (and has been long before my arrival). I have been assigned to try to correct one minor aesthetic flaw...

Here is the scenario - When the grid appears, there is a ddl, date field, edit btn, and delete btn. The grid is editable "inline". The grid is rendering as it should (i.e. all selections and fields have specified data). Also, comms on the back end are working properly.

Here is the issue - However, when I click the edit btn, the value displayed within the ddl temporarily disappears. The value then reappears when the "update" or "cancel" btns are clicked.

My question - Is this temporary disappearance a bug in the code, or (more specifically) is the kendo grid designed to clear the ddl display when the edit btn is clicked?

Thank you in advance!

 How to change "No data found." in column filter popup?

when using .Filterable(ftb => ftb.Mode(GridFilterMode.Row))

When I use national symbols text in editor template I got Invalid template due to # in template

mean

@Html.Kendo().TextBoxFor(m => m.Number)

in editor template transformed to

<input class="k-textbox" data-val="true" data-val-required="&#x423;&#x43A;&#x430;&#x436;&#x438;&#x442;&#x435; &#x43D;&#x43E;&#x43C;&#x435;&#x440; &#x43A;&#x432;&#x430;&#x440;&#x442;&#x438;&#x440;&#x44B;" id="Number" name="Number" value="" />' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<input class="k-textbox" data-val="true" data-val-required="&';x423;&;$kendoOutput+='x43A;&';x430;&;$kendoOutput+='x436;&';x438;&;$kendoOutput+='x442;&';x435; &;$kendoOutput+='x43D;&';x43E;&;$kendoOutput+='x43C;&';x435;&;$kendoOutput+='x440; &';x43A;&;$kendoOutput+='x432;&';x430;&;$kendoOutput+='x440;&';x442;&;$kendoOutput+='x438;&';x440;&;$kendoOutput+='x44B;" id="Number" name="Number" value="" />';}return $kendoOutput;

and generate template error due to #

For some reason I can use TextBoxFor in client template but cannot NumericTextBox

For ex. I have EditorTemplate

@Html.Kendo().TextBoxFor(m => m.Floor).HtmlAttributes(new { style = "width:100%;" }).ToClientTemplate()

Is absolutely fine

But

@Html.Kendo().NumericTextBoxFor(m => m.Sqm).HtmlAttributes(new { style = "width:100%;" }).ToClientTemplate()

generate "invalid template"

Here is what I extracted from error

<input data-val="true" data-val-number="The field Площадь must be a number." data-val-required="The Площадь field is required." id="Sqm" name="Sqm" style="width:100%;" type="number" value="" /><script>jQuery(function(){jQuery("#Sqm").kendoNumericTextBox({});});</script>    </p>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<input data-val="true" data-val-required="The ApartmentId field is required." id="ApartmentId" name="ApartmentId" type="hidden" value="" /><div class="k-edit-label">    <label for="Number">Номер</label></div><div class="editor-field">    <input class="k-textbox" data-val="true" data-val-required="Укажите номер квартиры" id="Number" name="Number" style="width:100%;" value="" /></div><div class="k-edit-label">    <label for="Number">Подъезд</label></div><div class="editor-field">    <input class="k-textbox" id="Entrance" name="Entrance" style="width:100%;" value="" /></div><div class="k-edit-label">    <label for="Number">Этаж</label></div><div class="editor-field">    <input class="k-textbox" id="Floor" name="Floor" style="width:100%;" value="" /></div><div class="k-edit-label">    <label for="Number">Площадь</label></div><div class="editor-field">    <input class=\'numeric\' value=\'#=Sqm#\' name=\'Sqm\' /></div><p>    <input data-val="true" data-val-number="The field Площадь must be a number." data-val-required="The Площадь field is required." id="Sqm" name="Sqm" style="width:100%;" type="number" value="" /><script>jQuery(function(){jQuery("';Sqm").kendoNumericTextBox({});});</script>    </p>;$kendoOutput+=;}return $kendoOutput;

My property is of type double

now I had to workaround this by using input in clietntemplate

<input data-val="true" data-val-number="The field Площадь must be a number." data-val-required="The Площадь field is required." id="Sqm" name="Sqm" style="width:100%;" type="number" value="" />

and catch OnEdit event of Grid where I can enhance input like

jQuery(function(){jQuery("#Sqm").kendoNumericTextBox({});});

But I rather user @Html.Kendo().NumericTextBoxFor for my convinience

I gave grid with .Filterable(ftb => ftb.Mode(GridFilterMode.Menu | GridFilterMode.Row))

so I have columns like

.Filterable(ftb => ftb.Multi(true).Search(true).Cell(cell => cell.Operator("contains").ShowOperators(false)));

all good

Now I do not need filter  on some column so I hide them like .Filterable(ftb => ftb.Enabled(false));

Now I need to leave only row and hide column menu filter (dropdown with filter options)

Cannot figure out how to leave only row filter