Questions on Kendo UI for jQuery Forum

5 answers

76 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.1K+ views

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

139 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

192 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

137 views

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

279 views

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

81 views

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

3 answers

1.9K+ views

Unselect selected node

Hi,

As subject. is it possible to unselect selected node (clearing yellow select-mark) ?

Regards,
Gema Pratama

TreeView

answered on 26 Apr 2013

12 answers

3.1K+ views

ESC key to close a modal window

Is there anything there an option available on the control?

My other option would be tap into the keypress event and check for the ESC keycode. I've began to really like the keyboard navigation features of the grid and was wondering if there is a KendoUI API exposing events for all the keys in the kendo.keys object.

Thanks in advance.

Window

answered on 26 Apr 2013

1 answer

124 views

Problems putting a modal within a non-modal window

Hi,

I am trying to use a modal window within another window as a confirm/message popup, but there are some issues I am not sure if I can't get around.

Here's a jsfiddle of my situation: JsFiddle

The problems I am trying to fix are:
1. Using a modal window while also using appendTo seems to have issues with the back drop, I see its there until you click elsewhere, then it disappears.

2. It would be great if I could center the modal within my window rather than the Window

3. Even though dragging is disabled on the modal, if you grab the modal title bar, it will move the outside window.

4. If I click the 'X' to close the inner modal, it closes my external window.

Can anyone suggest solutions to any of these issues?

Window

answered on 26 Apr 2013