Hello

Using the MVC wrappers, what is the best way to call a kendo chart multiple times (in the same partial view) using different model values (the different model values are not important for now)?

I intent to allow the user to select the charts they require (from a treeview) and then add these charts to the page. There are hundreds of charts possible and the look of the page is not important, as it is only the SVG of the chart i'm interested in, as the charts will eventually be exported.

At the moment I have (just working with a the same demo chart from kendo demo)......

In the View

@using (Ajax.BeginForm("ChartPartial", "Export", new AjaxOptions() { UpdateTargetId = "chart0" }, new { id = "formChartPartial" }))
{
    <div style="display: none;">
        <input type="submit" id="chartExportSubmit" />
    </div>            
}

I'm using a form to pass data to the controller. Eventually i'll have other input fields containing the data needed to change the model passed to the partial view. 

Controller

Contains the logic to produce a model, which is not important at the moment as can be seen below in the partial view code

Partial View

<div class="chart-wrapper">
    @(Html.Kendo().Chart()
        .Name("chart" + Guid.NewGuid())
        .Title("Site Visitors Stats /thousands/")
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .Series(series => {
            series.Bar(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
            series.Bar(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()
            .Max(140000)
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= series.name #: #= value #")
        )
    ) 
</div>

Javascript

Iterate through javascript array (selected) to find the amount of multiple charts needed. Create a div for each and change the target div on the form, finally, calling the form which fires the partial view.


        for (var i = 0; i < selected.length; i++) {
            $('#exportChartContainer').append('<div id="chart' + i + '" class="chart" style="height: 590px; width: 960px;"></div>');
            $('#formChartPartial').attr('data-ajax-update', '#chart' + i.toString());
            $('#chartExportSubmit').click();
        }


In fiddler, I get all the charts back fine from the ajax form submits, but only the final div actually contains a chart, which happens to be the final chart called - i'm thinking that by the time the charts return, the updateTargetId attribute (data-ajax-update) has already been changed to the final div and every chart is replacing the previous one, or something along those lines.

I've tried a different approach by including the ajax option 'InsertionMode = InserstionMode.InsertAfter', and targeting the same div, but the charts do not display at all.

I can probably do this using a combination of ajax requests and the javascript functions to call the charts, but I would rather use the MVC wrappers for consistency across the site, if possible.

Any ideas?

Thanks
Alan

Hi!

We are trying out the new client details template (ClientDetailTemplateId). We can get a basic hierarchy grid working, but have some problems:

• We cannot get column client templates in the sub-grid to work ("[columnName] is not defined" js error)
• We  cannot get a two level hierarchy going ("b is not defined")

Are any of these two scenarios supposed to work at the moment, and if so, is there any demo code available?


On a related note: We always bind our grids server-side first and do following operations (sort/filter/etc) using client code. Are there any plans on making it possible to define a template once and get it working in both scenarios? For us we really only use server binding once and would prefer is details are loaded via ajax on demand, but using a client details template only gives an empty details view as far as we know...

Thank you
/Victor

This is a new install using Visual Studio 2010/MVC 4. I followed the directions on the Getting Started page for an existing solution. I placed the datepicker in the index.cshtml file and when run I get the error mentioned in the subject.

I then reviewed the trouble shooting page and the forums. I've triple checked to enure that the _Layout.cshtml file contains the jquery reference once. I know it must be something really stupid, as I am new at this, but I could really use your help. I've attached all the relevant files.

Your help is much appreciated.

Hello!
I have 2 grid!
First grid has field: Volume with Uihint ["Decimal"]
Second grid has field: Volume Uihint ["Decimal"]
I have this:

my view:
If I use bind Combobox or KendoNumbericTextbox for my field: Volume(in first grid and secondgrid)
And simultaneously edit the element in the first and second grid
I see this: 1.png

I believe that this is because jQuery will return the first element in the DOM and initialize NumericTextBox from it.

how can I get around this problem by using Kendo?
I don't want create another field for any coincidence, because I have 10+ coincidences 
Please help!

Hi, 

We have an issue using IHtmlString properties inside the grid. By default, it displays "[object Object]" in the column since, well, HtmlString is an object. However, this is ASP.NET MVC's way of saying "this string is already html-encoded".  As such, I can use @Model.Property to have a property that includes html without re-encoding it. If Property was a simple string, I would have @Html.Raw(Model.Property). 

It would be nice if kendo ui's grid was to work like this as well. If we use a string, we can by-pass the html-encoding using a client template ("#= Property #"), however if we have an IHtmlString property, there is no way to display it, since it has no public properties. The only method it has is ToHtmlString(), which is what kendo's grid could use.

We temporarily bypassed this issue using a second property which calls ToHtmlString() on the original property, but native support for this type would be nicer I think.

== Overview
Work : 
columns.Bound(Function(vm) vm.PropertyAsString).ClientTemplate("#= Pharmacie.CoordonneesCompletesBruts #")

Works not : 
columns.Bound(Function(vm) vm.PropertyAsHtmlString) // Can't work, this is just an object
columns.Bound(Function(vm) vm.PropertyAsHtmlString).ClientTemplate("#= Pharmacie.CoordonneesCompletesBruts #") // Can't work, this is still just an object
columns.Bound(Function(vm) vm.PropertyAsHtmlString).ClientTemplate("#= Pharmacie.CoordonneesCompletesBruts.ToHtmlString #") // Doesn't work, this function is not replicated in JS
columns.Bound(Function(vm) vm.PropertyAsHtmlString.ToHtmlString()) // Doesn't work, not a property expression
==

Thanks,
Jni

PS : I'm posting this in the grid forum, but there are most likely other components which could benifit from this.
PS2 : I know, having properties that return HTML inside a viewmodel might not be the best idea, but, long story short, we have to for this one.

Hi,

I have an mvc4 project with entity framework 4.1 and a data model with a timespan, which I need to bind to a grid and update, via Ajax, using a time picker in an editor template, in grid popup edit mode.

I can format the timespan to display correctly on read, but on edit I just cannot work out the right pattern.  I understand the issue is due to how Json deals with timespans.   This seems to be an issue which is causing a few some big headaches, so I would like to ask for a recommended pattern for binding to a timespan and a code example please.

Thanks
Rich

Hi,
I have a list of checkboxes, but when I click to check one all checkboxes is checked.
This is when using Ajax binding:
But when using Server binding it works as it should:
Is it some sort of a bug or is the code wrong typed in some way?
Original code:
/Mattias

I am trying to bind an enum to a dropdown list. I am successful using the vanilla @Html.DropDownListFor, but unsuccessful with the @Html.Kendu().DropDownListFor.

My enum provider is:


The following code works well, showing the list and binding to the  property::


However, the following displays the list, but does not bind to the property:
               

@Html.Kendo().DropDownListFor(p => p.Sex).BindTo(ELSORegistry.DataProviders.SexListItems)

 

 

 

I am trying to override the current theme and create a Kendo window having a semi transparent PNG as a background (window will be see through somewhat).

In the window creation I have the following - but it's not working - it's still defaulting to the current theme's window background color:

.HtmlAttributes( new { style="background-color:transparent;background-image:'/images/bg_trans_60.png';background-repeat:repeat;"} )

Please advise.

Thanks.

Hi. New to MVC and trying to implement my first kendo control using the example provide by Kendo, I can get data loaded in the razor view and kendo grid, but if I try to update, edit, or delete it does not execute the code, I get no exception thrown.. 

What am i missing that these functions dont execute?

Here is the code for view and controller: