Questions on UI for ASP.NET Core Forum

1 answer

104 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

202 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.2K+ 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

188 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.9K+ 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

157 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

475 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

108 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

677 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

315 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