Questions on Kendo UI for jQuery Forum

1 answer

102 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

222 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

133 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

118 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

338 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

753 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

86 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

59 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

99 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

4 answers

101 views

What .CSS files need to be included to get themebuilder to work?

I can't seem to find any documentation regarding what .CSS files are required to get a custom theme working. If I just copy the .css from the theme-builder, the theme appears to break.

Do I also need to add common.min and default.min? I tried these but I don't want to add more .css that I don't need.

TIA

General Discussions

answered on 09 May 2013