I have a listview that a user can click a button on and go to a new page. I pass the current page and the id of the selected item to the new page. When the user clicks on a link to return to the page with the listview, the page and the id are passed back. I can change the page to the correct page and select the record in the dataBound event as shown below but, I have not been able to figure out how to scroll it into view. Is there a way to do that?
function dataBound(e){
var listViewDS = $("#lvDisplay").data("kendoListView").dataSource;
var myPage = '@ViewBag.CurrentPage';
var myId = '@ViewBag.CurrentId';
if (myPage != 1){
setTimeout(() => { listViewDS.page(myPage); }, 1000);
var listView = $("#lvDisplay").data("kendoListView");
var dataItems = listView.dataSource.view();
var index = 0;
for (var j = 0; j < dataItems.length; j++) {
if (dataItems[j].Id == myId) {
index = j;
listView.select(index);
var row = e.sender.element.find("[data-uid='" + dataItems[j].uid + "']");
row.addClass("k-state-selected");
};
};
}
}
I have tried the code below but always get an error for top.
$("#lvDisplay").scrollTop($("#lvDisplay").find(".k-state-selected").position().top);
Good morning, I have the problem you see in the two images above, Is there anyone with the same problem who maybe solved it?
The problem appeared after updating from version 2022.2.802 to version 2023.2.829.
The two steppers are configured as follows:
@(Html.Kendo().Stepper() .Name("stepper") .Linear(false) .Orientation(StepperOrientationType.Horizontal) .Steps(s => { for (int i = 0; i < (Model.ClaimStatusFlows.Count()); i++) { if (Model.Claim.ZQwaFlowStatus == Model.ClaimStatusFlows[i].IdQda) { selected = true; enabled = true; } else { selected = false; enabled = false; } s.Add().Label(Model.ClaimStatusFlows[i].Code).Selected(selected).Enabled(enabled); } })) @(Html.Kendo().Stepper() .Name("act_status") .Indicator(false) .Orientation(StepperOrientationType.Horizontal) .Steps(s => { for (int i = 0; i < Model.ListActionStatus.Count(); i++) { if (Model.actions_status == Model.ListActionStatus[i].StatusValue) { s.Add().Label(Localizer[Model.ListActionStatus[i].StatusName].Value.ToString()).Selected(true).Enabled(true); } else { s.Add().Label(Localizer[Model.ListActionStatus[i].StatusName].Value.ToString()).Enabled(false); } } }) )
and as additional css there are these two things:
.k-step-text { max-width: 150% !important; } .k-step-label { max-width: 150% !important; }
Hello,
I have the following grid implementation:
<kendo-grid name="grid">
<datasource type="DataSourceTagHelperType.Ajax" auto-sync="false" server-filtering="true" server-sorting="true" page-size="10">
<transport>
<read url="@Url.Action("ReadItemList", "Users")" />
</transport>
<schema>
<model id="Id">
<fields>
<field name="UserName" type="string"><validation required="true"></validation></field>
</fields>
</model>
</schema>
</datasource>
<groupable enabled="true" />
<editable mode="inline" />
<filterable enabled="true" />
<sortable enabled="true" />
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20, 50, 100, 1000 }" />
<columns>
<column field="UserName" title="User name"></column>
</columns>
</kendo-grid>
My problem that the message shown is "UserName" is required", not "User name is required".
@(Html.Kendo().TreeList<MyModel>()
.Name("GridBuildInfo")
.Toolbar(toolbar =>
{
toolbar.Search();
})
.Columns(columns =>
{
columns.Add().Selectable(true).Width("35px");
columns.Add().Field(p => p.ComponentItemId).Title("Item Id").Width(300);
columns.Add().Field(p => p.ComponentItemDescriptionFriendly).Title("Item Description");
columns.Add().Field(p => p.ComponentSerialNumber).Title("Serial #");
})
.Resizable(true)
.Height(540)
.Filterable()
.DataSource(dataSource => dataSource
.ServerOperation(false)
.Sort(s => s.Add(a => a.HasFieldServiceableChildItems).Descending())
.Read(read => read.Url("/GetData/TestTree"))
.Model(m =>
{
m.Id(f => f.NodeNumber);
m.ParentId(f => f.ParentNodeNumber);
m.Field(f => f.HasChildItems);
//want to expand only the first row.
m.Expanded(f => f.ParentNodeNumber == null ? true : false);
})
).Events(events =>
{
events.Expand("onExpand");
})
)
<script>
function onExpand(arg) {
console.log(arg);
}
</script>
I've searched and found a variety of answers regarding binding to dynamic data. The closest I've come is using a DataTable but I can't format the data specifically using it (i.e. currency, date). Basically we want to allow our users to see their 'User Defined FIelds' in the grid, in addition to the regular items we have in a grid. I planned on converting all columns (user defined and our standard columns we have for all customers) into one column object:
public class GenericGridListItemViewModel
{
public string Name { get; set; } = null!;
public string? TextValue { get; set; }
public double? NumberValue { get; set; }
public DateTime? DateValue { get; set; }
public decimal? CurrencyValue { get; set; }
public bool Hidden { get; set; }
public UdfVariableTypes VariableType { get; set; }
}
And then in then I'd iterate through them an use the variable type for formatting the column and the hidden to define if it's hidden. The below example does not include all the possible variable types but it shows my attempt at getting something up and running. I get the correct headers on the grid but no rows are filled
The data is returned from the controller as a List<List<GenericGridListItemViewModel>>
If anyone has some insight I'd be thrilled to figure this out. Thanks, Brian.
@(
Html.Kendo().Grid <List<GenericGridListItemViewModel>>()
.Name("Grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Contacts_Read", "Contacts", new { area = "Contacts" }))
.PageSize(1000)
.ServerOperation(false)
)
.Columns(columns =>
{
int cdx = 0;
foreach(var col in Model.Data.First())
{
if (col.VariableType == UdfVariableTypes.Integer)
{
columns.Bound(l => l[cdx].NumberValue).Title(col.Name);
}
else if (col.VariableType == UdfVariableTypes.Text)
{
columns.Bound(l => l[cdx].TextValue).Title(col.Name);
}
else if (col.VariableType == UdfVariableTypes.Currency)
{
columns.Bound(l => l[cdx].NumberValue).Title(col.Name).Format("{0:C}").Hidden(Model.Data.First()[cdx].Hidden);
}
cdx++;
}
})
.Pageable()
.Sortable()
.Filterable()
.ColumnMenu()
.ToolBar(t =>
{
t.Excel();
t.Search();
})
.Reorderable(l => l.Columns(true))
)
I am porting a WebForms application to ASP.NET Core MVC, and I'm having trouble moving from the RadMenu (Telerik UI for .NET AJAX) to the menu component in Telerik UI for ASP.NET Core. After going down many blind alleys I'm stumped as to how to bind my data (an array of a custom type which includes menu text, target URLs, and more). My menu has a collection of top-level items and some of them have sub-menu items. It seems like this should be pretty straightforward but I can't find an example or documentation that explains how to bind my menu to an array.
I think I need to do something like this:
@(Html.Kendo().Menu()
.Name("MyMenu")
.DataTextField("Text")
.Action(<action>)
.DataSource(???)
.Model(model => model.Children("MenuItems"))) <<<--- This came from an example, I don't know what it does)
)
Can someone point me to a simple example?
I have a Html.Kendo().Grid ASP.Net core 7.0 project. The grid displays several columns, some of them have big text. I want the text to not wrap. The text should show '...' in the end if the text is longer than the grid column.
I have added
.k-grid td {
white-space: nowrap;
}
but still the text wraps as shown in the attached image.
new object[] { 5, 10, 20, 50, "All" }
I have a similar issue to this question [https://www.telerik.com/forums/tooltip-position-incorrect-when-scrolled-down-page], however we are using jQuery 3.7.1.
What I found was that we were using the .Animation property to enhance the UI. If I remove the .Animation property, it renders correctly when scrolling.
We are also using this with .ToClientTemplate() on the ToolTip as well.
Is this a known issue?
@(Html.Kendo().Tooltip()
.For("#image-info")
.Position(TooltipPosition.Left)
.Content("Here is my tooltip text")
.Width(250)
//.Animation(a =>
//{
// a.Open(o =>
// {
// o.Expand();
// });
//})
.ToClientTemplate())
I have a set of custom filters(Country, state, county, Missing city) and if I select all three and click a <generate report> button ,
I want to see a custom grid (Custom Editing in ASP.NET Core Grid Component Demo | Telerik UI for ASP.NET Core) with columns
Country; State; County;
and Missing City ID as textbox with validate for each as shown in image attached.
If I
1. enter the missing city ID inside the cell and click validate, a confirmation dialog should open with city ID and name.
2. confirmation dialog will have the city id with details as Name and Zipcode, as shown in image
3. Upon confirmation I want to save the city id to missing records and update the grid.
How do I achieve this using the demo from above?