Telerik Forums
UI for ASP.NET Core Forum
0 answers
410 views

In our UI for ASP.NET Core R3 2020 (2020.3.915) release, the Column menu message of unsticking a column is "null".

This bug will be resolved in our next official release.

In the meantime, as a workaround, manually set the Unstick Column menu message:

.ColumnMenu(c => c.Messages(m => m.Unstick("Unstick Column")))
Kendo UI
Top achievements
Rank 1
 asked on 16 Sep 2020
1 answer
5 views

Telerik UI for asp.net core 2024.1.130

I am trying to implement a grid popup with dropdown list in asp.net core (tag helper) , would like to know how to make this work.

List associated with dropdownlist will be available via a web api call.

please use the following sample as a starter, where we have popup with Frieght, order date, shipName, shipCity 

https://netcorerepl.telerik.com/QoYdOJlL07aiiORy37

I would like to convert shipCity from text box to dropdown list, where i get the list of cities using a web api call.

Could you please help me with this implementation? (if there is already another sample which demonstrates this, that would be fine as well)

 
Anton Mironov
Telerik team
 answered on 18 Mar 2024
2 answers
13 views

Hi There,

I have a complex model in view.  But, i sended simple example for subject.

 

Main View Model : 

public class ErpProductModel
{
    public string Title { get; set; }
    public string Code { get; set; }
    public string ShortCode { get; set; }
    public int MinStock { get; set; }
    public int ShelfLife { get; set; }
    public int CategoryId { get; set; }
    public int TaxCategoryId { get; set; }
    public decimal AmountInProduct { get; set; }
    public int MeasureWeightId { get; set; }
    public int CountryId { get; set; }
    public int StatusId { get; set; }
    public List<ErpProductPackageTypeModel>? PackageTypes { get; set; } = [];
}

PackageTypes Model : 

public record ErpProductPackageTypeModel 
{
    public int? ProductId { get; set; }
    public string Barcode { get; set; }
    public int Quantity { get; set; }
    public string? PackageType { get; set; }
    public int PackageTypeId { get; set; }

    public List<SelectListItem> AvailablePackageTypes { get; set; } = [];
}

View Source :


<script type="text/x-kendo-tmpl" id="packageTypeTemplate">
         <div class="card widget widget-info">
             <div class="card-body">
                 <div class="widget-info-container">
                     <div class="widget-info-image" style="background: url('@Url.Content("/Assets/Images/barcode_mock.png")')"></div>
                     <h5 class="widget-info-title">#=Barcode#</h5>
                     <p class="widget-info-text">#=PackageType# / #=Quantity# PCS</p>
                 </div>
             </div>
         </div>
</script>

@(Html.Kendo().ListView<ErpProductPackageTypeModel>()
            .Name("package-types")
            .BindTo((IEnumerable<ErpProductPackageTypeModel>)Model.PackageTypes)
            .TagName("div")
            .Bordered(false)
            .Layout("grid")
            .Grid(p=> p.Cols(4).Gutter(20))
            .ClientTemplateId("packageTypeTemplate")
            .HtmlAttributes(new { @class= "rubi-listview package-types" })
            .DataSource(dataSource => 
                dataSource.Ajax()
                .Batch(true)
                .ServerOperation(false))
            )

 

Controller Post Method :


[HttpPost]
public virtual async Task<IActionResult> EditAsync(ErpProductModel model)
{
    var erpProduct = await _erpProductService.GetErpProductAsync(model.Id);
    if (erpProduct == null)
        return RedirectToAction("List");
    erpProduct = model.ToEntity(erpProduct);

    await _erpProductService.UpdateErpProductAsync(erpProduct);

    return RedirectToAction("Edit", new { id = erpProduct.Id });
}
When the page is first opened, data is filled into the listview control. No problem here. But when I do a post operation again, the PackageTypes in the model are not filled. In fact, it does not even appear in the first data that arrives. I couldn't figure out why. I only want a Client Side transaction.

My scenario is simple;
I have a product save screen. There are package types depending on this product. If all I want is to fill the package types, I will make various updates, additions or deletions on this data.

Thank you in advance for your help.
Mehmet
Top achievements
Rank 1
Iron
 answered on 15 Mar 2024
0 answers
9 views

I'm upgrading to Kendo 2024.1.130 and I've been able to get svg icons on a button or other places using this construct.

<div class="ara-footer">
    <button class="k-button k-button-icontext" onclick="cancelEdit(id)">
        <span id="ericIcon"></span>
        Back
    </button>
</div>
<script>
    kendo.ui.icon($("#ericIcon"), { icon: 'camera' });
</script>

That worked flawlessly.  Thank you for the great example.

