Questions on UI for ASP.NET Core Forum

1 answer

2.0K+ views

Get cell value in a selected row in Grid with clicking a button

Scenario:

I had a grid with datas,
and in the last cell of each row there is a command custom button with click event,
which the click event will leads to a javascript function,
I would like to access the specific cell value of the selected row.

Tried:

I've noticed that Telerik UI for jQuery has the "select" method Telerik UI for jQuery Select method,
and I got the row with instructions,
but how can I get the cell value?
got no idea since I am new with jQuery,
I'll show what I've tried below

MyView.cshtml

<div>
        @(Html.Kendo().Grid<MyViewModel>()
        .Name("my-kendogrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ItemName).Title("Moniter").Width(75);
            columns.Bound(c => c.EqStartTime).Title("StartTime").Width(50).Format("{0:yyyy-MM-dd HH:mm:ss}");
            columns.Bound(c => c.EqEndTime).Title("EndTime").Width(50).Format("{0:yyyy-MM-dd HH:mm:ss}");
            columns.Command(c => c.Custom("MyForm").Click("getRowValue")).Title("Datas").Width(30);
        })
        .Pageable()
        .Scrollable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("GetData", "QueryData", new { ID = instId, startTime = startTime, endTime = endTime }))
            .Model(m => {
                m.Id(id => id.id);
                m.Field(f => f.id).Editable(false);
            })
        )
        )
</div>

MyJavascript.js

function getRowValue() {
    
    // What I've tried so far
    var grid = $("#my-kendogrid").data("kendoGrid")
    var rows = grid.select();

    //get seleted Row while clicking the inline button

    //get cell value in the row
}

Grid

answered on 29 Sep 2022

1 answer

406 views

UI for ASP.NET Core: How to call code from "Save" toolbar button?

I added a toolbar to my grid, with new, save and cancel buttons. On my page, I configure the datasource to use the save routine in my controller. However, any breakpoints set in my Save (update) routine are never hit, even after editing and saving the grid. Is there an event I should be capturing? Like all of my issues, this is after following an example on the Telerik site. My read method is working perfectly.

Index.cshtml

    <form class="form-inline">
        <div class="form-group mb-2">
            <label for="SievePack" class="sr-only">Choose a Sieve Set</label>

            <kendo-grid name="SievePack"
                        detail-template-id="template"
                        navigatable="true">
                <columns>
                    <column field="SieveSetId" title="Set ID" />
                    <column field="SieveSetName" title="Name" />
                </columns>
                <toolbar>
                    <toolbar-button name="create" ></toolbar-button>
                    <toolbar-button name="save"></toolbar-button>
                    <toolbar-button name="cancel"></toolbar-button>
                </toolbar>
                <datasource page="0" type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="6" batch="true" >
                    <schema data="Data" total="Total" errors="Errors">
                    </schema>
                    <transport>
                        <read url="@Url.Action("ReadSieveSets", "SievePack")" datatype="json" />
                        <update url="@Url.Action("Sievesets_Update", "SievePack")" />
                        <create url="@Url.Action("Sievesets_Create", "SievePack")" />
                    </transport>
                </datasource>

                <editable mode="incell" />
            </kendo-grid>
        </div>

    </form>

and the controller:

        [HttpPost]
        public ActionResult Sievesets_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<SieveSet> sets)
        {
            // Will keep the updated entities here. Used to return the result later.
            var entities = new List<SieveSet>();
            if (ModelState.IsValid)
            {
                using (_context)
                {
                    foreach (var set in sets)
                    {
                        // Create a new Product entity and set its properties from the posted ProductViewModel.
                        var entity = new SieveSet
                        {
                            SieveSetName = set.SieveSetName,
                            SieveSetId = set.SieveSetId
                        };
                        // Store the entity for later use.
                        entities.Add(entity);
                        // Attach the entity.
                        _context.Attach(entity);
                        // Change its state to Modified so Entity Framework can update the existing product instead of creating a new one.
                        _context.Entry(entity).State = EntityState.Modified;
                    }
                    // Update the entities in the database.
                    _context.SaveChanges();
                }
            }
            // Return the updated entities. Also return any validation errors.
            return Json(entities.ToDataSourceResult(request, ModelState, set => new SieveSet
            {
                SieveSetName = set.SieveSetName,
                SieveSetId = set.SieveSetId
            }));
        }

Grid

answered on 29 Sep 2022

1 answer

217 views

Cards not rendering properly on razor page

Hello,

I just copied some code for cards from this page:

https://docs.telerik.com/aspnet-core/knowledge-base/cards#styles

But the buttons on the cards, and the styles don't seem to be rendering properly. Are the cards not supported on the razor pages? I only see them in the main documentation page, not the razor docs page. Or am I missing something?

I attached an image showing what cards look like for me.

P.S: I have nothing on the page except for the code for cards:

@page
@model IndexModel

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
@{
    ViewData["Title"] = "Home page";
}
<! -- ########## Pasted code for cards here ########## -->

Card

answered on 28 Sep 2022

1 answer

462 views

using hiddenfor and textboxfor for the same field is not supported anymore

I have an application where in the past I used HiddenFor and TextBoxFor for the same field where the TextBoxFor was disabled.

@Html.HiddenFor(m => m.String)
@Html.Kendo().TextBoxFor(m => m.String).HtmlAttribute(new { @class = "k-state-disabled", disabled = "disabled" })

We are currently trying to upgrade our telerik to the latest version and found this issue.

What is the recommended way of fixing this.

The reason we need this is because the field is on a form and sometimes its disabled and the value needs to be submitted.

TextBox

answered on 28 Sep 2022

1 answer

3.2K+ views

How to show success and error notification messages for kendo grid after updating the row

Hi All,

we are using kendo inline editable grid. I want show success and error notifications after update the row data. can anyone please let me know if there is any solution?

Thanks!

Grid

answered on 28 Sep 2022

1 answer

279 views

How do we show mask for inline editable grid column ?

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!

Grid

answered on 28 Sep 2022

1 answer

98 views

Changing labels on numeric filter

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);

Editor

Filter

answered on 27 Sep 2022

1 answer

100 views

Two column template string with one right aligned

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

DropDownList

answered on 27 Sep 2022

2 answers

308 views

Grid - trouble binding a custom popup editor with tag helpers in razor page

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

@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?

Grid

answered on 26 Sep 2022

11 answers

549 views

Add menuButtons dynamically with Javascript

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

Toolbar

answered on 26 Sep 2022