Questions on Kendo UI for jQuery Forum

1 answer

430 views

I am trying to follow along with the sample at http://docs.kendoui.com/getting-started/framework/mvvm/bindings/visible. I am using Icenium to build a mobile app, my index page consists of:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

</head>

<body>

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

<div data-bind="visible: isVisible">some content</div>

<button data-bind="click: hide">Hide</button>

</div>

<script>

var app = new kendo.mobile.Application(document.body, { transition: "slide" });

var viewModel = kendo.observable({

isVisible: true,

hide: function() {

this.set("isVisible", false);

}

});

kendo.bind($("#div"), viewModel, kendo.ui.mobile);

</script>

</body>

</html>

Yet when I click the button in the simulator, the content is not hidden ... is this a bug in the version of kendo UI mobile that icenium uses, or am I doing something wrong? According to the kendo.mobile.min.js it appears to be v2012.2.913.

MVVM

answered on 15 Dec 2012

1 answer

175 views

How to get members of a Json object

Hi,

Pretty sure this is my lack of Json knowledge but how can I get a member in a Json object returned?

I am also using a DataSource here is there any other suggested way to get data that will not be bound to a control?

test: function () {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://search.twitter.com/search.json?q=anton",

dataType: "jsonp"

}

},

requestStart: function (e) {

$('#loadingMain').show();

},

requestEnd: function (e) {

alert(dataSource.data().completed_in);

},

error: function (e) {

alert(e.status);

}

});

dataSource.read();

}

If you guys can add more simple non-bound examples to your documentation please.

Thanks,
Anton

Data Source

answered on 15 Dec 2012

1 answer

531 views

MVVM source data-bind to list view for detail view

I'd like to display the detail of a record inside a list view within my detail view. I'm trying to use an MVVM source binding and a data-template attribute to specify the list items and how they should look. Like this:

<script>

var model = kendo.observable({

user: {

firstName: 'Jonathan',

lastName: 'Marston',

age: 29,

isSubscribed: true,

subscriptionType: 'monthly'

subscriptionDate: new Date(2012, 12, 12)

}

});

</script>

<script id="detailTemplate" type="text/html">

<li><label>First Name</label>#: data.firstName #</li>

<li><label>Last Name</label>#: data.lastName #</li>

<li><label>Age</label>#: age #</li>

# if (data.isSubscribed) {

if (data.subscriptionType == 'monthly') { #

<li>Monthly subscription</li>

# } else { #

<li>Yearly subscription</li>

# } #

<li><label>Subscribed</label> #: kendo.format(data.subscriptionDate, 'MM/dd/yyyy') #</li>

# } else { #

<li>Not subscribed</li>

# } #

</script>

<div data-role="view" data-model="model">

<ul data-role="listview" data-template="detailTemplate" data-bind="source: user">

</ul>

</div>

Unfortunately it appears that the Kendo ListView component is interfering with the source binding because it expects to be bound to an array and have the data-template point to a template for each element in the array.

Is there any way to bind a list view to a flat structure like I'm trying to do here? I'd do <span>s with data-bind="text: ..." bindings, but the display logic is a bit too complicated for simple data bindings...

Thanks,
Jonathan

ListView (Mobile)

answered on 15 Dec 2012

2 answers

713 views

Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.

In my mobile application, I got the above error when i replace Q2 kendo.mobile.min.js into Q3 kendo.mobile.min.js.
Thanks in advance.

Application

answered on 14 Dec 2012

1 answer

67 views

Size should be same for both Kendo List Views

Hi All,

In my mvc view, I have 2 List-views. In one of the List-view, only 2 or 3 items will displayed when another List-view will have 10 items per page simultaneously. Even though, first list-view display only 1 or 2 or 3.., list-view size should be same along with second list-view which is displaying 10 items in the page. Currently, what is happening is first list-view size is reducing. How to overcome this problem? I am attaching screen shot. Immediate help will be appreciated.

Below is my code

@(Html.Kendo().ListView<Model>()
        .Name("sites")
        .Events(events => events.DataBound("OnDataBound"))
        .TagName("div")
        .ClientTemplateId("template")
        .DataSource(source =>
        source.Read(read => read.Action("Action", "Controller"))
        .PageSize(10))
        .Selectable(selection =>
        {
            selection.Enabled(true);
            selection.Mode(ListViewSelectionMode.Multiple);
        })
        .Pageable(pager => { pager.PageSizes(true);})
        )
Regards,
Partha.

ListView

answered on 14 Dec 2012

1 answer

304 views

Scrollview and PDF.js

Hello,
I'm developing a mobile application that contains a scrollview within a PDF document renders with PDF.js (Mozilla).

The problem is that the scrollview does not allow us to scroll down and we can only see a part of the pdf file.

Here is a sample project to show the problem : http://www.mediafire.com/?9md21u9zy56dwkd

Any idea ?
Thank's in advance,

ScrollView (Mobile)

answered on 14 Dec 2012

1 answer

158 views

nested model does not bind properly on batch mode submit

I have a nested ViewModel structure, with a custom editor on the grid that can edit the List of 'Items' on the QuestionLifeCycleAssignmentViewModel.

Here is the ViewModel:

public class AssignedQuestionViewModel

{

public int QuestionTemplateId { get; set; }

public int QuestionGroupTemplateId { get; set; }

public string QuestionText { get; set; }

public bool Required { get; set; }

public string RequiredCheckedString { get; set; }

public QuestionLifeCycleAssignmentViewModel LifeCycle { get; set; }

}

public class QuestionLifeCycleAssignmentViewModel

{

public List<QuestionLifeCycleAssignmentItemViewModel> Items { get; set; }

public string SelectedLifeCycleCsvList { get; set; }

}

public class QuestionLifeCycleAssignmentItemViewModel

{

public string LifeCycleDescription { get; set; }

public int LifeCycleId { get; set; }

public bool Assigned { get; set; }

public string LifeCycleAbbreviation { get; set; }

}

Here is the View:

@(Html.Kendo().Grid<AssignedQuestionViewModel>()

.Name("Questions_#=QuestionGroupTemplateId#")

.Columns(columns =>

{

columns.Bound(i => i.QuestionTemplateId).Hidden();

columns.Bound(i => i.QuestionGroupTemplateId).Hidden();

columns.Bound(i => i.Required);

columns.Bound(i => i.QuestionText);

columns.Bound(i => i.LifeCycle).ClientTemplate("\\#=LifeCycle.SelectedLifeCycleCsvList\\#");

}

)

.ToolBar(toolBar => toolBar.Save())

.Editable(editable => editable.Mode(GridEditMode.InCell))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Model(model =>

{

model.Id(m => m.QuestionTemplateId);

model.Field(m => m.QuestionTemplateId).Editable(false);

model.Field(m => m.QuestionGroupTemplateId).Editable(false);

model.Field(m => m.QuestionText).Editable(false);

})

.Read(read => read.Action("ReadAssignedQuestions", "QuestionManagement", new { p = "#=QuestionGroupTemplateId#"})

.Type(HttpVerbs.Post)

)

.Update(update => update.Action("SaveAssignedQuestions", "QuestionManagement"))

)

.Events(e => e.Edit("testEvent"))

.ToClientTemplate()

)

