Questions on UI for ASP.NET MVC Forum

1 answer

188 views

Foreign key in kendo MVC grid foreign key

I am trying to bind the datatable to the MVC grid and using ajax read to get the data. Everything is working as expected until I am trying to convert one of the column to foreignkey column.

Here is my sample code

@(Html.Kendo().Grid<dynamic>()
.Name("ReportGrid")
.Scrollable()
.Columns(columns =>
{
foreach (var column in Model.TableConfig.MasterColumns)
{
if (refColumns.Contains(column.ColumnName))
{
var refData = Model.MetaData.Where(m => m.ColumnName == column.ColumnName).ToList();

columns.ForeignKey(column.ColumnName, new SelectList(refData, "DataValue","DataText")).EditorTemplateName("GridForeignKey");

}
else
{
columns.Bound(column.ColumnName);
}
//var c = columns.Bound(column.ColumnName);
}
})

I am getting the below error

System.AggregateException: 'One or more errors occurred. ('object' does not contain a definition for 'DataTable ColumnName')'

Grid

answered on 14 Dec 2023

0 answers

64 views

Unable to use Foreignkey with DataTable binding in kendo mvc grid

Adding same question since the header is wrong and I am not able to update

I am trying to bind the datatable to the MVC grid and using ajax read to get the data. Everything is working as expected until I am trying to convert one of the column to foreignkey column.

Here is my sample code

@(Html.Kendo().Grid<dynamic>()
.Name("ReportGrid")
.Scrollable()
.Columns(columns =>
{
foreach (var column in Model.TableConfig.MasterColumns)
{
if (refColumns.Contains(column.ColumnName))
{
var refData = Model.MetaData.Where(m => m.ColumnName == column.ColumnName).ToList();

columns.ForeignKey(column.ColumnName, new SelectList(refData, "DataValue","DataText")).EditorTemplateName("GridForeignKey");

}
else
{
columns.Bound(column.ColumnName);
}
//var c = columns.Bound(column.ColumnName);
}
})

I am getting the below error

System.AggregateException: 'One or more errors occurred. ('object' does not contain a definition for 'DataTable ColumnName')'

Grid

asked on 14 Dec 2023

1 answer

76 views

Uneditable scheduler events and viewer template

Is there a way to create a custom viewer template for a scheduler event and have certain events be uneditable and open up in a viewer pop-up?

Scheduler

answered on 12 Dec 2023

2 answers

214 views

Kendo Grid Header template Deselect all checkbox

I am building a screen where user can view assignments in the grid. User can select records and those selections will be saved in the database. The checkbox is binded to "IsPreLoad" column/property. I also need to show how many records are selected in a separate label.

Issue:

User has selected 2 records from the list and saved it in database. When the user goes back to the Assignment listing page both the records will be displayed as selected(checkbox selected) . When user clicks on the header checkbox to select all records that functionality works as expected. But when they try to unselect the header checkbox. I can see the records getting unselected but immediately the grid shows previous two records as selected.

I think after unselecting all the records from the grid, the grid is again binding data from grid read action. I am not sure how to resolve this issue.

Any help is appreciated.

Grid

answered on 06 Dec 2023

1 answer

148 views

Grid Hierarchy, passing the parent ID when creating a new record in a child grid template

I have a grid for a list of locations, each row expands to show the services at that location. When I click to create a new locationService, I need to pass the locations ID to the controller. The location is the parent grid and location services are the child. I can't figure out how to do this.

    @* LOCATIONS GRID *@
    <div class="row">
        <div class="col-md-12">
            @(Html.Kendo().Grid<BiddingSite.Data.Dtos.LocationDto>
                                        ()
                                        .Name("locationsGrid")
                                        .AutoBind(false)
                                        .Columns(columns =>
                                        {
                                            columns.Bound(c => c.Id).Title("Id").Hidden();
                                            columns.Bound(c => c.Address).Title("Address").Width(25);
                                            columns.Bound(c => c.City).Title("City").Width(15);
                                            columns.Bound(c => c.StateName).Title("State").Width(10);
                                            columns.Bound(c => c.Zip).Title("Zip").Width(10);
                                            columns.Bound(c => c.Number).Title("SiteNumber").Width(10);
                                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(75);
                                        })
                                        .ToolBar(toolBar =>
                                        {
                                            toolBar.Create();
                                        })
                                        .DataSource(datasource => datasource.Ajax()
                                            .Read(read => read.Action("locations_Read", "OpenBids").Data("getAdditionalParams_Locations_Read"))
                                            .Model(model => model.Id(p => p.Id))
                                            .Create(create => create.Action("Location_Create", "OpenBids").Data("getAdditionalParams_Location_Create"))
                                            .Update(update => update.Action("Location_Update", "OpenBids"))
                                            .Destroy(update => update.Action("Location_Delete", "OpenBids"))
                                        )
                                        .Events(events => events.DetailInit("locationGridEvent_ExpandRow"))
                                        .Sortable()
                                        .Filterable()
                                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                                        .ClientDetailTemplateId("template")
        )
        </div>
    </div>
</div>


@* LOCATION SERVICES GRID *@
<script id="template" type="text/kendo-tmpl">

        @(Html.Kendo().Grid<BiddingSite.Models.ProposalUpdateLocationServiceModel>
                                ()
                                .Name("locationServicesGrid_#=Id#")
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.TrackingNumber).Title("TrackingNumber").Width(15);
                                    columns.Bound(c => c.Service).Title("Service").Width(100).Locked();
                                    columns.Bound(c => c.ServiceClass).Title("ServiceClass").Width(15);
                                    columns.Bound(c => c.ServiceType).Title("ServiceType").Width(15);
                                    columns.Bound(c => c.EquipmentType).Title("EquipmentType").Width(15);
                                    columns.Bound(c => c.MaterialType).Title("MaterialType").Width(15);
                                    columns.Bound(c => c.Quantity).Title("Quantity").Width(10);
                                    columns.Bound(c => c.ContainerSize).Title("ContainerSize").Width(10);
                                    columns.Bound(c => c.Frequency).Title("Frequency").Width(10);
                                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
                                })
                                .ToolBar(toolBar =>
                                {
                                    toolBar.Create();
                                })
                                .DataSource(datasource => datasource.Ajax()
                                    .Read("locationServices_Read", "OpenBids", new { id = "#=Id#" })
                                    .Model(model => model.Id(p => p.Id))
                                    .Model(model => model.Field(p => p.Service).Editable(false))
                                    .Create(create => create.Action("LocationService_Create", "OpenBids").Data("getAdditionalParams_LocationService_Create")) // this is where I need to pass the ID of the parent row to have the correct location
                                    .Update(update => update.Action("LocationService_Update", "OpenBids"))
                                    .Destroy(update => update.Action("LocationService_Delete", "OpenBids"))
                                )
                                .Editable(editable => editable.Mode(GridEditMode.PopUp))
                                .Events(e => e.Edit("onEdit"))
                                .ToClientTemplate()
)
</script>

