I have a chart that tracks website registrations by date, Country and State.  A user selects which country(ies) and state(s) they want to see and the chart should have a column for each country for each date (aggregate by year)

My current View code:

@(Html.Kendo().Chart<DatePoint>()
    .Name("RegistrationDashboard")
    .Title("Total Registrations")
    .Theme("material")
    .DataSource(ds => ds
        .Read(read => read.Action("RegistrationDashboard_Read", "Reports").Data("filterReport"))
        .Group(group =>
            group.Add(grp => grp.Country)
        )
    )
    .Series(series =>
    {
        series.Column(model => model.Value, categoryExpression: model => model.Date).Aggregate(ChartSeriesAggregate.Count).Stack("Country").Name("");
    })
    .CategoryAxis(axis =>
        axis
            .Date()
            .BaseUnit(ChartAxisBaseUnit.Years)
            .MajorGridLines(lines => lines.Visible(false))
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Line(line => line.Visible(false))
    )
    .Tooltip(tooltip => tooltip.Visible(true))
    )

An example of JSON data sent from the datasource (I have a button that refreshes the data source whenever a user chooses new countries/states)

[
  {
    "Date": "/Date(1558584000000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Cundinamarca"
  },
  {
    "Date": "/Date(1562299200000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1572494400000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Antioquia"
  },
  {
    "Date": "/Date(1580533200000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Estado de Mexico"
  },
  {
    "Date": "/Date(1585281600000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Beni"
  },
  {
    "Date": "/Date(1594094400000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1594094400000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1594094400000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1594094400000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1607058000000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Antioquia"
  },
  {
    "Date": "/Date(1608008400000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Jalisco"
  },
  {
    "Date": "/Date(1608008400000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Jalisco"
  },
  {
    "Date": "/Date(1608526800000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Antioquia"
  },
  {
    "Date": "/Date(1626148800000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Queretaro"
  },
  {
    "Date": "/Date(1632801600000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1633924800000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Valle del Cauca"
  },
  {
    "Date": "/Date(1634011200000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Antioquia"
  },
  {
    "Date": "/Date(1640840400000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Aguascalientes"
  },
  {
    "Date": "/Date(1641445200000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Aguascalientes"
  },
  {
    "Date": "/Date(1642741200000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Aguascalientes"
  },
  {
    "Date": "/Date(1643691600000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Mexico"
  },
  {
    "Date": "/Date(1650340800000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1650340800000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1652241600000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Cochabamba"
  },
  {
    "Date": "/Date(1652328000000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Cochabamba"
  },
  {
    "Date": "/Date(1661140800000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Bogota"
  },
  {
    "Date": "/Date(1664856000000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Narino"
  }
]

I would like to have a series column for each country for each year. Each column would be stacked based on the number of registrations per state.

