Telerik Forums
Kendo UI for jQuery Forum
2 answers
210 views
I have already performed an ajax call to retrieve JSON.  Part of the JSON result is used to display a graph, and another is intended to be used in the grid.  When I set this up, I cannot get the data to display....I see an accurate count of records, but in the columns, I just see "unefinedundefinedundefinedundefined".  Consequently, the JSON seems to work just fine to render the graph, but not the grid.  I have also attached a screenshot.  Here is what the code/HTML looks like:

JSON looks like this (just copied first few records...):
[{"p":"hasLogonId","s":"AD#10145","o":"AD_SID#S-1-5-21-1123561945-492894223-1417001333-12823"},{"p":"hasDtgStartU","s":"AD#113317","o":"1344848836"},{"p":"hasDtgEndU","s":"AD#128486","o":"1344855539"},{"p":"hasType","s":"AD#129917","o":"AD_logonType#3"},{"p":"hasAcctName","s":"AD#131092","o":"AD_acctName#3w546r1$"}]

Javascript:
           
    $(document).ready(function() {
        // Populate arrays for the menu items
        var Qdata = [{"title":"query 3","description":"Return a graph of source and destination IPs limited to 5000"},{"title":"query 4","description":"Show list of all predicates and counts of each"},{"title":"query 5","description":"Show ontology"},{"title":"query 1","description":"DNS relationships 1000"},{"title":"query 6","description":"return first 500"},{"title":"query 6","description":"return first 500"}];
        var Edata = [{"ep":"discover","title":"discover"},{"ep":"sc1","title":"sc1"},{"ep":"marple","title":"marple"}];
        var JSO;
        // Dropdown menu for the queries
        $("#query-picker").kendoDropDownList({
            optionLabel: "Queries",
            dataTextField: "description",
            dataValueField: "title",
            dataSource: Qdata,
            index: 0,
            enable: false,
            change: onChangeQ
        });
        // Dropdown menu for the endpoints
        $("#endpoint-picker").kendoDropDownList({
            optionLabel: "Endpoints",
            dataTextField: "title",
            dataValueField: "ep",
            dataSource: Edata,
            index: 0,
            change: onChangeE
        });
         
        // OnChange event for endpoint dropdown
        var epval;
        function onChangeE() {
            ddlist=$("#query-picker").data("kendoDropDownList");
            ddlist.enable(true);
            epval=$("#endpoint-picker").data("kendoDropDownList");
        };
        // OnChange event for query dropdown
        function onChangeQ() {
            var qval=$("#query-picker").data("kendoDropDownList");
             
            $.getJSON('./query?ep=' + epval.value() + '&qry=' + qval.value(), function(JSO) {
                $("#graph-container").empty();
                 
                var sigInst = sigma.init(document.getElementById('graph-container')).drawingProperties({
                    defaultLabelColor: '#fff',
                    defaultLabelSize: 14,
                    defaultLabelBGColor: '#fff',
                    defaultLabelHoverColor: '#000',
                    labelThreshold: 6,
                    defaultEdgeType: 'curve'
                }).graphProperties({
                        minNodeSize: 1,
                        maxNodeSize: 10,
                        minEdgeSize: 1,
                        maxEdgeSize: 1
                    }).mouseProperties({
                        maxRatio: 32
                });
                $.each(JSO.data.results.graph.nodes, function(idx,obj) {
                    sigInst.addNode(obj.index,{'color' : '#E68A00','x':Math.random(),'y':Math.random(),'size' : obj.degree, 'shape' : 'circle', 'label' : obj.label, 'degree' : obj.degree});
                });
                $.each(JSO.data.results.graph.edges, function(idx,obj) {
                    sigInst.addEdge(obj.index, obj.source, obj.target, { 'label' : obj.label});
                });
                sigInst.draw();
                 
                var kdata=JSON.stringify(JSO.data.results.triples);
                alert(kdata);
                $("#main-body-TR").kendoGrid({
                    dataSource: {
                        data: JSO.data.results.triples,
                        schema: {
                            model: {
                                fields: {
                                    s: { type: "string" },
                                    p: { type: "string" },
                                    o: { type: "string" }
                                }
                            }
                        }
                    },
                    scrollable: true,
                    sortable: true,
                    filterable: true,
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    columns: [
                        {
                            field: "s",
                            title: "Subject"
                        },
                        {
                            field: "p",
                            title: "Predicte"
                        },
                        {
                            field: "o",
                            title: "Object"
                        }
                    ]
                });
                 
                var isRunning = false;
                document.getElementById('stop-layout').addEventListener('click',function(){
                  if(isRunning){
                    isRunning = false;
                    sigInst.stopForceAtlas2();
                    document.getElementById('stop-layout').childNodes[0].nodeValue = 'Start Layout';
                  }else{
                    isRunning = true;
                    sigInst.startForceAtlas2();
                    document.getElementById('stop-layout').childNodes[0].nodeValue = 'Stop Layout';
                  }
                },true);
                document.getElementById('rescale-graph').addEventListener('click',function(){
                  sigInst.position(0,0,1).draw();
                },true);
                 
                var greyColor = 'rgba(180,180,180,0.3)';
                sigInst.bind('overnodes',function(event){
                  var nodes = event.content;
                  var neighbors = {};
                  sigInst.iterEdges(function(e){
                    if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){
                      if(!e.attr['grey']){
                        e.attr['true_color'] = e.color;
                        e.color = greyColor;
                        e.attr['grey'] = 1;
                      }
                    }else{
                      e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
                      e.attr['grey'] = 0;
                
                      neighbors[e.source] = 1;
                      neighbors[e.target] = 1;
                    }
                  }).iterNodes(function(n){
                    if(!neighbors[n.id]){
                      if(!n.attr['grey']){
                        n.attr['true_color'] = n.color;
                        n.color = greyColor;
                        n.attr['grey'] = 1;
                      }
                    }else{
                      n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
                      n.attr['grey'] = 0;
                    }
                  }).draw(2,2,2);
                }).bind('outnodes',function(){
                  sigInst.iterEdges(function(e){
                    e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
                    e.attr['grey'] = 0;
                  }).iterNodes(function(n){
                    n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
                    n.attr['grey'] = 0;
                  }).draw(2,2,2);
                });
            });
        };
        $("body").on({
            ajaxStart: function() {
                $("#loading-query").removeAttr('style');
            },
            ajaxStop: function() {
                $("#loading-query").css('display','none');
            }
        });
    });