Now I'm trying to add svg icons to a Custom command in a grid.  This is the code I have previously when using font-icons.

Html.Kendo()
.Grid<TemplateModel>()
.Name("GridApprovedTemplates")
.Columns(columns =>
{

columns.Command(command => { command.Edit().Text(" ").UpdateText(" ").CancelText(" "); command.Custom(" ").Text("<span class='k-icon k-i-info'></span> ").Click("refreshApprovedTemplateDetail"); }).Width(150);

The code that worked for a single button doesn't work here because you can't have the same id on multiple places in the DOM.  How would I go about using an svg icon here?  (Let's use the camera one as an example).


Eric
Top achievements
Rank 2
Iron
Iron
 asked on 14 Mar 2024
1 answer
10 views

Hello,

I am surprised this is not asked about more in the forums on using JavaScript functions in view components.

I have a grid inside a view component and am having issues getting the datasource read Data function to work so I can pass parameters from the view component's backend .cs file to my API (it says grid_getReadParameters is undefiend even though it's defined in script tag at the bottom of the view component). I have read that view components can't really have javascript or something strange like that which makes no sense. I defined a script section in my view component and it was unable to find "grid_getReadParameters". How does one define this within the view component? I do not want to have to sprinkle this around on every page which uses my view component, that would defeat the purpose. Thanks in advance for your help.

See below example:

@(Html.Kendo()
    .Grid<ViewModels.MyViewModel>()
    .Name("grid_" + uniqueId)
    .Sortable()
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Filterable()
    .ToolBar(x =>
    {
        x.Create().Text("Add New");
        x.Save().SaveText("Save").CancelText("Cancel");
    })
    .Columns(columns =>
    {
        columns.Bound(c => c.Value)
        .Width(125)
        .Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true));
    })
    .DataSource(ds => ds
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Read(r => r.Url("/api/ControllerName?handler=MethodName").Data("grid_getReadParameters"))
            .Events(events => events.Error("grid_error"))
            .PageSize(100)
            .Model(m =>
            {
                m.Field(id => id.Value).Editable(true);
            })
    )
)

Alexander
Telerik team
 answered on 13 Mar 2024
1 answer
14 views

In the Grid for ASP.NET AJAX, it was possible to drag an entire row (see Telerik Web Forms Drag and Drop of Grid Items - RadGrid - Telerik UI for ASP.NET AJAX and Telerik Web UI Grid Items Drag-and-drop Demo | Telerik UI for ASP.NET AJAX).

In the Grid for ASP.NET Core however, it appears to be necessary to use a "drag handle" in a specific column to drag the row which some of my users are finding somewhat "clunky" and even I find difficult on occasion as I sometimes find that instead of dragging I am in fact highlighting page content instead.

Is it possible to drag an entire row in Grid for ASP.NET Core instead of having to use the drag handle?

In particular, I am looking to be able to drag between grids as well as being able to drag within grids.

Thanks.

Ivan Danchev
Telerik team
 answered on 04 Mar 2024
1 answer
20 views
Telerik UI for asp.net core 2024.1.130

I need to pass a parameter from dropdownlist selection to the ajax function that refreshes the grid. Using the following code to accomplish this using taghelper syntax, however the parameter is not getting passed to ajax api. Could you please help?

<form id="frmEnableFeed">
    <div class="mb-3 form-group">
        <label asp-for="SelectedAirline" class="form-label">Select the Airline to configure:</label>
        <kendo-dropdownlist class="form-select" name="SelectedAirline"
                                    datatextfield="Text"
                                    datavaluefield="Value"
                                    bind-to="Model.CompanySelectList"
                                    option-label="Please select an Airline..."
                                    filter="FilterType.Contains">
        </kendo-dropdownlist>
    <div class="mb-3 form-group">
        <kendo-grid name="grid" height="430">
            <datasource type="DataSourceTagHelperType.Ajax" page-size="20"
                        on-error="error_handler">
                <schema data="Data" total="Total">
                    <model id="AirlineID">
                        <fields>
                            <field name="AirlineID" type="string" editable="false"></field>
                            <field name="AirlineName" type="string"></field>
                            <field name="Enabled" type="boolean"></field>
                        </fields>
                    </model>
                </schema>
                <transport>
                    <read url="@Url.Action("GetAirlines", "Feed")" />
                </transport>
            </datasource>
            <columns>
                <column field="AirlineName" />
                <column field="ITP Services" width="100" />
                <column field="Feed Enabled" width="100" />
            </columns>
            <toolbar>
                <toolbar-button name="create"></toolbar-button>
            </toolbar>
            <editable mode="popup" />
            <pageable enabled="true" />
            <sortable enabled="true" />
            <scrollable enabled="true" />
        </kendo-grid>
    </div>
    <div class="mb-3 form-group">
        <button type="submit" class="btn btn-primary" id="btnSaveChange">Save Changes</button>
    </div>
