Hi,

I would like users to direct to new pages/controllers when they click on different pieces of pie chart.

I found something similar https://www.telerik.com/forums/pie-chart-with-link but its related to RadCharts and not Kendo.

Can you please provide a code snippet or link to docs.

I tried using parameter like url but that didnt work.

 @(Html.Kendo().Chart()
                            .Name("chart")
                            .Title("Big Players")
                            .Legend(legend => legend
                                .Position(ChartLegendPosition.Bottom)
                            )
                            .Series(series =>
                            {
                                series.Pie(new dynamic[] {
new {category = "Apple",value = 40.3, color = "#ff3d00", url = "https://www.apple.com"},
new {category = "Microsoft",value = 0.4, color = "#f3e5f5", url = "https://www.microsoft.com"},
new {category = "IBM",value = 40.6, color = "#304ffe", url = "https://www.ibm.com"}

})
                                .Labels(labels => labels
                                    .Visible(true)
                                    .Template("#= category # - #= kendo.format('{0:P}', percentage)#")
                                );
                            }))

Thank you

Hi folks,

I'm running the Grid SignalR example (found here http://demos.telerik.com/aspnet-mvc/grid/signalr) locally.

Even though it is running locally, the sample still fetches data from the Web, instead of my local machine as in:

 var hubUrl = "http://demos.telerik.com/kendo-ui/service/signalr/hubs";

I want to run this entirely locally. I'm getting data from the local backend data service by running the code found here on my machine:

https://github.com/telerik/kendo-ui-demos-service

However, I'm stuck at what route on my local system replaces http://demos.telerik.com/kendo-ui/service/signalr/hubs

Would the local route be

var hubUrl = http://localhost:42471/hubs;

How do I set the route?

Thanks,

Ken

I developed a Grid which displays a pop-up for updates. Popup Edit screen is a Custom template with a dropdown list that calls the controller to populate the dropdown. In this case, i am populating the prefixes. The is populated fine, but when I click on a row on the grid to edit an item, I need to pre-select the value in the drop-down. let's say if a particular row has a value of "Mr." as a prefix, I need it to be pre-selected in the popup .

If the use of a  @Html.EditorFor(model => model.Prefix), it perfectly populates the editor fine. This doesn't work for Dropdown.

The editor template is called MemberEdit and the code in it is as below:

The Grid code is as shown below: 

The Model is as below:

}

The Model for Prefix is as below:

