Telerik Forums
UI for ASP.NET MVC Forum
3 answers
431 views

My requirements are such that on initial load, the tree is empty and a user can do a search which would then load the results into the treeview.  Once the view is loaded, the user will navigate the tree with the expand functions.  It's possible that the user searches for a result that is at an arbitrary depth in the tree (not a top-level node) so I query all nodes from the root down to the search result.  I need help figuring out how to set this hierarchy of nodes into the tree correctly.  Currently, only the top-level node displays with no expander.

 

The object to be displayed in tree:

public class LocationModel
 {
     public string Id { get; set; }
     public string ParentId { get; set; }
     public string Name { get; set; }
     public List<LocationModel> Children { get; set; } = new List<LocationModel>();
     public bool HasChildren => true;
 }

 

The controller:

public JsonResult GetLocationHierarchy(string locationId)
{
    if (string.IsNullOrEmpty(locationId))
        return new JsonResult();
    //string id;
    var results = new List<LocationModel>();
 
    using (var ctx = _docStore.OpenSession())
    {
        // recursively step up the tree, adding each node to the list
        while (!string.IsNullOrWhiteSpace(locationId))
        {
            var thisNode = (from l in ctx.Query<Location>()
                            where l.Id.Equals(locationId)
                            select new LocationModel
                            {
                                Id = l.Id,
                                Name = l.FriendlyName,
                                ParentId = l.ParentId
                            }).SingleOrDefault();
 
            if (thisNode != null)
            {
                results.Add(thisNode);
                locationId = thisNode.ParentId;
            }
            else
                locationId = string.Empty;
        }
    }
             
    // set the children on the nodes
    foreach (var node in results)
        node.Children = results.Where(x => x.ParentId == node.Id).ToList();
 
    //return only the top level node (hierachy is in place)
    return Json(results.Where(x=> x.ParentId == string.Empty).ToList(), JsonRequestBehavior.AllowGet);

 

The tree view:

<div id="treeview">
     <div class="demo-section k-content">
         @(Html.Kendo().TreeView()
                           .Name("treeView")
                           .LoadOnDemand(true)
                           .DataTextField("Name")
                           .Events(events => events
                               .Select("onSelect")
                               .Expand("onExpand")
                           )
                           .DataSource(dataSource => dataSource
                           .Model(m =>
                           {
                               m.Id("Id");
                               m.Field("Name", typeof(string));
                               m.Children("Children");
                               m.HasChildren("HasChildren");
                           })
                             .Read(read => read
                               .Action("GetLocationChildren", "Home", new { locationId = Model.SelectedLocation.Id })
                           )
                           )
         )
     </div>
 </div>

 

The search button method:

function onSearchButtonClick(e) {
        if ($("#SelectedLocation_Name").val() == "") {
            console.log("No SelectedLocation Name");
            return;
        }
         var u = '@Url.Action("GetLocationHierarchy")';
        $.post(u,
            {
                locationId: $("#SelectedLocation_Id").val()
            },
            function (data) {
                console.log("onSearchButtonClick returned...");
                var treeView = $("#treeView").data("kendoTreeView");
                if (treeView == null) {
                    console.log("treeView is null!");
                    return;
                }
 
                console.log(e);
 
                treeView.setDataSource(data);
              });
           }

 

 

Veselin Tsvetanov
Telerik team
 answered on 30 Oct 2019
1 answer
190 views

Is it possible to limits the columns in a list view?   Or is that done purely with css height and width?

 

Thanks

Nikolay
Telerik team
 answered on 29 Oct 2019
1 answer
244 views

 

I have developed a tri-state checkbox (supports indeterminate) and was wondering if there is any community interest in this functionality, help to improve the implementation, or support to have it incorporated into the UI.

 

Boyan Dimitrov
Telerik team
 answered on 29 Oct 2019
2 answers
178 views
Looking at the example, it uses a model "ProductService.cs" based on IDisposable.  Can you point me to documentation that talks about this and various other aspects like: why i would use it; when to call Dispose(); ect.
Taffy Lewis
Top achievements
Rank 1
 answered on 29 Oct 2019
4 answers
1.2K+ views

Hi

I am using the @Html.Kendo.DropDownList in a MVC application (.NET Core). The code works perfectly. I have a weird request though. I get my data from a backend system which cannot filter any fields that are less than 1001 entries long (long story but unfortunately true) - so this is what happens: the page loads and then calls source.read to get the first 1001 entries - this works perfectly each time. If the user then does as typeahead search in a field that is < 1001 entries the search does not work i.e. the DB returns all the entries again. If there are more that 1001 entries all is well. My question is this: is there a way for me to change the    

    .ServerFiltering(true);

to 

    .ServerFiltering(false);

at runtime? 

 

My idea is that once the initial data has been loaded I check how many entries have been received and then set the .ServerFiltering flag appropriately. 

 

Alternatively I could load all the dropdown first (before showing the page) and then have an if statement on the .cshtml file => this would/has worked but it experience is worse for the users - using ServerFiltering (true) loads the page and the users see the spinning blue thingy and know that data is being loaded (I can have up to 100 dropdown on the page (the users decide how many per page themselves)), otherwise, once they have pressed open they need to wait while the dropdown are being loaded.

 

Thank you in advance for any help given.

Ursus

 

@(Html.Kendo().DropDownList()
                                           .Name(kendoFieldName)
                                           .MinLength(3)
                                           .Value(Model.Fields[i].Values[j])
                                           .HtmlAttributes(new {style = "width: 100%"})
                                           .Filter(FilterType.Contains)
                                           .DataSource(source =>
                                           {
                                               source.Read(read =>
                                               {
                                                   read.Action("TypeAhead", "Document", new
                                                   {
                                                       docId = Model.DocId,
                                                       docType = Model.DocType,
                                                       fieldNumber = Model.Fields[i].FieldIndex, 
                                                       row = j
                                                   });
                                               })
                                               .ServerFiltering(true);
                                           })
                                    )

 

 

Ursus
Top achievements
Rank 1
Iron
 answered on 29 Oct 2019
1 answer
235 views

I'm having an issue styling a custom editor template.

I want to resize the button bar section at the bottom of the view, so that it better fits / aligns with the rest of the view controls. All of my attempts to do so thus far have resulted in various issues with the layout of the other controls.

I've read through the documentation, but haven't been able to find a solution.

The view is fairly simple, and I'm using an internal style section until I get the design firmed up.

I've attached a copy of the custom Donor view, as well as a screen shot.

Any feedback/advice would be greatly appreciated.

 

 

 

Tsvetomir
Telerik team
 answered on 28 Oct 2019
4 answers
3.6K+ views

I've just started a project using the R3 2019 version of Kendo UI for MVC, with the bootstrap v4 theme.

I've got a grid inside a bootstrap card, but setting the font style on the div that contains the grid, doesn't affect the grid font-size, where it has using past framework version using the original bootstrap theme.

What's the easiest way to reduce a specific grids font size on a page?

Thanks

Taffy Lewis
Top achievements
Rank 1
 answered on 25 Oct 2019
1 answer
673 views

I alert taking "Cannot read property 'uid' of undefined" when Cancel Button click. I am using .Editable(editable => editable.Mode(GridEditMode.PopUp).

This error's detailed exist images belows

I waiting  your reply/solve short time,

thanks telerik group.

Aleksandar
Telerik team
 answered on 24 Oct 2019
6 answers
424 views

So I've made a hundred Kendo Grids with MVC so far and I have zero success with globalization and validation. To give a little bit more details: If we look at the demo presented here https://demos.telerik.com/aspnet-core/grid/globalization and the "Unit Price" column. You can clearly enter only numerics with only 1 delimiter depending on the culture. If you try to enter any non-numerical letter, it doesn't let you. Neither does it let you insert more than 1 delimiter (",,,,,,") or the wrong delimiter. So there's some kind of "on the fly validation" going on. 

My grids don't have this. For example I have decimal columns and I can enter all letters, even non-numerics. I can type "03,,.awd923..." in a decimal column within the grid. What I have tho is culture. I think the culture I have set up works properly because when I check the kendo.cultures within JS console I can see all the info of the current culture (check image in attachments for more info). 

Here's an example of one of my grids:

@(Html.Kendo().Grid<PromoComboItemGridModel>()
    .Name("ItemGrid")
    .AutoBind(false)
    .Pageable(pager => pager.Refresh(false))
    .Filterable(filterable => filterable.Enabled(true))
    .Sortable(sortable => sortable.Enabled(true))
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
    .AllowCopy(true)
    .Scrollable(a => a.Height("auto"))
    .Resizable(resize => resize.Columns(true))
    .Navigatable()
    .NoRecords(t.GetString("No records in table"))
    .Mobile(MobileMode.Auto)
    .Editable(editable => editable.Mode(GridEditMode.InCell).Enabled(true).DisplayDeleteConfirmation(false))
    .Events(events => events.Edit("onEdit"))
    .ToolBar(toolbar =>
        {
            toolbar.Template(@<text><span id="addItem" onclick="addItem('ItemGrid')"
    style='float:left' class='btn btn-xs btn-default'>
                        <span class='k-icon k-add'></span>@t.GetString("Add new item")
                    </span></text>);
        }
    )
    .Columns(columns =>
    {
        columns.Bound(p => p.No);
        columns.ForeignKey(p => p.Type, (System.Collections.IEnumerable)ViewData["FItemTypeEnum"], "IDForSysClient", "Name").EditorTemplateName("FItemTypeEnumDropDown");
        columns.Bound(c => c.Val).Visible(false);
        columns.Bound(c => c.MaterialString).Title(t.GetString("Value")).Width(200);
        columns.Bound(c => c.Quantity);
        columns.ForeignKey(p => p.RewardType, (System.Collections.IEnumerable)ViewData["GPriceTypeEnum"], "IDForSysClient", "Name").EditorTemplateName("GPriceTypeEnumDropDown");
        columns.Bound(c => c.RewardVal);
        columns.Command(commands =>
        {
            commands.Destroy().Text(t.GetString("Delete")).HtmlAttributes(new { @class = "btn btn-xs btn-danger" });
        }).Title(t.GetString("Commands")).Width(110);
    })
    .DataSource(dataSource =>
        dataSource.Ajax()
        .ServerOperation(false)
        .Batch(false)
        .PageSize(3)
        .Model(model =>
        {
            model.Id(gridMainAlias => gridMainAlias.No);
            model.Field(gridMainAlias => gridMainAlias.No).Editable(false);
            model.Field(gridMainAlias => gridMainAlias.Type);
            model.Field(gridMainAlias => gridMainAlias.Val);
         
        })
        .Events(events =>
        {
            events.Change("ItemGridChange");
        })
    )
)
Tsvetomir
Telerik team
 answered on 23 Oct 2019
5 answers
557 views

I am having some problems with the Kendo Window and getting the content of the window being read by a screen reader (testing on NVDA).

The contents of the window is from a partial view and the window is created via jquery. The code is:

<div id="TopNavKendoWindow" style='display:none'></div>

 

$("#TopNavKendoWindow").kendoWindow();
var testWindow = $("#TopNavKendoWindow").data("kendoWindow");
testWindow.setOptions({
  content: {url:'@Url.Action("ReportIssue", "Support", new { area = "Hub" })'},
  title: 'Window Title Here',
  height: '300px',
  width: '300px'
});
testWindow.center().refresh().open();

 

When testing with a screenreader, the reader will read out the title of the window but not the content of it. 

If I change the div to have the content in it and not pass through the 'content' to setOptions, then the screenreader will readout the title and the content successfully.

<div id="TopNavKendoWindow" style='display:none'>this is a test</div>

 

$("#TopNavKendoWindow").kendoWindow();
var testWindow = $("#TopNavKendoWindow").data("kendoWindow");
testWindow.setOptions({
   title: 'Window Title Here',
   height: '300px',
   width: '300px'
});
testWindow.center().refresh().open();

 

Is anyone able to help me so that I can use the content url of setOptions and get the screenreader to read out the dynamic content?

Thanks

 

Ianko
Telerik team
 answered on 23 Oct 2019
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?