Questions on Kendo UI for jQuery Forum

1 answer

313 views

Hi!

There is dashboard page with several kendo window objects.
I'd like to store window size, position, minimize state and z-order

I was able to retrieve and save window postion and size

('#div_widget').kendoWindow ({

actions: ["Refresh", "Maximize", "Minimize"],

height : get_widget_setting (id_widget, "height", "300px"),

width : get_widget_setting (id_widget, "width", "600px"),

minWidth: 600,

minHeight: 260,

title : w.label,

iframe : true,

content: w.href,

resize : function(e){

var widget = e.sender.element.data("kendoWindow");

var is_maximized = widget.options.isMaximized; // Is this a dirty hack? Are there another ways?

if (is_maximized) {

set_global_setting ("maximized_widget", id_widget);

return;

}

var wrapper = widget.wrapper;

save_widget_setting(id_widget, "height", wrapper.css("height"));

save_widget_setting(id_widget, "width", wrapper.css("width"));

},

dragend : function (e) {

var position = e.sender.element.data("kendoWindow").wrapper.offset();

save_widget_setting(id_widget, "top", position.top + "px");

save_widget_setting(id_widget, "left", position.left + "px");

}

})

- How can I catch minimize button click? I want to save window maximize/minimize state.
- Is there a way to determine window z-order change event and window currrent z-order?

Window

answered on 30 May 2013

3 answers

129 views

Charts Settings

Hello All,

I have started exploring the different types of charts. Mainly, I am looking for Pie and Bar charts. I have attached the razor file. I would like to create the charts like images.

What are the legend settings available to create the chart in the same manner for Pie chart?

How can I fill the bar with the data level and the rest should be transparent?

Let me know what are the solutions available to create such charts.

Thanks!

Charts

answered on 30 May 2013

6 answers

139 views

RTL not working in 2012 Q3 BETA

Just downloaded 2012 Q3 Beta with so much hope for RTL support, but sadly it's not working the way it should. Is it be cause of beta, or something in my pc configuration?

I tested it with Chrome 22, Firefox 14 and IE 9 on my win 7 64bit.
In all of theme layout was not rtl, and column header's weren't align with their body.

Grid

answered on 30 May 2013

3 answers

214 views

MVVM to bind textboxes to a row of data returned from remote datasource

We are retrieving details for the selected row in a grid from a remote data source. The data retrieval works as expected. We have an Observable object from the data returned from this call. We would like this information to be bound to few textboxes and checkboxes on page using the Kendo.Bind() method, but for some reason it does not work. It does work if we bind it to a drop down list but not to a textbox or label for that matter.

I understand we are getting a table from the remote data (in JSON), but what we would like is to bind certain row and column to a textbox.

This is the example of data returned from remote service -
var data = [{ "FundingResourcePolicyDetailId": 1146060, "PatientFundingResourceId": 3594866, "IdNumber": "91234567y1", "IssueDate": "04/30/2012", "StartDate": "04/15/2012", "EndDate": "04/30/2012", "Group": "", "CoPay": 0.0, "Deductible": 0.0, "PercentageCoverage": 0, "Basic": 0, "Preventive": 0, "Major": 0, "IsVerified": false, "IsAssingmentAccepted": true, "CardFirstName": "MICKEY", "CardLastName": "TESTPATIENT", "CardMiddleInitials": "TICKLE PIN" }];

Here is a example of what we are trying to accomplish-

http://jsfiddle.net/qvKRk/402/

Thanks.
Sameer

MVVM

answered on 30 May 2013

1 answer

193 views

Pie Chart Border

Is it possible to set the border width and color for the pie chart to emboss the whole pie chart?

Please refer the attached pie chart image.

Charts

answered on 30 May 2013

1 answer

357 views

Onclick event is not firing in DatePicker and DateTimePicker controls when accessed from Safari browser (via iPAD).

hi,
Onclick event (when the user clicks on a particular date) is not firing in DatePicker and DateTimePicker controls, this happens when the web page uses the following meta tag <meta name="apple-mobile-web-app-capable"content="yes"> (this meta tag is
used to run the web applications in full screen mode in safari browser
when accessed from iPAD), Without the above mentioned Meta tag both the controls are working fine.

DatePicker

answered on 30 May 2013

3 answers

198 views

Why is my template adding extra top and bottom spacing on a row?

I have a GridView with a custom rowtemplate, looking like this:

