Questions on UI for ASP.NET Core Forum

2 answers

116 views

Line Chart with Grouped Data Not Plotting Correctly

I have a line chart that I am grouping the data by a "type" field. The data set is by type, year, and amount. Most of the time, the data is in only one type. The problem is if there are multiple types available across multiple years, the chart wants to put the data on the 1st year even if it should not belong there.

In the example attached, there are 3 types. The data is for 2020 - 2023 (fiscal years). The 2nd and 3rd types are only for 2023 while the 1st type has data for 2020-2022. The chart does not show 2023 and added the 2nd and 3rd types to the 2020 category.

Is what I am doing possible with a line chart? I did try to make a scatter line work however I have not been able to make display with the data.

HTML:

@(Html.Kendo().Chart<Model>()
            .Name("chart")
            .Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))
            .SeriesColors("#FF9900", "#005757", "#95B9C7")
            .Series(series =>
            {
                series.Line(v => v.Amount).Labels(l => l.Visible(true).Format("{0:n0}"))
                    .Tooltip(tooltip => tooltip.Visible(true).Template("#= dataItem.Label #: #= kendo.format('{0:n0}', dataItem.Amount) #"));
            })
            .CategoryAxis(axis => axis.Categories(m => m.FiscalYearCode).Labels(l => l.Visible(true)))
            .ValueAxis(va => va.Labels(l => l.Format("{0:c0}")))
            .DataSource(ds =>
            {
                ds.Read(read => read.Action("Get", "Home"))
                .Group(g => g.Add(a => a.AmountType));
            })
        )

Model:

public class Model
    {
        public string FiscalYearCode { get; set; }
        public int Amount { get; set; }
        public string Label { get; set; }
        public string ObjectDescription { get; set; }
        public string AmountType { get; set; }
    }

Chart

updated answer on 02 Dec 2022

1 answer

311 views

Can you clear/remove an image from the client-side for the Image Editor?

Hi, I would like to have a button that clear/remove the selected image on the image editor. I've looked through your client API and I couldn't find how to do that?

Thank you for your help!

Patrick

ImageEditor

answered on 02 Dec 2022

1 answer

113 views

Treelist Search Children(Subitems)

Hi all,

is it possible so search a treelist and show not only the parents but also the children (subitems) of the items?

thanks

Sebastian

TreeList

answered on 02 Dec 2022

1 answer

303 views

Grid Filter Custom Conditions

Model:

Public Int Id{get;set}
Public string Desc{get;set}
Public bool IsValid;set}

In Grid column bound filter added a client Template as :

columns.Bound(c => c.isValid).Filterable(f => f
            .Cell(c => c.Template("MyBooleanCellTemplate"))
            ).ClientTemplateId("isValid").Title("Valid");


<script id="isValid" type="text/x-kendo-template">
    #if(isValid){#
        <i style='color:green;font-size:20px;' class='k-icon k-i-check'></i>
    #}else{#
        <i style='color:red;font-size:20px;' class='k-icon k-i-x'></i>

    #}#
</script>

<script>
    function MyBooleanCellTemplate(args) {
        
        var radioInput = $("<input type='checkbox'/>"); 
        var wrapper = args.element.parent();
        var inputName = kendo.guid.
        
        args.element.remove(); 

        var labelTrue = $("<label/>")
            .text("")
            .append(radioInput); 

        radioInput.attr(kendo.attr("bind"), "checked:value") // Add the "bind" attribute, specify the unique and, and set a value.
            .attr("name", inputName)
            .val("true");
        wrapper.append([labelTrue]); 
    };
</script>

This will result in a view like this

When we check the box only true values are shown
When we uncheck the box only false values are shown
When we click filter clear button shows both true and false

Our aim is to

1.We don’t need to show the Filter clear button only on this column
2.Checking the box only show true values
3. Uncheck the box show both true and false values.

How can we achieve the above behavior like customize the grid filter conditions.

Filter

Grid

answered on 01 Dec 2022

1 answer

121 views

MultiSelectFor should behave like a DropDownListFor

Hello,

I have following MultiSelectFor:

    @(Html.Kendo().MultiSelectFor(x => x.TitleAttachmentForm.AuthorsList)
                                                    .AutoBind(true)
                                                    .DataTextField("SearchValue")
                                                    .DownArrow()
                                                    .DataValueField("Id")
                                                    .DataSource(ds => ds
                                                    .Custom()
                                                    .Transport(transport => transport
                                                    .Read(r => r
                                                    .Url("?handler=AuthorPublisherRead").Data("authorDataFunction")
                                                    ))
                                                    .ServerFiltering(true)
                                                    )
                                                    .Filter(FilterType.StartsWith)
                                                    .Height(400)
                                                    .ItemTemplate("<span class=\"k-state-default \"><strong>#= (data.Title == null) ? '' : data.Title # #: data.Firstname # #: data.Lastname #</strong><p>#: data.SubDisplayValue #</p></span>")
                                                    .TagTemplate("<span>#= (data.Title == null) ? '' : data.Title # #: data.Firstname # #: data.Lastname #</span>")
                                                    )

