Questions on UI for ASP.NET MVC Forum

1 answer

117 views

I'm trying to display a monthly report of how many times each user performed some action but I'm having trouble with how to filter or load the grid data. The grid has two bound columns, user name and total count, there are two drop downs for the month and year selection, and a button that triggers the "filter" operation on the datasource.

Grid:

@(Html.Kendo().Grid<My.App.UserCount>()
    .Name("UsageReportGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.DisplayName).Title("Name");
        columns.Bound(p => p.TotalCount).Title("TotalCount");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(r => r.Action("GetUsageReportData", "Reports"))
    )
)

Filter invocation:

function getUsageReport(e) {
    var monthValue = $("#reportMonth").val();
    var yearValue = $("#reportYear").val();
    var filter = { logic: "and", filters: [] };

    if (monthValue && yearValue) {
        filter.filters.push({ field: "reportMonth", operator: "eq", value: monthValue });
        filter.filters.push({ field: "reportYear", operator: "eq", value: yearValue });
        $("#UsageReportGrid").data("kendoGrid").dataSource.filter(filter);
    }
}

Controller method:

public JsonResult GetUsageReportData([DataSourceRequest]DataSourceRequest request)
{
    int year = GetYear(request);
    int month = GetMonth(request);

    List<UserCount> result = null;
    if (year > 0 && month > 0)
    {
        DateTime startDate = new DateTime(year, month, 1);
        DateTime endDate = new DateTime(year, month, DateTime.DaysInMonth(year, month), 23, 59, 59);
        result = _controller.GetUsageReport(startDate, endDate);
    }
    return this.Json(result.ToDataSourceResult(request));
}

UserCount class:

public class UserCount
{
    public int TotalCount { get; set; }
    public string DisplayName { get; set; }
}

However, when I try running this, I get this error: "System.ArgumentException: 'Invalid property or field - 'reportMonth' for type: UserCount'". I assume that is because there is no "reportMonth" property on the UserCount class but the ToDataSourceResult method attempts to use that property anyway. Is there a way to change how the mapping is done from ToDataSourceResult()? How else can I accomplish this task?

Grid

answered on 16 Nov 2021

1 answer

370 views

Tile Layout not working

I am trying to implement tile layout in my asp.net mvc5 project. the order of my kendo references in my _layout.cshtml file are:-

When i run the project the tiles are not visible and I get error:

Tiles:114 Uncaught TypeError: jQuery(...).kendoTileLayout is not a function
at HTMLDocument.<anonymous> (Tiles:114)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)

Please provide a solution.

Thanks,Mrinal

TileLayout

answered on 16 Nov 2021

0 answers

96 views

Display Customer values in Kendo grid popup for each row based upon EId

Hi,

I have 2 tables

Emplopyee

...............................

EId EName Country

1 abc India

2 def USA

Customers

........................

CId EId Cname

1 1 aaa

2 1 bbb

3 1 cc

4 2 ee

5 2 ff

right now my requirement is that

display Customer table rows on popup grid based upon EId

Ex:in grid create one hyper link after clicking of that link display customer values for that EId in PopupKendo grid

Grid

asked on 16 Nov 2021

1 answer

648 views

Tab strip tabs with one grid per tab and persistent filters breaks command.Custom buttons

Okay, here is what I have and I'll try to describe it as best I can here.

I have an ASP.NET MVC page that contains a Tab Strip (with 4 tabs). Each one of the tabs contain a kendo.grid. Each grid is basically identical looking with the only difference being the data source it is grabbing the model data. Each grid has 4 buttons defined with command.Custom.

