Questions on Kendo UI for jQuery Forum

3 answers

112 views

I am trying to build a single page application and I find that various controls (i.e. TabStrip, Panel, Window) all have disabled caches on the ajaxRequest function. Is there any reason why are these disabled (or at least not configurable)?

I have Kendo UI Complete v2012.2.710

General Discussions

answered on 02 Oct 2012

1 answer

197 views

Android performance and page transitions (start time)

I have been playing around with Kindo for the past few days and I had a few questions that I hope can be answered.

1) how are page transitions timed? I notice that each press it can take a few seconds before the page comes up and am wondering if there are any ways to speed this up?

2) Does kindo use the fastClick plugin to shorten the 2 to 300 ms click delay on mobile devices?

3) I have seen this asked with no reply but can we speed up the page transition?

4) look and feel, I understand you want to try and be native looking but how can I use my own look and feel, do I have to set the device to be like IOS or Android and then change the styles or is there a better way, the documentation does not really touch this or at least the docs I saw did not.

I currently have my app developed in JQM and generally like the framework but I need better performance and I am hoping kindo can provide this. My app loads all the data (JSON) on init and stored them in localstorage, then when accessing a page it loops and displays out the list (maybe 100 rows if that) That being said I still see somewhat laggy performance on android, click wait then page slides in I would like to click or better yet tap and have the page slide in right away.

Thanks!

General Discussions

answered on 02 Oct 2012

1 answer

242 views

AntiForgeryToken in Grid

Hi,
We are using AntiForgeryToken in our application. For normal Ajax post currently we are using extension method for Ajax.BeginForm as follows:

public static MvcForm BeginForm(this AjaxHelper ajaxHelper, HtmlHelper htmlHelper, AjaxOptions ajaxOptions, bool addAntiForgeryToken = true, string actionName = null, string controllerName = null,
object routeValues = null, object htmlAttributes = null)
{
return htmlHelper.BeginFormWithAntiForgery(
() => ajaxHelper.BeginForm(actionName, controllerName, routeValues, ajaxOptions, htmlAttributes),
addAntiForgeryToken);
}

private static MvcForm BeginFormWithAntiForgery(this HtmlHelper htmlHelper, Func<MvcForm> formFunc, bool addAntiForgeryToken)
{
var form = formFunc();

if (addAntiForgeryToken)
htmlHelper.ViewContext.Writer.Write(htmlHelper.AntiForgeryToken().ToHtmlString());

return form;
}

Whenever Kendo grid is posting an Ajax request can we use the above extension method because this is the common code we have written. Seems like Kendo has its own way of sending an Ajax Request, how can we do changes in that. We want to do changes in the common method so that everything works fine.

Grid

answered on 02 Oct 2012

1 answer

334 views

Assigning a variable from a selection

I have been trying all day to "catch" or assign/bind to the chosen state and assign it to a variable called "text" so that I can use it in yet another API call for the other drop down box "Products".
I figured I must just be missing something and was hoping for a little help. Thanks.

   <body>
            <div class="k-widget k-header">
                     <span class="infoHead">Information</span>
                     <p>
<input id="state" placeholder="Select State..." />
</p>
<p>
         <input id="products"/>
         </p>
            <script>

      $(document).ready(function() {
                    $("#state").kendoDropDownList({
                   //     optionLabel: "Select State...",
                        dataTextField: "name",
                        dataValueField: "abbreviation",
                        dataSource: {
                         transport: {
                              read: {
                                url: "http://openstates.org/api/v1/metadata/?apikey=????????",
                                dataType: "jsonp"
                              }
                            }
                        }

                    });
                        //  change: function(test){
                    //  var text = this.value()
            var states=$("#state").data("kendoDropDownList");
states.bind("change", function(e) {
    var text = (this.value())
                    alert (text)
});

          $("#products").kendoDropDownList({
                      optionLabel: "Select product...",
                        dataTextField: "legislature_name",
                        dataValueField: "legislature_name",
                        dataSource: {
                            transport: {
                              read: {
                                url: "http://openstates.org/api/v1/metadata/"+text+"/?apikey=???????????????????",
                                dataType: "jsonp"
                              }
                            }
                            }


                      })
                      $("#products").data("kendoDropDownList");
      });




            </script>


        </div>
   </body>

DropDownList

answered on 02 Oct 2012

0 answers

262 views

Grid column binding with custom editor

How can i bind a custom editor to my grid

<div id="grid" data-role="grid" data-bind="source: gridDataSource" data-editable="inline" data-columns='[

{ "command": ["edit", "destroy"], "title": " ", "width": "120px" },

{ "field": "title", "width": "100px", "editor": "titleEditor"},

{ "field": "year", "width": "100px" }

]'>

</div>

I want that the titleEditor will be shown

