Telerik Forums
Kendo UI for jQuery Forum
1 answer
324 views
Hi,

Here is my code:
<!doctype html>
<html>
<head>
     
    <link href="styles/kendo.common.css" rel="stylesheet"/>
    <link href="styles/kendo.silver.css" rel="stylesheet"/>
    <link href="styles/common.css" rel="stylesheet"/>
 
    <script src="js/jquery.min.js"></script>   
    <script src="js/kendo.core.min.js"></script>
     
    <script src="js/kendo.fx.min.js">//Menu</script>
    <script src="js/kendo.popup.min.js"></script>
    <script src="js/kendo.menu.min.js"></script>
     
    <script src="js/kendo.data.min.js">//Grid</script>
    <script src="js/kendo.pager.min.js"></script>
    <script src="js/kendo.selectable.min.js"></script>
    <script src="js/kendo.sortable.min.js"></script>
    <script src="js/kendo.draganddrop.min.js"></script>
    <script src="js/kendo.groupable.min.js"></script>
    <script src="js/kendo.grid.min.js"></script>
     
    <script src="js/kendo.resizable.min.js">//Windows</script>
    <script src="js/kendo.window.min.js"></script>
     
    <script src="js/kendo.calendar.min.js">//Datepicker</script>
    <script src="js/kendo.datepicker.min.js"></script>
       
</head>
<body>
<div id="main">
    <?php include("menu.php"); ?>
<script>
    $(document).ready(function() {
        $("#menu").kendoMenu();
        var getEffects = function () {
             return ($("#opacity")[0].checked ? "fadeIn" : "");
        };
        var initMenu = function () {
            $("#menu").kendoMenu({
            animation: { open: { effects: getEffects() } },
                hoverDelay: 2
            })
        };
    });
</script>
    <div id="content">
        <div id="grid"></div>
    </div>
<script>
function createData() { // mysql extraction
    var data = [];
<?php
$mysql_serveur = "localhost";
$mysql_pseudo = "root";
$mysql_pass = "";
$mysql_bdd = "test";
$connexion = mysql_pconnect($mysql_serveur,$mysql_pseudo,$mysql_pass) or die("Erreur1");
if(!$connexion ) die("Erreur2");
if(!mysql_select_db($mysql_bdd)) die("Erreur3");
$sql = "SELECT * FROM table ORDER BY DUE";
$req = mysql_query($sql);
$datejour=date("Y-m-d");
$djour = explode("-", $datejour);
while ($row = mysql_fetch_assoc($req)){
    $dfin = explode("-", $row['DUE']);
    if($dfin<$djour){
        if($row['START']<>0) {$start=$row['START'];} else{
            $start="<span id='undo' class=''>Select</span>"; //".$row['NUM']."
        }
        if($row['DESC']<>"") {$des="Description";} else{$des="";}
        echo 'data.push({
    ID: "'.$row['NUM'].'#",
    NOM: "'.$row['NOM'].'",
    DEP: "'.$row['DEP'].'",
    DUE: "'.$row['DUE'].'",
    DES: "'.$des.'",
    START: "'.$start.'",
    COMP: "'.$row['DONE'].'"
        });';
    }
}
?>
   return data;
}
//////////////////////////
$(document).ready(function() {
///////////////////////////////////////////////////////////////////////Table
    $("#grid").kendoGrid({
        dataSource: {data: createData(),pageSize: 20},
            height: 360,
            groupable: true,
            scrollable: true,
            sortable: true,
            pageable: true,
            selectable: "row",
            change: onChange,
            columns: [
                {field: "ID", width: 15, title: "Code" },
                {field: "NOM", width: 150, title: "Name" },
                {field: "DEP",width: 40,title: "Department"},
                {field: "DES",width: 30,title: "Description",template:'<a href="description.php?des=#=ID#">#=DES#</a>'},
                {field: "DUE",width: 30,title: "Due date"},
                {width: 50,title: "Started",template:'#=START#'},
                {width: 30,title: "Completed",template:'<a href="maj.php?comp=#=ID#">Completed</a>'}]
    });
//////////////////////////////////////////////////////////////////////////Select
    var window = $("#window");
    function onChange(arg) {
     
         
        var Date = $.map(this.select(), function(item) {
            var temp= $(item).text();
            if(temp.indexOf('Select')!=-1) {
                return temp.substring(0,temp.indexOf('#'));
            }
            else {}
        });
        window.data("kendoWindow").refresh('date.php?date='+Date);
        window.data("kendoWindow").center();
        window.data("kendoWindow").open();
    }
    window.kendoWindow({
        width: "45%",
        title: "Pick a date",
        modal: true,
        visible: false
    });
});
</script>
<div id="window"></div>
        </div>
</br></br>
</div>
    </body>
</html>

I'm looking to get the column header data in a java var and get a condition on the window.data("kendoWindow").open();.  Any clue?
If you see some easier way or mistakes, i'm beginning in such coding. So, waiting for your remarks.
Gy
Top achievements
Rank 1
 answered on 26 Jan 2012
0 answers
123 views
S
I have read in a number of forums that the Splitter Default Height is 300px and I am definitely seeing that within Firebug. However, I do not see any configuration value for the Splitter widget where I can change that and setting the height on the div, even using the !important designation is not working.

I am also having problems getting my ajaxRequest to repopulate one of the panes, even though the page that will be filling the pane is working just fine as a standalone page. I am wondering if this is because the content will not fit into the pane because of the size, but I don't know if that is the way the widget works.

Any help would be fantastic as I am evaluating Kendo for a new product and want to make sure that I can do everything that I need.

Thanks,
Brian
Brian
Top achievements
Rank 1
 asked on 26 Jan 2012
