Questions on UI for ASP.NET Core Forum

1 answer

1.2K+ views

I have an enum in my model for Currency, like so

public class Project
    {
        public Currencies Money { get; set; }
       
        public int CurrencyId { get; set; }
        public string CurrencyName { get; set; }
        public string ContractPerson { get; set; }

        public enum Currencies
        {
            [Display(Name = "Euro")]
            Euro = 1,
            [Display(Name = "USD")]
            USD = 2,
            [Display(Name = "MKD")]
            MKD = 3
        }
}

and I am trying to display the text instead of the id in my Kendo grid but I am not sure how to proceed. I can show the currencyId but not sure how to show the actual text. This is my grid

<div class="clearfix">
        @(Html.Kendo().Grid<Projects.Domain.Project>()
                    .Name("projectsGrid")
                    .ToolBar(toolbar => toolbar.Create())
                    .ToolBar(e =>
                    {
                        e.Custom().Text("Export to excel").HtmlAttributes(new { id = "excelButton" });
                    })
                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
                    .Pageable(pageable => pageable.Input(true).Numeric(false))
                    .PersistSelection()
                    .Scrollable()
                    .Sortable()
                    .Events(ev => ev.Change("onChange"))
                    .Filterable()
                    .ColumnMenu()
                    .Groupable(false)
                    .Columns(columns =>
                    {
                        columns.Select().Width(50);
                        columns.Bound(c => c.CurrencyId).Title("currency").Width("200px");
                        columns.Bound(c => c.ContractPerson).Title("ContractPerson").Width("200px");
                        columns.Bound(c => c.UrlWiki).Title("UrlWiki").Width("200px");
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.Id))
                    .Create(update => update.Action("EditingPopup_Create", "Projects"))
                    .Read(read => read.Action("GetProjects", "Projects"))
                    .Update(update => update.Action("EditingPopup_Update", "Projects"))
                    .Destroy(update => update.Action("EditingPopup_Destroy", "Projects"))
                    )
        )
    </div>

Any pointers on how to proceed?

Grid

updated answer on 23 Jun 2021

1 answer

177 views

Create & edit view on popup editor

I have a view for Create as well as Edit. My question is can I use those views to show when I click the Create New Popup dialog?

So if I click the Add new record, it'll show the built in grid popup dialog window. Instead of the built in dialog, can I set the grid to show my own Create view? The Create.cshtml? The same goes for the Edit view, when I click the Edit button, can I set it to use the Edit.cshtml instead of the built it edit popup dialog?

Grid

answered on 23 Jun 2021

3 answers

1.7K+ views

Persist grid state on filter or sort action

Good Day,

I am actually looking to find a way to save only filter, sort and current paging options when a user interract with the grid. I have seen this demo https://demos.telerik.com/aspnet-core/grid/persist-state, but I would like it to be automatically instead of having external button to do the action.

I have tried also binding on the databound event using a flag like so, but it only works the first time. My function is a little bit generic, because I would like to automatically do it for every grid in the application without having to configure anything.

    let stateChanged = false;
    $('.k-grid').data('kendoGrid').bind('filter', function (e) {
        stateChanged = true;
    });

    $('.k-grid').data('kendoGrid').bind('sort', function (e) {
        stateChanged = true;
    });

    $('.k-grid').data('kendoGrid').bind('dataBound', function (e) {
        if (stateChanged) {
            const grid = e.sender;
            const storageKey = generateStorageKey(grid);
            const options = grid.getOptions();
            saveGridState(options, storageKey);
            stateChanged = false;
        }
    });

Is there any other way to actually save the state of the grid immediately after the user interract with the grid?

Thank you :)

Grid

answered on 23 Jun 2021

1 answer

148 views

ForeignKey column binding - Combobox editor for data editing

Hi there,

I want to use Combobox editor for data editing, but it only used with local binding:

@(Html.KGrid(gridInfo).Columns(d=>d.ForeignKey(p => p.TableName, (System.Collections.IEnumerable)ViewData["TableNames"], "Id", "Name")))

@(Html.KGrid(gridInfo).Columns(d=>d.ForeignKey(p => p.TableName, ds => ds.Read(r =>r.Url("/sys/gridinfo/gettablenames")), "Id", "Name")))

