Questions on Kendo UI for jQuery Forum

2 answers

158 views

Editor in Grid

Hi,

Is it possible to use kendoEditor in the Grid popup editor?

Thanks
Safak

Editor

answered on 23 Aug 2012

1 answer

348 views

How to set axisCrossingValue to always be maximum value?

Hi, I'm trying to make a line chart that uses two y-axes, one on the left side of the chart and one on the right.

Originally I got it to work by using the length of values in the datasource, like this:

axisCrossingValue: [0, datasource.data().length] }

However, this doesn't work when I interpolate the missing values on the chart, as there can be many more categories on the x-axis than there are elements in the data array. I end up getting an axis hanging out somewhere in the middle of the chart.

Does anyone know a way I can get the number of categories on the x-axis WHILE instantiating the chart?
Or would I have to access the number of categories and change the axisCrossingValue after the chart has been built and call refresh()?

Thanks for any ideas!
Erik

Charts

answered on 23 Aug 2012

0 answers

134 views

Remove CSS Formatting?

Greetings,

We already have CSS formatting for our numeric textbox, how would we otherwise remove the built in / default CSS formatting? When I initally wire up the numeric text box, we see a battle between teh KendoUI css and our very own.

NumericTextBox

asked on 23 Aug 2012

2 answers

789 views

[Solved] Accessing (model) values of selected row

How do I access the (model) values of a selected row using the new 2012 Kendo UI Web? I.e. in the change event of a Kendo grid.

Where do I find more resources on this topic and also on models in the 2012 version? I haven't found the answers in the datasource or grid documentation/demos sections.

Grid

answered on 23 Aug 2012

0 answers

170 views

Scrollable iframe or alternative

I need to load html & css from a remote page into a view. I've tried using and iframe with the following code

<div data-role="view" data-layout="app" data-title="about" id="viewid">
<iframe src="http://easytrip.fusio.net/easytrip.htm"></iframe
</div>

But the iframe isn't scrollable in a mobile browser. Is there a way of making the iframe scrollable or a different method of loading a remote page into a view and have it scrollable?

General Discussions

asked on 23 Aug 2012

1 answer

252 views

Remote Validation Similar to Unobtrusive jQuery Validation

I was wondering if it is possible to use Kendo's Validation to achieve something similar to Microsoft's Unobtrussive ValidatIon:
http://weblogs.asp.net/jgalloway/archive/2012/03/23/asp-net-web-api-screencast-series-part-5-custom-validation.aspx

In Kendo I can attach data attributes to my form fields in much the same way that I can with Unobtrussive Validation. However with The latter, I can also do this:
$.validator.unobtrusive.revalidate(form, validationResult);

Which makes it possible to display server validations by building up a list of Field names and their associated errors. Example of validationResult:
{"Author": "Author is too long! This was validated on the server."}

Is such a feature possible in Kendo? If not, I could see it as a useful addition for the future. We can validate 95% of what we need to do on the client, but something like this would be great for server validations such as checking for duplicates in the data store, etc.

Validation

answered on 23 Aug 2012

2 answers

136 views

Magic data breaks pie chart

If I place the following on my page, no graph is displayed:

This issues appears to be that I'm passing 2568 as a data value nothing is rendered. Is there a reason for this?

<script>
function createBuildingChart() {
            $('#buildingChart').kendoChart({
                theme: $(document).data('kendoSkin') || 'default',
                dataSource: { data: graphDataBuilding },
                chartArea: { height: 250, width: 218 },
                legend: { position: 'bottom', visible: true, margin: { left: 1, right: 1 }, labels: { font: '10px Arial' }, border: {width:1, color:'black', dashType:'solid'} },
                series: [{ type: 'pie', field: 'Value', categoryField: 'Text', padding: 0}],
                tooltip: { visible: true, template: '<strong>${ category }</strong>: ${ value }' },
                seriesColors: ["#4575B4", "#D53E4F", "#F46D43", "#FDAE61", "#FEE08B"]
            });
        }
</script>
<script type='text/javascript'>var graphDataBuilding = [{ 'Text': 'Active', 'Value': 2568 }];createBuildingChart();</script>

Charts

answered on 23 Aug 2012

0 answers

111 views

Repopulating grid fails

I'm using the following ajax request to refresh the grid, but I always get an empty grid. I'm not able to find what I'm doing wrong.

$(document).ready(function () {

$(document).on("click", ".ceva", getNextState);

});