Grid

answered on 06 Dec 2023

1 answer

192 views

Grid row colour

I'm upgrading an application from a 2020 version of Kendo UI to version 2023.3.1010. An issue I'm having is with a grid that has the row colour set via client templates.

For alternating rows this works, but for others the colour is made almost unnoticeable by the grids alternating row colours (image attached). In this example all rows should be tinted red (but this is dependent on the data being shown and is controlled in the model).

The grid definition is below:-

 @(Html.Kendo().Grid<WLI_Payments.Models.View_Requests_Master>
    ()
    .Name("Grid")

    .Columns(col =>
    {
        col.Bound(o => o.RequestID).Title("Ref.").ClientTemplate("<span style='#=PaymentReviewColour#'> #=RequestID#</span>");
        col.Bound(o => o.Directorate).Title("Directorate").ClientTemplate("<span style='#=PaymentReviewColour#'> #=Directorate#</span>");
        col.Bound(o => o.Site).Title("Site").ClientTemplate("<span style='#=PaymentReviewColour#'> #=Site#</span>");
        col.Bound(o => o.SessionDate).Title("Date").ClientTemplate("#=sessionDateToShowInPaymentReview#");
        col.Bound(o => o.PlannedStart).Title("Planned Start").ClientTemplate("#=PlannedStartToShowInPaymentReview#").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
        col.Bound(o => o.PlannedEnd).Title("Planned End").ClientTemplate("#=PlannedEndToShowInPaymentReview#").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
        col.Bound(o => o.MedicName).Title("Planned Practitioner").ClientTemplate("<span style='#=PaymentReviewColour#'> #=MedicName#</span>").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
        col.Bound(o => o.SessionType).Title("Type").ClientTemplate("<span style='#=PaymentReviewColour#'> #=SessionType#</span>");
        col.Bound(o => o.PointOfDelivery).Title("Point of Delivery").ClientTemplate("<span style='#=PaymentReviewColour#'> #=PointOfDelivery#</span>");
        //col.Bound(o => o.ForecastCost).Title("Planned Cost").Format("{0:C}").HtmlAttributes(new { style = "#=PaymentReviewColour#" });
        col.Bound(o => o.ForecastCost).Title("Planned Cost").ClientTemplate("#=ForecastCostToShowinPaymentReview#");
        col.Bound(o => o.CurrentPaymentApprovalPositionName).Title("Position").ClientTemplate("<span style='#=PaymentReviewColour#'> #=CurrentPaymentApprovalPositionName#</span>");
        col.Bound(o => o.CurrentPaymentApproverName).Title("Approver").ClientTemplate("<span style='#=PaymentReviewColour#'> #=CurrentPaymentApproverName#</span>");

        //col.Bound(o => o.PaymentStatus).Title("Status").HtmlAttributes(new { style = "#=PaymentReviewColour#" });
        col.Bound(o => o.RequestID).Title("").ClientTemplate("<button style='#=ShowPaymentReviewButton#' onclick='reviewRequest(#=RequestID#,\"#=CurrentPaymentApproverName#\");' class='btn btn-primary btn-xs' title='Review' data-toggle='tooltip' data-placement='top'><span class='bi bi-eye-fill' ></span></button>").HtmlAttributes(new { style = "#=PaymentReviewColour#" }).Filterable(false).Sortable(false);



    })
    .Size(ComponentSize.Small)
    .Events(e => e.DataBound("onBound"))
        .DataSource(ds => ds
        .Ajax()
        .Model(m => m.Id(p => p.RequestID))

        .PageSize(20)
        .Read(rd => rd.Action("RD_PaymentRequests_To_Review", "PaymentReview").Data("gridFilter")

        )

        )

        .Pageable(p => p.Refresh(true))
        .Sortable()

        .Filterable()

            )

