Telerik Forums
UI for ASP.NET Core Forum
6 answers
109 views

Hello,

In my grid, i have a nested object and i would like to add the filterable feature on it (so it doesn't display [] object). I followed this tutorial:

- https://demos.telerik.com/aspnet-core/grid/filter-multi-checkboxes

 

The call to the web API is done, but I keep having a javascript error after the call 

Uncaught TypeError: e.slice is not a function

 

How can i fix this ? Thank you very much

Here is my code so far: 

 

@(Html.Kendo().Grid<EnginViewModel>()
    .Name("enginGrid")
    .Columns(col =>
    {
         col.Bound(c => c.Famille) //EnginViewModel.Famille
            .Title("Famille")
            .Filterable(ftb => ftb.Multi(true).Search(true)
                .DataSource(d => d.Read(r => r.Action("Familles", "EditorTemplate").Data("{ field: 'Nom'}"))))
            .EditorTemplateName("Famille")
            .ClientTemplate("#= data ? data.FamilleDesignation : \"\" #");
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create().IconClass("fa fa-plus").Text(" Créer un engin");
    })
    .Sortable(true)
    .Filterable(f =>
    {
        f.Mode(GridFilterMode.Menu);
    })
    .DataSource(ds => ds.Ajax()
        .ServerOperation(true)
        .Model(m =>
        {
            m.Id(f => f.Id);
        })
        .Events(evt => evt.Error("onGridDatasourceError"))
        .Read(a => a.Action("Read", "Engins").Type(HttpVerbs.Get))
        .Create(a => a.Action("Create", "Engins").Type(HttpVerbs.Post))
        .Update(a => a.Action("Update", "Engins").Type(HttpVerbs.Put))
        .Destroy(a => a.Action("Delete", "Engins").Type(HttpVerbs.Delete)))
)
Tsvetina
Telerik team
 answered on 16 Jan 2019
2 answers
184 views
I have an incremental search working in a dropdownlist and I would like to show a more distinct spinning icon or image when the control is making the Ajax call to the controller.  Is there a way to change this?  Can a style be changed?  In a perfect world showing a bubble hint with "Searching would be ideal.
Reid
Top achievements
Rank 2
 answered on 14 Jan 2019
2 answers
83 views

Hello,

I'm able to set the color of the points on the chart (red and blue). I'm unable to get rid of the black-center of the points by setting the background color.

How do I set both color of points and background color (center of point) to same color?

Thanks.

js code:

----------

<script>
        function getPointColor(point)
        {
        if (point.dataItem.Name === "Left Eye Sensor")
        {
            return "#af3d3c";
        }
        else
        {
            return "#3f48cc";
        }
    }
</script>

@(Html.Kendo().Chart<KendoScatterChart.Models.ChartScatterPlotPoint>(Model)
            .Name("pressureDataChart")
            .Legend(legend => legend
                .Position(ChartLegendPosition.Bottom)
            )
            .ChartArea(chartArea => chartArea
                .Background("transparent")
            )
            .SeriesDefaults(seriesDefaults =>
                seriesDefaults.Scatter().Labels(labels => labels.Visible(true)).Markers(markers => markers.Size(8))
            )
            .DataSource(dataSource => dataSource
                .Group(group => group.Add(model => model.Name))
            )
            .Series(series =>
            {
                series.Scatter(model => model.X, model => model.Y).ColorHandler("getPointColor").Markers(markers => markers.Background("getPointColor"));
            })
            .XAxis(x => x
                .Date()
                .Title(title => title.Text("Date"))
            )
            .YAxis(y => y
                .Numeric()
                .Title(title => title.Text("Pressure [mmHg]"))
            )
            .Zoomable()
            .Pannable()
)

C# code:

------------

    public class ChartScatterPlotPoint
    {
        public DateTime X { get; set; }
        public double Y { get; set; }

        public string Name { get; set; }

        public string Color { get; set; }

        public ChartScatterPlotPoint(DateTime dateTime, double v, string name, string color)
        {
            this.X = dateTime;
            this.Y = v;
            this.Name = name;
            this.Color = color;
        }
    }

    public class TempModel : ModelBase
    {
        // For KendoUI plotting.
        public List<ChartScatterPlotPoint> DataPointList { get; set; }
        public List<string> DateList { get; set; }

        public string Name { get; set; }

        public TempModel()
        {

// for demo - color set by js-method.
            DataPointList = new List<ChartScatterPlotPoint>(){
                new ChartScatterPlotPoint(DateTime.Parse("12/18/2018"), 1, "Left Eye Sensor", "blue"),
                new ChartScatterPlotPoint(DateTime.Parse("12/19/2018"), 2, "Left Eye Sensor", "blue"),
                new ChartScatterPlotPoint(DateTime.Parse("12/20/2018"), 3, "Left Eye Sensor", "blue"),
                new ChartScatterPlotPoint(DateTime.Parse("12/18/2018"), 1.5, "Right Eye Sensor", "green"),
                new ChartScatterPlotPoint(DateTime.Parse("12/19/2018"), 2.5, "Right Eye Sensor", "green"),
                new ChartScatterPlotPoint(DateTime.Parse("12/20/2018"), 3.5, "Right Eye Sensor", "green")
            };
        }
    }

James
Top achievements
Rank 1
 answered on 14 Jan 2019
3 answers
1.6K+ views

I just started using the controls and started with the test app to learn. I can't find out how to set the row height. The row height from the test app is way to large. How do I adjust the row height?

<div class="row">
    <div class="col-xs-5 col-md-12">   
        @(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.OrderViewModel>()
                                        .Name("grid")
                                        .Columns(columns =>
                                        {
                                            columns.Bound(p => p.OrderID).Filterable(false);
                                            columns.Bound(p => p.Freight);
                                            columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                                            columns.Bound(p => p.ShipName);
                                            columns.Bound(p => p.ShipCity);
                                        })
                                        .Pageable()
                                        .Sortable()
                                        .Scrollable()
                                        .Filterable()
                                        .HtmlAttributes(new { style = "height:450px;" })
                                        .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .PageSize(20)
                                            .Read(read => read.Action("Orders_Read", "Grid"))
                                        )
        )
    </div>