4 answers
132 views
I have tried several methods to get data in the grid (and may be other controls where datasource can be used).

But my overall experience has been that datasource should not be the only option available to show/refres data in the grid and other controls. We should be able to do that via regular functions. For example, if I am able to receive data using any javascript function in the format of Array [object, object, object] then I expect to be able to

> initialize the grid with this data if the grid is not displayed
> refresh the grid with this content if grid has some old data
> insert this data in the grid or append it somewhere in the grid

But I notice most of the examples are with 'datasource' and its either very hard to configure the datasource or I am not savvy enough to do this. 

so if we can work with the kendo objects without using datasource configuration of url/type etc that would be useful. I would like functions such as init(Array) refresh(Array) or something like that if possible.

-Piyush
Gary
Top achievements
Rank 1
 answered on 26 Jan 2012
0 answers
142 views
If I do the following:

dataSource.add({ name: "first" });
dataSource.sync();
dataSource.add({ name: "second" });
dataSource.sync();

Then the create url of the datasource is hit twice for the first add, and once for the second add.

I think the reason is that, on the second call to sync(), the response for the first sync has not yet come back from the server, and so the "dirty bit" or whatever tracks this kind of thing is still set on the first item.

What is the recommend way to deal with this problem?

In my actual application, I am only calling sync once, but this bug surfaces whenever the user creates two things in quick succession.

Here are some of the solutions I've thought of:

1. Disable the UI so that the user cannot create two things in quick succession. (I don't want to do this, because it makes the ui less fluid.)
2. Put a queue and semaphore in front of the sync operation. (I don't want to do this because it slows things down.)
3. Modify the added item immediately after calling sync, and hook into the beforeSend callback to cancel the ajax call if the item has been tagged. (I don't want to do this because it's hacky, it requires parsing the request headers, and it breaks batching.)
4. Do the ajax call myself, and use the datasource only for RUD operations (instead of CRUD).
5. Call _accept on the item after calling sync, so that it won't re-post. (I don't want to do this, because it means the data is forever lost if a network error occurs, and besides, calling private functions is bad style.)
6. Fix kendo. (I don't want to do this, but I'm happy to file a bug.)
Joshua
Top achievements
Rank 1
 asked on 25 Jan 2012
6 answers
225 views
Hi,
I really love what you guys have done with kendo so far and I am looking forward to future developments in this area. The one question I have is regarding your decision to support jquery, but not use the 'native' jquery-ui theme roller. We (and I'm sure many other people) have several projects that currently depend on the jquery themeroller. It sure would be nice if your widgets just picked up those standard css styles wherever possible. What benefit did you foresee developers gaining by going with your own custom theming solution? Do you guys have any plans to support jquery-ui themes? This is a challenging issue for those projects where we allow the end user to select their own theme, and has become a show stopper where we allow customers to roll their own theme for our application. 

Does anyone else have any thoughts on this matter or am I just missing a better way to solve these issues.
Thanks,
ian

Ian
Top achievements
Rank 1
 answered on 25 Jan 2012
5 answers
236 views
This is mix of datasource/grid question. 

I have a [search] box with some criteria where user can enter some values and search, results gets displayed in grid and then I want to select the row. I am trying to get the [object] relevant to that row.

In following code, everything works upto selecting a row. I am not using the 'datasource' specification but instead using it within the search-click method. but how should I specify the schema/mode/id here so that when I select the row I can get row.data("id") value? As per following code, row.data("id") value is null.

Also, .data() method allows to store any object at the element level then why dont you store the whole object for the whole row.data()? and why you store only id? 

                $("#btnSearch").click(function() {
                    var searchobj = $("#searchForm").toDeepJson();
                    //console.log(searchobj);
                    myajax.WebService.SearchCustomers(searchobj, function(result) {
                        console.log(result.d);
                        gridCustomers.dataSource = new kendo.data.DataSource({
                            data: result.d,
                            schema: {
                                    model: { id: "Name" }
                            }
                        });
                        gridCustomers.dataSource.read();
                        gridCustomers.refresh();
                    }); //searchcustomers
                }); //btnSearch.click
            });                              //doc-ready


            function onChange(arg) {
                var row = this.select();
                var id = row.data("id");
                console.log(id);
            }
RMC
Top achievements
Rank 1
 answered on 25 Jan 2012
5 answers
382 views
Horizontal scrollbar is not working as I have more column than the width.
Dimo
Telerik team
 answered on 25 Jan 2012
1 answer
121 views
Hello geeks,

Please can someone kindly take me through the steps to really implement a Kendo grid with remote datasource binding?
I have read some of the threads on the forum but I am getting confused. What I need is:
- the different attributes required to fetch the data from the server and allow server pagination.
- moreover the editing feature of the grid.

Please code snippet with php, json will be really a great help.

Thanks,
Atanas Korchev
Telerik team
 answered on 25 Jan 2012
0 answers
92 views
By default the subitems children align with the top at their parents position, but i want to subitem and the subitemschildren to align with the top position of the menu container..

By default the submenues act like this : (-> is mouseover)
menu1     
menu2 -> submenu2-1 
                submenu2-2
                submenu2-3 -> subsubmenu2-3-1

I want it to be like this:
menu1      submenu2-1   subsubmenu2-3-1
menu2 ->  submenu2-2
                 submenu2-3 ->

Hope you guys understand what I want to do :)
Henning
Top achievements
Rank 1
 asked on 25 Jan 2012
1 answer
106 views
Won't there be a customizable datacalender input avalable in R1 Mobile ,
Atanas Korchev
Telerik team
 answered on 25 Jan 2012
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
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)
SPA
Filter
Drawer (Mobile)
Drawing API
Globalization
Gauges
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
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
+? 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?