Questions on Kendo UI for jQuery Forum

2 answers

89 views

The problem is that when using a custom validation in the Kendo UI Grid for with a single editable column in IE 9 and 10 the validation message seems to get duplicated for the following use-case,

Please refer to the following JSFiddle - http://jsfiddle.net/praneethw/j9D8Q/2/

1. Wait for the grid to load.
2. Click on the editable column "Allocated"
3. Delete the content.
4. Click on a different row.
5. Click back in the Textbox and notice the duplicate warning message.

I need to enable a few custom validations and this seems to be blocking me at the moment when using with IE
I would greatly appreciate you quick response please with a resolution or work around please.

Grid

answered on 23 Aug 2013

3 answers

106 views

Getting an Error while sorting Grid

When I sort the grid, I see this error

extend.getterkendo.web.js:2326
Comparer.selectorkendo.web.js:6528
Comparer.comparekendo.web.js:6532
Comparer.createkendo.web.js:6558
Query.sortkendo.web.js:6965
Query.processkendo.web.js:7194
Observable.extend.querykendo.web.js:8456
Observable.extend._querykendo.web.js:8501
Observable.extend.sortkendo.web.js:8581
Widget.extend._click

This error doesn't happen on all the columns. Its only on some columns.

Grid

answered on 23 Aug 2013

1 answer

73 views

Show Radar Chart Grid through area or lines

Hi,

On the Radar Area Chart demo that exists on the KendoUI Website you can see that the highlighted areas are covering the Grid, so the grid lines are not really visible. As more areas are stacked on top of each other the grid lines dissapear. The grid is probably rendered underneath the highlighted areas. Is there a way to get the grid to render on top of the highlighted areas so that the grid lines are still / always visible?

Thanks in advance for any help on this one.

Marcel

Charts

answered on 23 Aug 2013

1 answer

290 views

[Solved] Using Html.RenderAction in a Toolbar Template in MVC

In the folowing I am trying to render the output of an action to the grid using MVC 4:

.ToolBar(t=>t.Template(@<text>
@Html.RenderAction("DisplayAccountDropDown", "ClientAccountState");
<button class="k-button" id="clearFilter">Clear</button>
<a class="k-button" href="@Url.Action("Export", "Holdings")" >Export</a>
</text>))

But the Html.RenderAction doesn't have a return value to render so throws an error. Is there a way to get the output of the action into the toolbar? I am converting an app to use Kendo so would rather not have to change the controller if possible.

Grid

answered on 23 Aug 2013

3 answers

254 views

MVC Build Chart in the Controller

Is it possible to build a Chart in the MVC Control and pass it to the View in the Model? I want to do this so that I can dynamically display a chart based on the desired dashboard layout. So I want the View to dictate where the charts are displayed but I want the View to be ignorant of the reports content. Let me know if I haven't explained what I want to do well enough or if there is a better way. I plan to have the dashboard layouts and which reports those contain stored in a database.

This is a "mark up"
View

@model ChartCollection

@{

ViewBag.Title = "Dashboard";

}

<h2>

Dashboard

</h2>

@Html.Partial("_Report1", Model["ValidationResults"])

@Html.Partial("_Report2", Model["ClientComponents"])

ChartCollection(Model)

public class ChartCollection : Dictionary<string, IChart>

{

}

Controller

01.public class HomeController : Controller

02.{

03. public ActionResult Index()

04. {

05. ViewBag.Message = "Welcome to ASP.NET MVC!";

06.

07. return View();

08. }

09.

10. public ActionResult About()

11. {

12. ChartCollection charts = new ChartCollection();

13.

14. IChart chart;

15.

16. /// How do I duplicate this logic in the Controller?

17. @(Html.Kendo().Chart()

18. .Name("ClientComponents")

19. .Title("Components")

20. .DataSource(ds =>

21. {

22. ds.Model(model =>

23. {

24. foreach (DataColumn col in Model.QueryResults.Columns)

25. {

26. model.Field(col.ColumnName, col.DataType);

27. }

28. });

29. }

30. )

31. .Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))

32. .Series(series => series.Bar(new int[] {2,4,6}).Name("MyValues"))

33. .CategoryAxis(yaxis => yaxis.Categories(new string[] {"Hello", "World"}))

34. .Tooltip(tip => tip.Visible(true)) )

35.

36. /// Add the IChart to the ChartCollection

37. charts.Add(chart.Name, chart)

38. return View(charts);

39. }

40. }

General Discussions

