Telerik Forums
Kendo UI for jQuery Forum
3 answers
207 views
Using the following code, splicing the ObservableArray does not seem to appropriately fire the change event.
kendo.data.ObservableArray.prototype.remove = function (value) {
     var array = this;
 
     $.each(array, function (idx, item) {
         if (item !== undefined) {
             if (value.data.uid === item.uid) {
                 array.splice(idx, 1);
                 return true;
             }
         }
     });
 }
Now I call it like this, within the view model.

onRemove: function (e) {
    e.data.parent().remove(e);
}
Where this function is on a nested child, so an array like this ...

{
    Name: "Top Level",
    Collection: [
      {
        Name: "First Child",
        SubCollection: [
          {
            Name: "First Sub Child",
            onRemove: function (e) {
                e.data.parent().remove(e);
            }
          },
          {
            Name: "Second Sub Child",
            onRemove: function (e) {
                e.data.parent().remove(e);
            }
          }
        ]
      },
      {
        Name: "Second Child",
        SubCollection: [
          {
            Name: "Third Sub Child",
            onRemove: function (e) {
                e.data.parent().remove(e);
            }
          },
          {
            Name: "Fourth Sub Child",
            onRemove: function (e) {
                e.data.parent().remove(e);
            }
          }
        }
    ]
}
Using this templating...
<div data-role="listview"
     data-template="tmpl-demo-first-child"
     data-bind="source: Collection"></div>
<script type="text/html" id="tmpl-demo-first-child">
    <div>
         
        <h2 data-bind="text: Name"></h2>
        <div
             data-role="listView"
             data-template="tmpl-demo-sub-children"
             data-bind="source: SubCollection"></div>
    </div>
</script>
<script type="text/html" id="tmpl-demo-sub-children">
    <div>
        <div
             style="width: 120px;
                    float: left;
                    text-align: center;
                    font-size: 1.6em;
                    vertical-align: middle;"
            data-bind="text: Name, click: onRemove">
        </div>
    </div>
</script>
Using this setup, when I click on the sub child, with the intention to use its OnRemove function to remove it from its parent, it does update the actual view model, which is apparent because I can have the view model in a pane to the side with its change event subscribed, printing out the JSON. But the actual
HTML doesn't update, because the item does not vanish from the DOM.

Petyo
Telerik team
 answered on 19 Nov 2013
2 answers
111 views
How to set date to today + 1 month i.e if today is
11/12/2013, then set to 12/12/2013 using knockout-kendo

Like the today's date is set as below
      self.todaysDate = ko.observable(new Date());
how to set this one based on todaysDate
      self.nextDate = ko.observable(?????);


Madzie
Top achievements
Rank 1
 answered on 19 Nov 2013
0 answers
233 views
We have built a custom Date Picker control based on the Kendo UI DatePicker(JavaScript control).  We are trying to use this control in the Kendo Grid with an Editor Template.  We can get the control to display/work for 1 field, but when we have 2 in the same grid, we are having difficulties getting the data in the correct field.  Has anybody else tried something like this?  Any advice?  Sorry, no code samples.  Thought about opening up an issue with Kendo Support but since this is a custom date picker, we figured it probably wouldn't be looked at.

Thanks

mark baer
Top achievements
Rank 1
 asked on 18 Nov 2013
2 answers
1.3K+ views
Browser: Internet Explorer 10 (although it occurs in all browsers)
Kendo UI v2013.2.716
jQuery: as Included in trial download

SCRIPT5007: Unable to get property 'toLowerCase' of undefined or null reference
kendo.all.min.js, line 13 character 1431

's' is undefined.


This error happens whenever I call dataSource.read(), and after the service successfully returns a response with a result in it.

Here's how I have my DataSource setup, tied to a Grid widget:


var myDataSource = new kendo.data.DataSource({
    transport: {
        create:{
            dataType: "json",
            url: CREATE_CONTACT,//Global var equal to service uri to call for this operation
            type: "POST",
            async:false
        },
        read: {
            dataType: "json",
            url: RETRIEVE_CONTACTS,//Global var equal to service uri to call for this operation
            type: "POST",
            async:false,
            success:function(response){
                //This is never being called.
                // Error occurs whether I include a "success" method or not.
                return response;
            },
            error:function(jqxhr){
                //This is never being called.
                // Error occurs whether I include a "success" method or not.
                errorMsgDlg("Read Error","Error Reading Grid", jqxhr);
            }
        },
        update:{
            dataType: "json",
            url: UPDATE_CONTACT,//Global var equal to service uri to call for this operation
            type: "POST",
            async:false
        },
        destroy:{
            dataType: "json",
            url: DELETE_CONTACT,
            type: "POST",
            async:false
        },
        parameterMap: function(data, type) {

            var contactGroupID = viewModel.get("contactGroupID"),
                contactGroupID = contactGroupID.toJSON(),
                parameters;

            if (type == "create") {

                parameters = {
                    contactGroupID: JSON.stringify(contactGroupID) || "",
                    models: kendo.stringify(data.models) || ""
                };
            }
            else if (type == "read") {
                parameters = {
                    contactGroupID: JSON.stringify(contactGroupID) || ""
                };
            }
            else if (type == "update") {
                parameters = {
                    contactGroupID: JSON.stringify(contactGroupID) || "",
                    models: kendo.stringify(data.models) || ""
                };
            }
            else if (type == "destroy") {
                parameters = {
                    contactGroupID: JSON.stringify(contactGroupID) || "",
                    models: kendo.stringify(data.models) || ""
                };
            }
            return parameters || {};
        }
    },
    schema: {
        parse:function(response){
             //Never see this get called
            return response;
        },
        model: {
            id: "name",
            fields: {
                name: { type: "string" },
                email: { type: "string" },
                organization: { type: "string" },
                type: { type: "string" }
            }
        }
        ,data: function(response){

            //Never see this get called
            return response;//Should be an array of contacts
        }
     }
});

$("#mygrid").kendoGrid({
    scrollable: true,
    dataSource: myDataSource,
    columns: [
        {
            field:"name",
            title: "POC Name"
        },
        {
            field:"email",
            title: "Email"
        },
        {
            field:"organization",
            title: "Organization"
        },
        {
            field:"type",
            title: "Type"
        }
    ],
    change:function(e){

        //I'm not seeing this get called.
        var dataItem = this.dataItem() || this.dataItem(e.item.index()) || {},
            name = dataItem.name || "",
            email = dataItem.email || "",
            organization = dataItem.organization || "",
            type = dataItem.type || "Action";
        
        /*Do stuff*/
    }
});

/*
This function is activated when a user selects an item to load.
function MyOnLoadFunction(){

    /*
    snip - setting data in viewModel with kendo MVVM
    
    */
    var MyGrid = $("#mygrid").data("kendoGrid");
    MyGrid.dataSource.read();//Happens during this call, but after the service returns
    MyGrid.refresh();
    
    /*snip other loading stuff*/
}





