Telerik Forums
Kendo UI for jQuery Forum
1 answer
72 views
Hey All,

Sorry if this has been asked before but I just can't work out how to do it.

I have an area graph that is loaded dynamically through ajax (see attached image).

I can set the value axis based on decimal values but what I am really hoping to be able to do is say I want a value lines to be every X pixels rather than setting the interval as a value.

My problem is the data range on the graph can vary greatly so I can't choose a value that will fit.

If this is not possible is it possible to skip every second value line (or even label) so they don't feel so cramped?
Iliana Dyankova
Telerik team
 answered on 19 Sep 2013
1 answer
76 views
I came across a way to extend views inside scheduler widget: http://jsbin.com/ucaB/3/edit

Now when I started exploring this by overriding startDate (just like endDate) the kendo widget threw an error. So I am curious have you exposed the members of the Views so that we know which fields we can override?
Alexander Popov
Telerik team
 answered on 19 Sep 2013
1 answer
251 views
Hi Telerik,

Just a brief heads-up, there is a listView with an endless scroll enabled. The listView is binded with a dataSource which has a custom transport.read function.

Firstly, what is a preferred approach if one would like to clear all data from the list? Calling dataSource.data([]) will remove all items, but will simultaneously completely break the endless scroll. Is there any API call which I possibly missed? (I do not know if dataSource.remove(oneModelItem) is supported in such scenarion, but anyway going through the whole dataset would be at least inefficient)

Secondly, due to the problem above I tried to delete the listview (by calling listview.destroy() and removing it's html content together with a parent nodes/wrappers) and then instantiate it again. I double checked that there is no markup left from the old listview before creating a new one. Because the first datasource had some data in it I created a new one with the same transport.read etc.

It all seemed to work, but I noticed that there are too many requests to the backend. For testing purposes I have subscribed to a requestStart event on datasources as well as added a creation timestamp to them, just to ease their identification. In such a configuration logs show that there are several dataSources requesting data from the backend even though only one (the last one) is binded with a listView.

It seems that even though a listView is destroyed binding between view's scroller and the dataSource survives. This causes problems mentioned above if a new pair of a listView-dataSource is created and binded within the same scroller instance.

It might be that I stumbled upon a bug, but it can be that I missed something as well. Any suggestions will be more than welcome.

Regards,
Przemek

@EDIT: I just realized that simple call to dataSource.read() could do the trick as it refreshes data and requests the first page even if more pages have been loaded, but it does not reset listview/scroller position. Instead, it stays at the same position and jumps after first interaction with a scroller. Sometimes, while doing this it breaks completely the listview component.
Alexander Valchev
Telerik team
 answered on 19 Sep 2013
1 answer
172 views
I am looking at using a background image to use on the window.  

I currently would like to put an image as a background and make it about A4 size so if someone wishes to print it, then it could be possible. However even if I reference an image off the internet it still does not show, however the colour does.  

I have tried to simply use your kendo window mvc demo code but no luck. I have added a Div referenced test to simply add an image 

Do you have any ideas?

Thanks

@(Html.Kendo().Window()
    .Name("window")
    .Title("About Alvar Aalto")
    .Content(@<text>

<div class="test">
        <p>
            Alvar Aalto is one of the greatest names in modern architecture and design.
            Glassblowers at the iittala factory still meticulously handcraft the legendary
            vases that are variations on one theme, fluid organic shapes that let the end user
            ecide the use. Interpretations of the shape in new colors and materials add to the
            growing Alvar Aalto Collection that remains true to his original design.
        </p>

        <p>
            Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland,
            was noted for his humanistic approach to modernism. He studied architecture at the
            Helsinki University of Technology from 1916 to 1921. In 1924 he married architect
            Aino Marsio.
        </p>

        <p>
            Alvar Aalto was one of the first and most influential architects of the Scandinavian
            modern movement, and a member of the Congres Internationaux d'Architecture Moderne.
            Major architectural works include the Finlandia Hall in Helsinki, Finland,
            and the campus of Helsinki University of Technology.
        </p>

        <p>
            Source:
            <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a>
        </p>
    </div>
    </text>)
    .Draggable()
    .Resizable()
    .Width(600)
    .Actions(actions => actions.Pin().Minimize().Maximize().Close())
    .Events(ev => ev.Close("onClose"))
)

<span id="undo" style="display:none" class="k-button">Click here to open the window.</span>

<script>
    function onClose() {
        $("#undo").show();
    }

    $(document).ready(function() {
        $("#undo").bind("click", function() {
                $("#window").data("kendoWindow").open();
                $("#undo").hide();
            });
    });
</script>

<style scoped>
    #example
    {
        min-height:500px;
    }

    #undo {
        text-align: center;
        position: absolute;
        white-space: nowrap;
        padding: 1em;
        cursor: pointer;
    }
   
    .test
    {
background-image:url("http://blog.felho.hu/wp-content/debuggingsuckststingrocks.png");
background-color:#cccccc;
width:200px;
height:200px;
}

