Questions on UI for ASP.NET Core Forum

1 answer

119 views

I want the tree list to only expand the first entry on page load. But it seams like m.Expanded only works with true / false (expand all or none)

Doing an expression doesn't seem to work.
EG
m.Expanded(f => f.ParentNodeNumber == null ? true : false);

None working code, when the page loads none of the items are expanded

    @(Html.Kendo().TreeList<MyModel>()
        .Name("GridBuildInfo")
        .Toolbar(toolbar =>
        {
            toolbar.Search();
        })
        .Columns(columns =>
        {
        columns.Add().Selectable(true).Width("35px");
        columns.Add().Field(p => p.ComponentItemId).Title("Item Id").Width(300);
        columns.Add().Field(p => p.ComponentItemDescriptionFriendly).Title("Item Description");
        columns.Add().Field(p => p.ComponentSerialNumber).Title("Serial #");
        })
    .Resizable(true)
    .Height(540)
        .Filterable()
        .DataSource(dataSource => dataSource
    .ServerOperation(false)
    .Sort(s => s.Add(a => a.HasFieldServiceableChildItems).Descending())
    .Read(read => read.Url("/GetData/TestTree"))
            .Model(m =>
            {
                m.Id(f => f.NodeNumber);
                m.ParentId(f => f.ParentNodeNumber);
                m.Field(f => f.HasChildItems);

            //want to expand only the first row.
            m.Expanded(f => f.ParentNodeNumber == null ? true : false);
    })
    ).Events(events =>
    {
        
        events.Expand("onExpand");
       
    })
    )

<script>
    function onExpand(arg) {
       
        console.log(arg);
    }

</script>

It loads like this:

if I click to expand, the console log shows that ParentNodeNumber is null....

So how do I get it to expand the first item?

TreeList

answered on 18 Oct 2023

1 answer

144 views

Binding to a List<List<generic_column>> type data

I've searched and found a variety of answers regarding binding to dynamic data. The closest I've come is using a DataTable but I can't format the data specifically using it (i.e. currency, date). Basically we want to allow our users to see their 'User Defined FIelds' in the grid, in addition to the regular items we have in a grid. I planned on converting all columns (user defined and our standard columns we have for all customers) into one column object:

public class GenericGridListItemViewModel
{
    public string Name { get; set; } = null!;
    public string? TextValue { get; set; }
    public double? NumberValue { get; set; }
    public DateTime? DateValue { get; set; }
    public decimal? CurrencyValue { get; set; }
    public bool Hidden { get; set; }
    public UdfVariableTypes VariableType { get; set; }
}

And then in then I'd iterate through them an use the variable type for formatting the column and the hidden to define if it's hidden. The below example does not include all the possible variable types but it shows my attempt at getting something up and running. I get the correct headers on the grid but no rows are filled

The data is returned from the controller as a List<List<GenericGridListItemViewModel>>

If anyone has some insight I'd be thrilled to figure this out. Thanks, Brian.

    @(
        Html.Kendo().Grid <List<GenericGridListItemViewModel>>()
            .Name("Grid")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Contacts_Read", "Contacts", new { area = "Contacts" }))
                .PageSize(1000)
                .ServerOperation(false)
            )
            .Columns(columns =>
            {
                int cdx = 0;
                foreach(var col in Model.Data.First())
                {
                    if (col.VariableType == UdfVariableTypes.Integer) 
                    {
                        columns.Bound(l => l[cdx].NumberValue).Title(col.Name);
                    }
                    else if (col.VariableType == UdfVariableTypes.Text)
                    {
                        columns.Bound(l => l[cdx].TextValue).Title(col.Name);
                    }
                    else if (col.VariableType == UdfVariableTypes.Currency)
                    {
                        columns.Bound(l => l[cdx].NumberValue).Title(col.Name).Format("{0:C}").Hidden(Model.Data.First()[cdx].Hidden);
                    }
                    cdx++;
                }
        })
        .Pageable()
        .Sortable()
        .Filterable()
        .ColumnMenu()
        .ToolBar(t =>
        {
            t.Excel();
            t.Search();
        })
        .Reorderable(l => l.Columns(true))
    )

Grid

answered on 18 Oct 2023

1 answer

126 views

Porting a RadMenu to ASP.NET Core MVC

I am porting a WebForms application to ASP.NET Core MVC, and I'm having trouble moving from the RadMenu (Telerik UI for .NET AJAX) to the menu component in Telerik UI for ASP.NET Core. After going down many blind alleys I'm stumped as to how to bind my data (an array of a custom type which includes menu text, target URLs, and more). My menu has a collection of top-level items and some of them have sub-menu items. It seems like this should be pretty straightforward but I can't find an example or documentation that explains how to bind my menu to an array.

I think I need to do something like this:

@(Html.Kendo().Menu()
.Name("MyMenu")
.DataTextField("Text")
.Action(<action>)
.DataSource(???)
.Model(model => model.Children("MenuItems"))) <<<--- This came from an example, I don't know what it does)
)

Can someone point me to a simple example?

Menu

answered on 17 Oct 2023

1 answer

786 views

Wrap Text in Html.Kendo().Grid column

I have a Html.Kendo().Grid ASP.Net core 7.0 project. The grid displays several columns, some of them have big text. I want the text to not wrap. The text should show '...' in the end if the text is longer than the grid column.

I have added

.k-grid td {
white-space: nowrap;
}

but still the text wraps as shown in the attached image.

Grid

answered on 16 Oct 2023

1 answer

105 views

TagHelper for Pager does not allow "All"

It appears that using the Razor syntax allows us to set:

new object[] { 5, 10, 20, 50, "All" }

However, the TagHelper does not. It only supports ints. Therefore, I do not have a way to use the special "all" keyword for the pager while using TagHelpers.

