Questions on Kendo UI for jQuery Forum

12 answers

3.8K+ views

[Solved] disable the grid or/and functionality

Hello again,
I would like to disable all the functionalities such as paging and buttons/anchors that play the role for CRUD operations.
When i click edit,i want everything on grid to be desabled,because beneath will be a editing for,and only if he press save or cancel,re-enable the grid and its functionalities.
How can i achieve this?

Regards,
Daniel

Grid

answered on 29 Apr 2013

1 answer

116 views

Issue :- How to override grid filter date selection for another date column on same grid.

Steps To produce:-
1.
I have Kendo grid which has two date columns
date1 and date2.

2.
Select any date in first column(Date1) filter date
picker and close it.

3.
Go to second date column (date2) and click on date
picker filter.

4.
You will see same date selected for column
date2.

Question :- How
I ignore previous selection in grid filter datepicker.

Grid

answered on 29 Apr 2013

1 answer

104 views

[Solved] endlessScroll for a ListView only works in one direction?

I have a listView that has endlessScroll enabled:

$('#MyListView').kendoMobileListView({

dataSource: myRemoteDataSource,

template: myTemplate,

autoBind: false,

endlessScroll: true,

scrollTreshold: 30

});

It is bound to a dataSource that gets its data from a remote source that has tens of thousands of records:

var myRemoteDataSource = new kendo.data.DataSource({

pageSize: 10,

serverPaging: true,

transport: {

read: {

url: 'http://myremotedata'

},

parameterMap: function (data, type) {

var startRow = ((data.page - 1) * data.pageSize) + 1;

return {

strow: startRow,

rpp: data.pageSize

};

}

},

schema: {

data: 'Data',

total: 'Total'

}

});

This works fine when I start the listView from the *first* page because all the other pages come after it, so only endlessScrolling in the downward direction is necessary. However, sometimes I need to start the listView on a specific page other than page 1:

myRemoteDataSource.query({ page: 45, pageSize: 10 }); // 45 is a random page.

Again, the data is displayed as expected in the listView and endlessScrolling in the downward direction works. However, when I try to scroll up to see the records on the previous page (i.e. page 44), nothing happens. Apparently, endlessScrolling only works in one direction (down), even though it seems it would be trivial for it to make a call to the dataSource to retrieve the previous page (up) just as it retrieves the next page (down).

In a nutshell, I need to be able to take a listView which is remotely bound to thousands of records and start from any page and endlessScroll in either direction. This seems like it would be a pretty fundamental feature. Is there a way to do this?

Thanks in advance.

General Discussions

answered on 29 Apr 2013

5 answers

99 views

Showing all data

I am using DataSource to consume data from a remote resource, like this:

DataSource.Products = new kendo.data.DataSource({
transport: {
read: {
  url: "https://wwww.",
    dataType: "json",
    type: "GET"
  }
  },
});

My response should be JSON like this:
{
"status": {
"http_code": 200
},
"contents": {
"totalSize": 5,
"done": true,
"records": [
{
"attributes": {
"type": "",
"url": ""
},
"Name": ""
},......
]

At minimum I would just like to print the response:
DataSource.Products.fetch(function(){
var data = this.data();
console.log(data);
});

But the output is not what I expect, in fact I can't see the underlying data.

Let's say for example I want to see the records array, can I do data.contents.records?

Data Source

answered on 29 Apr 2013

8 answers

5.2K+ views

[Solved] pass a parameter to a datasource

I am having some troubles passing value from a grid to a function that builds a kendo datasource.

My function asks for parm that is the selected rows first cell.

I have this so far

function createGrid(parm) {

console.log("parm value = " + parm);

var sharableDataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/GetInfo/",

data:{dataParm:parm}

},

schema:

{

		dataParm:parm

}

}});

Im using mvc3 as my server service however when I add a breakpoint to the controller the parameter is always null.
The console.log is returning the value I am expecting to see in the controller however the parameter isn't sent to the server.

What am I doing wrong?

Any tips would be appreciated!

Data Source

answered on 29 Apr 2013

2 answers

162 views

Using Namespaced functions with events

This is my first time using kendo window and I have run into a problem.
I want to use a namespaced function for the OnClose event as below.

@(Html.Kendo().Window()
    .Name("CreateProduct")
    .Title("Create Product")
    .Width(600)
    .Modal(true)
    .Events(ev => ev.Close("OnClose"))
    .Visible(false)
    .Content(@Html.Partial("CreationForm").ToString())
)

Right now you can see that I am just using the OnClose function, but I wanted to be able to write something like:

<script>
var CurrentPageNamespace = {};
CurrentPageNamespace.OnClose = function(){
//Do Some Work Here
}
</script>

And then add it to the Window's on close:
@(Html.Kendo().Window()
    .Name("CreateProduct")
    .Title("Create Product")
    .Width(600)
    .Modal(true)
    .Events(ev => ev.Close("CurrentPageNamespace.OnClose"))
    .Visible(false)
    .Content(@Html.Partial("CreationForm").ToString())
)

I tested this with a simple alert, and if I removed the namespace from OnClose it would work, and with the namespace included nothing would happen. Is it possible to use a namespace with Kendo UI Window events?

Thanks in advance.

Window

answered on 28 Apr 2013

2 answers

227 views

Grid Ajax binding pagination

I am using the grid to show search results in a form. On submit I generate the search results and show in the grid. Currently the pagination doesn't work .

In the documentation it is mentioned that I have to create a read method like

public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)

{

var products = new NorthwindDataContext().Products;

DataSourceResult result = products.ToDataSourceResult(request);

return Json(result);

}

