Questions on Kendo UI for jQuery Forum

1 answer

35 views

Posts Containing Code as spam?

Why all posts containing code are regarded as spam?

Is this to buy time or a genuine reason?

Thanks

General Discussions

answered on 28 Jul 2014

3 answers

1.3K+ views

Focus at first cell at the dataBound

Hello,

I have a grid with the navigation option, for navigation between cells by Tab
I want to define on page loaded that first cell in the grid will be in focus,
from which onwards the user can navigate by using the Tab key in the grid.
You can see below the function
that chooses the first cell

But,
in IE it works, in the chrome browser it does not work.
in Chrome browser it's look that the first cell in focus (is getting gray border)
But the first navigation by Tab is not in the grid, it in the top menu
Not as desired within the grid itself.

call from dataBound function:
selectRowFirst(this);

function selectRowFirst(grid) {
//select row in grid after bind
var rowNo =0;
var row = grid.tbody.find("tr[role='row']:eq(" + rowNo + ")");
grid.select(row);

var firstCell = grid.tbody.find("tr[role='row']:eq(" + rowNo + ")" + " td:eq(1)");
grid.current(firstCell);
firstCell.focus();
}

By the way, I tried to attach a sample project I attached before, but I could not
It seems you have changed the attachment size limit is very small.
If you have another way I can send it to be excellent.

Grid

answered on 28 Jul 2014

2 answers

541 views

Deferred loading of data in Kendo Grid

I didn't find a way to do deferred loading of data in Kendo Grid.
like to know if there is any sample to implement this approach.

Thanks

Grid

answered on 28 Jul 2014

1 answer

110 views

get value for ct.extend.init

I store an array as a node attribute. When I call dataItem on the node and get that specific attribute I get an object ct.extend.init with the array inside. How do I get just the array of the node and not as an object?

TreeView

answered on 28 Jul 2014

1 answer

1.1K+ views

Filter kendo grid from Query string parameters

Hi I have a kendo grid with server sorting, server filtering, server paging functionalities. Is there a way, where I can filter the grid from querystring parameters. Example:

I have a kendo grid with First name, Last Name, Address etc columns. Now I have the following url:(the query string will be dynamic)

localhost/Home/GetFilteredData?fname=tom&lname=William......

Can we filter the grid based on the given query string? Also, can we save the state after filtering the grid and load it once this url is clicked again?

Any help appreciated!! THANKS

Grid

answered on 28 Jul 2014

2 answers

141 views

Linking DatePickers

Hi
Can you link kendo date pickers? e.g.

From : (A)
To: (B)

Link them so that if you change (A) to be greater than (B) then (B) also changes to (A), and vice versa.
I'm guessing I can probably do this using the events but it strikes me as something that others would want to do so didn't know if

(i) it could be configured somehow, or
(ii) there's some example code lying around

It's something that our old date pickers used to do, you could daisy chain a number of them, although in reality you only ever wanted to chain 2 (from/to, start/end, etc)

thanks

DatePicker

answered on 28 Jul 2014

3 answers

194 views

Memory leak by dynamic (online) chart

Hallo,

in unserer Anwendung haben wir ein online Diagram eingebaut. Dabei werden die Daten alle zwei Sekunden aktualisiert und anschließend als linie dargestellt. Als Typ nutzen wir canvas. Uns ist aufgefallen dass der Speicher nicht sauber freigegeben wird und mit der Zeit immer weiter hoch läuft. Wir haben unser online Diagramm drei tage lang laufen lassen. Der Speicher war am Anfang bei ca. 130MB und am Ende dann bei ca. 500MB. Wir haben die Demo Anwendung auf der Kendo UI Hompage ebenfalls drei Tage lang laufen lassen. Hier stieg der Speicher auch kontinuierlich hoch. Von 138MB zu 656MB. Warum läuft der Speicher hoch und warum wird der Speicher nicht sauber freigegeben?

http://demos.telerik.com/kendo-ui/chart-api/benchmark