</style>
Dimo
Telerik team
 answered on 19 Sep 2013
1 answer
317 views
We have an ASP.NET MVC application using jQuery Unobtrusive Validation and NumericTextBox. We are seeing some odd behavior with respect to the automatic field highlighting that the validation provides.

The NumericTextBox generates a <span> with two <input type="text"> elements inside. One appears to be the formatted/read-only version of the input; the other appears to be the actual input box the user types in.

jQuery Unobtrusive Validation assigns the CSS class "input-validation-error" to any input field with a client-side validation error. The problem is, it only assigns it to the box that the user types into. So while the field has focus, you see a nice border on the field as expected (see attachment: cursor_in_field.png). However, when the user moves to a different field, while the validation message stays present, the field border is lost because the input field is technically hidden (see attachment: cursor_out_of_field.png).

Further, if client-side validation passes but some server-side validation fails, you get a "double border" around the field - because the <span> element gets the CSS class "input-validation-error" AND the input elements (both) get the class (see attachment: server_val_fail.png).

If you put the cursor into the field and take it back out again, the client-side validation fires and removes the "input-validation-error" class from the two input elements... but the span element doesn't get cleaned up (see attachment: server_val_fail_after_click.png).

I have the kendo.aspnetmvc.js and the kendo.web.js being included in my project. The behavior of the controls otherwise seems to work very well. Am I missing something?
Georgi Krustev
Telerik team
 answered on 19 Sep 2013
1 answer
822 views
 My page have two grids called grid1,grid2,I only want to style the grid1,not grid2.I use the css style in the header like  this,but  it seems that both grid changed.
.k-grid td {
color:red;
  padding: 0px;
   }

I try to write like this,but failed.
.GridTd {
color:red;
  padding: 0px;
    }
$("#grid1 td").addClass("GridTd "); //failed,I debug with firebug and find that the td style is used by default style(.k-grid td),not GridTd Style.
$("#grid1 k-grid   td").addClass("GridTd ");// faied


.k-grid td {    border-style: solid;    border-width: 0 0 0 1px;    line-height: 1.6em;    overflow: hidden;  
 padding: 0.4em 0.6em;   text-overflow: ellipsis;    vertical-align: middle;}.
GridTd {  color:red;   padding: 0;}
Dimo
Telerik team
 answered on 19 Sep 2013
1 answer
77 views
Is it possible to add an image to the chart title?

/Jakob
Hristo Germanov
Telerik team
 answered on 19 Sep 2013
1 answer
279 views
I'm using the Web kendo grid with the options: pageable, scrollable, filterable and sortable all set to true and selectable set to multiple, row (see below)
 I've extended the grid with a checkbox selection column (through some event handling) which all works like a charm and improves the usability for touch devices by allot.

On desktop (mouse input) all works very nice. But on touch devices the instinct of people is to "Swipe to scroll" to browse through the grid. But since selectable is set to multiple, row (which i believes causes this behavior) this is no longer possible. A selection of displayed rows is made during a Swipe causing users to be forced to use the scrollbar (Very bad usability)

Is there a way to keep the multiple row selection option but without drag/swipe selection (through Ctrl/Shift clicks) so "Swipe to scroll" remains possible

grid = new kendo.ui.Grid(
                gridContainer,
                {
                    columns: columns,
                    dataSource: dataSource,
                    selectable: "multiple, row",
                    pageable: true,
                    scrollable: true,
                    filterable: true,
                    sortable: true,
                    change: function () {
                       // some code regarding selection column
                    },
                    dataBound: function() {
                        // some code regarding selection column
                    }
                }
            );
Alexander Valchev
Telerik team
 answered on 19 Sep 2013
1 answer
188 views
I am trying to open a modal dialog using $("#modalview-message").kendoMobileModalView("open"); it works on IE but not on chrome? Why is that happening?
Alexander Valchev
Telerik team
 answered on 19 Sep 2013
3 answers
510 views
I have the following view:

<div data-role="view" style="background: green;" id="tabstrip-card" data-init="cardViewInit" data-title="My card" data-layout="mobile-tabstrip">
      content goes here
</div>

I've tried various things to get a background color on my view (actually want a background image), without any luck. I can put a div inside the view div and set it's height/width and apply a background to that, but that seems a bit unnecessary. Is there a way I can get a background on the view itself?

bally
Top achievements
Rank 1
 answered on 19 Sep 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?