answered on 23 Aug 2013

5 answers

297 views

Problem with Scroller and ListView

Hi

I discovered an issue when use a Scroller with ListView mobile control. The following example might help to better explain the problem.

<div data-role="view" data-title="Test View" id="testView">

<div>

<input type="search" value="" id="searchfor" class="k-textbox" placeholder="Search..." />

</div>

<div data-role="scroller">

<ul data-role="listview" id="customersListview" data-type="group"></ul>

</div>

In this example there is a <div> area followed by the Scroller that contains a ListView control and list view items are populated in JavaScrip.
If I try this as it is, when scroll the items in the list view it also scrolls the <div> above the scroller and pushes the Search box outside of the screen.
The fix to this problem is to set a "Height" for the scroller but problem is that I want the list covers the rest of the screen on the device and height of the screen depends on the type of the device and I cannot specify a fixed height for the scroller that works on all types of the devices.
Is there any way to have this working without setting a fixed height?

Thanks
Ron

ListView (Mobile)

answered on 23 Aug 2013

1 answer

263 views

How do I change the decimal separator in numeric input fields?

I need to change the decimal separator to "," or, even better, apply a globalization-setting like 'de-DE' in a mobile environment, just
like the globalization demo for web applications: http://demos.kendoui.com/web/globalization/index.html

But when i try e.g.

$("#amount").kendoNumericTextBox({
format: "c2" //Define currency type and 2 digits precision
});

i only get: '$("#amount").kendoNumericTextBox' is not a funtion. what should i do?

TIA Peter

General Discussions

answered on 23 Aug 2013

6 answers

1.1K+ views

[Solved] Recommended way to increase font size

Hello,

I would like the tree view to be much bigger to be used with more ease on mobile.
What is the recommended way to increase the font size and preserving the features like drag & drop, and selected items.

Thank you

TreeView

answered on 23 Aug 2013

1 answer

214 views

how to add cascade drop down list to Editor template

is there any possibility to add multiple drop down list (cascade drop down list)to editor template as resources.

Scheduler

answered on 23 Aug 2013

1 answer

164 views

[Solved] Grid Not Loading JSON Data Properly but renders grid

For some reason I seem to be unable to get any more than the following in the Kendo UI Grid:

HTML:

<div id="grid"></div>

<script>

var remoteDataSource = new kendo.data.DataSource(

{

transport:

{

read: {

type: "POST",

dataType: "json",

url: "/home/getopportunities/"

}

},

pageSize: 4

})

$("#grid").kendoGrid(

{

dataSource: remoteDataSource,

columns: [

{

title: "Title",

headerAttributes: {

style: "text-align:center"

},

attributes: {

"class": "table-cell"

},

width: 600,

filterable: true

},

{

title: "Activity Type",

headerAttributes: {

},

attributes: {

"class": "table-cell",

style: "text-align:center"

},

width: 100,

filterable: true

},

{

title: "Specialty",

filterable: true,

headerAttributes: {

style: "text-align:center"

},

attributes: {

"class": "table-cell",

style: "text-align:center"

}

},

{

title: "Total Credits",

format: "{0}",

headerAttributes: {

style: "text-align:center"

},

attributes: {

"class": "table-cell",

style: "text-align:center"

}

],

height: 430,

scrollable: true,

sortable: true,

pageable: true,

filterable: {

extra: false,

operators: {

string: {

contains: "Contains",

startswith: "Starts with",

eq: "Is equal to",

neq: "Is not equal to"

},

number: {

eq: "Is equal to",

neq: "Is not equal to",

gte: "Greater Than",

lte: "Less Than"

}

});

</script>

This is the JSON as the browser sees it:

[

{"ActivityID":367,"Title":"Non Webinar Test For Calendar","ActivityType":"Other","TotalCredits":2,"Specialty":"[AB] [AE]"},

{"ActivityID":370,"Title":"Stage - Test SI Changes Part II","ActivityType":"Other","TotalCredits":2,"Specialty":"[NE]"},

{"ActivityID":374,"Title":"Webinar Test Event For Calendar","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[FE] [NE] "},

{"ActivityID":401,"Title":"Module #1 Webinar: Learn Stuff","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[AB] ",},

{"ActivityID":403,"Title":"Module #3 Webinar: Learn Even More Stuff","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[AB] [AE]",}

]

I think I'm really close but can't make the last step to getting it working. All I get is a blank grid after the spinner runs.

Grid

answered on 23 Aug 2013