The MultiSelectFor is binded to following remote api:

public async Task<JsonResult> OnGetAuthorPublisherRead([CanBeNull] string filterValue, [CanBeNull] string bindedvalue)

    {
      //Deleted
    }

This is used to filter for items on the remote site and get the binded value.

In my DropDownListFor I can use authorDataFunction to receive the value and the text of my DropDown:

   function authorDataFunction() {
            
            return {
                __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
                filterValue: $("#mydropdown").getKendoDropDownList().filterInput.val(),
                bindedvalue: $("#mydropdown").getKendoDropDownList().value()

            };
        }

I played around with the api, however, I am not able to receive the input text and value(s):

    function authorDataFunction() {
            var multiselect = $("#TitleAttachmentForm_AuthorsList").data("kendoMultiSelect");
          

            return {
                __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
                filterValue: multiselect.filterInput.val(),
                bindedvalue:multiselect.value()
            };
        }

Its telling me, that filterInput is undefined. also multiselect.text() does not work.

How can I access the binded value and the input in the .net core component?

MultiSelect

answered on 30 Nov 2022

1 answer

145 views

Default sort order in PivotGrid

How do you specify the default sort order of rows/columns in a PivotGrid?

My controller has this method

        public IActionResult PivotGrid()
        {
            IEnumerable<ResponseReportPivot> objResponseList = _db.ResponseReportPivot;
            var sortedResponseList = objResponseList.OrderBy(s => s.EventYear).ThenBy(s => s.Venue);
            return View(sortedResponseList);
        }

When I run the pivot I get the display in Pivot Display.jpg attached.

If I change the OrderBy clauses, I get the display in Pivot display 2.jpg.

I know the user can change the sort but I want the column display to default to be Event Year ascending and the row display to default to Venue ascending.

I haven't seen anywhere how that can be accomplished.

Here's the pivot grid code

@*For local binding*@

@using Application.Models;
@using Kendo.Mvc.Extensions;
@using Kendo.Mvc.UI;

@model IEnumerable<ResponseReportPivot>

@{
    ViewBag.Title = "Response Report Pivot Grid";
}
@Html.AntiForgeryToken()

<style>
    .k-pivot-table .k-grid-content td {
        text-align: left;
    }
</style>

<div class="k-pivotgrid-wrapper">
    @(Html.Kendo().PivotConfigurator()
        .Name("configurator")
        .HtmlAttributes(new { @class = "hidden-on-narrow" })
        .Filterable(true)
        .Sortable(true)
        .Height(570)
    )

    @(Html.Kendo().PivotGrid<ResponseReportPivot>()
        .Name("pivotgrid")
        .Configurator("#configurator")
        .ColumnWidth(120)
        .Filterable(true)
        .Height(570)
        .Sortable(true)
        .BindTo(Model)
        .DataSource(dataSource => dataSource
        .Ajax()
        .Schema(schema => schema
        .Cube(cube => cube
        .Dimensions(dimensions =>
        {
            dimensions.Add(model => model.Venue).Caption("All Venues");
            dimensions.Add(model => model.EventYear).Caption("All Years");
        })
        .Measures(measures =>
        {
            measures.Add("Count").Field(model => model.Venue).AggregateName("count");
        })
        ))
        .Columns(columns =>
        {
            columns.Add("EventYear").Expand(true);
        })
        .Rows(rows => rows.Add("Venue").Expand(true))
        .Measures(measures => measures.Values("Count"))
        .Events(e => e.Error("onError"))
        )
    )
</div>
<div class="responsive-message"></div>

<script>
    function onError(e) {
        alert("error: " + kendo.stringify(e.errors[0]));
    }
</script>

PivotGrid

answered on 29 Nov 2022

1 answer

224 views

Grid Filter bool Column custom filter

I have a bool column

public bool isValid {set;get}

I have defined a custom template and filter.

columns.Bound(c => c.isValid).Filterable(f => f
.Cell(c => c.Template("MyBooleanCellTemplate"))
).ClientTemplateId("isValid").Title("Valid").Width(75);

Also I have set default true on pageload.

I only want to see true or false value not both,

How remove the filter clear icon.

Filter

Grid

answered on 28 Nov 2022

1 answer

107 views

Telerik HTML5 Report Viewer Page R3 2022 not working with odbc DSN connection

