Hi.

I'm trying to use the Splitter in a div contained within a TabStrip.

I'm guessing it's because the div is not visible at the point when I call

$('#x-splitter ').kendoSplitter();

but when the splitter is eventually displayed (i.e. when the tab is selected) the first pane is 0-width. As soon as the window is resized it jumps to the correct size.

Is there any way I can tell the splitter to refresh when it's first displayed?

Any help much appreciated!

Mark

Here is my configuration in the View using html helpers and I have attached a picture of how it looks like:

@(Html.Kendo().Grid<Merchant_List_Updater_MVC.Controllers.AreaObject>()
               .Name("Grid")
               .Columns(columns =>
               {
                            columns.Bound(x => x.name).Title("Region Name");
                            columns.Bound(p => p.locationList).Title("Locations Included");
                            //Once clicked it searches and invokes a function in the script named "EditButtonClicked".
                            columns.Command(command => command.Custom("Modify")
                                                              .Click("ModifyButtonClicked"))
                                                                                          .HeaderHtmlAttributes(new {style = "width:80px;"})
                                                                                          .Width("105px");
                            //Once clicked it searches and invokes a function in the script named "DeleteButtonClicked".
                            columns.Command(command => command.Custom("Remove")
                                                              .Click("DeleteButtonClicked"))
                                                                                          .HeaderHtmlAttributes(new {style = "width:80px;"})
                                                                                          .Width("105px");
               })
               .Pageable(pageable => pageable.PreviousNext(true).ButtonCount(5))
               .Sortable(sortable => sortable.Enabled(true))
               .Scrollable(scr => scr.Height("auto"))
               .DataSource(dataSource => dataSource
                                         .Ajax()
                                         .Read(read => read.Action("AreaJsonDataSourceOrder", "ModifyOptions"))
                                         .PageSize(15))
               .Resizable(resize => resize.Columns(true))
               .Reorderable(reorder => reorder.Columns(true))
               .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))        
      )

I tried to iterate through the list and display all elements in the list into a cell in a column but I've having trouble getting it to work.
Here is what I have so far.

In Grid definition:
columns.Bound(x => x.locationList).Title("Locations Included").ClientTemplate("#= iterate(x.locationList) #");

where x.locationList is a List<string> in the object passed in.

In <script>:
function iterate(object) {
var html = "<ul>";

for (var x = 0; x < object.length; x++) {
html += "<li>";
html += object[x];
html += "</li>";
}

html += "</ul>";
return html;
}

However, this causes all the records to disappear. What is the correct syntax to do this?

I tested out JSON initialization from DataSource inline, which worked for me.
But now I am preparing to do this from a remote source, so I made a static copy of  the JSON and put it in a file.

(NOTE: what this is creating is a PanelBar which when opened allows one to check off different file types. When the user presses SEARCH button, I will find out which file types have been checked off. If you know a better way to do this, tell me).

I would create a JSFiddle, but I don't know how to simulate reading a JSFIDDLE JSON file.

This is not working for me:


And here is the menu.JSON file:



When I put everything in-line this works fine:

Hello,

