Telerik Forums
UI for ASP.NET Core Forum
1 answer
288 views

Hi All,

How do we show mask for phone number in editable grid? below is the my editable grid and i want show the mask for the phone column.

Thanks!

 

 

 

Aleksandar
Telerik team
 answered on 28 Sep 2022
1 answer
103 views

How do I change this numeric filter label to "Min:" and "Max:" ?   Instead of From and To.

 

 

 

I tried this but it does not do anything:

 columns
                    .Bound(p => p.Total)
                    .Title("Total")
                    .Format("{0:C}")
                    .Filterable(ftb => ftb.Extra(true)
                    //.UI("currencyFilter")
                     .Operators(o => o.
                        ForNumber(n => n
                            .IsLessThanOrEqualTo("Min")
                            .IsGreaterThanOrEqualTo("Max")
                            )
                     ))
                    .Width(130);

Alexander
Telerik team
 answered on 27 Sep 2022
1 answer
106 views

Hello,

what is the best TemplateString and ValueTemplateString for the dropdownlist that I have two columns where one is right aligned (see picture)

regards robert

Alexander
Telerik team
 answered on 27 Sep 2022
2 answers
317 views

I'm having trouble getting a custom popup editor bound to a model using tag helpers, razor pages, and entity framework.

Index.cshtml.cs

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using MyApp.Data.Models;
using MyApp.Interfaces;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyApp.Pages
{
    public class IndexModel : PageModel
    {
        private readonly IDataService _dataService = null!;

        public List<Item> Items { get; set; }

        public IndexModel(IDataService dataService)
        {
            _dataService = dataService;
            Items = new();
        }

        public async Task<JsonResult> OnPostCreate([DataSourceRequest] DataSourceRequest request, Item item)
        {
            await _dataService.CreateItemAsync(item);

            return new JsonResult(new[] { item }.ToDataSourceResult(request, ModelState));
        }

        public async Task<JsonResult> OnPostRead([DataSourceRequest] DataSourceRequest request, bool isFound)
        {
            Items = await _dataService.GetActiveItemsAsync(isFound);
            var result = await Items.ToDataSourceResultAsync(request);

            return new JsonResult(result);
        }

        public async Task<JsonResult> OnPostUpdate([DataSourceRequest] DataSourceRequest request, Item item)
        {
            var updatedItem = await _dataService.UpdateItemAsync(item);

            return new JsonResult(new[] { updatedItem }.ToDataSourceResult(request, ModelState));
        }

        public async Task<JsonResult> OnPostDestroy([DataSourceRequest] DataSourceRequest request, Item item)
        {
            await _dataService.DeleteItem(item.Id);

            return new JsonResult(new[] { item }.ToDataSourceResult(request, ModelState));
        }
    }
}

Index.cshtml

@page
@model IndexModel
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

<kendo-grid name="grid" height="700">
    <filterable enabled="true" />
    <groupable enabled="true" />
    <sortable enabled="true" />
    <editable enabled="true" mode="popup" template-id="popup-editor" />
    <scrollable enabled="true" />
    <pageable enabled="true" page-sizes="new int[] { 10, 20, 50}" />
    <toolbar>
        <toolbar-button template="toolbarTemplate"></toolbar-button>
        <toolbar-button name="create"></toolbar-button>
    </toolbar>
    <columns>
        <foreign-key-column field="ItemTypeId" />
        <column field="ReportDate" title="Date Reported" format="{0:yyyy-MM-dd}" width="160" />
        <column field="ItemDescription" title="Description" />
        <column field="Unit" title="Unit" width="200" />
        <column field="ContactName" title="Contact Name" width="250" />
        <column field="ReceivedBy" title="Received By" hidden="true" />
        <column field="ContactPhone" title="Contact Phone" hidden="true" />
        <column field="ContactAddress" title="Contact Address" hidden="true" />
        <column field="ContactDetails" title="Contact Details" hidden="true" />
        <column field="Qty" title="Item Quantity" hidden="true" format="{0:0}" />

        <column width="180">
            <commands>
                <column-command name="edit"></column-command>
                <column-command name="destroy"></column-command>
            </commands>
        </column>
    </columns>
    <datasource type="DataSourceTagHelperType.Ajax" page-size="10">
        <transport>
            <read url="/Index?handler=Read" data="getDataParameters" />
            <create url="/Index?handler=Create" data="getDataParameters" />
            <update url="/Index?handler=Update" data="getDataParameters" />
            <destroy url="/Index?handler=Destroy" data="getDataParameters" />
        </transport>
        <sorts>
            <sort field="ReportDate" direction="desc" />
        </sorts>
        <schema data="Data" total="Total" errors="Errors">
            <model id="Id">
                <fields>
                    <field name="Id" type="number" editable="false" />
                    <field name="ItemTypeId" type="object" />
                    <field name="ReportDate" type="date" />
                    <field name="ItemDescription" type="string" />
                    <field name="Unit" type="string" />
                    <field name="ContactName" type="string" />
                    <field name="ReceivedBy" type="string" />
                    <field name="ContactPhone" type="string" />
                    <field name="ContactAddress" type="string" />
                    <field name="ContactDetails" type="string" />
                    <field name="Qty" type="number" default-value="1" />
                </fields>
            </model>
        </schema>
    </datasource>