Here is one of the tab/grid sections...

            tabstrip.Add().Text("Product A")
                 .Selected(@bWR)
                 .Content(@<text>
                    @(Html.Kendo().Grid(Model)
                        .Name("updategrid")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.Id).Hidden(true);
                            columns.Bound(p => p.AllowEditDelete).Hidden(true);
                            columns.Bound(p => p.AllowDeploy).Hidden(true);
                            columns.Command(command =>
                            {
                                command.Custom("DeployA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showDeploy");
                                command.Custom("EditA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showEdit");
                                command.Custom("EraseA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showErase");
                                command.Custom("DeleteA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showDelete");
                            }).Locked(true).HtmlAttributes(new { style = "background-color: lightgrey;" }).Width(125).MinResizableWidth(125); ;
                            columns.Bound(p => p.Product).Width(180);
                            columns.Bound(p => p.Version).Width(100);
                            columns.Bound(p => p.TargetVersion).ClientTemplate("<span title='#= TargetVersion #'>#= TargetVersion #</span>").Width(245);
                            columns.Bound(p => p.Name).Width(100);
                            columns.Bound(p => p.Description).Width(210);
                            columns.Bound(p => p.File).ClientTemplate("<span title='Click to download'><a href='https://*******/updates-blob-container/" + "#= File #'><u>#= File #</u></a></span>").Width(150);
                            columns.Bound(p => p.Created).Filterable(x => x.UI("datePicker")).Width(100);
                            columns.Bound(p => p.Pilot).ClientTemplate("#= Pilot ? '<span style=\"color: green; \">✔</span>' : '' #").Width(100);
                            columns.Bound(p => p.Deployed).Width(120);
                            columns.Bound(p => p.Success).Width(120).ClientTemplate("<font color=green><a href='" + Url.Action("Success", "UpdateQueue") + "/#= Id #'><u>#= SuccessCount # (#= kendo.toString(Success,'n0') #%)<u></a></font>");
                            columns.Bound(p => p.Failure).Width(120).ClientTemplate("<font color=red><a href='" + Url.Action("Failure", "UpdateQueue") + "/#= Id #'><u>#= FailureCount # (#= kendo.toString(Failure,'n0') #%)<u></a></font>");
                            columns.Bound(p => p.Pending).Width(120).ClientTemplate("<font color=blue><a href='" + Url.Action("Pending", "UpdateQueue") + "/#= Id #'><u>#= PendingCount # (#= kendo.toString(Pending,'n0') #%)<u></a></font>");
                        })
                        .Editable(editable => editable.Mode(GridEditMode.PopUp))
                        .Pageable(pager => pager.Refresh(true))
                        .Sortable()
                        .Scrollable()
                        .Filterable()
                        .Selectable()
                        .Resizable(resize => resize.Columns(true))
                        .HtmlAttributes(new { style = @styleGrid })
                        .DataSource(datasource => datasource
                            .Ajax()
                            .Read(read => read.Action("Read_WR", "Update").Data("additionalInfo"))
                            .PageSize(50)
                            .Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); })
                            .Sort(sort => { sort.Add("Name").Ascending(); sort.Add("Version").Ascending(); })
                        )
                        .Events(events => events
                        .DataBound("onDataBoundA")
                        .FilterMenuInit("onFilterMenuInit"))
                    )
                </text>);

This all works fine and tabbing between each grid displays the correct data and the command buttons work fine.

I am trying to introduce persistence on the filters for each grid. Based on other posts I have read here, it seems straightforward. In the onDataBound I have added the getOptions method and saved to local storage.

    function onDataBoundA(e) {
        console.log('onDataBoundA');

        // save the state of each grid.
        localStorage["wrGridOptions"] = kendo.stringify($("#updategrid").data("kendoGrid").getOptions());
}

And then, instead of the $(document).ready(function () I have a onTabSelect function that checks which tab has been selected and then does a setOptions.

    function onTabSelect(e) {
        if ($(e.item).find("> .k-link").text() == 'Product A') {
            var wrOptions = localStorage["wrGridOptions"];
            if (wrOptions) {
                console.log('Loading wr grid options');
                var grid = $("#updategrid").data("kendoGrid")
                grid.setOptions(JSON.parse(wrOptions));
                grid.dataSource.read();
            }
        }
}

The problem is that when I first visit the page and click on any of the command buttons, the appropriate dialog window displays. Then if I select a different tab and click on a command nothing happens. It has lost its click event. If I refresh the page (F5), the command button works. And if I again select another tab, the command button does not.

If I comment out the setOptions code, then the command buttons work normally again, but I lose filter persistence.

Any thoughts on what might be causing this?

Regards,

Shawn

Filter

Grid

TabStrip

answered on 15 Nov 2021

1 answer

374 views

How do I stop kendo editable from generating an empty textbox -- can i destroy on mouse leave?

Hello,

I have a kendo editable grid with one column only. this column adds a textbox rowwhen a button named 'Add' is pressed. If no text is put into the box and the user leaves the textbox an empty row is created.

We had allowed 'required' model validation to trigger the kendo inbuilt validation tooltip however it is not compliant with our UX standards.

I therefore would like to destroy the textbox on the mouse leave if the textbox is empty.

I have tried and failed to find and trigger the mouse leave event.

Here is my grid.

@(Html.Kendo().Grid(Model.MyModelProps)
.Name("myeditabletable")
.ToolBar(tools => tools.Create().IconClass("fas fa-plus").Text("Add").HtmlAttributes( new { @class = "btn btn-primary whiteText" }))
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden().ClientTemplate("#= Id #" +
"<input type='hidden' name='MyModelProps[#= index(data)#].Id' value='#= Id #' />"
);

columns.Bound(p => p.MyModelProp).Title("<b>Synonym</b>").Editable("myeditabletable").ClientTemplate("#= Name #" +
"<input type='hidden' name='MyModelProps[#= index(data)#].Name' value='#= Name #' />"
);

columns.Command(command => command.Destroy().Text(" ")
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
})
.ServerOperation(false)
)
)

