Questions on UI for ASP.NET Core Forum

2 answers

327 views

JQuery conflict

Hi,

I am trying to use Kendo UI ASP.NET core component with the theme I puchased:

https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0

I can't get it working due to Kendo UI is using JQuery and the theme is using JQuery core and JQuery UI.

Has anyone experience integrating themes with the asp.net core and hot to isolate the jquery. Kendo UI usings @Html tag so I can't use JQuery noconflict.

thanks,

General Discussions

answered on 10 Mar 2020

1 answer

544 views

Responsive Menu

Using Bootstrap 4 and navbar class, built a nice little menu that goes across the top on wide screens, then collapses on small screen. But the real magic is that the menu automatically responds and goes vertical when on small screen. The problem is it is not really themeable the way the Kendo widgets are (and something I really want)

I cannot for the life of me figure out how to get a menu to flip it's orientation from horizontal to vertical when the screen size shrinks. I've tried a Responsive Panel, but can't find any events to trigger off of. I've also tried a Drawer and Toolbar. Both unsatisfactory.

Anyone else have a suggestion? This seems like real core functionality for a Menu, but I'm completely stumped.

Menu

answered on 06 Mar 2020

1 answer

324 views

Foreign key filter value as default value for new row

Hello,

How to set the Foreign key filter value as default value for a new row?

If I have filtered my grid (see picture) and I click add new I want to have that filter value in my dropdownlist of the new row as the default value...

robert

Grid

answered on 06 Mar 2020

2 answers

92 views

Working Example - Drag n drop with in-cell editing

The project listed under the demo has so many holes in it that there is no way anyone has had success trying to copy it.

This is the example I'm trying to get working. I want this to work with Cell Editing and Drag and Drop. Do you have a working code set?

https://demos.telerik.com/aspnet-core/treelist/editing-incell

TreeList

answered on 04 Mar 2020

6 answers

152 views

Pull Value from Control into Model

My TreeList is generally working. However, when a user selects a Custom Command Button, I need to populate the Model with that Group.Id key value. How is this accomplished? As shown, the "function goDetail(e)" code works. However, if I remove the comment the last 2 lines the TreeList doesn't build... of course, I don't get any feedback as to what is wrong. That would be nice. But, this is where I'm trying to pull the dataItem.Id into the Model. How can I get this to happen? Thanks.

<script id="icon-template" type="text/x-kendo-template">

<div class='group-icon'

style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>

<div class='group-name'>#: Name #</div>

</script>

@(Html.Kendo().TreeList<Group>()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Command(c => { c.Custom().Text("Select")

.Name("selectButton").ClassName("selectButton")

.Click("goDetail"); })

.Width(Glossary.Portal.ButtonWidth);

columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(350);

})

.DataSource(dataSource => dataSource

.Read(read => read.Action("IndexJson", "Groups").Data("getData"))

.ServerOperation(false)

.Model(m =>

{

m.Id(f => f.Id);

m.ParentId(f => f.ParentId);

m.Expanded(true);

m.Field(f => f.Name);

}).Events(events => events.Error("onError"))

)

.Events(evt => evt.DataBound("treeListBound")))

<script type="text/javascript">

function getData() {

return @Html.Raw(Model.GetIndexData());

}

function goDetail(e) {

e.preventDefault();

alert("goDetail: " + e.toString());

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

alert("goDetail: " + dataItem.id);

@*@Model.Item.GroupId = dataItem.id;

alert("goDetail: " + @Model.Item.GroupId);*@

}

