Telerik Forums
UI for ASP.NET MVC Forum
5 answers
472 views

Hi there,

I've been searching and reading for 2 days now and I've some doubts about the TreeView that I need to clarify.

1. The tree will have three levels of deep

    + Contenedor "zst"
    |
    | --- Bulto 1. Largo: 2.6 Ancho: 3.6 Alto: 5.3
    |     |
    |     --- Producto: "Table"    Cantidad: 32
    |     --- Producto: "Computer" Cantidad: 25
    |
    | --- Bulto 2. Largo: 1.3 Ancho: 8.3 Alto: 2.2
    |     |
    |     --- Producto: "Mouse"    Cantidad: 8
    |     --- Producto: "Keyboard" Cantidad: 7
    |
    + Contenedor "trx"
      |
      |
      --- Bulto 1. Largo: 4.2 Ancho: 13.1 Alto: 15.7
          |
          --- Producto: "Display"    Cantidad: 7.7
          --- Producto: "Battery"    Cantidad: 2.3


What follows are questions that I don't have answers so far and I don't know whether it's possible to achieve using this widget

1. I need to apply a different template to every level: 
   a) In the first level (Contenedor) I need to show the word "Contenedor" plus a string specified by the user
   b) In the second level (Bulto) I need to show the word "Bulto" plus "Largo" followed by a number then the word "Ancho" followed by a number and the word "Alto" followed by a number
   c) In the third level (Producto) I need to show the word "Producto" plus a string then the word "Cantidad" followed by a number

2. In every level of the tree the user can edit the values:
   a) In the first level (Contenedor) the user can change the description (a string)
   b) In the second level (Bulto) the user can change the "Largo" (decimal), "Ancho" (decimal) and "Alto" (decimal)
   c) In the third level (Producto) the user can change "Cantidad" (decimal).

3. The TreeView must support drag & drop between it and a Grid widget so the user can drop the items from the tree in the grid and items from the grid in the Tree.

4. How do I get the model associated to a node in the Tree? If possible I would like to keep in the datasource the same members of the classes defined in the backend for each node in the Tree. I.e.

When I get the model of a node in the second level (Bulto) I would like to get this in the JavaScript object:

{
   ID: 1,
   NumeroBulto: 2,
   Largo: 43,
   Ancho: 23.3,
   Alto: 2.1,
   Volumen: 4.2,
}

 

Instead of the TreeViewItem object.

 

Here's my model

01.public class TreeModel
02.    {
03.        public List<ContenedorModel> Contenedores { get; set; }
04.    }
05. 
06.    public class ContenedorModel
07.    {
08.        public Guid ID { get; set; }
09.        public string Descripcion { get; set; }
10.        public List<BultoModel> Bultos { get; set; }
11.    }
12. 
13.    public class BultoModel
14.    {
15.        public Guid ID { get; set; }
16.        public int NumeroBulto { get; set; }
17.        public decimal Largo { get; set; }
18.        public decimal Ancho { get; set; }
19.        public decimal Alto { get; set; }
20.        public decimal Volumen { get; set; }
21.        public List<ProductoTreeModel> Productos { get; set; }
22.    }
23. 
24.    public class ProductoTreeModel
25.    {
26.        public Guid ID { get; set; }
27.        public string Descripcion { get; set; }
28.        public decimal Cantidad { get; set; }
29.    }

 

Here's my view

01.@(Html.Kendo().TreeView()
02.    .Name("treeView")
03.    .TemplateId("treeview-template-contenedor")
04.    .BindTo((IEnumerable<ContenedorModel>)Model.TreeModel.Contenedores, (NavigationBindingFactory<TreeViewItem> mappings) =>
05.    {
06.        mappings.For<ContenedorModel>(binding => binding.ItemDataBound((item, contenedor) =>
07.        {
08.            item.Text = $"Contenedor: {contenedor.Descripcion}";
09.        })
10.        .Children(x => x.Bultos));
11. 
12.        mappings.For<BultoModel>(binding => binding.ItemDataBound((item, bulto) =>
13.        {
14.            item.Text = $"Bulto: {bulto.NumeroBulto}";
15.        })
16.        .Children(x => x.Productos));
17. 
18.        mappings.For<ProductoTreeModel>(binding => binding.ItemDataBound((item, producto) =>
19.        {
20.            item.Text = producto.Descripcion;
21.        }));
22.    })
23.    .DragAndDrop(true)
24.)

 

Here's the template

 

1.<script id="treeview-template-contenedor" type="text/kendo-ui-template">
2.    <span style="color:blue">#: item.Text #</span>
3.    <button><span class='k-icon k-edit' /></button>
4.</script>

 

However the way I use the template here is applied to all levels.

 

Can anyone please help me with this?

 

Thank you.

Petar
Telerik team
 answered on 02 Jul 2019
