Questions on Kendo UI for jQuery Forum

0 answers

203 views

Photo Gallery

Is it possbile with the actual Kendo UI widgets to create a photo gallery like the one we find in Facebook? I am thinking about something where we can pass an array of photos URL's with their respective titles, then it build a gallery where we can click to see a bigger image, and navigate among them by clicking in their sides or using keyboard arrows.

If this is not possible, a photo gallery widget could be a nice new feature in Kendo UI.

General Discussions

asked on 30 Aug 2012

0 answers

168 views

How to select value from view model?

I have a kendo combobox that I'm populating from a remote json call. I'm also binding a json object to dom elements. Is there a way to bind the selected value of the combobox with the id returned from the json \ viewmodel object? Thanks

<input type="hidden" data-bind="value:Id" /><br />

<input type="text" placeholder="First name" name="FirstName" maxlength="30" data-bind="value:FirstName" id="id_firstName" /><br />

<input type="text" placeholder="Last name" name="LastName" maxlength="30" data-bind="value:LastName" id="id_lastName" /><br />

<input type="text" placeholder="Email" name="email" maxlength="30" data-bind="value:Email" id="id_email" /><br />

<input id="timeZones">

<button data-bind="click: save" class="btn">Save</button>

$("#timeZones").kendoComboBox({

index: 0,

placeholder: "Select Time Zone",

dataTextField: "DisplayName",

dataValueField: "Id",

filter: "contains",

dataSource: {

type: "json",

transport: {

read: "/api/TimeZone/Get/"

}

});

ComboBox

asked on 30 Aug 2012

2 answers

167 views

Tabstrip icons not showing on some Blackberry handsets

Hi guys,

Not too sure about this one, but for some reason the tabstrip icons are not showing on certain Blackberry handsets. I haven't loaded apps on those specific handsets, they just don't show while I'm using Ripple emulator to develop.

TabStrip (Mobile)

answered on 30 Aug 2012

0 answers

148 views

Existing HTML table header overwritten by MVVM binding

Hello,

as demonstrated in this fiddle, using an existing HTML table for Grid definition will only work when creating the grid using the $("#grid").kendoGrid() syntax. Using the kendo.bind($("#grid"), viewModel) syntax will result in the column headers being overwritten. I've traced this to the call to Grid.setDataSource() from the MVVM framework. Stacktrace as follows (version 2012.2.823):

Widget.extend.setDataSource (kendo.all.js:16654)

binders.widget.source.Binder.extend.refresh (kendo.all.js:7740)

Class.extend.bind (kendo.all.js:7109)

BindingTarget.extend.applyBinding (kendo.all.js:7931)

BindingTarget.extend.bind (kendo.all.js:7910)

bindElement (kendo.all.js:8065)

bind (kendo.all.js:8088)

(anonymous function) (gridtest.html:23)

As a matter of fact, any call to Grid.setDataSource() after widget initialization will result in the headers being overwritten. The method used to detect a pre-existing HTML header (in Grid._thead()) fails when that header has been moved to a separate div by the init code.

On the assumption that the table header should only be initialized once, the attached patch for kendo.all.js seems to fix this immediate problem by checking for an existing thead. I've not done any testing beyond verifying that the table headers are kept intact, so breakage elsewhere may occur.

Regards,
Stig

Grid

asked on 30 Aug 2012

1 answer

120 views

Line charts not rendering in IE

I just started playing with the DataViz components and I have some line graphs created that work fine in Firefox and Chrome, but not IE. Any thoughts on what I've missed here?

Sample HTML file attached.

Charts

answered on 30 Aug 2012

0 answers

119 views

SubMenu below the grid

Hi,
I have a problem with the telerik menu, when i use a grid to 100% of page, the menu passes below the grid, i don't know the solution for this problem, ahhh only with Internet Explorer

Menu

asked on 30 Aug 2012

0 answers

99 views

Kendo UI Grid filter does not work

I have an issue with my web page that contains Kendo UI grid. In this web page, I have a top portion that uses Knockout. The bottom part of the page is a Kendo UI Grid which is from another partial page (RenderPartial)

...

<div >

</div>

</fieldset>

@{ Html.RenderPartial("DetailEntries", new ViewDataDictionary {{ "Id", @ViewBag.Id } });}

</section>

DetailEntries is the partial page which is a Kendo ui grid with Filterable() option.

I got an error when rendering this page.

It happens at this knockout function

// The following function is only used internally by this default provider.

        // It's not part of the interface definition for a general binding provider.

        'parseBindingsString': function(bindingsString, bindingContext) {

            try {

                var viewModel = bindingContext['$data'];

                var rewrittenBindings = " { " + ko.jsonExpressionRewriting.insertPropertyAccessorsIntoJson(bindingsString) + " } ";

                return ko.utils.evalWithinScope(rewrittenBindings, viewModel === null ? window : viewModel, bindingContext);

            } catch (ex) {

                throw new Error("Unable to parse bindings.\nMessage: " + ex + ";\nBindings value: " + bindingsString);

}

}

Error:

Uncaught Error: Unable to parse bindings.

Message: ReferenceError: filters is not defined;

Bindings value: value: filters[0].operator

bindingsString : "value: filters[0].operator"

bindingContext: ko.bindingContext which contains the ViewModel for my top portion.

If I remove the filterable option from the Kendo UI grid, the page renders without error.

Please help.

Alex

Grid

asked on 30 Aug 2012

1 answer

109 views

How can I use Listview templates for editing with server side validation?

I am using MVC4 with the latest Kendo UI Q2. I am trying to use the mvc wrappers to implement a list view with a view template and an edit template

After editing a listview item using an edit template, I click the save button. The edit template is immediately replaced by the view template before the Create/Update controller action is hit on the server. If the controller action fails some validation I can not show this to the user as the edit template is no longer visible. Is there a way to make the edit template remain open until either the controller action has completed successfully or if the controller action fails validation push the validation errors to the edit template. This would be a fairly typical pattern.

<div class="k-toolbar k-grid-toolbar">

<a id="addRoleButton" class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new Role</a>

</div>

@(Html.Kendo().ListView<iProjX.Models.RoleModel>(Model.Roles)

.Name("rolesListView")

.TagName("div")

.ClientTemplateId("rolesList")

.Editable()

.Pageable()

.DataSource(dataSource => dataSource

.Model(model =>

{

model.Id("RoleId");

model.Field(f => f.ProjectId).DefaultValue(Model.ProjectId);

model.Field(f => f.Title);

model.Field(f => f.Description);;

})

.Events(e => e

.Error("rolesListViewData_error")

.Change("rolesListViewData_change")

.RequestStart("rolesListViewData_requestStart"))

.Create(create => create.Action("createRole", "Project"))

.Read(read => read.Action("getRoles", "Project", new { projectId = Model.ProjectId }))

.Update(update => update.Action("updateRole", "Project"))

.PageSize(30)

)

.Events(e => e

.Change("rolesListView_change")

.Edit("rolesListView_edit")

.DataBound("rolesListView_databound"))

)

view template

//View template

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

<div class="roleView" >

<div> ${Title} </div>

<div> ${Description} </div>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>

<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>

</div>

</script>

edit template

@model iProjX.Models.RoleModel

<div class="roleView" id = "newRoleForm2" >

@Html.ValidationSummary(true)

@Html.HiddenFor(model => model.ProjectId)

@Html.HiddenFor(model => model.RoleId)

<div class="editor-label">

@Html.LabelFor(model => model.Title)

</div>

<div class="editor-field">

@Html.TextBoxFor(model => model.Title, new { style = "width:99%", maxlength = 100 })

<span data-for="Title" class="k-invalid-msg"></span>

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Description)