It would be hard for me to generate the search list in Ajax read method. How can I use the previously generated list for ajax Read method ?

@(Html.Kendo().Grid(Model.DocumentSearchList).Name("Grid")

.Sortable()

.Filterable()

.Pageable()

.Selectable(selectable => selectable.Mode(Model.Workflow == null ?

GridSelectionMode.Single :

(Model.Workflow.SelectionMode == SelectionMode.Single ? GridSelectionMode.Single : GridSelectionMode.Multiple)))

.Columns(col =>

{

col.Bound(model => model.DocumentTypeName).Title("Type");

col.Bound(model => model.DocumentSubtypeName).Title("SubType");

col.Bound(model => model.DocumentStatusName).Title("Status");

col.Bound(model => model.ShortTitle).Title("Doc Title");

col.Bound(model => model.JurisdictionName).Title("Jurisdiction");

col.Bound(model => model.TopicsCount).Title("Topics");

col.Bound(model => model.WorkOrdersCount).Title("Work Orders");

col.Bound(model => model.WOSubmittedUserFullName).Title("Submitted By");

col.Bound(model => model.WorkOrderSubmittedDate).Title("On").Format("{0:MM/dd/yyyy}");

col.Bound(model => model.CreatedUserFullName).Title("Created By");

col.Bound(model => model.CreatedDate).Title("On").Format("{0:MM/dd/yyyy}");

col.Bound(model => model.UpdatedUserFullName).Title("Updated By");

col.Bound(model => model.LastUpdatedDate).Title("On").Format("{0:MM/dd/yyyy}");

})

.DataSource(dataSource => dataSource.Ajax()

.Model(model => model.Id(p => p.DocumentId))

)

.Events(e => e.Change("selection_change")))

Grid

answered on 26 Apr 2013

4 answers

161 views

[Solved] Tabbing out of numeric inputs causes changed value to revert

In my grid, when you tab to a _numeric_ column, change it's value, then tab out of the column, the value will revert if using IE10 or IE9.

Is this a known bug? It exists in the last two releases of IE. Are there plans to fix it? Is there a workaround in the meantime?

~S

Grid

answered on 26 Apr 2013

2 answers

320 views

[Solved] Client side paging does not work if DataSource is defined outside of grid.

If I define my data source independantly of my grid, the paging on the grid doesn't work. I have wasted a couple hours figuring out what the problem is. I can put the data source as part of a grid in this case, though it does make code slightly messier.

$(document).ready(function () {

var src = new kendo.data.DataSource({

transport: {

read: {

url: "Handlers/TaskHandler.ashx",

dataType: "json",

type: "GET",

},

update: {

url: "Handlers/TaskHandler.ashx",

dataType: "json",

type: "PUT",

},

destroy: {

url: "Handlers/TaskHandler.ashx",

dataType: "json",

type: "DELETE",

},

create: {

url: "Handlers/TaskHandler.ashx",

dataType: "json",

type: "POST",

},

parameterMap: function (options, operation) {

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

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

}

},

batch: true,

schema: {

model: {

id: "Id",

fields: {

Id: { editable: false, nullable: true },

Description: { type: "string", editable: true },

IsComplete: { type: "boolean", editable: true },

Priority: { type: "number", editable: true },

CreatedOn: { type: "date", editable: false, defaultValue: new Date() }

}

},

});

$('#task-data').kendoGrid({

toolbar: ["create", "save", "cancel"],

columns: [

{

field: "Id",

width: 44,

title: "ID"

}, {

field: "Description",

}, {

field: "Priority",

width: 110,

title: "Prio"

}, {

field: "IsComplete",

width: 90,

title: "Complete"

} , {

field: "CreatedOn",

width: 120,

title: "Created",

format: "{0:yyyy-MM-dd}"

}, {

command: ["destroy"], title: "", width: 120

}

],

pageable: {

pageSize: 5

},

scrollable: true,

editable: true,

navigatable: true,

sortable: true,

dataSource: src

//dataSource: {

// transport: {

// read: {

// url: "Handlers/TaskHandler.ashx",

// dataType: "json",

// type: "GET",

// },

// update: {

// url: "Handlers/TaskHandler.ashx",

// dataType: "json",

// type: "PUT",

// },

// destroy: {

// url: "Handlers/TaskHandler.ashx",

// dataType: "json",

// type: "DELETE",

// },

// create: {

// url: "Handlers/TaskHandler.ashx",

// dataType: "json",

// type: "POST",

// },

// parameterMap: function (options, operation) {

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

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

// }

// },

// batch: true,

// schema: {

// model: {

// id: "Id",

// fields: {

// Id: { editable: false, nullable: true },

// Description: { type: "string", editable: true },

// IsComplete: { type: "boolean", editable: true },

// Priority: { type: "number", editable: true },

// CreatedOn: { type: "date", editable: false, defaultValue: new Date() }

// }

// },

//}

});

If I switch the code back to using the inline definition of the data source then the paging works.

The docs make no mention of this. Is it a bug?

Grid

answered on 26 Apr 2013

2 answers

110 views

[Solved] Postback on legacy asp.net controls causes grid to lose all data

I have implemented a Kendo grid in a legacy asp.net web forms project. The datasource for the grid uses the transport mechanism to pull json from the server.

I have implemented the grid in a .ascx control, and it is embedded in a form/page which has 3 asp.net controls that do postbacks, a drop downlist, and two TextBox's. The two text boxes are in the same div and update panel, the only difference is their ID.

One of the Textbox's causes the grid to lose all it's data, when it does it's TextChanged Postback. The other does not. Very weird behavior.

Any thoughts on what would cause this to happen?

Thanks,
~S

Grid

answered on 26 Apr 2013