The PaymentReviewColour will either be empty or "color:rgb(0,125,0);font-style:italic;";

How can I turn off the alternating row colours (or just ensure the colour displays for all rows)?

Thanks

Grid

answered on 01 Dec 2023

1 answer

128 views

Unable to use Postgre SQL Stored Procedure or Select Query using dynamic Parameterized input in the reports

Hello Community

I'm currently facing an issue with utilizing PostgreSQL stored procedures and select queries in my reports when attempting to use dynamic parameterized input. Despite various attempts, I haven't been able to achieve the desired outcome.

Specifically, I am encountering challenges when trying to incorporate dynamic parameters into my stored procedures or select queries for report generation. The reports seem to be unable to properly handle dynamic input, and I'm struggling to identify the root cause of the problem.

If anyone has experience or insights into efficiently using dynamic parameterized input with PostgreSQL stored procedures or select queries for reports, I would greatly appreciate your guidance. Additionally, any examples or best practices related to this issue would be invaluable.

Thank you in advance for your time and assistance.

Accessibility

answered on 21 Nov 2023

0 answers

96 views

Grid Filter checkbox with clienttemplate text

I have a ASP.NET MVC Grid

        @(Html.Kendo().Grid<SysViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Command(command =>
                {
                    command.Edit()
                    .Text("edit")
                    .UpdateText("update")
                    .CancelText("cancel");
                    command.Destroy().Text("delete");
                }).Width("8rem");

                columns.Bound(p => p.Id)
                    .Title("ID")
                    .Width("5rem");

                columns.Bound(p => p.CompanyId)
                    .Title("Company")
                    .ClientTemplate("#:CompanyName#")
                    .EditorTemplateName("CompanyList")
                    .Filterable(ftb => ftb.Multi(true).CheckAll(true))
                    .Width("15rem");

As you can see the column shows CompanyName, but is bound to CompanyId.

When trying to get filter with checkboxes for company, using:

Filterable(ftb => ftb.Multi(true).CheckAll(true))

I get the checkboxes with CompanyId.

Is there any way to show the CompanyName instead of the CompanyId with the checkbox filter?

Filter

Grid

updated question on 20 Nov 2023

1 answer

112 views

Chart legend markers matching series dash type

I have a kendo chart with two line series which have the same colour, but have different dash types, dotted and solid. On the chart legend, both series appear with solid lines, but I want the legend to have the dash type displayed - dotted or solid.

Using the HTMLHelper, I've tried to configure the legend using some settings within, but it was not clear from the documentation how this could be configured.
https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/chartlegenditemsettingsbuilder#chartlegenditemsettingsbuilder

            .Legend(legend =>
            {
                legend.Position(ChartLegendPosition.Top);
                legend.Item(x =>
                {
                    x.Visual("handler");
                });
            })

In the handler I can see there is options.markers.type, which is currently set to "rect", but from this API reference, there does not seem to be a dotted line type
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.markers.type

Chart

answered on 20 Nov 2023

3 answers

227 views

Scheduler - Remove Header Controls and hide heading

Hi,

I have a scheduler controle that I am showing 1 day on but I don;t want it to be a specific day I am using it to assign appointments for Monday, Tuesday, Wednesday, etc reardless of the actual date so I would like to hide the date selector, current date and the heading showing the current date as shown below: