Questions on Kendo UI for jQuery Forum

0 answers

80 views

Just Another Grid Event Remove (JAGER) Question

Can anyone help: Why doesn't this fire the remove event in the grid?

$("#grid").delegate("#deleteItem", "click", function(e) {

var grid = $('#grid').getKendoGrid();

var a = grid.dataItem($(this).closest('tr'));

grid.removeRow(a);

});

Full Example:
http://jsfiddle.net/bGR88/9/

Thanks

Grid

asked on 05 Oct 2012

1 answer

128 views

Why doesn't JSON from my service appear in my grid?

I'm attempting to populate the Kendo UI Grid with JSON returned from my web service (ASP.NET Web API). The JSON appears valid, confirmed valid by running the entire return through JSONLint.com.

Here is a sample from the service:

[{"Id":2000,"Name":"Alabama"},{"Id":2001,"Name":"Alaska"},{"Id":2002,"Name":"Arizona"}]

The problem is, the data returned from the service does not display in the grid. If I comment out the call to the service and use the array created below, the grid is populated. What's going on and how do I fix it?

The code below is my entire demo page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic Grid usage</title>
    <link href="content/kendo/2012.2.710/kendo.common.min.css" rel="stylesheet" type="text/css">
    <link href="content/kendo/2012.2.710/kendo.default.min.css" rel="stylesheet" type="text/css">
    <script src="scripts/kendo/2012.2.710/jquery.min.js" type="text/javascript"></script>
    <script src="scripts/kendo/2012.2.710/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
 
    <div id="states">
    </div>
    <script type="text/javascript">
 
        $(document).ready(function () {
 
            var states = [
                    { Id: 1, Name: "Maine" },
                    { Id: 2, Name: "Washington" },
                    { Id: 3, Name: "Idaho" }
                ];
 
            var statesDataSource = new kendo.data.DataSource({ data: states });
 
//            var statesDataSource = new kendo.data.DataSource({
//                transport: {
//                    read: {
//                        url: "http://XXX.com/apps/states",
//                        dataType: "jsonp"
//                    }
//                }
//            });
 
            statesDataSource.read();
 
            $("#states").kendoGrid({
                dataSource: statesDataSource
            });
        });
    </script>
</body>
</html>

Grid

answered on 05 Oct 2012

0 answers

59 views

Grid Paging

Hi,

I am using kendo grid with paging.In my grid i have checkbox for selecting the grid row.
when i am using paging when I select a row in page 1 and after if go to page 3 and select a row and save the data to database.
The problem is when I select the page 3 row the page 1 row which is selected is not saved.
Even if I change the grid page to 1 the selected row is deselected automatically.
Is there any solution to solve the problem.

please help...

Regards,
Sam.

Grid

asked on 05 Oct 2012

1 answer

102 views

Share DataSource - identify who is requesting data

Hi dear forum members and support team!

Is it a customary scenario to share a datasource between multiple widgets?

In my scenario it is possible to enter several different Addresses - which all have a Country and Province to be selected (depending on each other)

I was trying to setup just one _countryDataSource and one _provinceDataSource.

I have two issues now...

1) Once any Country-Combobox (kendo-combobox) has a changed selection, I want to "refresh()" the according Province-Combobox. (How would I go about that?)

2) How could I now identiy, which Province-Combobox made the request to the shared DataSource?

I am pretty sure that it would be easier to just "not share" the DataSources but build up one for each ComboBox.... would this be a better approach? Or is there an easy way to achieve my requirements?

Also: How resource intensive is it to build up a DataSource?... because if it is leightweight and not really strains the resources it would not make sense to share DataSources at all....

Please note that the Cascading-Combo-Boxes samples do not really apply to my scenario.... I need a little more control, since it should also be possible to enter a custom country (which is not - yet - in the list) or a custom province.

Thanks you very much for any help!

Kind regards,
Wolfgang

Data Source

answered on 05 Oct 2012

0 answers

107 views

Evaluating Kendo Chart UI

Hello,

I am evaluating Kendo Chart UI for adoption to our current solution. I wanted to confirm some features (if it is supported or not). These are some of the key items that will help me to come to a recommendation.

1. We need to show multiple series on the same chart. For example, a line series and scatter on the same graph. Is this supported?
2. Can we use our own custom icons (small images or shapes) to plot on scatter charts?
3. Does events work on scatter plots? Can we find out when user clicks on a specific scatter item?

Thanks,
Manesh

Charts

asked on 04 Oct 2012

0 answers

124 views

Dynamically turning inline edit inputs on/off based on drop down in first column.

I have a grid with three different "types" in it.

Type A = uses fields 1,2,3,4,5,6,7.
Type B = uses fields 1,2,3,6,7.
Type C = uses fields 2,3

We still require a rollup view with all the data in the table.

I have the grid showing the data; and using a drop down to determine the "type".

I can read the value of the dropdown on change.

I can't, for the life of me, get the fields to turn off/on based on that selection.

Oh yes; forgot; this is a grid with the row made inline editable. Please; any ideas?