Here is the Controller:

[HttpPost]

[HandleJsonException]

public ActionResult SaveAssignedQuestions([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<AssignedQuestionViewModel> models)

{

var result = _questionManagementHelper.SaveQuestionAssignmentEdits(models);

return Json(GetJsonResponse(result, "An error occurred saving assigned question edits."));

}

Breaking in the controller, copied from the Watch window:

-       LifeCycle   {Esurety.Core.ViewModels.QuestionManagement.QuestionLifeCycleAssignmentViewModel}   Esurety.Core.ViewModels.QuestionManagement.QuestionLifeCycleAssignmentViewModel

-       Items   Count = 6   System.Collections.Generic.List<Esurety.Core.ViewModels.QuestionManagement.QuestionLifeCycleAssignmentItemViewModel>

-       [0] {Esurety.Core.ViewModels.QuestionManagement.QuestionLifeCycleAssignmentItemViewModel}   Esurety.Core.ViewModels.QuestionManagement.QuestionLifeCycleAssignmentItemViewModel

Assigned false bool

LifeCycleAbbreviation null string

LifeCycleDescription null string

LifeCycleId 0 int

It is kind of hard to read, but you can see that the List of Items has 6 Items, which is a property of LifeCycle, which is a property of the top-level AssignedQuestionViewModel. Everything is correct (the count of items is correct), except the Items have no values (you can see the nulls and 0 for the ID, and Assigned is always false even when it isn't supposed to be). When I inspect in fiddler, using the WebForms tab, the data is correct, so it is being submitted, it is the binding that is not working correctly. Here is from Fiddler WebForms:

group
filter
models[0].QuestionTemplateId	1
models[0].QuestionGroupTemplateId	1
models[0].QuestionText	First Name
models[0].Required	true
models[0].RequiredCheckedString	checked
models[0].LifeCycle.Items[0][LifeCycleDescription]	Bond Application
models[0].LifeCycle.Items[0][LifeCycleId]	1
models[0].LifeCycle.Items[0][Assigned]	true
models[0].LifeCycle.Items[0][LifeCycleAbbreviation]	Nb

And here is the TextView:

sort=&group=&filter=&models%5B0%5D.QuestionTemplateId=1&models%5B0%5D.QuestionGroupTemplateId=1&models%5B0%5D.QuestionText=First+Name&models%5B0%5D.Required=true&models%5B0%5D.RequiredCheckedString=checked&models%5B0%5D.LifeCycle.Items%5B0%5D%5BLifeCycleDescription%5D=Bond+Application&models%5B0%5D.LifeCycle.Items%5B0%5D%5BLifeCycleId%5D=1&models%5B0%5D.LifeCycle.Items%5B0%5D%5BAssigned%5D=true&models%5B0%5D.LifeCycle.Items%5B0%5D%5BLifeCycleAbbreviation%5D=Nb&models%5B0%5D.LifeCycle.Items%5B1%5D%5BLifeCycleDescription%5D=Renewal&models%5B0%5D.LifeCycle.Items%5B1%5D%5BLifeCycleId%5D=2&models%5B0%5D.LifeCycle.Items%5B1%5D%5BAssigned%5D=true&models%5B0%5D.LifeCycle.Items%5B1%5D%5BLifeCycleAbbreviation%5D=Rw&models%5B0%5D.LifeCycle.Items%5B2%5D%5BLifeCycleDescription%5D=Cancellation&models%5B0%5D.LifeCycle.Items%5B2%5D%5BLifeCycleId%5D=4&models%5B0%5D.LifeCycle.Items%5B2%5D%5BAssigned%5D=false&models%5B0%5D.LifeCycle.Items%5B2%5D%5BLifeCycleAbbreviation%5D=Cn&models%5B0%5D.LifeCycle.Items%5B3%5D%5BLifeCycleDescription%5D=Reinstatement&models%5B0%5D.LifeCycle.Items%5B3%5D%5BLifeCycleId%5D=6&models%5B0%5D.LifeCycle.Items%5B3%5D%5BAssigned%5D=false&models%5B0%5D.LifeCycle.Items%5B3%5D%5BLifeCycleAbbreviation%5D=Ri&models%5B0%5D.LifeCycle.Items%5B4%5D%5BLifeCycleDescription%5D=NonPBR&models%5B0%5D.LifeCycle.Items%5B4%5D%5BLifeCycleId%5D=7&models%5B0%5D.LifeCycle.Items%5B4%5D%5BAssigned%5D=false&models%5B0%5D.LifeCycle.Items%5B4%5D%5BLifeCycleAbbreviation%5D=Np&models%5B0%5D.LifeCycle.Items%5B5%5D%5BLifeCycleDescription%5D=PBR&models%5B0%5D.LifeCycle.Items%5B5%5D%5BLifeCycleId%5D=8&models%5B0%5D.LifeCycle.Items%5B5%5D%5BAssigned%5D=false&models%5B0%5D.LifeCycle.Items%5B5%5D%5BLifeCycleAbbreviation%5D=Pb&models%5B0%5D.LifeCycle.SelectedLifeCycleCsvList=Nb%2CRw

Thanks!
Danny

Grid

answered on 14 Dec 2012

1 answer

131 views

Grouping

I have a grid that is populate based on a data source that is changed according to user search criteria. Web page is not refreshed when updating the grid. Here is the problem, Let say that I grouped the grid based on column A after the first search. If I click on the search again with or without changing the search criteria and repopulate the data to the grid, it no longer allow me to group based on any other column except column A ( previous grouping ).

Here is the extract of the code that does the data binding:
$.ajax({
type: "POST",
async: true,
timeout: 60000,
url: serviceMaterialsUrl,
data: paramsData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#grid").val('');
$("#grid").html('');
$("#grid").kendoGrid({
editable: false,
dataSource: {
data: data.d,
pageSize: 100
},
sortable: {
mode: "multiple",
allowUnsort: true
},
filterable: true,
groupable:true,
scrollable:true,
resizable: true,
columnMenu: true,
pageable: {pageSizes: [100, 200, 300]},
detailInit: detailInit,
columns: [
{ field: "select", ..." },
{ field:..... }
]
});
},
error: function (err) {
alert('Error');
}
});

Grid

answered on 14 Dec 2012

3 answers

483 views

How to display "No items to display" in the middle of List view body

Hi All,

How to display "No items to display" in the middle of List view body?
Please do the needful as soon as possible.

Regards,
Partha.

ListView

answered on 14 Dec 2012

2 answers

88 views

FX Effects

Hello,

can I use FX with Kendo Mobile?

Even declaration fails

    <script src="js/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="js/kendo.all.js" type="text/javascript"></script>
    <link href="css/kendo.common.css" rel="stylesheet" />
    <link href="css/kendo.default.css" rel="stylesheet" />
    <link href="css/kendo.mobile.all.css" rel="stylesheet">
  <div data-role="view" data-layout="layout">
  	<div data-role="content">
            <div id="foo">
                I will be animated
            </div>        
        </div>   
  </div>

    var effectWrapper = kendo.fx($("#foo"));
Thanks for help.

General Discussions

answered on 14 Dec 2012