Questions on UI for ASP.NET Core Forum

1 answer

123 views

Documentation for Html.Kendo().UploadBlobs method

I am reviewing some code and I am trying to find documentation for the UploadBlobs method with no luck.

Could someone provide a link?

Upload

answered on 25 Jun 2021

1 answer

170 views

Unique Name Generation

Hello,

How do you generate a unique name for a control that is part of a template? I have a DropDownList in my template for a TaskBoard but only the first instance works since the name of each is the same I assume. The browser warns me too that that is the case. Appreciate any help.

-Scott

TaskBoard

answered on 25 Jun 2021

1 answer

108 views

Showing selected row when resizing the .k-grid-content

When I first show results I have the grid height set to screen height. The grid is scrollable. What I want to happen is that when I reduce the height from say 750px to 200px is for that row to show in the top of the new small view port. When selecting a row all the information displays below the grid regarding that row. Further info, say I pick row 18 and when I make the k-grid-content class's height shorter can I then make row 18 show at the top of that.Thanks, John

Grid

answered on 24 Jun 2021

1 answer

226 views

MultiSelect Drop Down for TagHelper

How do you get the drop down list on the multiselect using the tag helper? In the examples on this page the drop down list is only appearing using the html helper.

MultiSelect

answered on 24 Jun 2021

1 answer

1.3K+ views

Get enum value in Kendo grid

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

208 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

2.0K+ 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

170 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

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