</kendo-grid>

<script id="popup-editor" type="text/x-kendo-template">
    @await Html.PartialAsync("_ItemPartial")
</script>

_ItemPartial.cshtml

<!--

the following @model throws:

InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'MyApp.Pages.IndexModel', but this ViewDataDictionary instance requires a model item of type 'MyApp.Data.Models.Item'.

-->

@model MyApp.Data.Models.Item

 

<!-- the following @model shows an empty grid: -->

@model IndexModel

<h6>magical mystery template</h6>

The questions I have are:

  • Which model should be used in _ItemPartial.cshtml?
  • Is the code in Index.cshtml.cs correctly using the Item property?
  • Within the popup dialog, how should the Update button be wired?
T
Top achievements
Rank 1
Iron
 answered on 26 Sep 2022
11 answers
568 views

Hello,

I want to add and clear menuButtons with javascript on the client but there is no Api for that. To add items with append like this shows the items but on click nothing happens (no close and no Event)

$("#Berichte_optionlist").append("<li><a href='' tabindex='0' title='test' class='k-button k-button-icontext' id="test" data-overflow='auto'>test</a></li>

 

How to add menuButtons the Right way so that the click Event works?

robert

Robert Madrian
Top achievements
Rank 1
Veteran
Iron
 answered on 26 Sep 2022
1 answer
92 views

Hello,

 

I have a kendo grid with the FundAge column with a dropdown list editor template. When I select the value from the dropdown and click update the value is showing as undefined. Can someone help with this?

///Editor template

@model Models.FedAge

@(Html.Kendo().DropDownListFor(x => x)
    .DataValueField("FedId")
    .DataTextField("FedDesc")
    .BindTo((System.Collections.IEnumerable)ViewData["FedAge"]))

 

//////// Grid column

 

 @(Html.Kendo().Grid<AgencyInformation>()
    .Name("AgencyInformationGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.FundAge).ClientTemplate("#=FundAge.FedDesc#").Sortable(false).Width(175).HtmlAttributes(new { @class = "FundAgeClass" });        
    }) 

.ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:500px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .AutoSync(false)
        .Batch(false)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("errorHandler"))
        .Events(events => events.RequestEnd("onAgeInfoRequestEnd"))
        .Model(model => {
            model.Id(p => p.AgeInfoId);
            model.Field(p => p.AgeInfoId).Editable(false);
            model.Field(p => p.FedAge.FedAgeDesc).Editable(false).DefaultValue(ViewData["FedAge"]);
        })
        .Create(update => update.Action("AddAgeInfo", "Cove").Type(HttpVerbs.Post))
        .Read(read => read.Action("GetAgeInfo", "Cove").Type(HttpVerbs.Get))
        .Update(update => update.Action("EditAgeInfo", "Cove").Type(HttpVerbs.Post))
        .Destroy(update => update.Action("DeleteAgeInfo", "Cove").Type(HttpVerbs.Post))
    )

 

 

//////Entity

 

public class AgeInfo
    {
        public string AgenfoId { get; set; }

        [UIHint("FedlAgeEditor")]
        [Required(ErrorMessage = "Required")]        
        public string FundAge{ get; set; }


        public FedAge FedAge{ get; set; }
    }


    public class FedAge
    {
        public int FedAgeId { get; set; }

        public string FedAgeDesc { get; set; }
    }
}

 

///controller

 [HttpGet]
        public IActionResult AgeInfo()
        {
            //if (coveDetails!= null && coveDetails.AgeInfo!= null)
            //{
            //    return View("AgeInfo", coveDetails.AgeInfo);
            //}
            ViewData["FedAge"] = lookupsDetails.FedAge;
            ViewBag.FedAge= lookupsDetails.FedAge;
            return View();
        }   

 

