Questions on Kendo UI for jQuery Forum

2 answers

861 views

hi,

Is there any way to programmatically get the datasource in a grid with the items sorted as the user has selected?

The following:

$(grid).data("kendoGrid").dataSource.view()

takes into account grid paging also, and does not return the items of the entire datasource sorted. Can I get somehow all dataitems sorted regardless of paging?

Thanks in advacne

Grid

answered on 17 Dec 2012

2 answers

111 views

surround grid popup editor buttons with div tag

Hi,

Would you please surround grid popup editor buttons with div tag so that they do not wrap around in some cases when custom styling is used.

At present your code looks like:

html += that._createButton({ name: "update", text: updateText, attr: attr }) + that._createButton({ name: "canceledit", text: cancelText, attr: attr });

However it should look like:

html += '<div>' + that._createButton({ name: "update", text: updateText, attr: attr }) + that._createButton({ name: "canceledit", text: cancelText, attr: attr }) + '</div>';

Grid

answered on 17 Dec 2012

1 answer

862 views

How to display kendo listview as popup on button click event?

Hi All,

As per project requirement, I have to display kendo list-view as popup on button/link click?
How we can do that? Please help in this case. Immediate response would be appreciated.

Regards,
Partha.

ListView

answered on 17 Dec 2012

1 answer

121 views

Touch button in Kendo template

Hi,

I have a touch event in a kendo template illustrated in the following jsBIN:
http://jsbin.com/isatoz/33/edit

Can you tell me why this don't work?

Thanks,
Martin

General Discussions

answered on 17 Dec 2012

1 answer

1.1K+ views

How to wrap text when using tree view?

Hi,

I am using kendo tabstrip to display kendo tree view component.

I have populated kendo tree view by using hierarchical JSON structure, some of the nodes are too long to display it inside the tab hence I need to wrap the node text. Is there a way to wrap node text?

Thanks,
Barani

TreeView

answered on 17 Dec 2012

5 answers

434 views

Date picker not posting value correctly

My form has a simple Datepicker on it, which paints and apparently operates correctly, but when I post the results with the submit button, although the rest of the fields go through correctly, the one with the datepicker doesn't.

For example, I have a part of my form like this:

<tr><td class=view><font color=red>Third Phone Type</td><td class=view><input type=hidden name="oldfield13" value="Not Given"><select  id="i13"  class=view name="field13">
<option value=""></option>
<option selected value="Not Given">Not Given</option>
<option value="Home">Home</option>
<option value="Office">Office</option>
<option value="Mobile">Mobile</option>
<option value="Direct Dial">Direct Dial</option>
<option value="Primary">Primary</option>
</select>
</td></tr>
<tr><td class=view>Contact EMail Address</td><td class=view><input type=hidden name="oldfield14" value="xxxx23285@gmail.com"><input type=text class=view name=field14 value="arun23285@gmail.com"></td></tr>
<tr><td class=view>Payslip EMail Address</td><td class=view><input type=hidden name="oldfield15" value=""><input type=text class=view name=field15 value=""></td></tr>
<tr><td class=view><font color=red>Gender</td><td class=view><input type=hidden name="oldfield16" value="Female"><select  id="i16"  class=view name="field16">
<option value=""></option>
<option value="Not Given">Not Given</option>
<option value="Male">Male</option>
<option selected value="Female">Female</option>
</select>
</td></tr>
<tr><td class=view>Date of Birth</td><td class=view><input type=hidden name="oldfield17" value="1 July 1986 00:00:00"><input  id="i17"  type=text class=view name=field17 value=""></td></tr>

....

and then some time later, at the end, I have

<script>
$(document).ready(function() {
$("#i17").kendoDatePicker({format:"dd MMM yyyy"})
});
</script>

I pick a date, when I close the datepicker window, the 
value has filled in on the text box, 
and then when I post, I have a debug routine that reads all 
the posted data, and displays it in a table.
I get this (amongst other stuff)

then some time later, at the end, I have 




    
        
            oldfield13
            Not Given
        
        
            field13
            Not Given
        
        
            oldfield14
            xxxx23285@gmail.com
        
        
            field14
            xxxx23285@gmail.com
        
        
            oldfield15
            
        
        
            field15
            
        
        
            oldfield16
            Female
        
        
            field16
            Female
        
        
            oldfield17
            1 Jan 1900 00:00:00
        
        
            oldfield18
            Indian
        
        
            field18
            Indian

Notice how there's no entry for the datepicker field, which is named field17 - not even an empty field posted. Also notice that I've definitely set the name attribute on the input field.

I'm using the latest version of Kendo UI (just redownloaded it today to check). The datepicker also behaves like this, even if I don't open up the date widget and type the date in (in dd/MMM/yyyy format). What do you think the problem is?

DatePicker

answered on 17 Dec 2012

2 answers

415 views

[Solved] Initial values for cascading dropdowns

Hi,

I'm trying to set initial values for a group of dropdowns that are linked (cascade).

Example: http://jsfiddle.net/klystofer/pY3rc/5/

What is the best way to do this?

Regards,
Klystofer

DropDownList

answered on 17 Dec 2012

1 answer

779 views

Error when attempting to change datasource on treeview