/*snip HTML stuff*/
<div id="mygrid"></div>
/*snip more html*/



Keith
Top achievements
Rank 1
 answered on 18 Nov 2013
4 answers
79 views
I have a page with a large div (set to 60% of the screen width) in it that I wish to flip horizontally to display the other side. I've used your documentation and demos to set up what I want using fx.flipHorizontal and it displays and flips perfectly in IE10. However, in Chrome and Firefox, the animation of the flip takes the edge of the div outside the bounds of the screen causing a scrollbar to temporarily appear and then disappear making the display look poor. I have setup a second page not using Kendo but using the standard CSS3 transforms and I can get those to work properly in FireFox and Chrome by adding a "perspective" to the container - 3000px solves the problem consistently in this case. This causes a problem with IE10 unfortunately where the back side of the panel is displayed immediately the flip animation is started and at present that does not appear to be fixable as far as I can see. Is there a way to control the perspective on the Kendo FX flip so I can resort to using it to support all browsers or is there something else I can do to make the flip display correctly in FF & Chrome?

I am running on a screen in full HD resolution, I have a left margin on my div of 68px and the div itself is 1142px wide. The height of the div is about 500px. I hope that helps you to reproduce my scenario.

Thanks in advance.
PaulH
Top achievements
Rank 1
 answered on 18 Nov 2013
