Questions on Kendo UI for jQuery Forum

1 answer

251 views

I have a Grid with a date column. In the datasource's model, it is defined with type='date'.
First problem: the first time the grid is displayed, the date is well displayed. If I edit another column, after saving changes, the date is displayed in json format. If I click "refresh" the date is well displayed again.
Second problem: I can't save the date modifications, it seems the grid doesn't send the value of the grid column.

I've made a screencast that shows that: http://screencast.com/t/jYj97QV1

Grid

answered on 25 Apr 2012

1 answer

208 views

dynamic schema data in grid

Is there a possibility to aggregate the grid schema dat aon the fly with ajax? I tested ist with a function but it didn't work.
i.e.:
It seems not to work cause if the data format, i guess ... any idea?

in the grid object:
schema: getSchema()

the function:
function getSchema()
{
var dataReturn;
    $.ajax({
        url: "/ajax/listen/getschema",
        success: function(data){
            console.log(data);
            dataReturn = eval( "("+ data +")");
        },
        error: function(data){
            console.log(data.responseText);
        },
        complete: function(jqXHR, textStatus){
            console.log(jqXHR);
            console.log(textStatus);
        }
    });
    return dataReturn;
}

Grid

answered on 25 Apr 2012

10 answers

544 views

Trying to print json data

Hi Guys,

I am writing simple application in kendoui to get json object through web service and printing it in grid. But nothing is printing except header values.

json object is:

{ "results" : [{ "name" : "Arkadiusz Pikura1", "desc" : "Pracownik 1 KS-Solab" }, { "name" : "Marcin Wita", "desc" : "Pracownik 2 KS-Solab" }] }

I am attaching code for the same.

<!DOCTYPE html>

<head>
<title>JSON Example</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.common.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.css" rel="stylesheet" type="text/css" />


<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="main">
<div class="header">

<h1>Kendo UI Grid</h1>
</div>

<div id="grid1">
<table id="grid2">
<tr>
<th data-field="name">Name</th>
<th data-field="desc">Description</th>
</tr>
</table>
</div>
</div>
</body>

<script>
$(document).ready(function() {

$("#grid2").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://dhpl.comuf.com/json.php",
dataType: "json"
}
},
schema: {
data:"results",
model: {
fields: {
desc: {},
name: {}
}
}
}
},

columns: [
{
field: "desc",
title: "results"
},
{
field: "name",
title: "results"
}
]
});
});
</script>
</html>

Please help me to figure our the problem.

Data Source

answered on 25 Apr 2012

2 answers

177 views

Return response failing

Hi,
My save handler generates JSON correctly (PHP code used to generate the JSON below). but I still get an upload error. The actual file is uploaded successfully.

$var_OutputArray = array('attachid'=>$attachment->AttachmentID, 'mod'=>$attachment->ModuleCode,'tic'=>$attachment->Type);

header('Content-type: text/plain');

echo json_encode($var_OutputArray);

An example of JSON output which generates the error is

{"attachid":"labgh3v1din96yfk","mod":"prj","tic":"ticket"}

Upload

answered on 25 Apr 2012

1 answer

224 views

Non async, and multiple files

If using the upload control as a drop-in replacement for the default file upload control (not using async), is it possible to handle multiple files on the server-side?

I don't see how it is possible since when you get back to the server-side, there is only one fileUpload control on the page. Thus one file.

Is there some trick I am missing? Or do I need to turn off multiple files, unless using async?

Upload

answered on 25 Apr 2012

0 answers

121 views

Drag and drop item from listItem to Grid...

Hi Guys,

I have a grid page, In this page i need Drag and drop item from listItem to Grid...

Please Help Me...

Thanks

Drag and Drop

asked on 25 Apr 2012

3 answers

245 views

Custom drag and drop half working, lost event binding on pagination, please help.

Hi All,

I have a product listing grid and I need to be able to drag each product onto another panel on the same page.

One of the posts suggested that the Grid has no built-in drag and drop support yet. So I attempted to use the non-visual Drag and Drop component, as follow:

1. Using Table method with each TD:
<td><div class="pc-draggable" style="display: inline-block; width:100%; cursor:pointer">Each product name goes here</div></td>