function titleEditor(container, options) {

var inputField = $('<input data-text-field="title" data-value-field="title" data-bind="value:' + options.field + '"/>');

var button = $('<span unselectable="on" class="k-icon k-i-search">select</span>');

button.click(function(e) {

lookupdialog.dialog({

});

inputField.after(button);

inputField.appendTo(container);

};

See my jsfiddle

Thanks

MVVM

asked on 02 Oct 2012

5 answers

228 views

Filter wcf service by date?

Trying to filter a WCF service by date. I can filter via a grid/gui, and I can setup default filters for every other column/field. I just can't seem to get the date to work. The error I get back is........... "value":"Operator 'eq' incompatible with operand types 'Edm.DateTime' and 'Edm.String' Data format from the WCF is as follows... "EFFECTIVE_DATE":"\/Date(1065657600000)\/",

One perplexing thing is that if I add the following, it filters by the top parameter, and the grid actually looks like it wants to filter by date. If I click on the filter next to "EFFECTIVE DATE" is actually HAS the correct date and operator all filled in. Clicking on "filter" then makes it filter perfectly. So why won't it just filter it to begin with like every other type of field?

filter: [

{ field: "SYMBOL", operator: "eq", value: "NLP"},

{ field: "EFFECTIVE_DATE", operator: "eq", value:"\/Date(1065657600000)\/"

],

More to the example....

<script>

$(document).ready(function () {

var grid = $("#grid").kendoGrid({

dataSource: {

type: "odata",

transport: {

read: "http://someURL/Data.svc/Policies",

// dataType: "json",

},

filter: [{

field: "SYMBOL",

operator: "eq",

value: "NLP"

}, {

field: "EFFECTIVE_DATE",

operator: "eq",

value: "\/Date(1065657600000)\/"

}],

schema: {

model: {

fields: {

SYMBOL: {

type: "string"

},

FIRM_NAME: {

type: "string"

},

EFFECTIVE_DATE: {

type: "date"

},

PolicyStatusID: {

type: "string"

},

}

},

pageSize: 20,

serverPaging: true,

serverFiltering: true,

serverSorting: true

},

height: 350,

filterable: true,

sortable: true,

pageable: true,

columns: [{

field: "FIRM_NAME",

}, {

format: "{0:MM/dd/yyyy}",

field: "EFFECTIVE_DATE",

title: "EFFECTIVE_DATE",

// template: '#= kendo.toString(EFFECTIVE_DATE, "MM/dd/yyyy") #'

}, {

field: "PolicyStatusID",

}, {

field: "SYMBOL",

}, ]

});

</script>

Data Source

answered on 02 Oct 2012

2 answers

636 views

please don't validate disabled fields

i put together a little example: http://jsfiddle.net/vgBbP/1/

the "normal" html5 form validation only validates non-disabled input-fields - which i think makes sense.
kendo on the other hand ignores the "disabled" attribute :(

if you could implement the expected html5 validation functionality that would be great. thanks.

Validation

answered on 02 Oct 2012

0 answers

184 views

kendoanimation effects

Hi,
I am evaluating Kendo UI and I'd appreciate if you can help me answer whether the following is doable or not.

I am using the splitview and defining a toggle menu on the side-pane
and I'd like to create a cool sliding effect when it slides out and slides in while toggling.
I've tried setting the duration, but that doesn't help.
How do I slide it slowly and create the effect that it is pushing the main-pane when the toggle menu comes out
and reverse the effect when it slides in?

Here is the code that I have now and it just doesn't have any effect. It simply hides and shows the side-pane.

$('#toggleMenu').click(function() {

if ($('#menuPane').is(':visible')) {

$("#menuPane").kendoAnimate({ hide: true, effects: "slideOut:left"});

} else {

$("#menuPane").kendoAnimate({ show: true, effects: "slideIn:left"});

}

});

Please let me know.
Thanks.

B.Manohar

General Discussions

asked on 02 Oct 2012

6 answers

352 views

Configure AJAX data source to use proper javascript naming convention

I am using Kendo UI Grid, using MVC helpers, and I see that JavaScript that gets generated assumes that JSON coming back from server will have property names with capitalized first letter (e.g. "Items" not "items"). Generated "schema" definition also uses names as they appear in C# class (i.e. first letter is capitalized). Also Data, Total and Error properties in the returned JSON (at the top level) are expected to start with capital letter.

Rest of my application uses proper javascript naming convention (i.e. camel case with lower first character).

Is there a way to configure MVC Helpers to output javascript that would conform to proper javascript naming convention? I have configured JSON serialization at the root of my application, and would rather not change my naming convention just to conform to Telerik's way.

General Discussions

answered on 02 Oct 2012

0 answers

265 views

serverGrouping cannot load

hello

i tried to use serverGrouping, but i still got this error

error: Uncaught TypeError: Cannot read property 'length' of undefined
here is my json.

{"data":[{"Key":"Azure Getting Started","HasSubgroups":false,"Items":[{"Name":"Azure Getting Started","Price":540.00,"Self":"api/books/3","Id":3},{"Name":"Azure Getting Started","Price":150.00,"Self":"api/books/5","Id":5}],"Aggregates":{"Price":{"Sum":690.00,"Min":150.00,"Max":540.00},"Name":{"Count":2}},"Subgroups":[]},{"Key":"Entity FrameWork","HasSubgroups":false,"Items":[{"Name":"Entity FrameWork","Price":350.00,"Self":"api/books/2","Id":2}],"Aggregates":{"Price":{"Sum":350.00,"Min":350.00,"Max":350.00},"Name":{"Count":1}},"Subgroups":[]}],"total":5,"aggregates":{"Price":{"Sum":1810.00,"Min":150.00,"Max":550.00},"Name":{"Count":5}}}

full code in html

var grid = $("#ordersGrid").kendoGrid({

// specify the columns on the grid

toolbar: ["create"],

columns: [

{ field: "Name", title: "Name", width: "100px" },

{ field: "Price", title: "Price", width: "100px", aggregates: ["Min", "Max", "Sum"], footerTemplate: "Sum:#=Sum# Min:#=Min# Max:#=Max#", groupFooterTemplate: "Sum: " },

{ command: ["edit", "destroy"], title: " ", width: "210px" }

],

// the datasource for the grid

dataSource: new kendo.data.DataSource({

// the transport tells the datasource what endpoints

// to use for CRUD actions

transport: {

read: {

url: "/apibook/readget",

type: "POST"

},

update: {

url: "/apibook/update",

type: "POST"

},

destroy: {

url: "/apibook/destroy",

type: "POST"

},

create: {

url: "/apibook/create",

type: "POST"

},

parameterMap: function (options, operation) {

if (operation != "read") {

var result = {};

for (var i = 0; i < options.models.length; i++) {

var book = options.models[i];

debugger;

for (var member in book) {

result["books[" + i + "]." + member] = book[member];

}

return result;

}

if (operation == "read") {

var result = {};

result["take"] = options.take;

result["skip"] = options.skip;

result["page"] = options.page;

if (options.sort != null) {

for (var i = 0; i < options.sort.length; i++) {

result["sort[" + i + "]." + "dir"] = options.sort[i].dir;

result["sort[" + i + "]." + "field"] = options.sort[i].field;

}

if (options.aggregate != null) {

var aggregates = "";

debugger;

for (var i = 0; i < options.aggregate.length; i++) {

if (aggregates == "") {

aggregates = options.aggregate[i].field + "-" + options.aggregate[i].aggregate;

}

else

aggregates += "~" + options.aggregate[i].field + "-" + options.aggregate[i].aggregate;

}

result["aggregates"] = aggregates;

//for (var i = 0; i < options.aggregate.length; i++) {

// result["aggregate[" + i + "]." + "aggregate"] = options.aggregate[i].aggregate;

// result["aggregate[" + i + "]." + "field"] = options.aggregate[i].field;

//}

}

result["groupBy"] = "Name-asc";

if (options.filter != null) {

var filter = options.filter;

if (filter.filters != null) {

for (var i = 0; i < filter.filters.length; i++) {

result["filter[" + i + "].field"] = filter.filters[i].field;

result["filter[" + i + "].op"] = filter.filters[i].operator;

result["filter[" + i + "].value"] = filter.filters[i].value;

}

return result;

}

},

group: {

field: "Name",

aggregates: [

{ field: "Price", aggregate: "sum" },

{ field: "Price", aggregate: "min" },

{ field: "Price", aggregate: "max" },

]

},

aggregate: [

{ field: "Price", aggregate: "sum" },

{ field: "Price", aggregate: "min" },

{ field: "Price", aggregate: "max" },

{ field: "Name", aggregate: "count" }],

// the schema defines the schema of the JSON coming

// back from the server so the datasource can parse it

schema: {

// the array of repeating data elements (employees)

data: function (response) {

debugger;

//return response.Data.Items;

return response.data;

},

groups: function (response) {

debugger;

//return response.Data.Items;

return response.data;

},

aggregates: function (response) {

if (response.aggregates != null)

return response.aggregates;

else

return {};

},

model: {

id: "Id",

fields: {

// specify all the model fields, along with validation rules and whether or

// not they can be edited or nulled out.

Id: { editable: false, nullable: true },

Name: { editable: true },

Price: { editable: true, nullable: false, validation: { required: true } },

}

},

// the total count of records in the whole dataset. used

// for paging.

total: "Count",

},

// the number of records to show per page

pageSize: 3,

// do paging on the server

serverPaging: true,

// do sorting on the server

serverSorting: true,

serverAggregates: true,

serverGrouping:true,

batch: true

}),

// paging is enabled in the grid

pageable: true,

// editing happens inline, one row at a time.

editable: "popup",

selectable: true,

// sort by multiple columns

sortable: {

mode: "multiple"

},

change: function (e) {

// get the current item selected in the grid

var employee = this.dataSource.getByUid(this.select().data("uid"));

// write out the employee id

console.log(employee.id);

}

}).data("kendoGrid");

can someone help me how solve this error?
maybe the problem is schema

thank you

Grid

asked on 02 Oct 2012