Questions on Kendo UI for jQuery Forum

0 answers

130 views

Trigger the loading of Grid Data

Hi, i have the following MVVM bound grid:

<div id="grid" data-role="grid"

data-bind="source: contacts_Listing_ViewModel.grid_Datasource, visible: isListingVisible"

data-editable="false"

data-columns='["FirstName","LastName", "DepartmentName"]'

data-pageable="true"

data-autoBind="false"

style="height:100%;width:100%"></div>

How do I stop the datasource from loading data into the grid automatically (I think data-autobind = false did it)?

I want data to only be loaded into the grid when I do: contacts_Listing_ViewModel.grid_Datasource.read

Any ideas?

Thanks

Grid

asked on 08 Aug 2012

3 answers

223 views

How to use Grid with MVVM

I have successfully created a grid using the MVVM pattern. It works great. However, what I'm struggling with is how to use the Grid with a combination of MVVM and the configuration and api methods available from Kendo UI.

For example, I am trying to create a detail row from a master row. The examples don't allow me to do that. Should I be doing something different when coding with this paradigm?

Grid

answered on 08 Aug 2012

2 answers

363 views

Weird Issue on KendoUI MVC w/ DatePicker Value

Hey all,

I hit a confusion point recently when working with KendoUI controls inside of forms.

Lets say I have today's date in my ViewBag (e.g. ViewBag.startDate exists with a valid date).

I've generated this control with the ASP.NET MVC kendo UI:
@Html.Kendo().DatePicker().Name("startDate").Value(@ViewBag.startDate).Format("d")

On the initial form post, this works fine.

Lets say I submit a form, causing a postback that changes the value of "startDate" in my ViewBag (on the server side).
If I print the ViewBag's startDate and then below it, generate my DatePicker control in the same way fashioned above, I get 2 different dates. The printed one is whatever the server side changed it to, and the Kendo control has the first ViewBag.startDate.

As soon as I generate my control like this (e.g. without the "@" in front of ViewBag):
@Html.Kendo().DatePicker().Name("startDate").Value(ViewBag.startDate).Format("d")
everything seems to be fine between form posts.

This confused me for a good long while yesterday. Does anyone know why this is? I'm thinking it's some Razor knowledge that I may be lacking, but I'd think if it worked with or without the "@" on any attempt, it would work on every attempt.

Thanks for any help on why this is!

-Sig

DatePicker

answered on 08 Aug 2012

1 answer

152 views

grid rendering problems between browsers

Hello, first excuse me for my bad english.

Im working with kendoGrid without any problems at webkit based browsers like Chrome or Safari, but when I test the webpage at IE or FF it seems to have some rendering issues with the width of headers and columns. I attach screenshots of both tests and the code snippet.

Thanks

$("#list_contactos").kendoGrid({

columns: [

{title: "Móvil", field: "_movil",width: 90},

{title: "Apellido1", field: "_ape1",width: 150},

{title: "Apellido2", field: "_ape2",width: 150},

{title: "Nombre", field: "_nombre",width: 150}

],

dataSource: ds,

change: function(e) {

//handler para manejar la seleccion de filas

var fila = this.dataItem(this.select());

if(fila == null)

return;

$("#txtMovil").val(fila._movil);

$("#txtNombre").val(fila._nombre);

$("#txtApellido1").val(fila._ape1);

$("#txtApellido2").val(fila._ape2);

},

selectable: "row",

scrollable: true,

height: 450

});

Grid

answered on 08 Aug 2012

1 answer

243 views

Append item with icon

Dear,
I've a treeview with icons as your sample, similar this:
<ul id="treeview" id="myRoot">
<li data-expanded="true"><span class="k-sprite folder"></span>Folder1</li>
<li data-expanded="true"><span class="k-sprite folder"></span>Folder2</li>
<li data-expanded="true"><span class="k-sprite folder"></span>Folder3</li>
</ul>

Then I've try to use append method (link to button for example), similar this:
treeView.append({ text: "Folder4" }, $("#myRoot"));
(it's work but the new node Folder 4 have no icon)

My question is:
How can I append a new node with icon ?
I have try this:
treeView.append({ text: "<span class='k-sprite folder'></span>Folder4" }, $("#myRoot"));
But not work!

Thanks for help,
Rinaldo

TreeView

answered on 08 Aug 2012

5 answers

686 views

Send file along with another fields

I'm using Kendo Upload inside an ASP.NET WebForms page to upload a user picture (not multiple files, only one).

It have a Save button that sends the values of many fields. I would like to send the file together with the values. Is there any way to do it with Ajax? Or with a normal Postback? Can someone please explain me how to do it?

Upload

answered on 08 Aug 2012

1 answer

89 views

Regarding Filtering

In our application, we have removed default filtering of kendo ui and have created textboxes with autocomplete on every header column.
But when we select any data entered in textbox and populated in autocomplete and then hit enter key, we are presented with row selected in edit mode as navigatable is on. So our data are not getting filtered. Can anyone suggest what should I do to achieve filter with navigatable on.

Thanks

General Discussions

answered on 08 Aug 2012

7 answers

1,000 views

Grid virtual scrolling issues

Hi

I am facing two issues with virtual scrolling and server side pagig enabled on Grid.

1. As I drag the scrollbar, multiple posts are being made instead of a post happening after the scrollbar drag is completed.
For eg.,
Lets say my pagesize is 3000 and I have total 20000 rows. Onload, page 1 data is loaded. Now when I drag the scrollbar all the way to middle, there is a lag experienced in dragging and POST is happening in points of drag. There are 1 or 2 POSTS in the background and when the scrollbar eventually drops to the intended position, another POST happens and grid gets bound to the data returned from last POST.

2. Data loaded across multiple scrolls seem to get retained in the datasource. This is making the grid/page heavy and slow after using the scroll for some time. I have monitored the server POST. In the above example, once 6 POSTS have been made with returning the 20000 rows, scrolling doesnt create server posts. Data is being paged locally.

How do I reset datasource across page loads instead of appending the data recieved into the datasource ?

My grid config is as follows:

$("#grid").kendoGrid({
        dataSource: {
            type: "json",
            serverPaging: true,
            serverSorting: true,
            pageSize: 3000,
            allowUnsort: true,
            transport: {
                read: {
                    url: "homecontroller/action1",
                type: "post",
                contentType: "application/json; charset=utf-8",
                dataType: "json"
                },
            parameterMap: function (options) {
                return JSON.stringify(options);                    }
            },

schema: { data: "Data", total: "TotalRowCount" }

        },
        groupable: true,
        sortable: true,
        pageable: true,
        selectable: "multiple",

        scrollable: {
            virtual: true
        },

       columns:
        [
  //column definitions here
]
});

Grid

answered on 08 Aug 2012

1 answer

127 views

Trouble calling function on button click

I've put together a little app using Kendo UI that stores user inputs in a Javascript array, and then prints these items out by adding text to a div. Along with the text, I need to have a delete button to remove these items from the array.

Since I'm adding the delete buttons to the DOM after I initialize Kendo UI, I assume I need to use the.kendoMobileButton() method on each button I add. If I don't do this, my buttons aren't styled correctly, despite being given the attribute data-role="button".

Still, when I try to use these buttons, I can't get them to call a function with data-click="deleteNumber". The function simply doesn't seem to fire. Any hints?

Here is a quick example I threw together that illustrates my problem: http://crocdoc.ifas.ufl.edu/files/kendo_example/

Button (Mobile)