Questions on Kendo UI for jQuery Forum

0 answers

55 views

IE8 seems to take a long time to build up the grid (with 7 columns) as compare to other browsers like Google Chrome. Any suggestions on how to improve the performance?

I have virtual scrolling setup with page size of 50, I noticed the pause in scrolling when page size limit was reached. The scrolling will become unresponsive for a moment while the grid takes its time to build up the UI. The response time does improve with smaller page size. Page size of 5 equals to a smooth scrolling. However, the initial load of 5 rows are too few for the display area of the grid. Is there a way I can keep the responsiveness of the scrolling while fill up the grid visual area at initial load?

Doug

Grid

asked on 21 Nov 2012

0 answers

84 views

Upload: post metadata before the file

Upload component posts the file before the metadata, but our server expects the metadata first because it includes vital information for processing the uploaded file. We do not want to save an intermediate copy before processing to avoid unnecessary processing overhead. Is there a way to instruct the Upload component to post the metadata before the file?

Upload

asked on 21 Nov 2012

0 answers

139 views

Model, DataSource and Date

Hello,

I'm trying to user the kendo.data.Model to make an observable object from a single object retrieved from a web service.
When I do a kendo.data.Model.define(...), the fields are entirely ignored, and the field containing the date is mapped to a string.

If I create a datasource with the exact same model, I retrieve a correct date.

I tried to put a custom parse function, and in the first case, nothing happen.
In the second scenario, I can see my parse method called.

Here is a sample of what I do :

var obj = {

Id: "1",

Name: "foo",

Age: "28",

Fire: "/Date(1348479856993)/"

};

var objModel = kendo.data.Model.define({

id: "Id",

fields: {

Id: { type: "number" },

Name: { type: "string", parse: function(e) {

debugger;

return e;

}

},

Fire: { type: "date" },

Age: { type: "number" }

}

});

var obj1 = new objModel(obj);

console.log(obj1.get("Fire"));