</div>

<div class="editor-field">

@Html.TextAreaFor(model => model.Description, new { style = "width:100%; height:100px"})

<span data-for="Description" class="k-invalid-msg"></span>

</div>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-update-button" onclick="updateClick()" href="\\#"><span class="k-icon k-update"></span>Save</a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>

</d

ListView

answered on 30 Aug 2012

1 answer

267 views

remote data from AJAX

I have an autocomplete widget that works when I prepopulate the data from my ajax service but not when I use the DataSource Transport.

I am allowed to use json (dont need jsonp) but something else is the issue.
my table holds 60K employees so obviously I need to filter it down.
any ideas where I am making my mistake?
Thanks.


                 var dataSource = [];
                 var dataParam = [];
                 var remoteHost="http://www.myHost.com/Service.asmx/";
                 var remoteMethod ="getEmployees";

                 $(function () {
                     // method 1: remotely hosted ajax - works with AutoComplete
                     callAjax(remoteMethod, dataParam, onSuccess);

                     // method 2: Kendo Transport
                         $("#input").kendoAutoComplete({
                             minLength:3,
                             dataTextField:'Value',
                             dataSource:{
                                 serverPaging:true,
                                 pageSize:20,
                                 contentType:'application/json; charset=utf-8',
                                 type:'POST',
                                 dataType:'json',
                                 transport:{
                                     read: remoteHost + remoteMethod
                                 }
                             }
                         })
                 });

                // SUPPORT FUNCTIONS FOR METHOD #1
                 function onSuccess(data, status){
                     alert("got data");
                    // dataSource=data.d;
                    // buildAutoComplete();
                 }

                 function buildAutoComplete() {
                     $("#input").kendoAutoComplete({
                        minLength: 2,
                        dataTextField: "Value",
                        dataSource: dataSource
                     });
                 }