I am using the telerik report designer to build my reports and html report viewer to display them.
When I use MySql.Data.MyqlClient with a standard connection string (server, uid etc) everything works fine.

When I use a ODBC dsn connection however, the connection works on the report builder but on the report viewer it says the following:

An error has occurred while processing Table 'table2':Unable to establish a connection to the database. Please verify that your connection string is valid. In case you use a named connection string from the application configuration file, make sure the name is correct and the connection string settings are present in the configuration file of your application.------------- InnerException -------------Keyword not supported: 'dsn'

I do have System.Data.Odbc installed as this is what I used for my db connections and this is also what the report builder uses.

Telerik Reporting v16.2

.Net core 6 (long term support)

Security

answered on 25 Nov 2022

9 answers

930 views

Foreign key column using nullable<int> not working with GridEditMode.PopUp

Hi,

I'm having an issue getting a foreign key column to persist in the grid. Here's my grid...

@(Html.Kendo().Grid<GridDataItem>(Model.GridDataItems)

.Name("gridDataItems")

.Columns(columns =>

{

columns.Bound(model => model.Name);

columns.ForeignKey(model => model.ChildDataItemId, Model.AllChildDataItems, "Id", "Value");//.EditorTemplateName("_ForeignKeyDropDown");

columns.Command(command =>

{

command.Edit();

}).Width(172);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.ServerOperation(false)

.Model(model =>

{

model.Id(p => p.Id);

})

)

Here's the controller...

public class GridTestController : Controller

{

public IActionResult Index()

{

var viewModel = new GridTestModel

{

GridDataItems = new List<GridDataItem>

{

new GridDataItem

{

Id = 1,

Name = "Record 1",

ChildDataItemId = 2

},

new GridDataItem

{

Id = 2,

Name = "Record 2",

ChildDataItemId = 3

},

new GridDataItem

{

Id = 3,

Name = "Record 3"

}

};

return View(viewModel);

}

and here's the Model...

public class GridTestModel

{

public List<GridDataItem> GridDataItems { get; set; }

public List<ChildDataItem> AllChildDataItems

{

get

{

return new List<ChildDataItem>

{

new ChildDataItem

{

Id = 1,

Value = "Option 1"

},

new ChildDataItem

{

Id = 2,

Value = "Option 2"

},

new ChildDataItem

{

Id = 3,

Value = "Option 3"

}

};

}

public class GridDataItem

{

public int Id { get; set; }

public string Name { get; set; }

public int? ChildDataItemId { get; set; }

public ChildDataItem ChildDataItem { get; set; }

}

public class ChildDataItem

{

public int Id { get; set; }

public string Value { get; set; }

}

The values for Option 1 and Option 2 can be updated fine (as they're preset with a non-null value) but I'm not able to select a value for the Option 3 record nor am I able to set the foreign key value (ChildDataItemId) for a new record.

Anyone an idea as to why? I've also tried a custom editor template for the drop down field using .ValuePrimitive(true) but this has no effect.

Thanks
Stuart.

Grid

answered on 23 Nov 2022

1 answer

903 views

Using FilterMenuInit causes cannot read properties of null in Kendo Grid

We're using Kendo Grids for our .NET Core application. We display checkbox lists in the column headers so the user can filter in the Kendo Grid. The problem is that the items in these checkbox list are not sorted (even if we pass sorted items to it).

We tried to add a fix by adding the following FilterMenuInit client side event to try to sort the checkbox list column header items

function onFilterMenuInit(e) {
        var filterMultiCheck = this.thead.find("[data-field='" + e.field + "']").data("kendoFilterMultiCheck");

        if (filterMultiCheck) { 
            filterMultiCheck.container.empty();
            filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });
            filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
            filterMultiCheck.createCheckBoxes();
        }
}

The fix is causing the following issue:

VM4956:3 Uncaught TypeError: Cannot read properties of null (reading 'Id')
    at eval (eval at filter (kendo.min.js:9:168981), <anonymous>:3:25)
    at r.filter (kendo.min.js:9:169113)
    at r.process (kendo.min.js:9:171128)
    at init._queryProcess (kendo.min.js:9:190070)
    at init.query (kendo.min.js:9:191247)
    at init._query (kendo.min.js:9:191778)
    at init.filter (kendo.min.js:9:192662)
    at init._filter (kendo.min.js:9:918467)
    at HTMLFormElement.r (website.min.js:14:21692)
    at HTMLFormElement.dispatch (website.min.js:14:57771)

This is happening on the Kendo side. Is this a bug? Is there an alternative way to sort these checkbox list in the column headers?

Filter

Grid

answered on 23 Nov 2022