Charts

answered on 28 Jul 2014

6 answers

165 views

Grid inside modal view on mobile

Hi
Is this possible? I've tried a few variations but can't seem to get it working

http://dojo.telerik.com/IWag/2

thanks

ModalView

answered on 28 Jul 2014

3 answers

123 views

Geting the view Template from the grid to work with kendo MVVM

I created a grid using kendo grid that looks like that

01.<div>

02. @(Html.Kendo().Grid<MvcApplication2.Areas.Admin.Models.SelfAssessmentModel>()

03. .Name("grid")

04. .Columns(columns =>

05. {

06. columns.Bound(c => c.QuestionSortOrder).Width(40);

07. columns.Bound(c => c.ModuleName).Width(100);

08. columns.Bound(c => c.QuestionText).Width(300); ;

09. columns.Bound(c => c.QuestionGraded).Template(@<text>@((bool)item.QuestionGraded?"Yes":"No")</text>).ClientTemplate(@"#=QuestionGraded ? 'Yes' : 'No' #"); ;

10. columns.Bound(c => c.QuestionAnswerTypeName);

11. columns.Bound(c => c.PartName);

12. columns.Command(cmd => cmd.Edit());

13.

14. })

15. .DataSource(dataSource => dataSource

16. .Ajax()

17. .PageSize(20)

18. .Model(model =>{ model.Id(m => m.QuestionID);})

19. .Read(read => read.Action("Editing_ReadSelf", "SelfAssesmentAdmin", new {id =1}))

20. .Update(up => up.Action("Editing_UpdateSelf", "SelfAssesmentAdmin"))

21. )

22. .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("SelfAssesmentEditor").Window( w => w.Width(700)))

23. .Pageable()

24. .Sortable()

25. )

26.</div>

I also use a "SelfAssesmentEditor" Template that looks like that

01.@model MvcApplication2.Areas.Admin.Models.SelfAssessmentModel

02.@{

03. Layout = null;

04.}

05.<style>

06. .selftable

07. {

08. margin-left:40px;

09. width:600px;

10. }

11..selftable, td

12.{

13. height:70px;

14.}

15. #QuestionText

16. { width:300px;

17. height:100px;

18. }

19.</style>

20.

21.<table class="selftable">

22. <tr>

23. <td>Question Sort Order</td>

24. <td>@Html.TextBoxFor(model=>model.QuestionSortOrder)</td>

25. </tr>

26. <tr>

27. <td>Question</td>

28. <td>@Html.TextAreaFor(model=>model.QuestionText)<br /></td>

29. </tr>

30. <tr>

31. <td>Question Graded</td>

32. <td valign="center"> <label>@Html.RadioButtonFor(model =>model.QuestionGraded , "true" ) Yes</label>

33. <label>@Html.RadioButtonFor(model => model.QuestionGraded, "false") No</label></td>

34. </tr>

35. <tr>

36. <td>Number of Correct Responses</td>

37. <td>@Html.TextBoxFor(model=>model.NumberOfCorrectResponses)</td>

38. </tr>

39. <tr>

40. <td>Part</td>

41. <td>@Html.DropDownListFor(x =>x.PartID, (SelectList)ViewBag.Partlist)</td>

42. </tr>

43. <tr>

44. <td>Question Answe Type</td>

45. <td>@Html.DropDownListFor(x =>x.QuestionAnswerTypeID, (SelectList)ViewBag.QuestionAnswerTypelist)</td>

46. </tr>

47.

</table>



I am now trying to inset a kendo MVVM inside my template but it not working, it does works on the same page as grid just not on the same page editor template here is my MVVM