</div>
Vincent
Top achievements
Rank 1
Iron
 answered on 13 Jan 2019
18 answers
747 views
Hello, in my site I have boxes and in the boxes I have charts. The boxes do have a default width and height(height & width are the same. Even on resize). Now only do the charts their own thing and get their own height. How can I fix it so the charts will fit in the boxes?
Chili
Top achievements
Rank 1
 answered on 11 Jan 2019
1 answer
296 views

Hi,

I Using Kendo Chart,Previously worked without problems

But Now Chart is not Displayed,Only the contents are displayed in text

This Is My Code:

  <div class="chart-wrapper">
        @(Html.Kendo().Chart()
                                .Name("chart")
                                .Title("Site Visitors Stats /thousands/")
                                .Legend(legend => legend
                                    .Position(ChartLegendPosition.Bottom)
                                )
                                .SeriesDefaults(seriesDefaults => seriesDefaults
                                    .Column().Stack(true)
                                )
                                .Series(series =>
                                {
                                    series.Column(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
                                    series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
                                })
                                .CategoryAxis(axis => axis
                                    .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
                                    .MajorGridLines(lines => lines.Visible(false))
                                )
                                .ValueAxis(axis => axis
                                    .Numeric()
                                    .Line(line => line.Visible(false))
                                )
                                .Tooltip(tooltip => tooltip
                                    .Visible(true)
                                    .Format("{0}")
                                )
        )
    </div>

Please Help Me.

Tsvetomir
Telerik team
 answered on 10 Jan 2019
3 answers
145 views

Do you have any documentation on how the .Filterable mechanism works on a column in the TreeList?  I had some success with this feature on a Grid but this control doesn't seem to require the same parameters.

Eg.  columns.Add().Field(e => e.Description).Filterable(ftb => ftp...

Tsvetomir
Telerik team
 answered on 10 Jan 2019
1 answer
105 views

How do you color a task to represent the percent completion?

The demo's at https://demos.telerik.com/aspnet-core/gantt/task-template and https://demos.telerik.com/aspnet-core/gantt/api show it but I couldn't tell how it was being done.  I am looking to do something like these demo's do.

Thanks

Ken

Dimitar
Telerik team
 answered on 10 Jan 2019
2 answers
99 views

Hello,

I have a nested grid which implements the sortable components. After reordering the rows, i would like to send the reordered grid to my controller so i can update the data in it. I'm not sure i'm using the right approach, but i'm trying to do this with a custom command from the toolbar. My question is simple, how can i send all my grid to my controller after i reordered the rows ? The goal is to change the property "Ordre" if my model. Thank you very much.

Here is my code so far: 

 

//nested grid
<script id="questionsTemplate" type="text/x-kendo-tmpl">
    @(Html.Kendo().Grid<PointVerificationViewModel>()
        .Name("pointGrid_#=Id#")
        .Columns(col =>
        {
            col.Bound(p => p.Libelle);
            col.Bound(p => p.EstBloquant)
                .ClientTemplate("\\#: data && data.EstBloquant ? 'OUI' : 'NON' \\#");
            col.Bound(p => p.Ordre);
            col.Command(cmd =>
            {
                cmd.Edit().Text(" ");
                cmd.Destroy().Text(" ").IconClass("fa fa-times");
            });
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .ToolBar(toolbar =>
        {
            toolbar.Create().IconClass("fa fa-plus").Text("Créer un point de vérification");
            toolbar.Custom().IconClass("fas fa-save").Text("Sauvegarder l'ordre").HtmlAttributes(new { data_role = "saveOrder" });//the custom button i'm trying to use to send my grid
        })
        .Events(e => e.Change("onChange"))
        .DataSource(ds => ds
            .Ajax()
            .ServerOperation(false)
            .PageSize(16)
            .Model(m =>
            {
                m.Id(p => p.Id);
            })
            .Read(a => a.Action("Read", "PointVerification", new { familleId = "#=Id#" }).Type(HttpVerbs.Get))
            .Create(a => a.Action("Create", "PointVerification", new { familleId = "#=Id#" }).Type(HttpVerbs.Post))
            .Update(a => a.Action("Update", "PointVerification").Type(HttpVerbs.Put))
            .Destroy(a => a.Action("Delete", "PointVerification").Type(HttpVerbs.Delete))
        )
        .Sortable()
        .ToClientTemplate()
    )
 
 
    @(Html.Kendo().Sortable()
        .For("#pointGrid_#=Id#")
        .Filter("table > tbody > tr")
        .Cursor("move")
        .HintHandler("noHint")
        .PlaceholderHandler("placeholder")
        .ContainerSelector("#pointGrid_#=Id# tbody")
        .Events(events => events.Change("onChange"))
        .ToClientTemplate()
)
 
</script>
 
<script>
    var noHint = $.noop;
 
    function placeholder(element) {
        return element.clone().addClass("k-state-hover").css("opacity", 0.65);
    }
 
    function onChange(e) {
        var id = e.sender.element[0].id;
        var grid = $("#" + id).data("kendoGrid");
 
        skip = grid.dataSource.skip();
        oldIndex = e.oldIndex + skip;
        newIndex = e.newIndex + skip;
        data = grid.dataSource.data();
        dataItem = grid.dataSource.getByUid(e.item.data("uid"));
 
        grid.dataSource.remove(dataItem);
        grid.dataSource.insert(newIndex, dataItem);
    }
 
    // I'm trying to send my grid to my controller with this method, but it keeps calling the delete method.
    function onFamilleGridDetailExpand(e) {
        e.detailRow.find("[data-role=saveOrder]").click(function () {
            var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid").saveChanges();
        });
    }
</script>
Julien
Top achievements
Rank 1
 answered on 10 Jan 2019
2 answers
135 views

I need to allow the user to select an item from the TreeList then go to its detail.  I don't believe there is a double-click event.  So then, I assume I'll need to put a "Details" button on the Grid.  Do you have an example how I do this?  I assume we do something like this (doesn't work):

@(Html.Kendo().TreeList<GsiPortal.Models.Group>()
  .Name("treelist")
  .Columns(columns =>
  {
      columns.Add().Command(c => { c.Custom().Text("Detail");}).HtmlAttributes(new { style = "text-align: center;" });
      columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");
      columns.Add().Field(e => e.Description);
      columns.Add().Field(e => e.CurrentStatus.Name).Title(nameof(Group.Status));
      columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");
      columns.Add().Command(c => { c.CreateChild().Text("Add"); }).HtmlAttributes(new { style = "text-align: center;" });
      columns.Add().Command(c => { c.Edit(); }).HtmlAttributes(new { style = "text-align: center;" });
      columns.Add().Command(c => { c.Destroy(); }).HtmlAttributes(new { style = "text-align: center;" });
  })
  .Editable(e => e.Mode(TreeListEditMode.PopUp).TemplateName("GroupEdit"))
  .Selectable(selectable => selectable.Mode(TreeListSelectionMode.Single))
  .DataSource(dataSource => dataSource
      .ServerOperation(false)
      .Create(create => create.Action("CreateJson", "Groups"))
      .Read(read => read.Action("AllJson", "Groups").Data("groupsRead"))
      .Update(update => update.Action("UpdateJson", "Groups"))
      .Destroy(delete => delete.Action("DestroyJson", "Groups"))
      .Model(m =>
      {
          m.Id(f => f.Id);
          m.ParentId(f => f.ParentId);
          m.Expanded(true);
          m.Field(f => f.Name);
          m.Field(f => f.Description);
          m.Field(f => f.AddTimestamp).Editable(false);
      })
      .Events(events =>
      {
          events.Error("onError");
      })
  ))
Viktor Tachev
Telerik team
 answered on 09 Jan 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?