Questions on Kendo UI for jQuery Forum

1 answer

111 views

Hi,

I have created a kendo grid, with its inline editing enabled. I just created a demo from js fiddle. But, i am not getting the edit and delete buttons. They are coming as undefined. If i include kendo.web.min.js it works. Also, if i add kendo.web.js it doesnt work. Is it required to add? I am attaching the demo. Please tell me, what am i missing here.

Regards,
Khushali

Grid

answered on 14 Jun 2012

0 answers

374 views

Menu & Panelbar show/hide issue

Here is the scenario, I'm building a dynamically changing layout site based on the resolution of the screen. I switch between a panelbar and menu depending on my width. Now this works great on my desktop and my mobile phone (myTouch 4g). It does not work on my Kindle Fire or Galaxy Tab 10.1. On the tablets if I tell the lists to be hidden by default and choose to show one based on the screen size it doesn't do anything. If I display both by default and hide the one I don't want all it does is remove all the formatting from the list I want to hide. I've ripped out the .kendoPanelBar() and .kendoMenu() from my scripts and everything functions as it should on all devices. Unless someone has a better idea is there a fix for this issue?

EDIT: I have tried to use jQuery show/hide and creating a class that I just add or remove. Both have the same result.

EDIT2: I got this working. For some reason I have to apply my show hide settings prior to setting the .kendoPanelBar or .kendoMenu in my $(document).ready function.

General Discussions

asked on 13 Jun 2012

0 answers

138 views

How to use login control insdie kedo ui window

HI,

I have placed asp.net login control inside the kendo ui. i tried to get the button click work. it is failing to authenticate or post back to server.

The button inside the window has become useless.

<script>
           $(document).ready(function () {


             var window = $("#window").kendoWindow();
             var button = $("#robo");
             var buttonLogIN = $("#LoginButton");
             button.show();
             window.hide();
             var onClose = function () {
                 undo.show();
             }
             button.bind("click",function ()
             {
                 window.show();
                 window.data("kendoWindow").open();
                 window.data("kendoWindow").center();
             })
             buttonLogIN.bind("mousedown", function () {
                 window.show();
                 window.data("kendoWindow").open();
                 window.data("kendoWindow").center();
                 window.data("kendoWindow").closest("#window").appendTo("form");

             })

               if (!window.data("kendoWindow")) {
                   window.kendoWindow({
                       width: "300px",
                       height: "200px",
                       title: "About Alvar Aalto",
                       close: onClose
                   });
               }

           });
            </script>

Window

asked on 13 Jun 2012

2 answers

233 views

Saving existing record or inserting new one

Hello,
I have a ListVIew binded to a DataSource which gets loaded as "json" datatype from a control ajax-wise.
The same control also expects POST request back to save/insert update data to DB.

I have kendoListVIew defined with some delegates, including:
var commentsList = $("#commentsList").kendoListView({
                   dataSource: commSrc,
                   editable: true,
                   template: kendo.template($("#ctemp").html()),
                   editTemplate: kendo.template($("#cedittemp").html())
               }).delegate(".ledit-btn", "click", function(e) { commentsList.edit($(this).closest(".comment-view")); }).
                   delegate(".lsave-btn", "click", function(e) { commentsList.save(); }).
                   delegate(".lcancel-btn", "click", function(e) { commentsList.cancel(); }).data("kendoListView");

There is no e.preventDefault() - because they are DIVs, not hyperlinks.

I was under an impression that calling .save() on listView will cause DataSource to sync - which means it would call update routine defined under transport. But it never does anything actually.
I don't mind calling my own function and do my own ajax postback via delegate(".lsave-btn"), but then how do I pass data from form fields for edited item (or new item)?

Or am I missing something? PLease help :)
Thanks

ListView

answered on 13 Jun 2012

0 answers

128 views

oData WebGet

I am trying to fill a Kendo Mobile ListView with data retrieved from a WCF Data Service WebGet with no luck. Is there something I am missing.

WCF Method:

[WebGet]
public IQueryable<AttributeType> GetRanges()
{
var ranges = (from pa in this.CurrentDataSource.ProductAttributes
where pa.oDataAttTypeDesc == "Range"
select new AttributeType() { Name = pa.oDataAttValue }).Distinct().OrderBy(a => a);
return ranges;
}

Hitting the URL gives:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>

- <GetRanges xmlns="http://schemas.microsoft.com/ado/2007/08/dataservices">

- <element p2:type="ODataSearch.AttributeType"xmlns:p2="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">

<Name>All Manufacturers</Name>

</element>

- <element p2:type="ODataSearch.AttributeType"xmlns:p2="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">

<Name>Aqualisa</Name>

</element>

- <element p2:type="ODataSearch.AttributeType" xmlns:p2="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">

<Name>Bristan</Name>

</element>

</GetRanges>

DataSource is setup as follows:

DataSources._Ranges = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "http://localhost:54948/ProductDataService.svc/GetRanges"
}
}
});

and the html page sets the control as follows:

$("#range-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: DataSources._Ranges }),
template: "${Name}"
});

Data Source

asked on 13 Jun 2012

2 answers

128 views

[Solved] Chart Tooltip in FireFox 3.6

In one of our charts we placed a break tag in the tooltip to create a new line but it is not rendering in Firefox 3.6. The line break renders correctly on all other browsers (and more recent version of FireFox) but not on FireFox 3.6 (see attached image).

Here is the code for the series with the tooltip:

series.push({

type: 'column',

// Specify then name of the property in each data row that

// contains the expiring lease count

field: 'expiring0',

name: property + ' Expiring',

stack: true,

tooltip: {

visible: true,

template: '<strong>' + property + ' - ' + '#= category # </strong></br>Limit: #= dataItem.limit0 # </br>Expiring: #= dataItem.expiring0 #',//</br>Notes: #= dataItem.notes0 #',

font: '11px Trebuchet MS'

}

});

Is there anyway to make this work in FireFox 3.6?

Charts

answered on 13 Jun 2012

0 answers

113 views

adding row in grid

I am quite new to keno UI grid can anyone post me the source code regarding how to do basic functionality of inline add, edit and delete in grid.

Grid

asked on 13 Jun 2012

0 answers

201 views

Dynamic loading of panel bar using datasource

Hi,
I want to load the panel bar headers dynamically from the database .Is it possible with data source?can u provide some sample code for dynamically loading panel bar with data source.

PanelBar

asked on 13 Jun 2012

0 answers

177 views

Generate TreeView DataSource in Jquery

Hello,

I am using KendoUi TreeView, as I read this treeview doesn't support remote data source from Json. So I was trying to take data from controller in Jquery and loop it to create treeview item as below

$.getJSON(baseurl + '/api/TreeDataController/GetOnlineTreeData',

function (data) {
var ds;
                  ds = {
  $.each(data, function (i, row) {
                 id: data[i].id, text: data[i].Name, items: [{ id: data[i].id, text: "<label>" + data[i].Name + "</label>" }]
       });
                 }

var treeview = $("#treeview").kendoTreeView({

template: kendo.template($("#treeview-template").html()),

dataSource:[ds]

}).data("kendoTreeView")

});

But here I am getting error at text: (saying expected ; ). So please give me solution how can I show this data as datasource for Tree.

Thanks,
Atul

TreeView

asked on 13 Jun 2012

1 answer

446 views

Validating DropDownList inside a form

Validating a DropDownList (mainly the ' required' rule, most other rules are not applicable) will not work correctly when you build a dropdownlist using the SELECT element and when you create the validator on a container element (e.g. a form).
It works when you call the Validate function (or on submit of the form), but it does not work when the dropdownlist looses the focus.
Seems the onblur event is not triggerd for the dropdownlist?
This is not a big problem for the required rule, but I want to implement a custom rule which I want to be triggered when the dropdownlist looses the focus.

Regards, Jaap

Validation

answered on 13 Jun 2012