Questions on Kendo UI for jQuery Forum

1 answer

122 views

How do i to change the item template from de Panelbar in order to add new attributes to the li element?
How can a access the datasource item for the select item?

PanelBar

answered on 02 Oct 2012

1 answer

133 views

Problematic Details Templates

Hellow,
When I use this following code I get error "Invalid template" by "kendo.web.js"
I tried it first by script but the script from the kendodropdownlist closed the main script of the tamplate and it forced me to put it in a div. Both are wrong. What can I do for doing this simple example?

the code by script:
<script id="employeesTemplate" type="text/kendo-tmpl">
@(Html.Kendo().DropDownList()
.Name("AddressSource")
.BindTo(new List<string>() {
"רשמית",
"מדווחת",
"למשלוח דואר"
})
)
</script>

the code by div:
<

div id="addressEditTemplate" style="display:none;">
@(Html.Kendo().DropDownList()
.Name("AddressSource")
.BindTo(new List<string>() {
"רשמית",
"מדווחת",
"למשלוח דואר"
})
)
</div>

Thanks in advance.

Grid

answered on 02 Oct 2012

3 answers

80 views

Why is cache disabled in ajaxRequest?

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

160 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

197 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

292 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

213 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

181 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

588 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

116 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