The user could choose from 1...N countries.  (I'm sure I can set a limit so the chart isn't out of control, but that's not the point)

When I set the datasource group to "State", there is a series column for each year and the legend shows each state. When I group by "Country", there is only 1 series column for each year and the legend shows the countries selected. I have included a screenshot of each grouping

How do I make a series column for each country with the amounts "stacked" for that country's respective states?

Hi, im currently creating a Grid with dynamic columns and came across with this post and current following the structure.

Dynamic Data in the Kendo UI Grid (telerik.com)

My problem is that during Update, I cant seem to access the Property Values of those edited columns. 

Can I get the actual code for the "Update" of this demo API?

https://demos.telerik.com/kendo-ui/service/products/Update

Heres my update code btw:

[HttpPost]
        public JsonResult Update_Employee([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<dynamic> models)
        {
            foreach(var obj in models)
            {
                string a = GetProperty(obj, "EmployeeName");

            }

            return Json(ModelState.ToDataSourceResult());
        }

        private object GetProperty(dynamic obj, string propertyName)
        {
            var objDict = obj as IDictionary<string, object>;
            if (objDict.ContainsKey(propertyName))
            {
                var value = objDict[propertyName];

                if (value != null)
                    return value;
            }

            return null;
        }

Hi All,

We're using telerik kendo treelist for the application. we need functionality like if we click on Copy data button then it will clone the selected row along with data. We've tried to find copy functionality but we're not able to do it. so we have add custom button ("Copy Data"). 

Please let us know if there is any other way to achieve this functionality.

adding button "Copy Data"  in toolbar:

.Toolbar(tb =>
    {     
            tb.Custom().Name("Copy").Text("Copy Data");        
    })

"Copy Data" button click event:

$('.k-button-text').click(function () {
        alert('clicked');
        debugger
        var treeList = $("#TeamTreeList").data("kendoTreeList");
        var row = treeList.select();
        if (row.length > 0) {
            var data = treeList.dataItem(row);
            console.log(data.RoleName); 
        }
    });

I have an ASP.NET MVC project, using Kendo MVC 2023 R1, and I am using a strict CSP policy. However, the following code is not working

      <add name="Content-Security-Policy" value="script-src 'self'

Index.Cshml

<script id="editor-template" type="text/x-kendo-template">
          @Html.Kendo().TextBox().Name("FieldExcel").Enable(false).ToClientTemplate()    

</script>

in JS

$(document).ready(() => {
    $(".list-item-icon").on("click", e => {
        $("#edit-dialog").kendoWindow({
            height: 320,
            width: 415,
            title: 'Editar',
            visible: false
        });

        var thtml = $("#editor-template").html();

        var htmlEncode = kendo.htmlEncode;
        var templateString = () => thtml;

        var template = kendo.template(templateString);
        var data = { firstName: "Todd", age: 16 };

        var result = template(data);

        //var template = kendo.template($("#editor-template").html());
        $("#edit-dialog").data("kendoWindow").content(template({})).open().center();  

The result is a simple input text instead of a disabled Kendo control.

I have a model class given below in MVC. I am trying to set MinDate and MaxDate for the DatePicker

public class YourModel
{
    public DateTime Deadline { get; set; }
    public DateTime MinDate { get; set; }
    public DateTime MaxDate { get; set; }
}

@(Html.Kendo().DatePickerFor(x => x.Deadline)
    .Name("datepicker") // Set the name attribute
    .Format("MM/dd/yyyy")
    .Min(DateTime.Today) // Set the minimum date
    .Max(DateTime.Today.AddMonths(3)) // Set the maximum date (in this example, 3 months from today)
    .HtmlAttributes(new { id = "datepicker" }) // Set the ID attribute
)

Hello,

I have this Kendo DropDownTree control:

<kendo-dropdowntree name="ddtNamespaces" datavaluefield="Value" filter="FilterType.Contains" datatextfield="Text" style="width: 100%;" 
                                                        check-all="true" 
                                                        on-change="onNamespaceChange" 
                                                        on-close="onNamespaceClose"
                                                        on->
                                        <hierarchical-datasource>
                                            <transport>
                                                <read url="@Url.Action("GetNamespaceListFromATAsync", "AI")" />
                                            </transport>
                                            <schema type="json">
                                                <hierarchical-model id="Id"></hierarchical-model>
                                            </schema>
                                        </hierarchical-datasource>
                                        <checkboxes enabled="true" />
                                    </kendo-dropdowntree>

I should send an ajax call after control change. When the user normally select a node it's working fine, but when the user clicks on 'All Items' node then the change event will be fired the combo-items-count times. So if I have 100 items in the combo, after click on 'All Items' the change event will be fired 100 times. This is not good for me, I would like send only one ajax call when 'All Items' item is selected.

I try a workaround to use the close event, and send the ajax call after closing the popup, but the close event is firing before all change event is finished so this not works.

Do you have any other idea to solve this? Thank you!

Hi, I have this list of thousands of employees from our Database and will be displayed in a Grid via ViewModel. Im using Custom Binding with paging to fetch only specific number of records per page to reduce the loading time of the grid thats why the ServerOperation = true.

My problem is that, how can I customize or recreate the request filters? Since FullName and Address does not exists in the Employees table. I'm getting error whenever i use search.

public class Employee
    {
        public string EmployeeID { get; set; }

        public string LastName { get; set; }
        public string FirstName { get; set; }

        public string Street { get; set; }
        public string City { get; set; }
        public string Province { get; set; }

        public string TelephoneNo { get; set; }

        public string FullName
        {
            get
            {
                return String.Format("{0}, {1}", LastName, FirstName ?? "");
            }
        }

        public string Address
        {
            get
            {
                return String.Format("{0} {1} {2}", Street, City, Province);
            }
        }
    }

@(Html.Kendo().Grid<Employee>()
    .Name("gridEmployees")
    .ToolBar(toolbar =>
    {
        toolbar.Search();
    })
    .Columns(column =>
    {
        column.Bound(c => c.EmployeeID);
        column.Bound(c => c.FullName);
        column.Bound(c => c.Address);
        column.Bound(c => c.TelephoneNo);
    })
    .Filterable()
    .AutoBind(false)
    .DataSource(ds =>
    {
        ds.Ajax()
        .ServerOperation(true)
        .PageSize(10)
        .Model(m => m.Id(c => c.EmployeeID))
        .Read(r => r.Action("Read", "Employees"));
    })
)

Hi!

I have this large data from a Table with related tables and I'm currently using Custom Binding to apply paging, sorting and more importantly filtering to load smaller data sets. 

And my problem is on the below link, no paging example was documented.  Can you please help me with this?

ASP.NET MVC Data Grid Component Custom Binding - Telerik UI for ASP.NET MVC

I have this grid with Edit and Destroy column command buttons. As I click the Delete/Destroy button it instantly calls the Destroy action without waiting for the delete confirmation. How can I solve this?

Hi, I would like to know if there is a way to load a PDF stored as VARBINARY(MAX) in a SQL Server Filestream field.

Thank you in advance.