</form>
@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script>
        $(function () {
            $("#SelectedItp").change(function () {
                var cid = $(this).val();
                var grid = $("#grid").data("kendoGrid");
                grid.dataSource.read({ companyId: cid });
            })
        });
    </script>
}

 

 

Mihaela
Telerik team
 answered on 29 Feb 2024
2 answers
15 views

I am trying to update Kendo Aspnet core grid field while adding a new record in inline editing.

Here are more details.

Start adding a new row in grid -> add programically content to the edit fields.

I have a grid with textArea field called VideoSubtitleText which I am trying to update using javascript code.

Here is my js code


let ttt = $("#VideoSubtitleText").kendoTextArea().data("kendoTextArea");
 ttt.value("New subtitle text");
 ttt.trigger("change");

And this is my grid


@(Html.Kendo().Grid<VideoSubtitle>
     ()
     .Name("subtitlegrid")
     .Filterable()
     .Editable()

     
     .Selectable(selectable => selectable
     .Mode(GridSelectionMode.Single))
     .Scrollable()
     .ClientDetailTemplateId("templateSubtitleStyle")
     .ToolBar(toolbar =>
     {

         toolbar.ClientTemplateId("GridToolbarTemplate");
     })

     .Columns(columns =>
     {

         columns.Bound(column => column.VideoSubtitleBeginTimeStr).Title("Start Time").Width(70).Filterable(false);
         columns.Bound(column => column.VideoSubtitleEndTimeStr).Title("End Time").Width(70).Filterable(false);
         columns.Bound(column => column.VideoSubtitleText).Title("Text").Width(380).HtmlAttributes(new { @class = "wrap" });

         columns.Command(column =>
         {                                                
             column.Edit();
             column.Destroy();
         }).Width(140);

     })
     .DataSource(ds => ds.Ajax()
     .Sort(sort => sort.Add("VideoSubtitleBeginTimeStr").Ascending())
     .Read(r => r.Url("/VideoDataDetails?handler=ReadSubtitles").Data("forgeryToken"))
     .Update(u => u.Url("/VideoDataDetails?handler=UpdateSubtitle").Data("forgeryToken"))
     .Create(c => c.Url("/VideoDataDetails?handler=CreateSubtitle").Data("forgeryTokenAndLocale"))
     .Destroy(d => d.Url("/VideoDataDetails?handler=DestroySubtitle").Data("forgeryToken"))

     .Model(m => m.Id(id => id.VideoSubtitleId))
     .Events(ev => ev.RequestEnd("gridRequestEnd"))

     )

     .Events(events => events
     .Change("onSubtitleSelected")
     .Save("onSaveSubtitle")
     .SaveChanges("onSaveSubtitle")
     .Remove("onRemove")
     .Edit ("onSubtitleEdit")

     )
     .HtmlAttributes(new { style = "height: 600px;" })

 )

 

JS code updates the grid field (VideoSubtitleText) correctly first time. However I need to update same field multiple times.

This causes problem and extra element is added each time when field is updated from my js code.

Image showing the problem is attached.

The code updates the field but additional html elements are created when multiple updates are done to the same field

 


Erkki
Top achievements
Rank 1
Iron
 answered on 29 Feb 2024
1 answer
28 views

In ASP.NET Core MVC 8.0 with KendoUI 2024.1.130, when rendering a page which contains a grid via the taghelper, if the application has enabled Razor runtime compilation, an exception will be thrown within Microsoft.AspNetCore.Razor.Language in Microsoft.AspNetCore.Razor.StringSegment.Equals.  Full stack trace attached.  This did not occur with ASP.NET Core MVC 6 and KendoUI 2022.3.  Attached is a small sample app demonstrating the problem; navigating to the grid page will fail with an exception unless AddRazorRuntimeCompilation is commented out.

A couple levels up the call stack from where the exception occurs, Razor is iterating over descriptor.BoundAttributes; one of these whose DisplayName is "System.Collections.Generic.IDictionary<System.String, System.String> Kendo.Mvc.TagHelpers.GridTagHelper.Templates" has a Name property of null which is what results in the exception.

Stoyan
Telerik team
 updated answer on 27 Feb 2024
1 answer
12 views

Hi,

I am using datatable with my kendo mvc grid and want to make few columns as mandatory. I am not sure how can I do that.

How can I do this?

 

Thanks in advance.

Mahesh

Alexander
Telerik team
 answered on 27 Feb 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?