Questions on Kendo UI for jQuery Forum

5 answers

905 views

Filter/Select only after certain number of characters are entered

I previously used the Telerik MVC combobox control so that it only returns results when at least 3 characters have been entered. I was able to specify this in my controller by simple checking the text string that was passed in the ajax request.

With the KendoUI combobox, I cannot figure out how the text is being passed and what to check for in my controller to see if at least 3 characters have been entered.

Can you provide any assistance with this? Thanks.

UPDATE:

So I found by looking at the AutoComplete control, that I can set the ComboBox to not retrieve results until at least 3 characters are entered by using minLength: 3

I still have the issue on the controller side, however, that I don't want to bring back the entire list...I only want to bring back results that contain the text entered. What do I need to include on the controller side to get the text entered in the ComboBox?

Thanks!

ComboBox

answered on 12 Sep 2012

0 answers

76 views

Find out which URL a refresh was redirected to?

Hi,

I'm loading the content of a window by using the refresh method with a URL. Is there a way to find out which URL the content was really fetched from (if it is redirected)?

I know that I could just check the content and look for some unique element to discern which page was loaded if I know the content, but this is not always feasible.

Window

asked on 12 Sep 2012

5 answers

187 views

Trying to understand the DataSource part II

Hi,

A seconde question about the DataSource is how can we get the Data of a subset into f.i. a grid. Here's the code we use for our JSON services.

[DataContract]

public partial class VMProject : VMRoot