Grid

Pager

answered on 16 Oct 2023

0 answers

134 views

Tooltip Position Incorrect When Scrolling Down

I have a similar issue to this question [https://www.telerik.com/forums/tooltip-position-incorrect-when-scrolled-down-page], however we are using jQuery 3.7.1.

What I found was that we were using the .Animation property to enhance the UI. If I remove the .Animation property, it renders correctly when scrolling.

We are also using this with .ToClientTemplate() on the ToolTip as well.

Is this a known issue?

@(Html.Kendo().Tooltip()
    .For("#image-info")
    .Position(TooltipPosition.Left)
    .Content("Here is my tooltip text")
    .Width(250)
    //.Animation(a =>
    //{
    //    a.Open(o =>
    //    {
    //        o.Expand();
    //    });
    //})
    .ToClientTemplate())

ToolTip

asked on 13 Oct 2023

1 answer

84 views

incell grid editing as textbox with validate to confirmation dialog

I have a set of custom filters(Country, state, county, Missing city) and if I select all three and click a <generate report> button ,
I want to see a custom grid (Custom Editing in ASP.NET Core Grid Component Demo | Telerik UI for ASP.NET Core) with columns
Country; State; County;
and Missing City ID as textbox with validate for each as shown in image attached.
If I
1. enter the missing city ID inside the cell and click validate, a confirmation dialog should open with city ID and name.
2. confirmation dialog will have the city id with details as Name and Zipcode, as shown in image
3. Upon confirmation I want to save the city id to missing records and update the grid.

How do I achieve this using the demo from above?

Grid

answered on 13 Oct 2023

1 answer

472 views

Multiselect - checkboxes - asp net core

I want to use this demo: https://demos.telerik.com/aspnet-core/multiselect and have a checkbox on left side of the list.
Upon selecting the tag I want to see the count of items selected instead of showing them as chips with names as selected.

I want to use this demo : https://demos.telerik.com/kendo-ui/dropdownlist/index and have a checkbox and show count for no of tags selected as in this demo: Kendo UI Snippet | Kendo UI Dojo (telerik.com).

I see a jquery approach but I want to implement a html tag helper approach in both cases for asp net core
I have attached a image that I have as UI

MultiSelect

answered on 13 Oct 2023

2 answers

103 views

Not able to pass data from Telerik Grid in Submit form.

Hi,

I am trying to submit multiple POMaterials through this form. But it doesn't work. I entered a breakpoint to check if data is being passed from the view, but I get null entry for all the Entries in the grid.

<form asp-action="CreatePO" id="PorequestForm" name="PorequestForm"><div asp-validation-summary="ModelOnly" class="text-danger"></div><fieldset><legend>Materials</legend>

        @*@Html.LabelFor(category => category.Justification)
        @Html.EditorFor(category => category.Justification)*@

        @(
            Html.Kendo().Grid(Model.POMaterials)
                .Name("PoMaterial")
                .ToolBar(tools => tools.Create().Text("Add PO Materials"))
                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                .Columns(columns =>
                {
                columns.Bound(p => p.ItemNumber).ClientTemplate("#= ItemNumber #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].ItemNumber' value='#= ItemNumber #' />"
                );
 
                columns.Bound(p => p.Description).ClientTemplate("#= Description #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].Description' value='#= Description #' />"
                );
               
                columns.Bound(p => p.Amount).ClientTemplate("#= Amount #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].Amount' value='#= Amount #'/>"
                );
                
                columns.Bound(p => p.UnitCost).ClientTemplate("#= UnitCost #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].UnitCost' value='#= UnitCost #' />"
                );

                columns.Bound(p => p.PomaterialId).Hidden().ClientTemplate("#= PomaterialId #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].PomaterialId' value='#= PomaterialId #' />"
                );

                columns.Command(command => command.Destroy()).Width(100);
            })
            .DataSource(dataSource => dataSource.Ajax()
            .Model(model =>
            {
                model.Id(p => p.PomaterialId);
                model.Field(p => p.PomaterialId).Editable(false);
            })
            .Batch(true)
            //.Read(read => read.Action("ReadPoRequest", "Grid"))
            //.Create(create => create.Action("AddPORequest", "Grid"))
            .ServerOperation(false)
            )
            )
    </fieldset>
 
</form>

public IActionResult CreatePO()
{
    
    ViewData["WorkflowStatusId"] = new SelectList(_ob.WorkFlowStatuses.ToList(), "WorkFlowStatusId", "Value");
    ViewData["ApprovalStatusId"] = new SelectList(_ob.ApprovalStatuses.ToList(), "ApprovalId", "Value");
    TempData["poId"] = _ob.Porequests.Max(x => x.Id + 1);
    return View(new Porequest());
}
       
[HttpPost]
//[ValidateAntiForgeryToken]
public IActionResult CreatePO(Porequest porequest)
{
    porequest.VendorId = (int)TempData["VenId"];//Insert breakpoint here to check for the values being passed by the view
    _ob.Add(porequest);
    _ob.SaveChanges();
    return RedirectToAction(nameof(PurchaseOrders));
}

Script it is located here

<script>
    function index(dataItem) {
        var data = $("#PoMaterial").data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);
    }
</script>

Grid

answered on 13 Oct 2023

1 answer

227 views

Custom toolbar with count of items

I have a grid with a Create button and Search field in the toolbar. I would like to add a count of the number of items in the grid. I am aware that it's possible to add paging to display the count and then disable it with:

PreviousNext(false).Numeric(false)

However, that results in wasted space because there's a row for the pager and count, and another row with the Create button and Search field.

Is it possible to add the item count to the custom toolbar so that everything is in in one row?