Questions on Kendo UI for jQuery Forum

9 answers

140 views

Problem with the method stopEndlessScrolling

Hello,
I have a problem with the method stopEndlessScrolling, what happens is that initially I load my data well (image1). when I go down scroller, it still works well because I have yet to send me the data server (image2). When the server has no more data to send me what I do is stop the scroller with stopEndlessScrolling method after that the scroll is lost and fails to display the data (image3). Additionally, it is assumed that the endless scrolling a request each time scroll down the page by changing the number, but I can see that after there is no more data to bring the server, makes many requests and I do not understand why. This is my code:

<div data-role="view"

data-title="Art de inventario"

data-layout="layout_inventory"

data-init="filterableInventoryList"

data-model="inventoryModel">

<ul id="inventoryList"

data-role="listview" >

</ul>

</div>

<script id="inventoryTemplate" type="text/x-kendo-template">

<div class="row">

<img class="pullImage" src="#=Photo#" />#= Name #

<div class="metadata">

<span class="sublink" >Código : #=Code#</span>

</div>

</script>

function filterableInventoryList(e){

var wid = $(window).width();

var dataSource = new kendo.data.DataSource({

pageSize: 12,

serverPaging: true,

serverFiltering: true,

transport: {

read:{

url: localStorage.getItem("url") + "GetInventoryItems",

dataType: "json",

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

},

parameterMap: function(options) {

var b = selectMenuModel.get("branch");

var filter = options.filter ? options.filter.filters[0].value : "";

var parameters = {

url: JSON.stringify(localStorage.getItem("url")),

width : wid,

branchId : JSON.stringify(b.Branch_Id),

q: JSON.stringify(filter),

count: options.pageSize,

page: options.page

}

return parameters;

}

},

schema: { // describe the result format

data: "d", // the data which the data source will be bound to is in the "results" field

model : { ...

},

change: function() {

//check whether any data is returned

if (!this.view()[0]) {

//disable endless scroll

$("#inventoryList").data("kendoMobileListView").stopEndlessScrolling();

}

});

$("#inventoryList").kendoMobileListView({

dataSource: dataSource,

template: $("#inventoryTemplate").text(),

filterable: {

filterable: true,

placeholder: "Buscar Item..."

},

endlessScroll: true,

scrollTreshold: 30 //treshold in pixels

});

}

ListView (Mobile)

answered on 10 May 2013

1 answer

106 views

DataSource unable to create new object and return POST message to server

I am attempting to create a login user interface using a combination of templates, SPA and MVVM tools. When the button is clicked, it should add the username and password to the account session (DataSource) and send a POST request to the URL specified. However, nothing happens when accountSession.sync() is executed. Have I missed something out?

Javascript Module:

define(['jquery', 'kendo', 'Helpers/TemplateLoader'], function ($, kendo, loader)

{

var viewModel = null;

var accountSession = null;

var init = function ()

{

//Create the View.

loader.loadTemplate("login");

var template = kendo.template($("#login").html())({});

$("#adbrain").html(template);

//Create the DataSource.

accountSession = new kendo.data.DataSource(

{

transport: {

read: {

url: "/accountSession"

},

create: {

url: "/accountSession",

type: "POST"

}

)

//Create the ViewModel.

viewModel = kendo.observable(

{

username:

{

value: "",

enabled: true

},

password:

{

value: "",

enabled: true

},

button:

{

enabled: true

},

error: "",

doSubmit: function (event)

{

//Prevent the default action.

event.preventDefault();

//Clear the error.

this.set("error", "");

//Disable all controls.

this.set("username.enabled", false);

this.set("password.enabled", false);

this.set("button.enabled", false);

//Animate the Adbrain logo.

$("#login_loading_stable").addClass("hidden");

$("#login_loading").removeClass("hidden");

accountSession.add({UserName: this.username.value, Password: this.password.value});

accountSession.sync();

}

);

//Bind View and ViewModel together.

kendo.bind($("#login_form"), viewModel);

}

var doLogin = function ()

{

alert("login");

}

return {

init: init,

doLogin: doLogin

}

)

Corresponding HTML template (the code is loaded successfully into the SPA):

<script type="x-kendo-template" id="login" class="template">

<form id="login_form" data-bind="events: { submit: doSubmit }">

<div class="group">

<img id="login_loading_stable" src="../../Images/login-logo.png" />

<img id="login_loading" class="hidden" src="../../Images/a-loader.gif" />

<div class="entity">

<div class="cell label">

<label for="username_input">Username</label>

</div>

<div class="cell field">

<input id="username_input" name="UserName" type="text" data-bind="enabled: username.enabled, value: username.value" />

</div>

<div class="entity">

<div class="cell label">

<label for="password_input">Password</label>

</div>

<div class="cell field">

<input id="password_input" name="Password" type="password" data-bind="enabled: password.enabled, value: password.value" />

</div>

<input id="login_button" type="submit" data-bind="enabled: button.enabled" value="Login"/>

</div>

<p id="error_message" class="error" data-bind="text: error"></p>

</form>

</script>

Data Source

answered on 10 May 2013

3 answers

226 views

Release Notes for Internal Builds

The frequency for internal builds is higher than in the past. I appreciate that. However, the release notes do not give exact information about what has changed in the most recent internal build. They only show the difference compared to the previous official release.

It would be good, if some additional info were given for each improvement. A short info like "build 509" would be sufficient.

Michael G. Schneider

General Discussions

answered on 10 May 2013

5 answers

140 views

ListView Declarative configuration

Hi,

Building a MVVM mobile app using Icenium, I have two separate listviews.

I'd like to accomplish the following with only declarative code (data-...)

for one of the listviews, I need to have the "data-filterable" option enabled, this is fine. What do I need to do next ? How can I specify the field to filter on ? In the doc I've seen "filterable.field", how can I transform that into declarative code ?
the second listview is bound to an array of objects. I'd like to group the listview based on one property of the source objects. How can I achiev that with declarative code ?

Thanks for your help,

Gilles

ListView (Mobile)

answered on 10 May 2013

0 answers

122 views

Kendo Grid equivalent of onEditComplete

Is there an event equivalent to onEditComplete for Kendo Grid where the event fires only after the content of the cell has been edited?

Documentation mentions "edit" event, but this fires as soon as the cell goes into edit mode (So this is equivalent to onBeginEdit). The closest event with the desired behavior I found was the "save" event, but this event fires unexpectedly from time to time. For instance, if the cell has an up/down arrow to increment/decrement the integer and if the user clicks on the arrows, the save event fires even though the cell is still in edit mode.

The grid's editmode is set to incell.

Edit: For the particular issue above, I've found out that the save event firing upon incrementing/decrementing happens only when the navigatable option is set to true. Is this a bug?

Grid

asked on 10 May 2013

5 answers

350 views

List Binding Multiple Times

I have a dropdownlist which is bound to a shared kendo datasource. The shared datasource has already read it's data in. When I am binding it to this drop down it is calling read on this dataset again. If I create ddl without the data-bind it will not attempt to read the data a 2nd time. How do I prevent the dropdownlist from forcing the datasource to read the data?

var ddl = $('<input data-bind="value:' + options.field + '" style="display:none;"/>')

.appendTo(container);

ddl.kendoDropDownList({

dataTextField: list.displayColumn,

dataValueField: list.valueColumn,

autoBind: false,

optionLabel: optionLabel,

dataSource: list.dataSource

});

DropDownList

answered on 09 May 2013

1 answer

787 views

Use AutoBind and ServerOperation in same grid

Here is what I am trying to do.   I have a grid that is using the syntax @(Html.Kendo().Grid.... (razor).   We want to re-use the grid for different purposes. The columns are the same, the paging is the same etc.   The only difference is sometimes I want to pass in the dataset to bind to and at other times I want to make server calls to get results.

Scenario #1 - we have a predefined list of items we want to display. The server call to render the page populates the model with the results and the grid should render those rows. Additionally the sorting, filtering etc should not make a call back to the server since we have all the rows we need. I can accomplish this by setting the .ServerOperation(false) parameter on the datasource.

Scenario #2 - we have a search page that has some inputs on it that allows us to enter data to reduce our results set.   When we first display the page we display the empty grid and do not want to make the ajax call to populate the grid, which can be accomplished by setting the AutoBind(false) property on the grid. Then when we click the search button we invoke the grid.dataSource.Read() method.

So the issue is that I get an error message for scenario 1 telling me 'Cannot set AutoBind if widget is populated during initialization'

I don't quite understand why this error is being thrown. Seems like we should be able to configure that in this scn

What I would like to do is be able to either override or add configuration options to the grid at the time it is being rendered.   It is preferrable to not create the entire grid in javascript, nor do I really want to create 2 seperate grids since everything is identical with the exception of how the data is bound. Perfect world would be able to send in parameters as part of the model to tell the grid how to bind. Right now I have Model.AutoBind and Model.ServerOperation, however with the limitation I have run into this will not work.    It seems like we should be able to set the AutoBind flag to false

Any suggestions on how to accomplish this?

@(Html.Kendo().Grid<Novus.MediaAccounting.Models.Buys.BuyModel>(Model.GridData)

.Name(Model.GridName)

.AutoBind(Model.AutoBind)

.Deferred()

.Resizable(resizing => resizing.Columns(true))

.Scrollable()

.Columns(columns =>

{

columns.Bound(o => o.Id)

.ClientTemplate("<input name='selectedBuys' id='selectedBuys' type='checkbox' value='#= Id #' onclick='gridRowSelected(this);' />")

.Template(

@<text>

<input name="selectedBuys" type="checkbox" value="@item.Id" onclick="gridRowSelected(this);" />

</text>)

.HeaderTemplate("<input type='checkbox' title='check all records' id='checkAll' onclick='gridCheckAll(\"BuysGrid\", this);' />")

.Width(35)

.HeaderHtmlAttributes(new { style = "text-align:center" })

.HtmlAttributes(new { style = "text-align:center" })

.Title(string.Empty)

.Filterable(false)

.Sortable(false);

columns.Bound(o => o.Id)

.ClientTemplate(

"<div class='btn-group'><a class='btn dropdown-toggle' data-toggle='dropdown' href='javascript:void(0)'>Action<span class='caret'></span></a>"

+ "<ul class='dropdown-menu'>"

+ "# if (ClientInvoicingStatusDisplay != 'Invoiced') {#"

+ "<li><a href='" + Url.Action("EditBuy", "Buy") + "?buyId=#= Id #'" + "><i class='icon-pencil'></i> Edit Buy</a></li>"

+ "#}#"

+ "<li><a href='" + Url.Action("ViewDetails", "Buy") + "?buyId=#= Id #'" + "><i class='icon-eye-open'></i> View Details</a></li>"

+ "<li><a href='" + Url.Action("BuyHistory", "Audit") + "?buyId=#= Id #'" + "><i class='icon-tasks'></i> Audit History</a></li>"

+ "</ul></div>")

.Template(

@<text>

<div class="btn-group">

<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">

Action

<span class="caret"></span>

</a>

<ul class="dropdown-menu">

@if (item.ClientInvoicingStatusDisplay != "Invoiced")

{

<li><a href="@Url.Action("EditBuy", "Buy", new { buyId = @item.Id })"><i class="icon-pencil"></i> Edit Buy</a></li>

}

<li><a href="@Url.Action("ViewDetails", "Buy", new { buyId = @item.Id })"><i class="icon-eye-open"></i> ViewDetails</a></li>

<li><a href="@Url.Action("BuyHistory", "Audit", new { buyId = @item.Id })"><i class="icon-tasks"></i> Audit History</a></li>

</ul>

</div>

</text>)

.Title("")

.Width(100)

.Filterable(false)

.Sortable(false)

.HtmlAttributes(new { style = "overflow: visible;" });

columns.Bound(o => o.BuyId)

.Width(150);

columns.Bound(o => o.BillMonth)

.Width(80);

columns.Bound(o => o.StatusDisplay)

.Width(125);

columns.Bound(o => o.ClientInvoicingStatusDisplay)

.Width(125);

columns.Bound(o => o.Payor)

.Width(175);

columns.Bound(o => o.MediaTypeDisplay)

.Width(150);

columns.Bound(o => o.ClientNetRate)

.Width(100)

.Format("{0:c}")

.HtmlAttributes(new { style = "text-align: right;" });

columns.Bound(o => o.PriorInvoicedAmount)

.Width(110)

.Format("{0:c}")

.HtmlAttributes(new { style = "text-align: right;" });

columns.Bound(o => o.NovusCompany)

.Width(155);

columns.Bound(o => o.InvoiceDate)

.Width(110)

.Format("{0:MM/dd/yyyy}");

})

.Filterable()

.Sortable(sorting => sorting.SortMode(GridSortMode.MultipleColumn))

.Pageable(page => page.PageSizes(new[] { 50, 100, 200 }).Refresh(true))

.BindTo(Model.GridData)

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(Model.ServerOperation)

.Read(read => read

.Action(Model.Action, Model.Controller)

.Data(Model.JavascriptDataFunction))

//.Model(model => model.Id(p => p.Id))

.Sort(sort => sort.Add(c => c.InvoiceDate))

.PageSize(50)

)

Thank you,
Wade Sharp

Grid

answered on 09 May 2013

1 answer

90 views

Kendo UI Treeview keyboard events

Is there any treeview (with checkboxes) event triggered when pressing the spacebar? The checkbox click/unclick triggers the
$("#treeview").on("change", function () {} but the spacebar doesn't (even though the checkboxes are automatically checked/unchecked when doing it)
Thanks

TreeView

answered on 09 May 2013

3 answers

63 views

Saving Configured Themes

Once a Theme is built in Theme Builder, is there any way to save it?

General Discussions

answered on 09 May 2013

1 answer

102 views

Using dataviz chart components with kendo MVVM component

I'm trying to use the mentioned kendo ui components together. I came across this sample in js fiddle, it works like a charm. But when I try to use the same code in my asp.net mvc project, my chart is not being rendered as expected.
Below you can find the code in my project:

@(Html.Kendo().TabStrip()

.Name("tabstripChart")

.Items(tabstrip =>

{

tabstrip.Add().Text("Chart")

.Selected(true)

.Content(

@<text>

<div id="symbolChart"

data-role="chart"

data-series="[{ field: 'Hours' }]"

data-category-axis="{ field: 'Label' }"

data-series-defaults="{ type: 'line' }"

data-bind="source: Activity">

</div>

<script type="text/javascript">

alert("hey");

var viewModel = kendo.observable({

Activity: [

{ Label: "Jan", Hours: 10 },

{ Label: "Feb", Hours: 5 }

]

});

kendo.bind($("#symbolChart"), viewModel);

</script>

</text>

);

tabstrip.Add().Text("Realtime Chart")

.Content(@<text></text>);

})

)

I'm not getting the expected result. Here I asked the same question on stackoverflow, there you can find the result screen shot. What am I doing wrong?

Thanks,

Charts

answered on 09 May 2013