01.<div id="peopleList">
02.    <div id="commands">
03.        <button data-bind="click: add" class="k-button">Add</button>
04.    </div>
05. 
06.    <table>
07.    <thead>
08.        <tr>
09.            <th>First Name</th>
10.            <th>Last Name</th>
11.            <th>Full Name</th>
12.            <th></th>
13.        </tr>
14.    </thead>
15.    <tbody data-bind="source: people" data-template="personTemplate">
16.    </tbody>   
17.    </table>
18.</div>
19. 
20.<script type="text/x-kendo-template" id="personTemplate">
21.    <tr>
22.        <td><input data-bind="value: firstName" /></td>
23.        <td><input data-bind="value: lastName" /></td>
24.        <td><span data-bind="text: fullName" /></td>
25.        <td><button class="k-button" data-bind="click: delete">X</button></td>
26.    </tr>
27.</script>
28. 
29.<script type="text/javascript">
30. 
31.    // Define a Person model.
32.    var Person = kendo.data.Model.define({
33.        fields: {
34.            "firstName": {
35.                type: "string"
36.            },
37.            "lastName": {
38.                type: "string"
39.            }
40.        },
41. 
42.        // Define a function for fullName to get the firstName and lastName
43.        // and concatenate them together.
44.        fullName: function () {
45.            return this.get("firstName") + " " + this.get("lastName");
46.        }
47.    });
48. 
49.    // Create an observable object with an obserable array where each item
50.    // in the array is an instance of a Person model.
51.    var vm = kendo.observable({
52.        people: [
53.            new Person({
54.                firstName: "",
55.                lastName: ""
56.            })
57.        ],
58. 
59.        // Add a new person to the array.
60.        add: function () {
61.            this.people.push(new Person());
62.        },
63. 
64.        // Delete the person from the array.
65.        delete: function (e) {
66.            var that = this;
67.            $.each(that.people, function (idx, person) {
68.                if (e.data.uid === person.uid) {
69.                    that.people.splice(idx, 1);
70.                    return true;
71.                }
72.            });
73.        }
74.    });
75. 
76.    kendo.bind($("#peopleList"), vm);
77.    </script>

Can Anyone please help me on how to run kendo MVVM from the editor template of the grid. 



Thank you.

Grid

answered on 28 Jul 2014

3 answers

1.2K+ views

Binding to dynamically Generated HTML with new Bindings

I am currently working on a Web page which is built dynamically, not only on the initial page load, but also updating the page via REST-based service calls which return HTML fragments (containing their own "data-bind" tags) as well as portions of JavaScript meant to augment the observable object.

I have a simple ViewModel which looks like the following:

var viewModel = kendo.observable({ name: "Test", html: "" });

Inside the Web page, I have both an <input> element and a <div> element (acting as a placeholder) which looks like something below:

<div id="mainView"

<input type="text" data-bind="value: name"

/>

<div data-bind="html: html"></div

</div>

In the JavaScript, the view is correctly bound in my $(document).read() :

kendo.bind($("#mainView"), viewModel);

Now, I make a REST-based service call which return the following fragment (as variable 'htmlFragment'):

<input type="text" data-bind="value: name" />

I then set the 'html' member of my ViewModel:

viewModel.set("html", htmlFragment);

I am seeing the following occur: a) The text box appears with the value "Test"; and b) after the service call, a new text box appears, but without any data. Now, changing the text box originally rendered will update the ViewModel, but the second text box will not. The HTML (with the same binding as the first generated text box) is injected into the DOM with the correct data-bind tag, but no binding occurs on the element.

For lack of any other methods I decided to again call kendo.bind($("#mainView"), viewModel) after the service call and after the HTML injection and it then apparently binds correctly and now both text boxes are synchronized. All of that being said, here are my questions:

a) Is there inherently anything wrong with calling the kendo.bind() method multiple times if either the ViewModel and/or DOM are augmented with new members/bindings?
b) Is there any way to 'refresh' the bindings without calling bind() again (as I don't know how other UI elements will behave yet)?
c) Is it possible to hook the change event (not specifically for a particular named binding, but for a binding type (i.e. "html" binding) and just refresh the bindings for that particular HTML fragment?

Any information or suggestions would be greatly appreciated, thank you!

MVVM

answered on 28 Jul 2014