2. Using jQuery.each to convert each of the div within each td into draggable.
$(".pc-draggable").each(function () {
          {
                  var dragHint = $(this).clone();
                  $(this).kendoDraggable({ hint: function () { return dragHint; } });
         }
}

This seems to allow dragging UNTIL the user change the listing via pagination. It seems pagination "ditches" my custom drag bindings in step 2.

Is there any way I can work arround this issue of losing the custom draggable binding?   One way I could think of is to catch the "pagination change event", but I don't know (if it is possible) how to hookup/bind such an event, so that I could re-execute the code in step 2 above.   The only way I could catch the pagination click was using the following code:

 $(".k-link").click(function () { setTimeout("prepareDraggable()", "300");});  
// Where prepareDraggable() is actually step 2 above.

Or, if any one can suggest a better or proper way to implement per-grid row drag and drop?

Thanks!

JB

Grid

answered on 25 Apr 2012

4 answers

667 views

Set Selected Node

When creating a treeview from hierarchical html, is there an attribute I can include on a <li> element to make it the selected node

TreeView

answered on 25 Apr 2012

1 answer

435 views

Validator messages coalescing to one field

I am following the “Basic Usage” example. I am using the variant wherein I specifically create a <span data-for=”id_of_validated_control”> for each field. In this case, I have two fields, the first being "Name", the second being "Code".

“Name” and “Code” each have a ‘k-invalid-msg’ span. Now let’s say I blank out the second field ‘Code’ first. It’s get “Code is required” message. So far so good. Now I put a value in Code, then go to the field above it – “Name” – blank it out, and blur. I expect the <span> next to "Name" to get a message, but what happens is that “Name is required” displays in the span adjacent to “Code” field, becauseat the moment I tab out of the "Name" field, the <span data-for=”name” class=”k-invalid-msg”/> is removed from the DOM, and Code’s <span> is the one populated.

I have tried several approaches. The first approach is to declare my own <span data-for="name_of_validated_input" class="k-invalid-msg></span> after each <input> that has the "required" attribute. I also tried not declaring my own <span>'s, and applying a validationMessage="xxx is required" to each <input> that has the "required" attribute.

Here is one of the <input> controls with an explicit <span>. Note that this is copied from Chrome "inspect element" which is adding the ="" to required.

<div class="form-FieldOuter" id="view-FieldBox1" style="display:block;">
<label for="view-FieldBox1CodeInput" class="form-label" style="overflow:hidden;">Code</label>
<input type="text" class="form-control" id="view-FieldBox1CodeInput" data-bind="value: Code" required="" validationmessage="Code is required.">
<span class="k-invalid-msg" data-for="view-FieldBox1CodeInput"></span>
</div>

And a couple of notes/comments:
1. In my program's html output, the attribute doesn't have a value, it looks like <input id="x" name="x" required validationmessage="blah blah"/>
2. I've tried also assigning the name attribute. But I see from other forum post that data-for relates to the 'id' attribute and not the 'name' attribute, so I think my use above should be correct in that regard. (see: http://www.kendoui.com/forums/framework/validation/is-there-a-way-to-control-the-position-of-validation-messages.aspx , where it says To force it to use specific place for its hint, place a span with data-for="your_input_id" and class="k-invalid-msg", so that the Validator can recognize and use it )
3. I observe that data-role="validator" is being applied to the <div> that contains my form and all of the validated <input> and their <span> elements.
4. Using kendo.web.js from version 2012.1.322 Full-license not minified.

Validation

answered on 25 Apr 2012

5 answers

142 views

Datas from xml Doc

Hi,

I'd like to get datas from a xml document that I have exported from mySQL database.
So I want to create charts with these datas, I wrote down the script like this :

<body>

<div id="chart" style="width: 400px; height: 600px"></div>
<script>

ds = new kendo.data.dataSource({
transport : {
read : {
url : "C:/Users/Julien/Downloads/kendo.xml"
}
}
})

$("#chart").kendoChart({

dataSource: ds,
categoryAxis: {
categories: [January,February,March,April]
},
seriesDefaults: {
type: "line"
}

});
</script>

</body>
</html>

Maybe it's totally wrong but I started to learn about Kendo UI and I didn't know so much about AJAX and stuff, so for now I have nothing appearing on my screen.

The thing is that when I wrote some datas in local it works so if someone could help me I'd really apreciate it.

Thanks,

Julien

Data Source

answered on 25 Apr 2012