Questions on Kendo UI for jQuery Forum

0 answers

109 views

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

766 views

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

151 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

229 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

114 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

97 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

155 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

709 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);

dataSource.insert(0, model);

dataSource.sync();

e.preventDefault();

});

});

Grid

answered on 23 Aug 2012

1 answer

110 views

Compatibility with RhoMobile

Hi,

Can anyone tell me if Kendo UI Mobile can be used in conjunction with the RhoMobile framework, instead of the JQuery Mobile UI it uses as standard?

Any info/examples would be greatly appreciated.

Thanks.

General Discussions

answered on 23 Aug 2012

0 answers

143 views

Kendo MVC Grid - rowindex on row selection (not in script)

Hi,

I have a column in Kendo grid as a hyper link to Edit that row in another page. I have defined the link to get the "Id" of that row data as

columns.Template(@<text>

@Html.ActionLink(@item.Id.ToString(), "Edit", "CompanyDtails", new { companyId = @item.Id, currentIndex = 0 })

</text>)

.ClientTemplate("<a href='/CompanyDetails/CompanyDetail?companyId=#=Id#&currentIndex=#=0#'>Edit</a>")

.Title("Edit").Width("4%");

My requirement is, on Edit click, I need to pass the rowindex in the grid to the controller. I don't know how to define that. In the above code I have mentioned the currentIndex as 0, which should be the actual rowindex. Please let me know how to defind the rowindex in the template.

Thank you.
.

Grid

asked on 23 Aug 2012