We are working on a Kendo UI with Kendo Listbox (asp.net MVC - https://demos.telerik.com/aspnet-mvc/listbox) but the example is for
@html.Kendo().ListBox() rather than having @html.Kendo.ListBoxFor() where @html.Kendo.ListBoxFor() allows for the model to be BindTo to selected items

Is there a way a ListBox can be used to bind to a model rather than an IEnumerable so that we can pass data back and forth via the model

Hi,

I'm having some problems when I try to format text when there is a span in the middle of the selected text. Below I've shown the before, after and expected HTML when I try to change the change the font size, for example, by highlighting a word on either side of my span as well as the span itself.

BEFORE:

AFTER:

EXPECTED:

We use the <span k-immutable="6qxG2g5C1I"> as a merge field so my question is this: is there any way to catch when font is changed through the toolbar (font-size, font-alignment, font-change, font-bold,etc) or is there a way to better wrap around the middle span so that it doesn't ignore the changes I've made?

I have model as

    public class ProductViewModel
    {
        public int ID { get; set; }
        public string ProductName { get; set; }
        public double? Price { get; set; }
    }

The controller is

 public ActionResult Products([DataSourceRequest]DataSourceRequest request)
        {
            List<Models.ProductViewModel> lst = new List<Models.ProductViewModel>();
            lst = GetGridData().ToList();

            DataSourceResult result = lst.ToDataSourceResult(request, p => new Models.Product 
            {
                ID = p.ID,
                ProductName = p.ProductName,
                Price = p.Price 
            });
            return Json(result, JsonRequestBehavior.AllowGet);
        }

       public IEnumerable<Models.ProductViewModel> GetGridData()
        {
            List<Models.ProductViewModel> objProducts = new List<Models.ProductViewModel>();

            for (int i = 1; i<= 10; i++)
            {
                objProducts.Add(new Models.ProductViewModel() { ID = i, ProductName = "Prod" + i.ToString(), Price = i * 10 });
            }
            return objProducts.ToList().AsEnumerable();
        }

cshtml

@model TelerikMvcApp1.Models.ProductViewModel
@using System.Web.Optimization
@using Kendo.Mvc.UI
@using Kendo.Mvc.Extensions

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div>
    @(Html.Kendo().Grid<TelerikMvcApp1.Models.ProductViewModel>()
                                        .Name("grid")
                                        .DataSource(dataSource => dataSource //Configure the Grid data source.
                                            .Ajax() //Specify that Ajax binding is used.

                                            .ServerOperation(false) //Paging, sorting, filtering, and grouping will be done client-side.
                                            .Read(read => read
                                                .Action("About", "Home")) //Set the action method which will return the data in JSON format.
                                                                          //.Data("productsReadData") //Specify the JavaScript function which will return the data.
                                        )
                                        .Columns(columns =>
                                        {
                                            //Create a column bound to the ProductID property.
                                            columns.Bound(P => P.ID).Title("Product ID");
                                            //Create a column bound to the ProductName property.
                                            columns.Bound(P => P.ProductName).Title("Product Name").Width(130);
                                            //Create a column bound to the UnitsInStock property.
                                            columns.Bound(P => P.Price);
                                        })
                                        .Pageable() // Enable paging
                                        .Sortable() // Enable sorting
                                        .HtmlAttributes(new { style = "height: 550px; width:300px;" })
    )
</div>

When I run the application, Grid is not displayed and the output is

{"Data":[{"ID":1,"ProductName":"Prod1","Price":10},{"ID":2,"ProductName":"Prod2","Price":20},{"ID":3,"ProductName":"Prod3","Price":30},{"ID":4,"ProductName":"Prod4","Price":40},{"ID":5,"ProductName":"Prod5","Price":50},{"ID":6,"ProductName":"Prod6","Price":60},{"ID":7,"ProductName":"Prod7","Price":70},{"ID":8,"ProductName":"Prod8","Price":80},{"ID":9,"ProductName":"Prod9","Price":90},{"ID":10,"ProductName":"Prod10","Price":100}],"Total":10,"AggregateResults":null,"Errors":null}

Hi I am struggling to figure this out...I am trying to pass additional data on the call.  The id that treeview comes up with is always there and correct.  But my roleid is always null.  And the RoleId is valid number.  Running out of places to look so I figured I post...

@(Html.Kendo().TreeView()
                                .Name("permissionList")
                                .Checkboxes(true)
                                .DataTextField("name")
                                .DataSource(dataSource => dataSource
                                    .Read(read => read.Action("permissions", "roles", new { RoleId = @Model.RoleId}))
                                )
                    )

Controller

        [HttpGet]
        [Route("permissions")]
        [Route("permissions/{id}/{RoleId}")]
        public JsonResult Permissions(int? id, int? RoleId)
        {
            var roleFormMgr = new RoleFormMgr(StateMgmt);
            var roleEntity = roleFormMgr.GetRole(RoleId.GetValueOrDefault());
            var roleFormVM = roleFormMgr.PopulateView(Mapper.Map<RoleForm>(roleEntity));
            var permissions = roleFormVM.RolePermissionList.Where(p => id.HasValue ? p.parentId == id : (id == null && p.parentId == 0)).ToList();
            return Json(permissions, JsonRequestBehavior.AllowGet);
        }

How can I limit the editable text to a positive number .

My Grid is as follows:

    @(Html.Kendo().Grid<TelerikMvcApp1.Models.ProductViewModel>()
                                                                .Name("Grid")
                                                                .DataSource(dataSource => dataSource //Configure the Grid data source.
                                                                    .Ajax() //Specify that Ajax binding is used.
                                                                    .Batch(true)

                                                                    .ServerOperation(false) //Paging, sorting, filtering, and grouping will be done client-side.
                                                                    .Read(read => read
                                                                    .Action("Products", "Home")) //Set the action method which will return the data in JSON format.
                                                                                                 //.Data("productsReadData") //Specify the JavaScript function which will return the data.
                                                                    .Model(model => model.Id(p => p.Id))
                                                                )
                                                                .Columns(columns =>
                                                                {
                                                                    columns.Bound(P => P.Id).Title("ID").Width(20).Editable("NoEditing").HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align:center" });
                                                                    columns.Bound(P => P.ProductName).Title("Product Name").Width(40).Editable("NoEditing").HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align:center" });
                                                                    columns.Bound(P => P.Price).Editable("AllowEditing").HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align:center" }).Width(30); //.ClientTemplate("<input type=\"number\" value=#= Inches # min=\"0\" max=\"11\" step=\"1\" ></input>");

                                                    })
                                                                .Editable(editable => editable.Mode(GridEditMode.InCell))
                                                                //.Pageable() // Enable paging
                                                                .Sortable() // Enable sorting
                                                                .Scrollable()
                                                                .Filterable()
                                                                .Navigatable()
                                                                .HtmlAttributes(new { style = "height: 300px;" })
    )

<script>
    function AllowEditing(dataItem) {
        return true;
    }

    function NoEditing(dataItem) {
        return false;
    }

I tried adding a ClientTemplate which is commented above. But that didn't work.

In the demos I was able to see something like 

.Format("MMMM yyyy")

But I have been unable to find the valid values for the string input or documentation on the Format method itself. I am obviously looking in the wrong place. Where should I look?

Thank you.