4 answers
115 views
I know Kendo's panelBar can bind to a Sitemap file as shown on the following page:http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/panelbar/overview, but what I can't figure out is whether or not it's possible to apply settings like starting level/node or binding depth.

What I'm looking for is something that will allow me to specify the Starting Level and perhaps Max Depth or something along those lines.

Is this possible?
Jacques
Top achievements
Rank 2
 answered on 18 Nov 2013
2 answers
109 views
Hi,

I am using 2013.2.716

For some reason - since yesterday, all my graphs category axis looks crashed.
I am using  chart with Dates as category Axis. the graph looks ok but the category line looks Smashed.

Symptoms:
1. this only occurs on some client browsers machine. 
2. affects all browsers.
3. The problem comes when I use dates that are before and after DST change on hour local settings (27/10).
I.e. : start date is 25/10 and end date 29/10 - is crashed. if both before 26/10 it looks fine
4. if We change Time settings - this problem is also solved.

What is weirder is that this worked fine yesterday- And we did not change anything Lately.

I saw this past thread:
http://www.kendoui.com/forums/kendo-ui-dataviz/chart/charts-appear-crushed-on-ie-7-thru-9-on-some-user-machines.aspx
but it doesn't help me here, I tried adding height and width properties.
 
Attached is the screen shot and a file showing how I use the graph.


please advise.

Thanks,
 
Koby
Top achievements
Rank 1
 answered on 18 Nov 2013
2 answers
170 views
Hi,
I'm using kendo editor to substitute the ajax html editor in my aspx application. I believe the same I'm using now to write. 
I am using kendo 2013.2.918 version.
I need to implement the Undo/redo functionalities. Basically I added two custom buttons and a function to handle the click in the tools[] array as

                $("#editor").kendoEditor({
                    tools: [
                    ..........
                    {
                        name: "customundo",
                        tooltip: "Undo",
                        exec: function (e) {
                            var editor = $(this).data("kendoEditor");
                            editor.exec("undo");
                        }
                    },
                    {
                        name: "customredo",
                        tooltip: "Redo",
                        exec: function (e) {
                            var editor = $(this).data("kendoEditor");
                            editor.exec("redo");
                        }
                    },
 
                    ..........
                    ]

Everytime I click the undo/redo button, the method editor.exec(undo/redo) is called.
I always get an error in kendo.all.min.js as
"JSCript runtime error: object doesn't support this property or method.
in kendo.all.min.js the statement "a.undoRedoStack[e]" is highlighted.
I implemented a preliminary version this summer using version 2013.2.710 and the exec(undo) worked. I noticed also the css changed substantially between the 2 versions.
I tried kendo.web.min.js but it behaves in the same way. Can you please tell me how I can implement undo/redo ?

For completeness I attach the the aspx file

Thanks for your kind attention

best regards

Marco
marco
Top achievements
Rank 1
 answered on 18 Nov 2013
2 answers
264 views
I am using MVC Complete v2013.2.918

I am working on supporting batch editing of a column (the percentage column - a decimal value) in the grid across pages when server side paging is used.  I am modeling my modifications based on this example:

When I click the save button (which calls grid.dataSource.sync()), it is currently only sending data for the current page (which is expected and why I'm trying to use something like the linked example above).  The issue now becomes: how can I modify the data sent from the client to the server to contain all the data across all pages instead of just the current page?  I now have the data (thanks to the example above), but don't know how to add it to the data sent to the server.

Thanks in advance
Alexander Popov
Telerik team
 answered on 18 Nov 2013
2 answers
116 views
Hi ,

Is there anyway I can have a pointer cursor  whenever there is a axislabel click method is enabled for charts ? 

I saw the svg that is rendered is having a data-model-id tag but that is also associated with the value axis as well.
I only need a mouse pointer only for the category axis. Is there any way I can achieve the same? 

Thanks,
Anirban

Iliana Dyankova
Telerik team
 answered on 18 Nov 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
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?