Can some one please help??

Mihaela
Telerik team
 answered on 26 Sep 2022
1 answer
327 views

For as long as I've been using Visual Studio, IntelliSense has always defaulted to this first menu labeled "All". It contains HTML, ASP.Net, and Telerik control autocomplete options, among others. For some reason today it started to default to the "TelerikCore" menu in the second screenshot.

Before:

 

After:

I have no use for anything in this new menu, and would like IntelliSense to go back to defaulting to the first menu.

I couldn't find any IntelliSense options related to this, and we have multiple users with this same problem.

Thank you in advance.

Stoyan
Telerik team
 answered on 23 Sep 2022
1 answer
511 views

hi, I have a simple grid set up for batch mode data entry . Two of the columns need to allow multiline entry (with line breaks) and I thought I had solved this problem by using a textarea. However, it turns out that the textarea is extremely buggy and the errors seem to be completely random and impossible to reliably duplicate. Sometimes it happens when you click into the cell, sometimes when you tab into a cell. After editing the cell contents, the black triangle to indicate an update does not appear in the upper left-hand corner of the column. Upon saving the changes, the data in the column reverts back to the unedited text (the edit is not saved).

I can't find any pattern to this behavior and it usually works fine on the second try.

Is there a better method for allowing multi-line text area in a column?

This is how I have the column set up:

columns.Bound(c => c.PODescription).ClientTemplate("<textarea rows='2' style='border: none; width:100%;'>#=PODescription#</textarea>").Title("*PO Description").EditorTemplateName("TextAreaTemplate").Width("200px");

 

The editor template:

@model string

@(Html.TextAreaFor(m => m, new { rows = 2, @style = "width:100%;" })
)

 

 

Aleksandar
Telerik team
 answered on 23 Sep 2022
1 answer
92 views

Right now, I have a ListBox on a ASP.NET Core MVC application that has some "clonky" behavior.  When I press the "Up/Down" arrows to reorder the contents of the ListBox, it redirects over to the controller then loads an "Edit" view then when I save the Edit result (item index) and it directs back to the view with the ListBox.  This is not a good user experience.

Instead, I want to push the up/down arrow and have it perform the update without it redirecting over to the Controller/Edit page.  How do I accomplish this?

 


                <div class="container">
                    @(Html.Kendo().ListBox()
                        .Name("listBox")
                        .DataTextField("Name")
                        .DataValueField("Id")
                        .DataSource(source =>
                            source.Read(read =>
                                read.Action("IndexJson", "SessionOptionItems").Data("gridGetData"))
                        )
                        .TemplateId("item-template")
                        .Toolbar(toolbar =>
                        {
                            toolbar.Position(ListBoxToolbarPosition.Right);
                            toolbar.Tools(tools => tools
                                .MoveUp()
                                .MoveDown()
                                .Remove()
                                );
                        })
                        .Events(events => events
                            .Reorder("onReorder")
                            .Remove("onRemove"))
                        .HtmlAttributes(new { style = "height:550px;width:530px" })
                        .BindTo(new List<SessionOptionTemplate>()))
                </div>


    function onReorder(e) {
        //alert("onReorder");

        $("#isbusy").show();

        var dataSource = e.sender.dataSource;
        var element = e.sender.select();
        var dataItem = e.sender.dataItem(element[0]);

        //alert("id: " + dataItem.Id);
        //alert("name: " + dataItem.Name);

        var index = dataSource.indexOf(dataItem) + e.offset;

        //alert("index: " + index);

        var url = '@Url.Action("Edit", "SessionOptionItems")?id=' + dataItem.Id + '&order=' + index + '@Model.GetUrlParameters("&")';
        // Replace &amp with & as the above encoding step changes & to &amp.
        window.location.href = url.replace(/&amp;/g, "&");
    }

Stoyan
Telerik team
 answered on 22 Sep 2022
1 answer
137 views

I've got an EF Core model that represents a one-to-many relationship. There's a navigation property on the parent that holds a collection of child items. What I'd like to do is bind this to a hierarchical grid and have the child items display underneath the parent items.

The example for a hierarchical grid shows separate data sources for the parent and child tables. Since I've already retrieved this data, why not just display it in that form?

I have a datasource defined which has an include statement. I tried to adapt the example code and have the same datasource for both grids, using syntax like "Client.Order" in the child table, but it doesn't like that.

Many thanks for any suggestions.

Stoyan
Telerik team
 answered on 21 Sep 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?