3 answers
185 views

Currently I read the data needed for the ComboBox like:

            $(domNode).kendoComboBox({
                dataSource: {
                    transport: {
                        read: function(options) {
                            setReadOptions && setReadOptions(options);
                            const filters = that.getDataSourceData(options.data);
                            const serviceUrl = `${trackUrl.includes('?') ? trackUrl + '&' : trackUrl+'?'}${that.encodeData(filters)}`;
                            ajax.get<any>(serviceUrl)
                                .then((returnObj) => {
                                    let comboBoxOptions = returnObj;
                                    if (filterOptions) {
                                        comboBoxOptions = filterOptions(returnObj);
                                    }
                                    options.success(comboBoxOptions);
                                }).fail(() => {
                                    options.error("Could not retrive data for selected document Id.");
                                })
                        },
                        prefix: ''
                    },
. . . . .

Now there is the possibility of the url that is used could change. Based on that changed url I would like to set new options with a call to something like  I do for when the ajax method returns

                                    if (filterOptions) {
                                        comboBoxOptions = filterOptions(returnObj);
                                    }
                                    options.success(comboBoxOptions);

I know I can refresh the comboBox with something like

                this.comboBox.dataSource.read()

But I don't know how to also affect the options for the comboBox?

 

Kevin

Ivan Danchev
Telerik team
 answered on 01 Jul 2019
3 answers
768 views

How do I remove rows? Currently I do something like:

                    e.workbook.sheets.forEach(function (sheet) {
                        sheet.rows = sheet.rows.filter(r => r.type != "group-header");
                    });
                    e.sender.saveAsExcel();

But it seems that the saveAsExcel() function is ignoring the rows that I have filtered out?

Tsvetomir
Telerik team
 answered on 01 Jul 2019
1 answer
177 views

     I've got a bunch of methods client-side that build up a list of all the filters to apply to a grid. However, I'm told it is possible to pass this list over to the server in order to have better control over the filters? In my case, I am trying to create a filter that looks like this:

`(cond || cond || cond) && cond`

I've noticed that Kendo seems to only support cases where it is `cond || cond` or `cond && cond`. Unless there is a way to make the above condition work, how can I pass my filters to the server and the `DataSourceRequest` in order to have that further control?

Georgi
Telerik team
 answered on 01 Jul 2019
6 answers
1.3K+ views

Hi,

I am new to using KendoUI and am sorry if this has been answered before but I cannot seem to find an answer that works for me. I have a search button and a grid on the page. I am taking to d.3 in the backend (a DMS system) using library calls. The user enters s/he search query in the field and I call the Read method in my Controller to get the data from d.3. What is happening is that I am getting the data back in the request but the grid is not updating.

Here is my MVC code:

@(Html.Kendo()
    .Grid(Model)
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Read(r => r.Action("Read", "Search"))
    )
    .Filterable(f => f.Mode(GridFilterMode.Row))
    .Columns(columns =>
    {
    {
        columns.Bound(c => c.DocumentType)
            .Filterable(false)
            .Width("150px")
            .Title(@Localizer["SearchTableHeaderDocumentType"]);

        columns.Bound(c => c.DocumentTypeLong)
            .Filterable(true)
            .Title(@Localizer["SearchTableHeaderDocumentTitle"])
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));

    })
    )

I have a button on the page that does the submit using the following code:

   var search = $("#search-field").val();
    if (!search) return;
    if (search.trim() === "") return;
    var dataSource = $("#grid").data("kendoGrid").dataSource;
    var parameters = {
        searchFor: search
    }

    // call the search passing the parameters -> searchFor is the parameter name on the SearchController/Read method
    dataSource.read(parameters);

 

This calls my Read method in the SearchController.cs. The Search method creates the data that is supposed to be passed back to the Grid: 

 

            // setup your result for KendoUI
            DataSourceResult result = model.Entries.ToDataSourceResult(request);

            // return
            return Json(result);

I also see the data structure in the response if I check the event after the RequestEnd:

            .Events(events => events.RequestEnd("onRequestEnd"))

or if I check the response in Chrome - this is what I get:

+0Object {DocumentId: "GD00000016", DocumentType: "D3CHG", DocumentTypeLong: "D.3 :: Fehler/Request", …}Object
+1Object {DocumentId: "GD00000148", DocumentType: "DEPSU", DocumentTypeLong: "Abteilung :: Leitung", …}Object
+2Object {DocumentId: "GD00000149", DocumentType: "DEPSU", DocumentTypeLong: "Abteilung :: Leitung", …}Object
+3Object {DocumentId: "GD00000150", DocumentType: "DEPSU", DocumentTypeLong: "Abteilung :: Leitung", …}Object
+4Object {DocumentId: "GD00000266", DocumentType: "IDOCU", DocumentTypeLong: "Infrastruktur :: Handbuch", …}Object
+5Object {DocumentId: "GD00000267", DocumentType: "IDOCU", DocumentTypeLong: "Infrastruktur :: Handbuch", …}Object
+6Object {DocumentId: "GD00000268", DocumentType: "IDOCU", DocumentTypeLong: "Infrastruktur :: Handbuch", …}Object
+7Object {DocumentId: "GD00000269", DocumentType: "CKNOW", DocumentTypeLong: "Global :: Wissen", …}Object
+8Object {DocumentId: "GD00000277", DocumentType: "IDOCU", DocumentTypeLong: "Infrastruktur :: Handbuch", …}Object

 

very odd. 

 

Maybe this helps: If I return dummy data from the Index method (I am currently returning an empty list  => return View(new List<SearchEntryModel>());) before using the Read method from the grid everything magically works (except that the number of entries is limited to the return from the Index method). 

 

Sorry about the weird explanation but I don't know how to better explain it. 

 

Thank you in advance

Martin



 

 

n/a
Top achievements
Rank 1
 answered on 01 Jul 2019
5 answers
846 views
Kendo grid inline edit mode resulting an editable row with narrow controls which don't have any kendo styles. Please let me know the possible solution  to resolve this.
Eyup
Telerik team
 answered on 01 Jul 2019
6 answers
7.0K+ views
Hi,

I have an application that is strictly used in the central time zone.  Our web server is on pacific time zone.  Data is passed to the web server from the central time zone and I want to display it this way.  Every non-kendo control shows the time as is.  The kendo grid is showing the date with an adjustment of +2 hours so it appears there is a conversion - which I do not want.

My column format is as follows:
c.Bound(g => g.LastUpdated).Format("{0:MM/dd/yyyy hh:mm tt}")

Is it possible to tell the grid to show the date/time "as is"?

Thanks,
David A.
Tsvetomir
Telerik team
 answered on 28 Jun 2019
1 answer
112 views
I have been searching for an hour or so to find the code used in the Chart API demo and I could not find it in the github for the rest of the demos.  I am wondering where that code is located.
Viktor Tachev
Telerik team
 answered on 27 Jun 2019
10 answers
531 views
Having grid with 2 foreign key columns. Grid shows them as is should - value from foreign column (matched by ID)

But in edit mode I have Integer field instead of drop down in one of them.

Models and EditTemplate absolutely identical (as I see)
Problem is in Teachers

Here is models

   [DisplayName("Level")]
        [UIHint("Level")]
        public int LevelId
        {
            get;
            set;
        }

        [DisplayName("Teacher")]
        [UIHint("Teacher")]
        public int TeacherId
        {
            get;
            set;
        }

here is Level.cshtml
@model object
           
@(
 Html.Kendo().DropDownListFor(m => m)
                        .BindTo((System.Collections.IEnumerable)ViewData["levels"]).DataTextField("Title").DataValueField("Id")
)


here Teacher.cshtml
@model object
           
@(
 Html.Kendo().DropDownListFor(m => m)
                            .BindTo((System.Collections.IEnumerable)ViewData["teachers"]).DataTextField("Name").DataValueField("TeacherId")
)

also
ViewData["teachers"]) populated as
  var dataContext = new EntitiesModel();
            var items = dataContext.Peoples
                        .Select(c => new TeachersViewModel
                        {
                            TeacherId = c.HumanId,
                            Name = c.nme + " " + c.Surname,
                            OccupationId = c.OccupationId
                        }).Where(p => p.OccupationId == 2)
                        .OrderBy(e => e.Name);
            ViewData["teachers"] = items;
            ViewData["defaulteacher"] = items.First();

Still do`nt get why one of column don want to be dropdown
GarfieldTech
Top achievements
Rank 1
 answered on 26 Jun 2019
1 answer
729 views

Hi

I have based the following code on Grid / Custom command
https://demos.telerik.com/aspnet-mvc/grid/custom-command


@(Html.Kendo().Grid<MyProject.Models.Profiles>().
    Name("MyTable").
    Columns(columns =>
    {
        columns.Command(command => {
            command.Custom("Edit Details").Click("EditDetails");
        }).Width(120);
    })
    .HtmlAttributes(new { style = "height: 600px" })
    .BindTo(Model)
    .Scrollable()
    .Groupable()
    .Sortable()
    .Filterable()
)
 
<script>
    function EditDetails(e) {
        e.preventDefault();
    }
</script>

When I run the code I get the following error in the Developer Console(Edge & Chrome)
Uncaught ReferenceError: EditDetails is not defined

I have been unable to find the problem, any suggestions?

Is there a way that i can call a controller method without going through javascript?

 

Thanks

Marin Bratanov
Telerik team
 answered on 26 Jun 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?