@(Html.Kendo().Grid(Model.UnitTypes)

.Name("Grid")

.RowTemplate(@<tr>

<td>

<div>@item.Name</div>

</td>

<td>

<div>@item.CurrentRun.Operation.WellContract.Location</div>

</td>

<td>

<div>@item.CurrentRun.Operation.WellContract.Name</div>

</td>

<td>

<div>@item.CurrentRun.Id</div>

</td>

<td>

<div>@item.CurrentRun.RunTask</div>

</td>

<td>

<div>@item.Status.StatusText</div>

</td>

<td>

<div>Lamp</div>

</td>

<td>

<div>

<div class="progress progress-warning">

<div class="bar" style="width: 50%">

<span class="offset6" style="color: #676767;">@Math.Round(item.CurrentRun.LatestWellLogEntry.Depth.Value, 2)</span>

</div>

</td>

<td>

<div>@Math.Round(item.CurrentRun.LatestWellLogEntry.Speed.Value, 2)</div>

</td>

<td>

<div>@Math.Round(item.CurrentRun.LatestWellLogEntry.Tension.Value, 2)</div>

</td>

<td>

<div>@item.CurrentRun.Name</div>

</td>

<td>

<form method="POST" action="~/UnitDetails/Index/@item.Id">

<input type="submit" class="k-button" value="Details" />

</form>

</td>

</tr>

)

.HtmlAttributes(new { style = "height:430px;" })

.Columns(columns =>

{

columns.Bound(p => p.Name).Title("Unit");

columns.Bound(p => p.CurrentRun.Operation.WellContract.Location).Title("Site");

columns.Bound(p => p.CurrentRun.Operation.WellContract.Name).Title("Well");

columns.Bound(p => p.CurrentRun.Id).Title("Run");

columns.Bound(p => p.CurrentRun.RunTask).Title("Task");

columns.Bound(p => p.CurrentRun.Operation.Description).Title("Operation");

columns.Bound(p => p.Status.StatusText).Title("Status");

columns.Bound(p => p.CurrentRun.LatestWellLogEntry.Depth).Title("Depth (m)");

columns.Bound(p => p.CurrentRun.LatestWellLogEntry.Speed).Title("Speed (m/min)");

columns.Bound(p => p.CurrentRun.LatestWellLogEntry.Tension).Title("Weight (kg)");

columns.Bound(p => p.CurrentRun.Name);

columns.Command(command => command.Custom("Edit Unit").Action("Index", "UnitDetails")).Width(85);

})

.DataSource(dataSource =>

dataSource.Server().Model(m => m.Id(p => p.Id)))

.Pageable()

.Scrollable(builder => builder.Height(250))

.Sortable())

Whenever I open my page and look at the grid, it contains spacing both at the top and bottom of each row, causing the lines that separates the columns to be spaced apart vertically. (See attached image)

Am I doing the template thing wrong or am I missing something?

Grid

answered on 30 May 2013

1 answer

47 views

How to export chart that including many pictures,not only one picture?

How to export chart that including many pictures,not only one picture?I can export one picture,How to export more than one chart?

Charts

answered on 30 May 2013

2 answers

415 views

Grid in refresh() popup window can't fire databound event

Hello:

this is the continue of my previous post: No scrollbar on tablets when window is created by Refresh()
however this is a different issue, not about srollbars, so i am opening a new thread.

The popup is generated by calling refresh() method, because I need to pass in a parameter dynamically, this is working all fine. The problem is in this popup, I have a Kendo Grid, and it needs to fire the DataBound event, but it doesn't work. Using F12 in chrome, under 'Console', it shows this error:

Uncaught ReferenceError: xxx is not defined

where xxx is the databound function name. (see attached screen shot)

however, if popup window is called just by $("#winName").data("kendoWindow").center().open();
the grid inside the popup has databound event works fine.

These are changes I've made to the test.zip project provided by Petur Subev in reply to my previous post.

on Home/About.cshtml:

@{

ViewBag.Title = "About Us";

}

<h2>About</h2>

<p>

Put content here. ABOUT

</p>

@(Html.Kendo().Grid<KendoMVCWrappers.Models.Person>()

.Name("gridEle2")

.Columns(cols =>

{

cols.Bound(e => e.Name)

.ClientTemplate("<span id='btn_#=PersonID#' >#:PersonID#</span>");

cols.Bound(e => e.Name)

.ClientTemplate("<span id='btn2_#=PersonID#' >#:PersonID#</span>");

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetPeople", "Home").Type(System.Web.Mvc.HttpVerbs.Post))

)

.Events(events => events.DataBound("xxx"))

)

<script>

function xxx(e) { alert('xxx');}

</script>

<p>

кст. Неговите корени са в класическата Латинска литература от 45г.пр.Хр., ... ...

</p>

I am using kendo version of 2013.1.514

please advise,
Thank you

Window

answered on 30 May 2013

2 answers

6.2K+ views

Unable to get Custom Validation Working on a Grid

I have a grid bound to a datasource containing a list of poeple defined with 4 fields (Id, FirstName, LastName, and Birthday). I would like to perform custom validation on the Birthday field. The DataSource is defined as follows:

var peopleData = [

{ Id: 1, FirstName: "Person", LastName: "One", Birthday: new Date(1973, 11, 30) },

{ Id: 2, FirstName: "Person", LastName: "Two", Birthday: new Date(1967, 9, 5) }

];

var peopleDataSource = new kendo.data.DataSource({

data: peopleData,

schema: {

model: {

id: "Id",

fields: {

Id: { type: "number" },

FirstName: { type: "string" },

LastName: { type: "string" },

Birthday: {

type: "date",

validation: {

rules: {

custom: function(input) {

if (console != undefined) { console.log(input); }

var today = new Date();

return input < today;

}

},

messages: {

custom: "Birthday cannot be in the future"

}

});

The grid is defined as follows:

$("#personGrid").kendoGrid({

dataSource: peopleDataSource,

editable: true,

columns: [{

field: "FirstName",

title: "First Name"

},{

field: "LastName",

title: "Last Name"

},{

field: "Birthday",

title: "Birthday",

template: "#= kendo.toString(Birthday, 'MM/dd/yyyy') #"

}]

});

When I edit the Birthday field, the custom validation defined in the peopleDataSource for the Birthday field is not called.

What am I doing wrong?

I am using Kendo UI, version: 2012.1.322.open-source.

Code is attached.

Regards,

John DeVight

Validation

answered on 29 May 2013