Telerik Forums
Kendo UI for jQuery Forum
0 answers
73 views
Hello,
I would like to know, how can we create the Data like this http://demos.kendoui.com/service/Products  using PHP. 

We are unable to configure this http://demos.kendoui.com/web/grid/editing.html  with the help of PHP. 

Please provide me the suitable help for using this with PHP. 

Thanks 

Pritpal
Pritpal
Top achievements
Rank 1
 asked on 10 Mar 2012
1 answer
395 views
I'm trying to do a remove on my grid's dataSource, so the first thing I try to do is to get the model I want to remove:

var toRemove = grid.data("kendoGrid").dataSource.get(deleteId);

This is causing an error:

"Uncaught TypeError: Cannot call method 'get' of undefined" (references kendo.all.js:4735)

What's puzzling about this is that grid.data("kendoGrid").dataSource isn't undefined and I can successfully call filter on it. Am I missing something here when using .get()?


James
Top achievements
Rank 1
 answered on 10 Mar 2012
0 answers
409 views

Validations are not firing if first column in the grid is readonly field for the newly added row.
My code will look like below.

var testModel = { id: "Id"
 fields:{
 Id: {editable: false, type: "number", defaultValue: -1, validation: { required: true} }, 
 FirstName: {editable: true, defaultValue: "", validation: { required: true} }
}

 Case 1:
Grid Columns: First column(FirstName) is editable
$("#grd").kendoGrid({ editable: true, toolbar: [
{ name: "create", text: "Add New Record" }, { name: "save", text: "Save Changes" }, { name: "cancel", text: "Cancel Changes"
 ],
columns:[{field: "FirstName",width: 300,title: "First Name"} ]);

 Step 1: Click on the "Add New Record" button.
Step2: Click on the "Save Changes" button with out entering required fields.
Validations are firing for First Name which is working fine in this case.

Case 2:
Grid Columns: First column(Id) is non editable 
$("#grd").kendoGrid({editable:true, toolbar: [
{ name: "create", text: "Add New Record" }, { name: "save", text: "Save Changes" }, { name: "cancel", text: "Cancel Changes"
 ],
columns:[{field: "Id",width: 50,title: "Id"}, {field: "FirstName",width: 300,title: "First Name"} ]);

Step 1: Click on the "Add New Record" button.
Step2: Click on the "Save Changes" button with out entering required fields.
Validations are not firing for First Name.

If first column is editable and user clicks on 'Add New Record' focus is going is editable column and validations are firing if try to save.
If first column is non editable and user clicks on 'Add New Record' then focus is going on readonly column and validations are not firing if try to save. Here grid is saving the data even validations are failed.

Please suggest me how to handle the above scenario.

Naren
Top achievements
Rank 1
 asked on 09 Mar 2012
11 answers
1.4K+ views
Hi,

I'm using a kendo grid and I want to alter the JavaScript structure before doing the http call.My datasource type is odata.
The problem is as soon as I add the parameterMap the odata $filter, $skip, $top is no longer sent and formatted to odata.
I want to override this for the update operation only.
The example does that but there is no filter implemented (http://demos.kendoui.com/web/grid/editing.html) and therefore it is an incomplete example
.
parameterMap: function(options) {
alert(options.filter.filters[0])
}
I have access to the filters but how can I put back the standard behavior along with my custom needs.
I know there is a toOdataFilter function being used to convert these but struggling how to keep the standard odata support and adding my custom needs.

Anyone has already faced this issue and figure out how to handle this?
Thanks.
Alessandro
Top achievements
Rank 1
 answered on 09 Mar 2012
2 answers
172 views
Ok, bear with me on this one. 

My grid is being populated by a basic php get request that pulls all records from the database. Basic, it works like a charm.
However, the content that is pulled from the db does contain html formatting. I can strip the html via php before it gets encoded into the json object (I've confirmed this does work) however, once it becomes json, the html tags are back and the grid displays all the content in a not so human friendly way.

so 2 questions...
1- is there a better way of getting rid of the html content in the json data, as it's not specifically necessary in the grid view but used elsewhere on the site it is so removing completely is not possible. 
2- or is there a way to get the html content to display in the grid?

Any help in a timely manner would be beneficial as I'm likely to drop using Kendoui at some point today as this has already cost me about a days worth of time. And I want to keep Kendo ;)

Thanks!
Jason
Top achievements
Rank 1
 answered on 09 Mar 2012
3 answers
693 views
Hello,

I am currently evaluating the KendoUI product against other toolsets. I am looking to be able to drag and drop an item from the grid to the tree view. I seem to have almost everything working except for finding out what element I am hovering over in the tree. 

I have debugged the code below in Chrome and I am able to see the text of the item I am hovering over but not the id I assigned to it. The application I am working on can have the same folder name in different parent folders. 

Any suggestions as to how to get this to work? I would really like to use KendoUI but this seems to be a deal breaker.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Viewer</title>
 
    <script src="../../Scripts/kendoUI/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/kendoUI/kendo.all.min.js" type="text/javascript"></script>
    <link href="../../Content/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../Content/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="../../Scripts/kendoUI/people.js" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <section id="main" >
            <div id="example" class="k-content" style="height: 650px;">
                <div id="horizontal" style="height: 100%; width: 100%;">
                     <div id="vertical">
                        <div>
                            <p>
                                Inner splitter :: Top
                            </p>
                        </div>
                        <div>
                           <ul id="treeview">
                            <li id="3.6" data-expanded="true">Item 1
                                <ul>
                                    <li id="1.6">Item 1.1</li>
                                    <li id="2.6">Item 1.2</li>
                                    <li id="9.6">Item 1.3</li>
                                </ul>
                            </li>
                            <li id="4.6">Item 2
                                <ul>
                                    <li id="7.6">Item 2.1</li>
                                    <li id="5.6">Item 2.2</li>
                                    <li id="6.6">Item 2.3</li>
                                </ul>
                            </li>
                            <li id="8.6">Item 3</li>
                        </ul>
                        </div>
                    </div>
                    <div>
                        <div id="grid" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
            </div>    
 
            <script>
                function droptargetOnDrop(e) {
                    var treeView = $("#treeview").data("kendoTreeView");
                    var selectedNode = treeView.select();
 
                    treeView.append({ text: "Add test node..." }, selectedNode);
                }
 
                $(document).ready(function () {
                    $("#vertical").kendoSplitter({
                        orientation: "vertical",
                        panes: [
                            { collapsible: true, size: "50%" },
                            { collapsible: true, size: "50%" }
                        ]
                    });
 
                    $("#horizontal").kendoSplitter({
                        panes: [
                            { collapsible: true, size: "20%" },
                            { collapsible: true, size: "80%" }
                        ]
                    });
 
                    $("#treeview").kendoTreeView({
                        dragAndDrop: true
                    });
 
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        selectable: true,
                        groupable: true,
                        scrollable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                            field: "FirstName",
                            width: 90,
                            title: "First Name"
                        }, {
                            field: "LastName",
                            width: 90,
                            title: "Last Name"
                        }, {
                            width: 100,
                            field: "City"
                        }, {
                            field: "Title"
                        }, {
                            field: "BirthDate",
                            title: "Birth Date",
                            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                        }, {
                            width: 50,
                            field: "Age"
                        }
                        ]
                    });
                });
 
                $("#grid").kendoDraggable({
                    filter: "tr",
                    hint: function () {
                        var g = $("#grid").data("kendoGrid")
                        return g.select().clone()
                    }
                });
 
                $("#treeview").kendoDropTarget({
                    drop: droptargetOnDrop
                });
            </script>
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>
Alexander Valchev
Telerik team
 answered on 09 Mar 2012
9 answers
222 views
I've looked at all the IE8 issues in the forums so far, but I haven't seen this problem yet.

I'm running with jQuery 1.7.1, but this particular page is NOT using any jQuery UI scripts.

There are 4 graphs that render on the page...they render using Firefox, Chrome, IE7 and even IE8 on a Windows 2008 server. They will not render, however, on IE8 running on Windows XP. I get the chart grid and the axis labels, but no lines on a line graph.

I tried adding the easing workaround, but that didn't change anything.

Anyone have any suggestions for this setup? Unfortunately, our entire company is using IE 8 on Windows XP, so it's killing me that this is the one browser combination that I can't get to work. Thanks.
Petur Subev
Telerik team
 answered on 09 Mar 2012
2 answers
113 views

Is it possible to have a Piece of the Pie Chart exploded? eg. like Excel where a piece can be shown extracted from the pie slightly
Sam
Top achievements
Rank 1
 answered on 09 Mar 2012
1 answer
449 views
I would like to add data to a kendoGrid from a form, not a grid toolbar.
I'm able to add data to the grid with the add() method but when I call sync() on dataSource, create: it never gets called.

This example code it's close to my original code statement even if - in fact - I'm using remote data binding. Anyway, it gives me the same results

HTML:
<div class="k-toolbar">
<input type="text" id="inputColor"></input>
<button id="addColorButton">Add Color</button>
</div>
<div id="grid"></div>

JS:
var colors = [{
        "ID": 1,
        "Name": "Blue"},
        {
        "ID": 2,
        "Name": "Red"
        }];
  
    var dataModel = new kendo.data.Model.define({id: "ID"});
    var localDataSource = new kendo.data.DataSource({
            transport:{
                read: function(options){
                    options.success(colors);
                },
                create: function(){
                    alert('Creating...');
                }
            },
            schema: {
                model: dataModel
            }
        });
  
    $('#grid').kendoGrid({
        dataSource: localDataSource,
        columns: [{title:"Color", field:"Name"}]
        });
  
    $('#addColorButton').bind("click", function(){
        localDataSource.add({
            Name: $('#inputColor').val()
            });
        localDataSource.sync();
        });

I'm doing something wrong? Any ideas?
Nikolay Rusev
Telerik team
 answered on 09 Mar 2012
1 answer
168 views
Hello all,

I have a template in a column in which I want to dive into logic and show or now show a link based on other values

{ title: "Job Location Notes", template: "${ showLogLink(JobLocationNotes,JobID) }" },


and the function is something simple like 

function showLogLink(JobLocationNotes, JobID) {
 
    if (JobLocationNotes != null && JobLocationNotes != "") {
        return JobLocationNotes + " <a href='javaScript:;' data-url='../ModalWindows/JobLocationNotes.aspx' title='Location Notes' class='jobLocationLink' data-id='" + JobID + "'>Log</a>";
    }
    else {
        return "";
    }
 
}


It works except the output is encoded.
So instead of seeing "Log"
I see " <a href='javaScript:;' data-url='../ModalWindows/JobLocationNotes.aspx' title='Location Notes' class='jobLocationLink' data-id='7'>Log</a> "

Thanks!
Alexander Valchev
Telerik team
 answered on 09 Mar 2012
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?