Rosen
Telerik team
 answered on 12 Mar 2013
0 answers
110 views
Hello,

All users of Kendo UI DataViz are urged to update to the latest internal build (v. 2012.3.1512). It fixes an important defect that can cause the Chart/StockChart to hang if the selected range contains a DST transition.

The build is also available on our public CDN.

Apologies for the caused inconvenience.
Kendo UI
Top achievements
Rank 1
 asked on 12 Mar 2013
0 answers
65 views
Hello,

All users of Kendo UI DataViz are urged to update to the latest internal build (v. 2012.3.1512). It fixes an important defect that can cause the Chart/StockChart to hang if the selected range contains a DST transition.

The build is also available on our public CDN.

Apologies for the caused inconvenience.
Kendo UI
Top achievements
Rank 1
 asked on 12 Mar 2013
2 answers
236 views
I want to post back to my server the state of the tree view node expansions.
When the tree view is displayed during a later visit to the page I would like to perform whatever .expand() calls are needed

I suppose the same info could be cookied to handle things on a per visitor basis.

What selectors or traversals would I need to capture such info?

Things would seem a little tricky because the children of node N can be open, and when N is closed those children remain open but not visible.
Vladimir Iliev
Telerik team
 answered on 12 Mar 2013
5 answers
164 views
Hello,
 
When I click on the button to initiate an actionsheet, I'm getting the following error:

Microsoft JScript runtime error: Unable to get value of the property 'openFor': object is null or undefined. This is happening in kendo.all.min.js.

Here is the code:

<script
type="text/javascript">
     function
GoToPrev(e) {
         alert(
'c=' + e.context + ', t=' + e.target);
         document.forms[0].submit();
     }
</script>