AutoComplete

answered on 30 Aug 2012

1 answer

196 views

Grid with popup editing + PHP

Hello,
I am following the examples linking the grid with a database through php found here.
Also, following the example of grid with popup editing found here.
I am trying to combine these examples so i can edit a grid linked with a database through php using popup editing, without a success.

First approach - keeping the different end points for the dataSource as in the popup editing example.

<div id="order_example" class="k-content">

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

<script>

$(document).ready(function () {

$("#grid").kendoGrid({

dataSource: {

transport: {

read: {

url: "order.php"

},

update: {

url: "order_update.php"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

schema: {

data: "data",

model: {

id: "_id",

fields: {

description: {validation: {required: true} }

}

//pageSize: 10

},

batch: true,

columns: [

{title: "ID", field: "_id"},

{title: "Description", field: "description"},

{command: "edit"}

],

height: 450,

navigatable: true,

editable: "popup"

});

</script>

</div>

Second approach - keeping the whole functionality in one php file as in the first example...
Code changed is in dataSource:

transport: {

read: {

url: "order.php"

},

update: {

url: "order.php",

type: "POST"

}

},

In both approaches the following happen:

With jquery 1.7.1, when i click the edit button it just disappears!! It reappears though, when i click another one, so the last one disappears...

With jquery 1.8.0 i get the following error in the console...

Uncaught Error: Syntax error, unrecognized expression: tr:not(.k-grouping-row) > td:not(.k-hierarchy-cell,.k-detail-cell,.k-group-cell,.k-edit-cell,:has(a.k-grid-

delete)) jquery-1.8.0.min.js:2

Z.error jquery-1.8.0.min.js:2

bg jquery-1.8.0.min.js:2

Z.compile jquery-1.8.0.min.js:2

bm jquery-1.8.0.min.js:2

h.querySelectorAll.bm jquery-1.8.0.min.js:2

Z jquery-1.8.0.min.js:2

h.querySelectorAll.Z.matchesSelector jquery-1.8.0.min.js:2

p.extend.filter jquery-1.8.0.min.js:2

p.fn.extend.is jquery-1.8.0.min.js:2

p.event.dispatch jquery-1.8.0.min.js:2

p.event.add.g.handle.h jquery-1.8.0.min.js:2