Telerik Forums
UI for ASP.NET MVC Forum
4 answers
596 views
Hi,

can anyone show me how to use a template for the labels in a chart legend in Kendo for MVC? The fluent api allows for controlling font, color, position, etc, but the labels template is nowhere to be found.

Below is a piece of code taken from the DataViz demo, to illustrate what I mean.

$("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Break-up of Spain Electricity Production for 2008"
                        },
                        legend: {
                            position: "bottom",
                            labels: {
                                template: "#= text # (#= value #%)"
                            }
                        },

Any help is greatly appreciated.

Regards,
Erwin
Hristo Germanov
Telerik team
 answered on 30 May 2013
1 answer
265 views
Hi

I'm generating the graph dynamically based on loaded description and data.
The (simplified) code as follows:
<div class="chart-wrapper">
    @(Html.Kendo().Chart()
        .Name("Chart1")
        .Transitions(false)
        .Title(d.graph_name)
        .Series(series => {
            foreach (www.Models.ChartDataItem s in d.chart_items)
            {
                if (s.type == "area") {
                    series.Area(s.name)
                    .Aggregate(ChartSeriesAggregate.Avg);
                }
                if (s.type == "line")
                {
                    series.Line(s.name)
                    .Aggregate(ChartSeriesAggregate.Avg);
                }
            }
        })
Is there a better (dynamic) way to set chart type without having the if/switch block?
Besides Aggregate I have a lot of options to set for most (but not all) series. So I wouldn't need to copy the lines for every possible chart type. Is it possible in current solution to catch each series (created by e.g. .Area()) in a variable and conditionally set properties on it?
Would the current approach to build a "very dynamic" chart in a View recommended? Is it possible build it completely in an Action instead?
Yes, the question might be related to razor/htmlhelpers in general, still interested in recommended Kendo approach. Thanks.
 Raido
Hristo Germanov
Telerik team
 answered on 30 May 2013
8 answers
945 views
Hi I have seen a similar post however I would like some clarification.
Desi: we have MVC.NET application which binds grid to model via Ajax binding.  When user submits the data and we refresh the page, we have a requirement to keep the user original selections (sorting, filtering, etc.).  You already posted that you do not support scenario like this "out of the box".  However I would like to know whether there is a way (some js method or control id or anything at all that would allow me to get to those selections before the page submitted via JavaScript.
Thanks.
Petur Subev
Telerik team
 answered on 30 May 2013
1 answer
363 views
Hi,

Kindly refer the below points and then suggest us to proceed further.

1. We have large database , our main criteria is to improve the performance of data binding in web.
2. As we have read about Kendo UI as client based, so we have doubts whether we can go for MVC Entity Framework with Kendo UI without using web service.

Thanks & Regards,
Vel.
Petur Subev
Telerik team
 answered on 29 May 2013
1 answer
202 views
Hi all.

Currently, I have the following code in my project:
@Html.TextBoxFor(model => model.CPF, new { alt = "cpf", style = "width: 150px;" })

Now, I would like to transform it in a Kendo control with a mask like that: "000.000.000-00". How can I do that with Kendo?

Thanks.
Atanas Korchev
Telerik team
 answered on 29 May 2013
2 answers
639 views
Hello,

I followed every step like the mvc  examples to try to bind a list view.

My setup is as follows:       

The Controller:
public ActionResult Scans_Read([DataSourceRequest] DataSourceRequest request)
{
    return Json(GetScans().ToDataSourceResult(request));
}
private static IEnumerable<ScanModel> GetScans()
        {
            var ec = new entityContext();
            return ec.tScan.Select(scanmodel => new ScanModel
            {
                scanId = scanmodel.scanId,
                description = scanmodel.description,
                directoryPath = scanmodel.directoryPath
            });
        }
 The Model:
public class ScanModel
    {
        [ScaffoldColumn(false)]
        public int scanId
        {
            get;
            set;
        }
 
        [Required]
        [DisplayName("description")]
        public string description
        {
            get;
            set;
        }
 
        [Required]
        [DisplayName("directoryPath")]
        public string directoryPath
        {
            get;
            set;
        }
    }
The view:
@model IEnumerable<ns.Models.ScanModel>
<script type="text/x-kendo-tmpl" id="template">
    <div class="scanmodel">
        <h3>#:description#</h3>
    </div>
</script>
@(Html.Kendo().ListView<ns.Models.ScanModel>(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource => {
        dataSource.Read(read => read.Action("Scans_Read", "CustomerPortal"));
    })
)
This is practically the same as in the example.

But it doesn't display data. 

The resultset from "return Json(GetScans().ToDataSourceResult(request));" does contain the dataset.

What am I doing wrong here...!

Thanks,
Leroy
Top achievements
Rank 1
 answered on 28 May 2013
1 answer
564 views
Hi,

How to give space/set distance between toolbar buttons/custom buttons like in telerik's IsSeparator :

http://www.telerik.com/community/forums/aspnet-ajax/toolbar/add-a-space-between-two-toolbar-buttons.aspx

Thank you

Shabtai
Dimiter Madjarov
Telerik team
 answered on 28 May 2013
2 answers
368 views
Dear Wizards of the Realm,

New to MVC4 and to Kendo. So probably some misconceptions. Tried for a couple days. Need suggestions.

1. Started Visual Studio 2012 new project using Asp.net mvc 4 web app. Connected to existing database with edmx file. Put in a controller. All works great - retrieve, create, update, delete.
2. From Telerik menu, reconfigure to use KendoUI. Using 2012.2.710. (Separate note - if trying to upgrade to 2013.1.x.x - a breaking upgrade). Add an Admin and a Member area - routing seems to be working oK
3. Add Kendo Grid

            @(Html.Kendo().Grid(Model).Name("KeysGrid")
            .Columns(columns =>
            {
                columns.Bound(curkey => curkey.ID).Hidden();
                columns.Bound(curkey => curkey.CreateStamp).Visible(false);
                columns.Bound(curkey => curkey.OwnerAccountsID).Visible(false);
                columns.Bound(curkey => curkey.ReplacedBy).Hidden();
                columns.Bound(curkey => curkey.Name).Width("20%");
                columns.Bound(curkey => curkey.Description).Width("60%");
                columns.Command(cmd =>
                {
                    cmd.Edit().HtmlAttributes(new { title = "edit this key" }).;
                    cmd.Destroy().HtmlAttributes(new { title = "delete this key" });
                })
                    .Width("20%")
                    .Title("Commands")
                    .Width(75);
            })
            .ToolBar(toolBar => toolBar.Template(@"
                <div>
                    <a onclick='createRow()' title='Create a new key' style='float:left;'> <img src='/Content/images/button_add_01.png' style='width:32px; height:32px; text-decoration:none; border:none;' /></a>
                    <a onclick='callHelp()' title='Help on keys' style='float:right;'><img src='/Content/images/button_info_01.png' style='width:32px; height:32px; text-decoration:none; border:none;' /></a>
                </div>
            "))
            .Editable(editable => editable.Mode(GridEditMode.PopUp)
                .TemplateName("AddEditKey").Window(w => w.Title("Add / Edit Keys")))
            .Pageable(pages => pages.PageSizes(new int[] { 10, 20, 50 }))
            .Resizable(p => p.Columns(true))
            .Sortable()
            .Selectable()
            .Filterable()
            .Scrollable(p => p.Enabled(false))
            .Groupable(p => p.Enabled(false))
            .DataSource(datasource => datasource
                .Ajax()
                .Events(e => e.Error("error_handler")
                )
                .Create(c => c.Action("Create", "YFKey", new { area="Member", controller="YFKey", action="Create" }))
                .Update(c => c.Action("Edit", "YFKey", new { area="Member", controller="YFKey", action="Edit" }))
                .Destroy(c => c.Action("Delete", "YFKey", new { area="Member", controller="YFKey", action="Delete" }))
                )
            )
4. Now when go to index page, grid shows data from underlying database. I edit grid, popup comes up with proper fields, edit data, save - popup goes away and changed fields marked with little red triangle - changes to underlying DB not made.
5. In Chrome, hit F12, look at network, it's getting a 500 Internal Server Error. All data from edit form looks proper - just not happening. Any ideas?

Autogenerated controller from database methods include:
        [Authorize]
        public ActionResult Edit(long id = 0)
        {
            YFKey yfkey = db.YFKeys.Find(id);
            if (yfkey == null)
            {
                return HttpNotFound();
            }
            return View(yfkey);
        }

        //
        // POST: /Member/YFKey/Edit/5

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(YFKey yfkey)
        {
            if (ModelState.IsValid)
            {
                db.Entry(yfkey).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(yfkey);
        }

Note that at the same time, the auto created forms from the database first edmx file still work, and even on the same form.

Maybe obvious to me someday, but not today.
Thanks.
Chris
Chris
Top achievements
Rank 1
 answered on 27 May 2013
2 answers
341 views
Hi,

how do i add a custom column to a child grid containing a Action Link with the ID of the current child row entity?

here is a example of the hierarchical grid:
@(Html.Kendo().Grid<MyParentGridModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Groupable(false).Width(50);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.ShortDescription);
        columns.Bound(p => p.LinkText);
    })
    .Sortable()
    .Pageable()
    .Scrollable(scr=>scr.Height(500))
    .ClientDetailTemplateId("template")
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("ParentModel_Read", "ControllerName"))
    )   
)
 
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ChildGridModel>()
        .Name("Grid_#=Id#")
        .Columns(columns =>
        {
            columns.Bound(o => o.PageNumber).Width(50);
            columns.Bound(o => o.ChapterTitle).Width(150);
            columns.Bound(o => o.BodyContent);
            columns.Template(@<text>
                            @Html.ActionLink("edit", "ControllerAction", "ControllerName", new { id = @item.Id }, new {@class = "k-button" })
                            </text>)
            .ClientTemplate(@Html.ActionLink("edit", "ControllerAction", "ControllerName", new { ID = "#=Id#" }, new { @class = "k-button" }).ToHtmlString());
 
             
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("ChildModel_Read", "ControllerName", new { parentModelId = "#=Id#" }))
        )
        .Pageable()
        .Sortable()
        .ToClientTemplate()
    )