<a
data-role="button" data-rel="actionsheet" href="#goTo">Go To</a>

<ul
data-role="actionsheet" id="goTo">
     <
li><a data-action="GoToPrev">Previous Asset</a></li>
     <
li><a data-action="GoToNext">Next Asset</a></li>
</
ul>
 
Thx...Bob Baldwin
Trabon Solutions
Licensed users of Telerik Devcraft Complete
Bob
Top achievements
Rank 1
 answered on 12 Mar 2013
7 answers
631 views
Hi, Ive got a chart ( please see attachment ) I was wondering is it possible to set different colour for different value. The values are from 0 to 5 ( the labels are changed manually in the chart ).
Im using  WCF  service, that means im receiving data in json format.
Thank You in advance,
neil
Iliana Dyankova
Telerik team
 answered on 12 Mar 2013
3 answers
279 views
I can get the date to display using this code, however, when it get posted to the server it just posts it as 01/01/0001. Also, every-time edit is hit why does the date column become empty?     

iwofreportSource = new kendo.data.DataSource({
        transport:
            {
                read: {
                    url: '/iwof/get-iwof-report/',
                    dataType: 'json'
                },
                create: {
                    url: '/iwof/add-iwof-report',
                    dataType: 'json',
                    type: 'Post',
                    complete: function (e) {
                        $("#iwof").data("kendoGrid").dataSource.read();
                    }
                },
                update:
                {
                    url: '/iwof/update-iwof-report',
                    dataType: 'json',
                    type: 'Post',
                    complete: function (e) {
                        $("#iwof").data("kendoGrid").dataSource.read();
                    }
                },
                destroy: {
                    url: '/iwof/delete-iwof-report',
                    type: 'POST',
                    dataType: 'json'
                }
            },
        async: true,
        batch: false,
        pageSize: 10,
        schema: {
            "model": {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    DueToAE: { editable: true, type: "date" },
                }
            }
        }
      
    });

    var grid = $("#iwof").kendoGrid({
        dataSource: iwofreportSource,
        scrollable: false,
        pageble: true,
        filterable: false,
        resizable: true,
        toolbar: ["create"],
        width: 1000,
        sortable: { mode: 'multiple' },
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns: [
            { field: "DueToAE", title: "Due To AE", format: "{0:MM/dd/yyyy}" },  
        ],
        editable: "inline", // enable inline editing

    });

Vladimir Iliev
Telerik team
 answered on 12 Mar 2013
3 answers
165 views
Is there a sample project that uses the MVVM framework along with the HTML5 widgets and OpenAcess as the data tier?  While I have found many small samples for each part I have not found one combining them.  It would be nice to see what a "Best Practice" would be in laying out the Visual Studio project.  I am working on a small project that I want to use they technologies on.
Petur Subev
Telerik team
 answered on 12 Mar 2013
1 answer
154 views
Hello Everybody

I'm trying to implement the scrollview widget on my iphone device but got the below error.
When I run on my computer it works perfectly but when i ran it from my i phone it doesn't work.
My code looks exactly like in the example in the documentation(I attached a screenshot).
I'm working on windows 7 with safari 5.1.7 and with iphone 4S with o.s 5.1.1.

I would appreciate any kind of help.

Thanks
  

Iliana Dyankova
Telerik team
 answered on 12 Mar 2013
1 answer
1.3K+ views
Hi ,
In my scenario, have to call web service with StartDate of string type  (POST operation), 
am using JSON. Stringify method to convert data into json format .

My problem is while stringifying my data , date is going back by one day.

code:
    var tStartDate = $("[Name=StartDate]").data("kendoDatePicker").value()
            value is : Mon Mar 04 2013 00:00:00 GMT+0530 (India Standard Time) (here time 00:00:00)

    JSON.stringify(tStartDate)
                     This giving :  2013-03-03T18:30:00.000Z instead of 2013-03-04T18:30:00.000Z
So how can I get correct Date here ? in our DB using DateTimeOffset type for storing this date value 

Please help me out .



Georgi Krustev
Telerik team
 answered on 12 Mar 2013
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
Drag and Drop
Map
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
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
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?