I have an issue with a line chart with 310px width which hide a part of last label (http://jsbin.com/zuqiz/9/edit):

var stats=[        
          {'date':"2013-12-01",'value':1},
          {'date':"2013-12-02",'value':12},
          {'date':"2013-12-03",'value':13},
          {'date':"2013-12-04",'value':14},
          {'date':"2013-12-05",'value':14},
          {'date':"2013-12-06",'value':14},
          {'date':"2013-12-07",'value':14},
          {'date':"2013-12-08",'value':14},
          {'date':"2013-12-09",'value':14},
          {'date':"2013-12-10",'value':14},
          {'date':"2013-12-11",'value':14},
          {'date':"2013-12-12",'value':14},
          {'date':"2013-12-13",'value':14},
          {'date':"2013-12-14",'value':14},
          {'date':"2013-12-15",'value':14},
          {'date':"2013-12-16",'value':14},
          {'date':"2013-12-17",'value':14},
          {'date':"2013-12-18",'value':14},
          {'date':"2013-12-19",'value':14},
          {'date':"2013-12-20",'value':14},
          {'date':"2013-12-21",'value':14},
          {'date':"2013-12-22",'value':14},
          {'date':"2013-12-23",'value':14},
          {'date':"2013-12-24",'value':14},
          {'date':"2013-12-25",'value':14},
          {'date':"2013-12-26",'value':14},
          {'date':"2013-12-27",'value':14},
          {'date':"2013-12-28",'value':14},
          {'date':"2013-12-29",'value':14},
          {'date':"2013-12-30",'value':14},
          {'date':"2013-12-31",'value':14}
    
            ];
 

function createChart() {
$("#chart").kendoChart({
    title: {
        text: "test"
    },
   dataSource: {
          data: stats
                        },
    series: [{
        type: "line",
         field: "value"
                  
    }],
    categoryAxis: {
        field: "date",
        type: "Date",
        labels: {format: "M/d",step:6}
    }

    }
);

$(document).ready(createChart);


Same issue with step:10.

As far as I have seen the resize event of the splitter happens even while the page itself is loading which by itself I understand why.

The problem for me is I want to make a post ajax call to save the splitter size and I want to minimize the calls to resize events the application user triggers while resizing the pane with the mouse only.

How would one go about that since I've noticed the layoutChange event is getting deprecated soon and I don't want to rely on something that's not going to be there in a next revision :)

Can I change the first row from days to technical's names?
I need to show the technical's appointments by day and hours in the left side as default.
Similar to ScheduleView from Silverlight (http://demos.telerik.com/silverlight/#ScheduleView/FirstLook). Where my technical's names would be Channels TV in this example.

Is it possible? How can i do it?

Hi,

I have a view with a canvas on it and a drawing. I would like to change the size on the canvas and redraw the contents when the device orientation event triggers.

So if in Portrait I would like to redraw in Landscape and vice versa.

How do I link the  device orientation change to the current view so that I can resize the canvas and redraw the contents ?

cheers
Tony

Hi Georgi,you are right, using the text method is not the right way.

On the other side, there is something wrong with cascading comboboxes in Kendo UI.

Please look at my attached sample (click on ComboBox in top menu).
[ComboBox.zip]

The ViewModel I'm using:



In the view I'm using two comboboxes. One for products



and one for category (as a filter for products)



My problem is, that the product combobox is empty on initial page load, because the parameter productFilter is not empty. It is set with the value of  ProductID, and therefore the returned product list must be empty!



My feeling is, that there must be something wrong here with Kendo ComboBoxes.

How can I solve this scenario?
The ComboBox with products should be filled with all products of category Beverages and show "Chai" as a selected product on initial load. (See Scree2.png)

Telerik support provide me with a solution (see Telerik.zip) that doesn't work for me.

Regards,
Daniel

You can find all my files here: http://1drv.ms/1cDgIZZ

I've noticed that while at first the android back button (as on an android device) and the kendo mobile back button appear to work the same way, when you use a combination of both you get different behaviour. Let's see how I go at explaining what I mean...

I have 3 views; view-a, view-b and view-c. I start the application and the initial view is view-a, then I do the following tests:

Android back button only

1. navigate to view-b
2. navigate to view-c
3. use the android back button - takes me to view-b
4. navigate to view-c
5. use the android back button - takes me to view-b
6. use the android back button - takes me to view-a

Kendo back button only

1. navigate to view-b
2. navigate to view-c
3. use the kendo back button - takes me to view-b
4. navigate to view-c
5. use the kendo back button - takes me to view-b
6. use the kendo back button - takes me to view-a

Both the kendo and android back buttons

1. navigate to view-b
2. navigate to view-c
3. use the kendo back button - takes me to view-b
4. navigate to view-c
5. use the kendo back button - takes me to view-b
6. use the android back button - takes me to view-c
7. use the android back button - takes me to view-b
8. use the android back button - takes me to view-c
9. use the android back button - takes me to view-b
   
10. use the android back button - takes me to view-a