</script>
The Question is: How can the Id of the ChildModelEntity be resolved and passed into the ActionLinkMethod?  "#=Id#" returns the Id of the parent model.

Thanks in advance for answers!
Mehmet
Top achievements
Rank 1
 answered on 27 May 2013
3 answers
373 views
Morning folks!

What I'm trying to do is...when I change the item of the dropdownlist, I'll need to REload the TreeView with the selectedValue of the dropDownList.

In my case, as I'm a new kendoui user, I'm not going on the right track, for sure.

Any ideas?

Here's my JS dumb script...hope you can help me!

<script type="text/javascript">
 
    function onChange(e) {
        $.ajax({
            url: "/Nav/MontaMenu/",
            dataType: "json",
            cache: false,
            type: 'GET',
            data: { nomePastaSelecionada: this.text(), caminhoPastaSelecionada: this.value() },
            success: function (result) {
 
                $('#treeview').kendoTreeView();
 
                var tvProjeto = $('#treeview').getKendoTreeView();
 
                tvProjeto.destroy();
                 
                var dataSource = new kendo.data.DataSource({
                    data: result
                });
                 
                dataSource.fetch(function () {
                    tvProjeto.setDataSource({
                        data: dataSource
                    });                   
                });
            }
        });
    }
</script>

Dimiter Madjarov
Telerik team
 answered on 27 May 2013
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
ColorPicker
DateRangePicker
Security
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
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?