Questions on Kendo UI for jQuery Forum

1 answer

147 views

MVVM and SEO

Let's suppose an HTML page accessed via http://www.example.com/page?id=xxxxx where id identifies the persisted object displayed in the page.
This HTML page has several kendo ui widgets bound to an observable view model via MVVM in complaince with the framework.

The requirement is to have this page properly indexed by search engines. In other words, we need this page to display the persisted object with a text browser (no javascript). What is the proper way to achieve this?

My current approach is to load values in input controls server side, with a serialized copy of the persisted object in a hidden field.

When the page with layout and data reaches the browser, the view model reads its values from the hidden field and the input controls are initialized to display as Kendo UI widgets and bound to the view model.

When the page is read by a search engine crawler, the data is indexed whether the crawler has some Javascript capabilities or not.

Is there a better approach?

MVVM

answered on 01 Aug 2014

3 answers

279 views

Dynamically create a modalview

Hi
Is this possible? I would like to create a modalview via an ajax call, possibly then destroy it and make another one?

On that topic is this possible with normal views as well, I gather they aren't made until navigate is called but I haven't tried to replace them after they've been made

thanks

ModalView

answered on 01 Aug 2014

2 answers

309 views

how to load local shapefile in map ?

is there an way to load local shapefile in map ?

Map

answered on 01 Aug 2014

1 answer

487 views

Kendo Validator: Disable OnBlur for single custom rule

Hi eveyone,

I have a custom rule (Rule A) on a Kendo Validator that I would like to only fire when I call validator.Validate() and NOT OnBlur. The validating this rule OnBlur causes a lot of problems.

The Kendo Validator also has another custom rule (Rule B) that fires on the OnBlur as well as the Validate().

How can I stop the OnBlur from happening on Rule A, but keep it active for Rule B?

Thanks

Dave

Validation

answered on 01 Aug 2014

1 answer

223 views

Navigating between Pages

Hello,

Is there a simple example of how to navigate between different pages?

I am using version telerik.kendoui.professional.2014.1.528.trial and even on simple examples of traversing between pages using href or app.navigate, either I loose the style or the content of the pages.
No issues if I just go directly to the pages.

Thanks for your time and help.

Application

answered on 01 Aug 2014

1 answer

645 views

dynamically populate combobox

I'm trying to dynamically populate a combobox as the user types, however, once the combobox has done the first data fetch (i.e. minLength: 3) it does not fire again if the user hits backspace a few times and types in a new phrase.

How is this dynamically server filtering possible?

My setup:

var userDs = new kendo.data.DataSource({

transport: {

read: {

type: "POST",

url: '@Url.Action("GetUsers", "System")',

data: function() {

return {

filter: $("#user").data("kendoComboBox").input.val()

}

},

dataType: "json",

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

},

parameterMap: function(data, type) {

return kendo.stringify(data);

}

});

$("#user").kendoComboBox({

template: '<div>#:data.name# (#:data.role#, #:data.country#)</div>',

dataSource: userDs,

autoBind: false,

dataTextField: "name",

dataValueField: "id",

minLength: 3,

placeholder: "Select user...",

});

public JsonResult GetUsers(string filter)

{

List<object> result = new List<object>();

...

return Json(result);

}

ComboBox

answered on 01 Aug 2014

1 answer

201 views

How to Show a busy animation for longer non-ajax calls?

I have a function that's running a 2-3 second long operation on the client (no ajax calls).
I'm trying to show a "Busy/Processing" animation while this operation is running as follows:

var ajaxContainer = $('.elementClass'

);

kendo.ui.progress(ajaxContainer,

true

);

// long operation here



kendo.ui.progress(ajaxContainer, false);

but this does not work as expected. the result that i get is that the operation runs without showing the progress. although it does show when the operation ends.

closest sample i could find online is for progress that's updated based on button clicks, but this is not really my case
http://jsfiddle.net/bundyo/64CRY/31/

How can i achieve this correctly using kendo UI?

General Discussions

answered on 01 Aug 2014

1 answer

254 views

Kendo UI Grid Hierarchy how to get children(detail) IDs by clicking one of the row field

I am trying to get all the children(detail) IDs when I click one of the row instead of using expand row. I want to click one of the detail row and get all the detail IDs. I tried calling detailInit from the click event but I am getting error. Either a way to get all child in an array? I am trying to get the IDs to call other service. Here is an example of a code.

When I click one of the detail row, I want to get all detail IDs in that row with out expanding the row. Please help me how to achieve this. I want to get OrderIDs. I have tried several methods but I am not able to achieve what I wanted.

<body>

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

<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title",
title: "Detail"
}
]
});
});

function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
</div>

</body>
</html>

Grid

answered on 01 Aug 2014

1 answer

260 views

Clear default selected tab using tabstrip

Hello,
I am using the code below to populate the header and footer on a page.

How to clear the first, default selected tab?

Thanks for your time and help.

<div id="example" data-role="view" data-layout="default">

</div>

<div data-role="layout" data-id="default">

<header data-role="header">

<div data-role="navbar" style="background-color:\#1e4e6d;">

<span data-role="view-title" style="color:\#ffffff;">Header</span>

</div>

</header>

<footer data-role="footer">

<div id="tabstrip" data-role="tabstrip">

<a data-icon="e038-e"></a>

<a data-icon="info"></a>