Questions on Kendo UI for jQuery Forum

1 answer

264 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

139 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

115 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

196 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

758 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

131 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

160 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

1 answer

121 views

hybrid app

hi everyone..i'm a new in kendo ui. well i want build a hybrid mobile app that works on both andoid and iOS, and i know that u've got to define a variable in the javascript portion to define on which OS you want to test u'r app like this:

var app = new kendo.mobile.Application(document.body);

Now if want to test my hybrid app on both android and iphone emulators at the same time, do i need to declare two variables??

General Discussions

answered on 23 Aug 2012

0 answers

182 views

Chart + Ajax + PartialView not redrawing/refreshing

Hi,

I have a chart (built with the mvc helper) in a strongly typed partial view. The model in my partial view serves as the datasource for my chart.

The partial view's parent contains a form which triggers an ajax call to my controller. The partial view itself resides in a div which is the updatetargetid for my ajax form. The controller returns my partial view (containing the chart) with an updated model. The initial page load works fine. However when I post my ajaxified form, the chart will not redraw.

When looking at the response returned from my controller I see that the category/series arrays are filled with values from my updated model. However...the chart itself is not drawn.

Obviously I want my chart to be redrawn with the new updated values. Preferebly I do not want to use jQuery as I like the mvc helpers.
Any help regarding this issue is much appreciated!

Charts

asked on 23 Aug 2012

1 answer

305 views

Making a tab active

I have a tabstrip that works for hash urls, but one of the tabs does a refresh but should stay on the same view.

<div data-role="tabstrip" id="tabstripMainApp">
<a href="#viewJobs" data-icon="home">Current</a>
<a href="#viewJobsCompleted" data-icon="more">Completed</a>
<a href="#viewSettings" data-icon="about">Settings</a>
<a class="btnRefreshView" data-icon="refresh">Refresh</a>
</div>

The said tab fires this event successfully:

$('.btnRefreshView').bind('click', function () {
console.log('Refresh view :', window.location.hash)
if (window.location.hash == '#viewJobsCompleted') {
dsviewJobsCompleted.read();
} else {
dsviewJobs.read();
}
})

But then the btnRefreshView tab shows as active when I want the prior tab that was active to be active.

How do I make a different tab active please?

TabStrip (Mobile)

answered on 23 Aug 2012