If I use remote binding it show Dropdown List editor, I tried .EditorTemplateName("GridForeignKey") but it doesn't work.

Editor template GridForeignKey:

@model object
@(
 Html.Kendo().ComboBoxFor(m => m)
        .ValuePrimitive(true)
        .Filter("contains")
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

I hope to get help, thanks!

Grid

answered on 23 Jun 2021

2 answers

456 views

Losing selected rows when changing page

I am using the Kendo grid to show data. I am also using a function to export the selected rows to excel. The thing is, if I select multiple rows from multiple pages it only export the rows from the last page or the page I am currently at.

<div class="container">

    <div class="clearfix">
        @(Html.Kendo().Grid<Projects.Domain.Project>()
                    .Name("projectsGrid")
                    .ToolBar(toolbar => toolbar.Create())
                    .ToolBar(e =>
                    {
                        e.Custom().Text("Export to excel").HtmlAttributes(new { id = "excelButton" });
                    })
                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
                    .Pageable(pageable => pageable.Input(true).Numeric(false))
                    .PersistSelection()
                    .Scrollable()
                    .Sortable()
                    .Events(ev => ev.Change("onChange"))
                    .Filterable()
                    .ColumnMenu()
                    .Groupable(false)
                    .Columns(columns =>
                    {
                        columns.Select().Width(50);
                        columns.Bound(c => c.Id).Title("ID").Hidden();
                        columns.Bound(c => c.ProjectName_EN).Title("ProjectName_EN").Width("250px");
                        columns.Bound(c => c.ProjectName_MK).Title("ProjectName_MK").Width("200px");
                        columns.Bound(c => c.ContractNumber).Title("ContractNumber").Width("200px");
                        columns.Bound(c => c.ContractStartDate).Title("Start date").Width("200px");
                        columns.Bound(c => c.ContractEndDate).Title("End date").Width("200px");
                        columns.Bound(c => c.Description_MK).Title("desc mk").Width("200px");
                        columns.Bound(c => c.Description_EN).Title("desc en").Width("200px");
                        columns.Bound(c => c.Amount).Title("amount").Width("200px");
                        columns.Bound(c => c.CurrencyId).Title("currency id").Width("200px");
                        columns.Bound(c => c.ContractPerson).Title("ContractPerson").Width("200px");
                        columns.Bound(c => c.UrlWiki).Title("UrlWiki").Width("200px");
                        columns.Bound(c => c.StatusId).Title("StatusId").Width("200px");
                        columns.Bound(c => c.Client).Title("Client").Width("200px");
                        columns.Bound(c => c.ProjectManager).Title("proj manager").Width("200px");
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.Id))
                    .Create(update => update.Action("EditingPopup_Create", "Projects"))
                    .Read(read => read.Action("GetProjects", "Projects"))
                    .Update(update => update.Action("EditingPopup_Update", "Projects"))
                    .Destroy(update => update.Action("EditingPopup_Destroy", "Projects"))
                    )
        )
    </div>
</div>

My js functions

var globalRows;

    var d = new Date();
    var fileName = "Projects - " + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();

    function onChange(arg) {
        var grid = $("#projectsGrid").getKendoGrid();
        var rows = [{
            cells: [
                { value: "Project name MK" },
                { value: "Project name EN" },
                { value: "Contract number" },
                { value: "Contract start date" },
                { value: "Contract end date" },
                { value: "Description MK" },
                { value: "Description EN" },
                { value: "Ammount" },
                { value: "Currency" },
                { value: "Contract person" },
                { value: "Wiki URL" },
                { value: "Project manager" },
                { value: "Status" },
                { value: "Contractor" }
            ]
        }];

        var trs = $("#projectsGrid").find('tr');
        for (var i = 0; i < trs.length; i++) {
            if ($(trs[i]).find(":checkbox").is(":checked")) {
                var dataItem = grid.dataItem(trs[i]);
                console.log("dataItem", dataItem);
                rows.push({
                    cells: [
                        { value: dataItem.ProjectName_MK },
                        { value: dataItem.ProjectName_EN },
                        { value: dataItem.ContractNumber },
                        { value: dataItem.ContractStartDate },
                        { value: dataItem.ContractEndDate },
                        { value: dataItem.Description_MK },
                        { value: dataItem.Description_EN },
                        { value: dataItem.Amount },
                        { value: dataItem.CurrencyName },
                        { value: dataItem.ContractPerson },
                        { value: dataItem.UrlWiki },
                        { value: dataItem.ProjectManagerId },
                        { value: dataItem.StatusId },
                        { value: dataItem.ContractorId }
                    ]
                });
            }
        }
        globalRows = rows;

    }


    $("#projectsGrid").on("click", "#excelButton", function (e) {
        e.preventDefault();  //prevents postback

        var workbook = new kendo.ooxml.Workbook({
            sheets: [
                {
                    columns: [
                        { autoWidth: true },
                        { autoWidth: true }
                    ],
                    title: "Projects",
                    rows: globalRows
                }
            ]
        });
        kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: fileName });
    });