var dataSource = new kendo.data.DataSource({

data: [ obj ],

schema: {

model: {

id: "Id",

fields: {

Id: { type: "number" },

Name: { type: "string", parse: function(e) {

debugger;

return e;

}

},

Fire: { type: "date" },

Age: { type: "number" }

}

});

dataSource.read();

var obj2 = dataSource.at(0);

console.log(obj2.get("Fire"));

This make the following output to the console :

/Date(1348479856993)/

Mon Sep 24 2012 11:44:16 GMT+0200 (Romance Daylight Time)

Thanks for you help.

Data Source

asked on 20 Nov 2012

3 answers

426 views

search criteria on grid not working

HI,
While loading the page grid is loading,
in my sample code i'm showing userId, username, address,... and
there is one html textbox, one html button also
once after clickingon the html button i need to filter the data based on the textbox value i.e. if the user enters 'ABC' means i need to show only the items that contains ABC in their name or city or address

Below is the sample code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript" />
    <script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css" rel="stylesheet">
    <link href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css" rel="stylesheet">
</head>
<body>
    <div id="example" class="k-content">
        <input id="myTextField" type="text" />
        <input id="btnGo" type="button" value="Go" onclick='LoadGrid()' />
                <div id="grid" style="height: 380px">
        </div>
                <style scoped>
            #clientsDb
            {
                width: 692px;
                height: 413px;
                margin: 30px auto;
                padding: 51px 4px 0 4px;
                background: url('../../content/web/grid/clientsDb.png') no-repeat 0 0;
            }
        </style>
        <script>
        function LoadGrid()
        {
        debugger;

        alert('executed');

//            $(document).ready(function () {
                //var txtUser = document.getElementById('myTextField').value;
                $("#grid").kendoGrid({
                    scrollable: true,
                    sortable: true,

                    filterable: true,
                    pageable: true,
                    columns: [
                                {field: "Id", title: "User ID" ,filterable:false , width: "60px"},
                                {field: "ContactName", title: "User Name",filterable:true , width: "125px" },
                                {field: "Name", title: "Name",filterable:false , width: "150px"},
                                {field: "Address", title: "Address",filterable:false , width: "140px"},
                                {field: "City", title: "City" ,filterable:false , width: "60px"},
                                {field: "State", title: "State" ,filterable:false , width: "60px"},
                                {field: "Country", title: "Country" , filterable:false , width: "60px"},
                                {field: "ZipCode", title: "ZipCode" , filterable:false , width: "60px"},
                            ],
                    dataSource: {
                        pageSize: 20,
                        type: "json",
                        serverPaging: true,
                        serverSorting: false,
                        serverFiltering: false,
                        transport: {
                            read: {
                                //url: "MyGrid.aspx/GetAccounts",
                                url: "MyGrid.aspx/GetData",
                                dataType: "json",
                                contentType: "application/json; charset=utf-8",
                                type: "POST"
                            },
                            parameterMap: function (options) {
                                return JSON.stringify(options);
                            }
                        },
                        schema: {
                            data: "d.data",
                            total: "d.total"
                        }
                    },


                });
            //});
            //Concatenate drop down variable to file name
//var dynamicUrl = "MyGrid.aspx?Name="+myTextField.value+"/GetData";
var dynamicUrl = "MyGrid.aspx?Name="+myTextField.value+"/GetData";

//Assign grid to variable
var grid = $("#grid").data("kendoGrid");

//Set url property of the grid data source
grid.dataSource.transport.options.read.url =dynamicUrl;

//Read data source to update
grid.dataSource.read();
grid.dataSource.refresh();

            }
        </script>
    </div>
</body>
</html>

Previously at the time of loading (with out considering the filter) i kept uri as
url: "MyGrid.aspx/GetAccounts",

the grid was loading perfectly, now after keeping the textbox and button and inbutton click event i added all the code
and changed the uri to
url: "MyGrid.aspx/GetData",

now the textbox value is not coming to the methos, i tried uri like this also
url: = "MyGrid.aspx?Name="+myTextField.value+"/GetData";

but still it is not coming

please help me..
its urgent and try to understand my situation

thanks in advance

Grid

answered on 20 Nov 2012

2 answers

278 views

How to add Microsoft SQL server database's data into mobile?

I plan to use KendoUI develop a mobile application which I want to get data from my MS SQL database and display those data at my mobile.
How I can do it?? Any tutorial lets me to refer? Please advice, thanks :)

General Discussions

answered on 20 Nov 2012

8 answers

720 views

ASP.NET MVC 4 New Web API and oData

Hi,

With the recent release of ASP.NET Web API I was hoping that KendoUI would be a a perfect match and allow the wiring up of the Kendo grid to the new APIControllers.

I can see the correct oData API calls being made by the Grid and the .NET Web API controller responds with the correct number of json records and the correct page but this is never rendered in the grid. Do you know if the new ASP.NET Web API oData responses work?

Hope you can help or show an example of this working because if it does its going be a really elegant and simple implementation.

Example can be seen here : http://www.asp.net/web-api/overview/web-api-routing-and-actions/video-paging-and-querying

Thanks
Mark

Grid

answered on 20 Nov 2012

2 answers

120 views

Working with the Kendo Grid

Breakdown of what I'm attempting to do:

I'm trying to bind a Kendo grid to my ViewModel and simply display the id, Name, City, and State along with a button to delete (one button per row).
I would like the delete button to fire off the 'Delete' in my controller.

I've installed the KendoUIWeb via NuGet and was wondering how it's used.

I see Intellisense is working when I type something in my view like:

@Html.Kendo().Grid()

From the example that I've found online and in the demos listed on this site it doesn't look like Kendo is following that format.

If I throw a grid in my view as show in the examples:

<div id="grid"></div>

<script>

$("#grid").kendoGrid({

columns: [ { title: "Id" },

{ title: "Name" },

{ title: "City" },

{ title: "State" }]

});

</script>

I can see the grid on the page but in VisualStudio 2012 I'm getting no Intellisense support for Kendo. I've worked with the old Telerik MVC grid and got used to it but Kendo seems foreign at this point.

General Discussions

answered on 20 Nov 2012

1 answer

257 views

Date Picker In ListView

Hi,

Iam defining a DatePicker in ListView in Edit in this format

<input data-bind="value:cmpnydate" name="date" data-type="date" data-role="datepicker" required="required" validationMessage="required"/>

and binding that datepicker value to "cmpnydate" and it is of "date" type, but that value is not binded to that Schema Variable. Am I defining wrong anywhere? Can u just plz let me know where I have defined wrong?

Thanks and regards,
Bhavani.

ListView

answered on 20 Nov 2012

3 answers

1.2K+ views

How to change Update and Cancel button templates on Inline Editing mode

I've been pulling my hair on how to change the template of the Update and Cancel buttons. I was able to change the default Edit and Delete buttons but I don't know where to set the configuration to change the Update and Cancel buttons after it swtiches when I click the Edit button.

Here's the code where I changed the template for the Edit and Delete buttons:

columns:[
            {title:"Property", field:"property_name", width:80},
            {title:"Data Type", field:"property_data_type", editor:loadDataType, width:80},
            {command:[{ name: "destroy", text: "Delete", template: "<a class=\"btn btn-danger\"><i class=\"icon-chevron-down icon-white\"></i></a>"},{ name: "edit", text: "Edit", template: "<a class=\"btn btn-primary k-grid-edit\"><i class=\"icon-pencil icon-white\"></i></a>"}] , width:80},
        ],

The Update and Cancel buttons replaces the Edit and Delete buttons when I click on the Edit button. Is there somewhere I can also set the template for the Update and Cancel buttons?

Please help, Thanks.

Grid

answered on 20 Nov 2012

0 answers

52 views

Save a record on expand icon click

I have just started to use kendo ui and need some help regarding an issue where once you click on expand icon the row gets saved, also the already opened rows should remain open.

Grid

asked on 20 Nov 2012