Thanks.
Tony

Grid

asked on 04 Oct 2012

2 answers

173 views

Problem with using CellEdit on next cell

Hi!
I use a grid with incell edit option. I try to set focus and edit the next cell with tab key pressed on prev.

$('#grid div table tr td input').live('keydown', function(event) {
if (event.which == 9) {
var grid = $("#grid").data("kendoGrid");
var $td = $(this).parent();
grid.editCell($td.next());
}
});
something like this.
But in this case old input is not closed.
I try new code
$('#grid div table tr td input').live('keydown', function(event) {
if (event.which == 9) {
var grid = $("#grid").data("kendoGrid");
var $td = $(this).parent();
grid.closeCell();
grid.editCell($td.next());
}
});
In this case old input closes, but entered value doesn't saved in a cell.
How can I edit next cell with correct close previous input?

Grid

answered on 04 Oct 2012

4 answers

125 views

Update on IE is different from FireFox

Hi,

I'm kinda new to Kendo UI so its possible I've missed it in the discussions here.

We're building a PoC with Kendo UI and MVC3 in Visual Studio 2010. What I noticed today is that an 'inline' edit in the Kendo Grid leads to different results in IE9 and FireFox. When I edit a line in IE9, update it to the server the data is persisted correctly in the DB and the screen show the new value. After a refresh however the old data is back. Closing IE9 all together and restarting the App gives me the data from DB correctly.

If I do the same in FireFox after a refresh the data is shown correctly.

When I empty the cache in IE9 before the refresh the behavior is as expected (showing the correct information from the DB).

Here's some of my code:
The Update Method in the Controller

public HttpResponseMessage Update(int id)

{

HttpResponseMessage response = new HttpResponseMessage();

using(var entity = VMProjectRegel.GetById(this, Id))

{

entity.Aantal = Convert.ToInt32(Request["Aantal"]);

entity.Prijs = Convert.ToDecimal(Request["Prijs"]);

entity.BTW = Convert.ToDecimal(Request["BTW"]);

entity.CreatedOn = Convert.ToDateTime(Request["CreatedOn"]);

entity.CreatedBy = Convert.ToInt32(Request["CreatedBy"]);

entity.ChangedOn = Convert.ToDateTime(Request["ChangedOn"]);

entity.ChangedBy = Convert.ToInt32(Request["ChangedBy"]);

ORMSession.SaveChanges();

response.StatusCode = HttpStatusCode.OK;

}

return response;

}

The view:

<script src="@Url.Content("~/DataSources/ProjectOnderhoudDataSource.generated.js")" type="text/javascript"></script>

<div id="projectEditForm">

<input id="DatumAanvang" data-bind="value: selectedProject.DatumAanvang" />

<hr />

<div id="projectRegelGrid" />

<script type="text/javascript">

$(function ()

{

$("#DatumAanvang").width(220).kendoDatePicker();

ProjectOnderhoudDataSource.bind("change", function (data)

{

ProjectOnderhoudViewModel.set("selectedProject", this.view()[0]);

});

ProjectOnderhoudDataSource.read();

kendo.bind($("#projectEditForm"), ProjectOnderhoudViewModel);

ProjectOnderhoudProjectRegelListDataSource.options.transport.read.parentId = 1;

$("#projectRegelGrid").kendoGrid

({

columns:

[

{ field: "Aantal", title: "Aantal" },

{ field: "Prijs", title: "Prijs" },

{ field: "BTW", title: "BTW" },

{ field: "CreatedOn", title: "Datum aangemaakt", template: '#= kendo.toString(CreatedOn, "dd MMMM yyyy") #' },

{ field: "ChangedOn", title: "Datum gewijzigd", format: "{0:dd MM yyyy}" },

{ command: ["edit", "destroy"], title: " ", width: "210px" }

],

editable: "inline",

deletabled: true,

pageable: true,

sortable: true,

dataSource: ProjectOnderhoudProjectRegelListDataSource,

pageSize: 3,

serverPaging: false

});

</script>

</div>

Regards
Paul.

Data Source

answered on 04 Oct 2012

0 answers

74 views

how to apply editor for separate lines (see att.)

Please advise, for example please see attachment. Is it possible to type in a text in text input(s), then select portion of text and apply editor styles such as bold, text color etc.?

Thank you for your input.

Editor

asked on 04 Oct 2012

4 answers

566 views

KendoGrid edit and destroy ajax call

Hello,

I'm using KendoGrid to populate the data and also doing CRUD functionality. But my problem is that I'm not able to update/Delete entities as I'm not able to make ajax call .

Kindly suggest me where I'm going wrong .

Thanks,

$("#GridTestJS").kendoGrid({

columns: [{ title: "Fontfamily", field: "Fontfamily" },

{ title: "FontPreviewImage", field: "FontPreviewImage" },

{ command: ["edit", "destroy"], title: " ", width: "210px"}],

editable: "popup",

dataSource:

{

transport:

{

read: { url: "/Test/GetFontDetails" },

update: { url: "/Test/updateFontDetails",

data: {}