{

public VMProject() {}

public static VMProject GetById(object sender, int id)

{

return CallGetVMById<VMProject>("", id);

}

public static VMEntitySet<VMProject> AllVMProjectList(object sender)

{

return (VMEntitySet<VMProject>)CallGetVMAllList<VMEntitySet<VMProject>>(sender);

}

[DataMember]

public String Name

{

get { return CallGetData<String>("Name"); }

set { CallSetData ("Name", value); }

}

[DataMember]

public VMEntitySet<VMProjectRegel> ProjectRegelList

{

get { return CallGetData<VMEntitySet<VMProjectRegel>>("ProjectRegelList"); }

// set { CallSetData ("ProjectRegelList", value); }

}

The consumed class VMRoot looks like this:

[DataContract]

public partial class VMRoot : Viewmodel

{

public VMRoot() {}

public static VMRoot GetById(object sender, int id)

{

return CallGetVMById<VMRoot>("", id);

}

public static VMEntitySet<VMRoot> AllVMRootList(object sender)

{

return (VMEntitySet<VMRoot>)CallGetVMAllList<VMEntitySet<VMRoot>>(sender);

}

[DataMember]

public Int32 Id

{

get { return CallGetData<Int32>("Id"); }

set { CallSetData ("Id", value); }

}

[DataMember]

public DateTime CreatedOn

{

get { return CallGetData<DateTime>("CreatedOn"); }

set { CallSetData ("CreatedOn", value); }

}

[DataMember]

public Int32 CreatedBy

{

get { return CallGetData<Int32>("CreatedBy"); }

set { CallSetData ("CreatedBy", value); }

}

[DataMember]

public DateTime ChangedOn

{

get { return CallGetData<DateTime>("ChangedOn"); }

set { CallSetData ("ChangedOn", value); }

}

[DataMember]

public Int32 ChangedBy

{

get { return CallGetData<Int32>("ChangedBy"); }

set { CallSetData ("ChangedBy", value); }

}

The VMEntitySet is an ObservableCollection which contains VMProjectRegel objects. These are defined like so:

[DataContract]

public partial class VMProjectRegel : VMRoot

{

public VMProjectRegel() {}

public static VMProjectRegel GetById(object sender, int id)

{

return CallGetVMById<VMProjectRegel>("", id);

}

public static VMEntitySet<VMProjectRegel> AllVMProjectRegelList(object sender)

{

return (VMEntitySet<VMProjectRegel>)CallGetVMAllList<VMEntitySet<VMProjectRegel>>(sender);

}

[DataMember]

public Int32 Aantal

{

get { return CallGetData<Int32>("Aantal"); }

set { CallSetData ("Aantal", value); }

}

[DataMember]

public Decimal Prijs

{

get { return CallGetData<Decimal>("Prijs"); }

set { CallSetData ("Prijs", value); }

}

[DataMember]

public Decimal BTW

{

get { return CallGetData<Decimal>("BTW"); }

set { CallSetData ("BTW", value); }

}

The JSON we receive looks like this:

[

{

"DatumAanvang": "\/Date(1345732135057+0200)\/",

"DatumFaktuur": "\/Date(1345732135059+0200)\/",

"Name": "Project onderhoud",

"ProjectRegelList": [

{

"Aantal": 99,

"Prijs": 99.000000000000,

"BTW": 1.000000000000,

"Id": 101,

"CreatedOn": "\/Date(1345732135085+0200)\/",

"CreatedBy": 10,

"ChangedOn": "\/Date(1345732135085+0200)\/",

"ChangedBy": 10

}

],

"Id": 1,

"CreatedOn": "\/Date(1345732135060+0200)\/",

"CreatedBy": 10,

"ChangedOn": "\/Date(1345732135060+0200)\/",

"ChangedBy": 10

}

]

The DataSource is defined like so:

var dataSourceprojecten = new kendo.data.DataSource(

{

// the transport tells the datasource what endpoints

// to use for CRUD actions

schema:

{

model:

{

id: "Id",

fields:

{

DatumAanvang:

{

type: "date"

},

DatumFaktuur:

{

type: "date"

},

Name:

{

type: "string"

},

CreatedOn:

{

"type": "date"

},

CreatedBy:

{

"type": "number"

},

ChangedOn:

{

"type": "date"

},

ChangedBy:

{

"type": "number"

}

},

transport:

{

read:

{

url: "../api/projectonderhoud/get",

dataType: "json"

}

});

after executing the dataSourceprojecten.read() the data is available for the main list but how do we specify the fetch for the ProjectRegelsList in f.i. a grid?

This is what I have tried (among many other attempts) to get it to work:

$("#projectregels").kendoGrid(

{

dataSource:

{

schema:

{

model: ProjectRegel

},

data: dataSourceprojecten.ProjectRegelList

},

groupable: true,

sortable: true,

pagesize: 10,

columns:

[

{

field: "Id",

title: "Id"

},

{

field: "Aantal",

title: "Aantal"

},

{

field: "Prijs"

},

{

field: "BTW"

},

{

field: "CreatedOn",

title: "Created on",

template: '#= kendo.toString(CreatedOn,"dd MM yyyy") #'

},

{

field: "CreatedBy"

}

]

});

Regards
Paul

General Discussions

answered on 12 Sep 2012

5 answers

175 views

Listview within template does not render to Mobile Listview

Hi!
I'm new in Kendo Mobile, but I didn't found the answer on simple from my point of view question: why listview in mobile application does not proper rendered from template? Not listview items, but the whole listview, for example:

<div data-role="view" id="foo" data-model="dataSource">

<div data-template="t1" data-bind="source: this"></div>

</div>

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

<ul data-auto-bind="false" id="listview" data-role="listview" >

<li>aaa</li>

<li>bbb</li>

</ul>

</script>

if I place <ul> in main div, it works, suppose I do something wrong, please help

ListView (Mobile)

answered on 12 Sep 2012

0 answers

299 views

Grid Datasource, explicit calling .read() containing parameters

I try to make a single page web app. It will contain some grids and forms. Some of the form controls and grids are based on the same datasource. Sometimes I need to get a specific item from the datasource (identified by a parameter) or sometimes I just need every available item from the datasource.

I've solved this problem by adding a parameterMap to the transport of the datasource. Now I'm able to exactly retrieve all items from the datasource, how and when I want. For code example, see rootDatasource below.

In the widgets which I'm using, like Grid, I want to call the read method of the datasource with a parameter specified to retrieve all items from the back-end which match the query 'active' == true. See code example:

// create the grind containing the update elements

$("#root_grid").kendoGrid({

dataSource: rootDatasource.read({ params: { active: true } }),

columns: [{

field: "id",

title: "id",

width: 80,

}, {

field: "name",

title: "naam",

}, {

field: "value",

title: "weging",

width: 100,

}, {

field: "active",

title: "actief",

width: 100,

}],

toolbar: [{

name: "create",

text: "voeg nieuwe rij toe",

}, {

name: "save",

text: "opslaan",

}, {

name : "cancel",

text: "annuleren",

}],

sortable: true,

pageable: {

refresh: true,

pageSizes: true,

messages: i18n.grid.message

},

sortable: {

mode: "multiple",

allowUnsort: true

},

editable: true,

});

And now my problem, this won' work!! I'm really confused, if I just add a reference to the datasource object without directly specifying the .read() method, it just works. (Retrieving all items, including 'active' == false though.) In another form I want to specify some other parameters, so just adding the parameters to my (PHP) back-end just doesn't work.

I've been reading the docs en forums quite extensively to find an answer, didn't find it and I find myself quite stuck right now. Any help will be much welcome.

var rootDatasource = new kendo.data.DataSource({

schema: {

data: "data",

model: Root,

total: function(response) {

return $(response.data).length;

}

},

pageSize: 10,

transport: {

read: "/vta/root/all.json",

update: {

url: "/vta/root/update.json",

type: "POST"

},

create: {

url: "/vta/root/create.json",

type: "PUT"

},

parameterMap: function (data, operation) {

if (operation == "read") {

if (data.params != undefined) {

var params = new Array();

for (var n in data.params) {

params.push(n +"="+ data.params[n]);

}

return params.join('&');

}

},

error: function(e) {

alert(e.responseText);

},

change: function(data) {

// console.log(data);

},

sort: {

field: 'id',

dir: 'asc'

}

});



var Root = kendo.data.Model.define({





    id: "id",

    

    fields: {

        

        id: {

            editable: false

        },

        

        name: { 

            type: "string",

            validation: { 

                required: true

            } 

        },

        

        'value': {

            type: "number",  

        },

        

        active: { 

            type: "boolean",

        }

    },









});

Grid

asked on 12 Sep 2012

2 answers

1.3K+ views

Validation of textarea

I'm trying to validate a <textarea>. Is it even possible to validate any other fields beside inputs? The documentation (http://docs.kendoui.com/api/framework/validator neither http://docs.kendoui.com/getting-started/framework/validator/overview) does not say anything about this.
If <textarea> is not support, how can I achieve validation of multiline text inputs with <input>?

Thx!

Henning

Validation

answered on 12 Sep 2012

0 answers

78 views

DatePicker with RangeSelection feature

Hi,

Can we have range selection ability within DatePicker's calendar. Like i have two datepicker controls i.e., Startdate and Enddate. Both datepickers control will be populated with StartDate's Calender selection. For this I have to make 2 clicks on StartDate's calender for selecting range. Currently, datapicker's calender is closed after having one click so range selection is not possible. Please suggest.

Date/Time Pickers

asked on 12 Sep 2012

1 answer

96 views

MVVM with HTML input data transfer?

Hey everybody,
I'm new to kendoUi , and some problem with MVVM binding with HTML input element. I try to create person information from <input> element.
Here is my HTML snippets for collect person information like "first_name", "last_name", "date_of_birth" etc.

And I have viewModel , it can read "json" file but couldn't create!
I think somethings wrong with my save function.

If someone faced with this problem and got solution! Help me
Thanks

MVVM

answered on 12 Sep 2012

0 answers

58 views

Any documentation on using Kendo UI MVC extensions commercial full source in VS 2012 solution

I would like to know how different is to use full source code (for debugging purposes) of Kendo UI MVC wrapper extensions.
So instead of minimized files I would like to deal with full version of .js, .css files and I would like to peek into HTML helper's source code.

Any article/documentation on how to do that. I would like to first try a test solution with a trial version and to understand how it would be different if I would reference source project of MVC wrappers and uncompressed content and script files.

Thanks,
Rad

General Discussions

asked on 12 Sep 2012

0 answers

80 views

Block certain days in grid cell's date picker

Hello,

I have a batch editable Kendo grid that contains a datetime column. In edit mode, when clicking the datetime cell, the datepicker is shown with all days. I want to block/disable some days in a month (i.e. holidays).
Any suggestion how to do it?

Thank you,
Alex

Grid

asked on 12 Sep 2012