function getNextState(e) {

var grid = $("#Grid").data("kendoGrid");

var ID = $(e.currentTarget).attr('id');

var orderID = $(e.currentTarget).attr('data-ID');

var urlCon = "Idea/NextState?state=" + ID + "&iD=" + orderID;

$.ajax({

type: "POST",

url: urlCon,

contentType: "application/json; charset=utf-8",

success: function (data) {

var x = data;

grid.dataSource.data(data);

grid.refresh();

},

error: function () {

alert("something went wrong");

}

});

I'm trying to achieve a way to remove a row from the table after I trigger the NextState method for that row. Is there a better way to do that then refreshing the grid's data source?
Thanks in advance.

Grid

asked on 23 Aug 2012

2 answers

185 views

Initial group when binding to a table

Is it possible to set an initial group when binding to an existing HTML table? I have tried setting the group field in the datasource.

<asp:Repeater runat="server" ID="repList" EnableViewState="False">

<HeaderTemplate><table id="grid">

<thead>

<tr>

<th data-field="ShortName">Short Name</th>

<th data-field="Site">Site</th>

</tr>

</thead>

<tbody>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td><%#Eval("ShortName")%></td>

<td><%#Eval("tblSite.Site")%></td>

</tr>

</ItemTemplate>

<FooterTemplate></tbody></table></FooterTemplate>

</asp:Repeater>

<script type="text/javascript">

$(function () {

$('#grid').kendoGrid({

datasource : { group: {field: "Site"}},

groupable: true,

scrollable: true,

sortable: true,

pageable: true,

filterable: true

});

</script>

Grid

answered on 23 Aug 2012

4 answers

742 views

No sync with datasource

Hi,

i am implementing an copy button for a grid. Thats my code. The click handler is implemented at the end. I can insert the new record to the grid but when i call

dataSource.sync();

no request is made to the server. Can i call the create function manually? I tested the code with

Kendo UI Web v2012.1.322
and
Kendo UI Complete v2012.1.515

$(document).ready(function() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/rentingtenants/?property_id=#{@property.id}",

dataType: "json"

},

update: {

url: "#{update_attribute_rentingtenants_url}",

dataType: "json",

type: "GET",

complete: function(e) {

$("#grid").data("kendoGrid").dataSource.read();

}

},

destroy: {

url: "#{remove_rentingtenants_url}",

dataType: "json",

type: "GET"

},

create: {

url: "#{rentingtenants_url(:property_id => @property.id )}",

type: "POST",

complete: function(e) {

$("#grid").data("kendoGrid").dataSource.read();

}

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

batch: true,

schema: {

model: {

id: "id",

fields: {

renter: { editable: true, type: "string", validation: { required: true } },

useright: { editable: false, type: "string" },

rentablespace: {

editable: true,

nullable: false,

type: "number",

validation: {

min: 1,

rules: {

required: true

},

messages: {

required: "Bitte geben Sie eine Mietfläche ein."

}

},

vacant: { editable: true, type: "boolean" },

monthlyrent: { editable: true, type: "number" },

rental_end: { editable: true, type: "date"

},

indexfree: { editable: true, type: "boolean" },

option: { editable: true, type: "boolean" },

comments: { editable: true, type: "string" }

}

},

aggregate: [ { field: "rentablespace", aggregate: "sum" }, { field: "monthlyrent", aggregate: "sum" }]

});

$('#grid').kendoGrid({

sortable: true,

dataSource: dataSource,

navigatable: true,

dataBound: onDataBound,

remove: function(e) {

handleRemoveChanges(e, this);

},

saveChanges: function (e) {

handleSaveChanges(e, this);

},

toolbar: [

{ name: "create", text: "Neue Mieteinheit" },

{ name: "save", text: "Änderungen speichern" },

{ name: "cancel", text: "Änderungen verwerfen" }

],

columns: [

{ field: "renter", title: "Mieter", width: 100, editor: renterDropDownEditor },

{ field: "useright", title: "Nutzungsrecht", width: 120},

{ field: "rentablespace", title:"Mietfläche", template: "#= kendo.toString(rentablespace, 'n2') # m²", footerTemplate: "#= kendo.toString(sum, 'n2') # m²", width: 110 },

{ field: "vacant", template: "#= vacant == true ? 'Ja' : 'Nein' #", title:"Leerstehend", width: 80 },

{ field: "monthlyrent", title:"Monatsmiete", format: "{0:c}", footerTemplate: "#= kendo.toString(sum, 'c2') #", width: 90 },

{ field: "rental_end", title:"Vertragsende", width: 90, template: "#= rental_end != 'null' && rental_end != '' ? kendo.toString(rental_end, 'dd.MM.yyyy') : '' #", width: 90 },

{ field: "indexfree", title:"Indexfrei", template: "#= indexfree == true ? 'Ja' : 'Nein' #", width: 60 },

{ field: "option", title:"Option", template: "#= option == true ? 'Ja' : 'Nein' #", width: 50 },

{ field: "comments", title:"Kommentar", width: 100 },

{ title: "", width: 100, command: [{ name: "copy", text: "Kopieren", className: "copy-button"}, { name: "destroy", text: "Löschen" }] },

],

editable: {

update: true,

confirmation: "Wollen Sie die Mieteinheit wirklich löschen?",

save: true,

mode: "incell"

}

});

$("#grid").delegate(".copy-button", "click", function(e) {

var row = $(this).closest("tr"),

grid = $(this).parents("[data-role=grid]").data("kendoGrid"); //gets child grid

var model = grid.dataItem(row);