Any pointers or suggestions on how to proceed? How not to lose the rows from the previous pages?

Grid

answered on 23 Jun 2021

0 answers

102 views

TaskBoard Column Width

Is there any way to adjust the column width of the TaskBoard?

Thank you,

Scott

TaskBoard

updated question on 22 Jun 2021

1 answer

647 views

How do I call the read and filter method?

I have a grid that I have made external filters for. When a user chooses a filter option, I basically call:

grid.dataSource.filter(filterObj);

However, my grid's read method requires params, which is called like this:

var optionalData = { startDate: startDateVal, endDate: endDateVal };
grid.dataSource.read(optionalData);

When the user chooses a filter, the 1st filter method is hit but my application errors on the read method because it is expecting parameters that are now null. (the startDate and endDate).

How do i call the filter method and pass optional data to it? I assume the filter calls a read?

Grid

answered on 22 Jun 2021

1 answer

307 views

How to use foreign key with memberName and load dataSource from Url

I'm creating a generic grid, but have a problem that the foreign key column cannot use memberName and load datasource from url.
Please help me, thanks.

Grid

answered on 22 Jun 2021

2 answers

1.1K+ views

How do I open a Razor Page in a Kendo Window?

Hi,

I have been using UI for ASP.NET AJAX for over 10 years and have used the radWindow to display a page containing a details, create or edit form as follows:

window.radopen("rw/Project.aspx?Id=" + id + "&pt=" + projecttype, "PopUpWin1");

Having finally made the leap to Razor Pages, I cannot see how to adopt this technique using UI for ASP.NET Core. I can see that you have integrated Grid and Window create and edit functionality but, in this case, I cannot use a Telerik Grid and have to use an existing custom control with a table in it to render the data rows in a foreach loop. If it's possible, I'd prefer to keep this Razor Pages than MVC for a number of reasons. Please let me know if you need any further information.

Many Thanks,

Craig

Window

updated answer on 16 Jun 2021

1 answer

282 views

How to pass the current label value of the linear gauge to a template function

Hello,

I am:

- using the linear gauge

- have a method "FormatLongNumber" that formats the label value

- * need a way to access the current label value so that i can pass the data to the formatting function. the highlighted line below shows the call to the function. however i do not know how to pass the actual value

- the text that is highlighted in red is where i need to access the value of the current label

Thanks!

Bill

Html.Kendo().LinearGauge()
.Name("faultcount_#=FaultCount#")
.HtmlAttributes(new { data_bind = "value: FaultCount" })

.Scale(scale => scale
.Ranges(ranges =>
{
ranges.Add().From(27500).To(35000).Color("red");
}
).Labels(label =>
label.Visible(true).Color("white").Template("#=FormatLongNumber(value)#")).Line(line => line.Visible(true))
.Vertical(false)
.Min(0) // Set the min value of the LinearGauge.
.Max(35000) // Set the min value of the LinearGauge.
.MajorTicks(ticks=> ticks.Color("white"))
.MinorTicks(mticks=> mticks.Color("white"))
)

.Pointer(pointer => pointer

.Shape(GaugeLinearPointerShape.BarIndicator)
.Color("white")
)

Gauge

updated answer on 16 Jun 2021