I have quite the odd script going to try and get something working that is fairly hacked together. I have 2 DropDownLists, one is a standard DropDownListFor and the other is a KendoDropDownList that I have used some javascript I found on these forums to insert a KendoTreeView into it's contents. What I'm trying to achieve is to change the datasource of the treeview based on the selection of the first DropDownList. I have accomplished this but I am now getting an error when trying to update the datasource on the treeview. The error occurs in kendo.web.min.js and is in the following block:

_attachUids: function(b, d) {

var e = this, f, g = c.attr("uid");

b = b || e.root, d = d || e.dataSource, f = d.view(), b.children("li").each(function(b, c) {

c = a(c).attr(g, f[b].uid), e._attachUids(c.children("ul"), f[b].children)

})

With this error text:

Uncaught TypeError: Cannot read property 'uid' of undefined kendo.web.min.js:8376
1. (anonymous function)kendo.web.min.js:8376
2. jQuery.extend.eachjquery-1.7.1.js:661
3. jQuery.fn.jQuery.eachjquery-1.7.1.js:271
4. i.extend._attachUidskendo.web.min.js:8375
5. i.extend.initkendo.web.min.js:8372
6. (anonymous function)kendo.web.min.js:708
7. jQuery.extend.eachjquery-1.7.1.js:661
8. jQuery.fn.jQuery.eachjquery-1.7.1.js:271
9. a.fn.(anonymous function)kendo.web.min.js:707
10. (anonymous function)Create:249
11. jQuery.event.dispatchjquery-1.7.1.js:3261
12. elemData.handle.eventHandle

Here is the offending code that this is called from:

@Html.LabelFor(model => model.Incident.RequestType)

@Html.DropDownListFor(model => model.Incident.RequestType, new SelectList(Model.RequestTypes, null, "Name"))

@Html.ValidationMessageFor(model => model.Incident.RequestType)

<script>

$(function() {

$('#Incident_RequestType').change(function () {

var elems = document.getElementsByTagName('*'), i;

for (i in elems) {

if ((' ' + elems[i].className + ' ').indexOf(' k-input ')

> -1) {

elems[i].innerHTML = '';

}

// Get new datasource

var subjectDataSource = new kendo.data.HierarchicalDataSource({

transport: {

read: {

dataType: "json",

type: "POST",

url: "/Incident/GetSubjectsByRequestType/",

data: { //additional parameters sent to the remote service

requestType: function () {

return $("#Incident_RequestType").val();

}

},

schema: {

model: {

id: "RequestType",

hasChildren: "HasChildren",

children: "Children"

}

});

// Update datasource on treeview

subjectDataSource.read();

$("#treeview").kendoTreeView({

dataSource: subjectDataSource,

dataTextField: ["Title", "Title"],

loadOnDemand: false

}).data("kendoTreeView");

});

</script>

I cannot figure out what to do to get this working without throwing the error. The datasource does get updated and it all seems to work okay in Chrome but the error is getting thrown and IE complains about it when debugging. Any help would be appreciated.

Thanks,

Brian

TreeView

answered on 17 Dec 2012

6 answers

1.0K+ views

Custom command firing Change() event

I've been using Telerik products for a while now and have recently moved my team to using KendoUI. One big difference I noticed about grids is the change in event handlers. In this instance, I have a custom command button that should perform some kind of task like toggling an active/inactive state. It does fire the custom command's event handler as expected, but it also appears to fire the change() event.

Is this the intended behavior of the framework, or is there a way to execute a custom command without having the change() event fire as well?

Sample code:

<script type="text/javascript">

function OnToggleClick(e) {

e.preventDefault();

alert("Command has been clicked");

}

function OnRowSelect(e) {

e.preventDefault();

alert(this.dataItem(this.select()).ID);

}

</script>

@{Html.Kendo().Grid<MyModel>()

.Name("MyGridName")

.DataSource(db =>

db.Ajax()

.Model(o => o.Id(x => x.ID))

.PageSize(20)

.Create("InsertNewRecord", "Setup")

.Read("GetRecords", "Setup")

)

.Events(ev => ev.Change("OnRowSelect"))

.Columns(col =>

{

col.Bound(o => o.ID).Title("ID");

col.Bound(o => o.Field1).Title("Field1");

col.Bound(o => o.Field2).Title("Field2");

col.Bound(o => o.IsActive).Title("ToggleMe");

col.Command(com =>

{

com.Custom("ToggleActive").Text("Toggle").Click("OnToggleClick");

}).Width(80);

})

.ColumnMenu().Pageable().Filterable().Sortable().Selectable()

.Scrollable(scroll => scroll.Height(340))

.Render();

}

Thank you,
-J

Grid

answered on 17 Dec 2012

4 answers

1.1K+ views

DatePicker value -> invalid date time format!!!!

Hello,

I'm building external search filter for kendo Grid.
In the filter i have two datepickers, When i'm trying to parse the value of the date pickers and pass to the action in the controller via external atribute grid->datasource->read-data()! i get the date time string in format "Sat Dec 08 2012 00:00:00 GMT+0100 (Central European Standard Time)" and then i cant parse that datatime string to actual datetime object! Can someone help with this!

Regards,
Philip Selvievski

DatePicker

answered on 17 Dec 2012

oldfield13	Not Given
field13	Not Given
oldfield14	xxxx23285@gmail.com
field14	xxxx23285@gmail.com
oldfield15
field15
oldfield16	Female
field16	Female
oldfield17	1 Jan 1900 00:00:00
oldfield18	Indian
field18	Indian