Telerik Forums
Kendo UI for jQuery Forum
8 answers
373 views

I'm using a column template to display my StatusTypes array.  It works fine, but when I use the "create" toolbar to add a row, the column template isn't displayed.  Once I hit "save", then it shows, but I would like it to appear right when the user clicks "create".

$("#gridEmailAddress").kendoGrid({
    dataSource: mydatasource,
    scrollable: true,
    sortable: true,
    pageable: true,
    editable: true,
    resizeable: true,
    toolbar: ["create", "save", "cancel"],
    columns: [
            { field: "Address", width: 190, title: "Email Address" },
            { field: "Name", width: 190, title: "Name" },
            { field: "StatusTypes", template: columnTemplate, title: "Status Types:" },
            { command: "destroy", title: " ", width: 120 }
            ]
});

 

Elan
Top achievements
Rank 1
 answered on 10 Mar 2012
2 answers
183 views
Hi there, I am new to kendoui, but I really like the way kendoui can show native feels on android, blackberry and ios devices.

I am trying to follow the sushi demo apps. But looking at the code, I notice that the checkout button doesn't do any actual server call. Unlike the menu who actually use a read transport. So, I am trying to do my practice by continuing upon the sushi demo. I have setup my rails server to response to /menus and give back array of menu json object. And I also create a separate url for order /orders. My Idea is to use order as a wrapper of menus so generally order json object will look like so:
{ id: "1", date: "today", menu: {...../*menu json object here*/} } 

But I am having trouble to make this works. So I created two data source for this:
one for /menus and the other one for /orders

        var ds = kendo.data.DataSource.create({
            schema: schema,
            transport: { read: { url: "menus", dataType: "json" } },
            group: "category",
            error: function() { console.log(arguments); }
        });

        var cartDataSource = kendo.data.DataSource.create({
            //data: [], 
            schema: schema2,
            transport: { create: { url: "orders", type: "POST" },  read: { url: "orders", dataType: "json" }},
            aggregate: [{ field: "menu.price", aggregate: "sum" }]
        });

Any idea on what do I do wrong?

Thank you in advance,
Fajar
Fajar
Top achievements
Rank 1
 answered on 10 Mar 2012
2 answers
267 views
how I can change the language filter and grouping area in the grid? 
Carlos
Top achievements
Rank 1
 answered on 10 Mar 2012
0 answers
74 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
400 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
415 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
178 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
700 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
228 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
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?