Grid

TextBox

answered on 12 Nov 2021

1 answer

539 views

setting grid options with grid.setOptions on load

Hi,

At the moment I am searching for a way to set the options of the grid on load. We use the MVC grid. I know that it is not possible to set the grid options by events or datasource related functions. All examples I see are with a button. I like to set the options on document ready but the grid is undefined then.

Any idea?

Roel

Grid

answered on 12 Nov 2021

1 answer

180 views

How to use keydown event on multiple controls grab all the values to form a folder path on a label?

Hi guys,

I have a kendo window which I have controls inside the window.

The idea is to keydown what the user enters to the folderName label which creates and shows the user the name of the folder that will be created in the network drive.

see attached screen shot

so far i have this code below. But the logic is not yet correct

    function formatStringfoldername(UploadedDT) {
        debugger;
        


        var MineName = $("#SFolder").val();
        var scan_PersonsScan = $("#scan_PersonsScan").data("kendoMultiSelect").dataItems();
        var SiteCode = $("#SiteCode").data("kendoMultiColumnComboBox").dataItem();
        var descriptionMineName = SiteCode.MineName;
        var scan_EquipmentDetails = $("#scan_EquipmentDetails").data("kendoMultiSelect").dataItems();
        var scan_Projects = $("#scan_Projects").data("kendoMultiSelect").dataItems();
      
        if (descriptionMineName ==="") {
          //  var result = "N:\\Backup\\" + UploadedDT + " " + descriptionMineName;
        }
        if (MineName === "") {
       //     var result = "N:\\Backup\\" + UploadedDT + " " + descriptionMineName + " " + MineName;
        }
        else if (scan_Projects.length > 0) {
           
            $("#FolderPathstructurechange").text(`N:\\Backup\\  ${UploadedDT}   ${MineName}  ${scan_PersonsScan[0].Initials}  ${scan_Projects[0].Project.Project1}`);
        }
        else if (scan_EquipmentDetails.length > 0)
        {
            $("#FolderPathstructurechange").text(`N:\\Backup\\  ${UploadedDT}   ${MineName}  ${scan_PersonsScan[0].Initials}  ${scan_Projects[0].Project.Project1}`);
        }
       

       
       
        //var result = "N:\\Backup\\" + UploadedDT + " " + scan_PersonsScan[0].Initials + MineName;
      //  $("#FolderPathstructurechange").text($.validator.format("N:\\Backup\\" + " {0} , I'm {1} years old", [UploadedDT, "23"]));
    }

function change() {
        debugger;
        var DateScanned = $("#DateScanned").data("kendoDatePicker");
        $("#DateScanned").attr("disabled", "disabled");
        var value = DateScanned.value();
        var UploadedDT = kendo.toString(value, "yyyy-MM-dd");

        formatStringfoldername(UploadedDT);
       
    }

  @(Html.Kendo().DatePicker().Name("DateScanned") 
                                                       .Events(e =>
                                                                    {
                                                                        e.Change("change");
                                                                    }).Format("dd/MM/yyyy").ToClientTemplate())

     <div class="row">

                            @Html.Label("Short Folder Description:")
                            <div class="row mt-3">

                            </div>
                            @Html.Kendo().TextBox().Name("SFolder").HtmlAttributes(new { onInput = "formatStringfoldername();" }).ToClientTemplate()
                        </div>

any help will be appreciated.

kind regards

Tony

answered on 11 Nov 2021

0 answers

115 views

Need sample project for unit test cases in KendoMVC

Hi,

I need one sample project for writing test cases in mvc

can you please treat this as priority and help me

Installer and VS Extensions

asked on 11 Nov 2021

0 answers

114 views

Dynamic height based on pagesize

Hi,

In our grids we are implementing paging. The difficulty is that the rows does not have the same height. So when adjusting pagesize to fit the grid, the grid is out of the view of the browser. When setting pagesize to small we have big white spaces.

Any way to configure this so the pagesize is based on the height of the window?

Roel

Grid