function treeListBound(e) {

var treeList = e.sender;

var items = treeList.items();

for (i = 0; i < items.length; i++) {

var dataItem = treeList.dataItem(items[i]);

.....

TreeList

answered on 04 Mar 2020

3 answers

166 views

Removing "Or" option from filter

If I have a column filter configured like this:-

c.Bound(p => p.CreatedDateTime)
.Title("Created")
.Filterable(f => f
.Operators(o => o.ForDate(d => d.Clear().IsGreaterThanOrEqualTo("On or after").IsLessThan("Before")))
.UI(GridFilterUIRole.DateTimePicker)
)

It shows a dropdown for "And" and "Or" between the two filter options. In my case, this doesn't make sense.

Is there a way to specify the options or remove the dropdown?

Grid

answered on 03 Mar 2020

1 answer

164 views

Html.Kendo().Grid Need to show Dynamic name of column as per Model

Hello Support Team, I need to show dynamic name of column as per model value from backend.
in Html.Kendo().Grid.
can you please let me that what to do.
Thanks,

Grid

answered on 03 Mar 2020

3 answers

332 views

Virtual scrolling only displays portion of data

Hello,

I have a grid with an ajax data source and ServerOperation set to true. The data source has roughly about 1.5 million entries and I want to display them with virtual scrolling enabled so that only the relevant portion of the data is loaded into the DOM.

Now the problem is that only about half of the available data is shown in the grid when scrolled to the end. See picture "missing_data.png" for clarification.

I tried to troubeshoot the issue myself and came up with this KB article: Virtual Scrolling - Setting the scrollbar, but I cannot get all elements to show with either hint. Apparently a height of 36px is the minimum for a grid row and with that value not all rows are shown. Disabling word-wrap has no effect. I noticed the maximum amount of entries displayed when scrolled to the end changes with different themes and changes sometimes when I scroll to the bottom repeatedly.

Now my question is how can I reliably show all rows and keep virtual scrolling? Currently my grid looks like this:

@(Html.Kendo().Grid<LogEntry>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.EventDateTime)

.Title("Date").Width(100)

.Format("{0: dd.MM.yyyy HH:mm:ss}");

//.Filterable(config => config

// .UI("DateTimeFilter")

// .Cell(cell => cell

// .Template("DateTimeFilterRow")));

columns.Bound(c => c.EventLevel).Title("Level").Width(100);

columns.Bound(c => c.MachineName).Title("Hostname").Width(150);

columns.Bound(c => c.EventMessage).Title("Message").Width(600)

.HtmlAttributes(new { @class = "nowrap" });

//columns.Bound(c => c.StackTrace).Hidden();

//columns.Bound(c => c.ErrorMessage).Hidden();

})

.ColumnMenu(config => config

.Sortable(false)

.Columns(true)

.Enabled(true))

.Sortable()

.Groupable()

.Filterable(config => config

.Extra(false)

.Mode(GridFilterMode.Row)

.Operators(config => config

.ForDate(config => config

.Clear()

.IsGreaterThanOrEqualTo("Ist nach")

.IsLessThanOrEqualTo("Ist vor")

.IsEqualTo("Ist gleich"))

.ForString(config => config

.Clear()

.IsEqualTo("Ist gleich")

.IsNotEqualTo("Ist ungleich")

.StartsWith("Beginnt mit")

.EndsWith("Endet mit")

.Contains("Enthält")

.DoesNotContain("Enthält nicht")

.IsNullOrEmpty("ist NULL"))))

.Scrollable(config => config

.Height("auto")

//.Endless(true)

.Virtual(true))

//.ClientDetailTemplateId("log-detail")

.Resizable(config => config.Columns(true))

.Reorderable(config => config.Columns(true))

.Pageable(config => config

.Refresh(true)

.Numeric(true))

//.Events(events => events

// .DetailExpand("onDetailExpand"))

.DataSource(config => config

.Ajax()

.PageSize(200)

.ServerOperation(true)

.Read("Logs_Read", "Home")

.Events(events => events

.Error("error_handler"))

)

Grid

answered on 02 Mar 2020

1 answer

1.1K+ views

Handling errors/redirects in DataSource Read

When binding to remote data:-

.DataSource(d => d
.Ajax()
.Read(r => r.Action("Index", "Books", new { id = Model.Id }))

If an error occurs when calling the controller method, there is no error message and the grid displays no results, so the user doesn't know what's going on.

I'm aware that I can catch errors in my controller method and do something with the DataSourceRequest, however, the particular case I'm experiencing is when a session has been idle and the authentication has timed out, calling the controller method wants to redirect me to the login page.

Usually this would be OK, however, as it's being called in the AJAX handler by the grid, it just fails silently.

How can I catch the error and display it, or ideally, catch the redirect and navigate to the login page?

Grid

answered on 02 Mar 2020

2 answers

150 views

Replace displayed value in Edit Mode

Hey guys,

I have a simple telerik grid in my asp.net core app which basically consists of two columns:"Activity", "Share of total".

"Share of total" is the only (inCell) editable column and consists of percentage values between 0 and 100.

Now I have the following problem, which I haven't been able to solve yet:

If not in edit mode, the cells of the "Share of total" should display "0"-Values just normal. But when entering edit-mode, I want those zeros to not be displayed in the input-field. Instead it should just be empty, so that new values can easily be entered.

Especially in internet explorer, the cursor is positioned in front of the zero, which leads to entering for example 20 instead of 2, which is quite annoying for quick inputs.

Do you have a solution for that?

Best regards

Grid

answered on 28 Feb 2020