Questions on Kendo UI for jQuery Forum

1 answer

206 views

Kendo UI Autocomplete Options are replacing the text box

I am using an autocomplete control:

var data = ["Books", "Movies", "Music"];

$("#input").kendoAutoComplete({
dataSource: data,
placeholder: "Select Category..."
});

For some reason the list of options is replacing the text box instead of showing below the input box. See the attached screenshots.

Why is this happening?

AutoComplete

answered on 02 Oct 2012

2 answers

159 views

Display bug with chrome

I'm having weird display behavior with datetime and drop down component.
The problem is that the dropdown selection remains partially visible when viewing with chrome.

view this demo with chrome to get the weird behavior.
small demo that reproduced the behavior : http://jsbin.com/aziveh/6 and http://embed.plnkr.co/WHdj3d

When you view the same demo in http://plnkr.co/edit/WHdj3d the behavior disappears.This only happens when using chrome.

kind regards,
Doni

Date/Time Pickers

answered on 02 Oct 2012

3 answers

234 views

DataViz Dashboard demo

Hi,

Having had mild success with putting a chart into a mobile UI project, I'm trying to take the dashboard demo at
http://demos.kendoui.com/dataviz/dashboards/stock-history.html
and put that into a mobile UI as per one of the demo images showing a dashboard on the iphone (http://www.kendoui.com/Libraries/elements/dataviz-1.sflb.ashx)

I can't get the charts to display, and I again have trouble with the mobile UI tabstrip disappearing completely.

I've created a JS Bin project here: http://jsbin.com/welcome/26994/

Any pointers would be appreciated.

Thanks
Hayden

General Discussions

answered on 02 Oct 2012

1 answer

156 views

Modify Column Template On Runtime with javascript

Hello
I have tried and search for solution to modify Column template
e.g.

$("#gridscreenerconfigs").kendoGrid({

groupable: false,

sortable: false,

scrollable: {

virtual: true

},

filterable: false,

pageable: false,

columns: [{

field: "fEnable",

title: "Enable"

}, {

field: "fCategories",

title: "Screener"

}, {

field: "fRange",

title: "Range"

}, {

field: "fReorder",

title: "Order"

}, {

command: "destroy",

title: "Remove"

}

]

});

i tried some thing like

var grid = $("#gridName").data("kendoGrid");
grid.columns = [];
$("#gridscreenerresult").kendoGrid({
groupable: false,
sortable: {
mode: "multiple",
allowUnsort: true
},
reorderable: true,
columnMenu: true,
scrollable: {
virtual: true
},
filterable: false,
resizable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: columnfield2
});
grid.refresh();

Nothing works so far, is it possible at all?

Hi If adding removing columns not work during runtime with javascript then can you guys show me how to show / hide columns on runtimes programatically? this way i can still complete my project. If all is not well, i will have to roll back to Telerik Ajax instead - spent tons of times on Kendo already.

Grid

answered on 02 Oct 2012

1 answer

117 views

change Item template

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

128 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

74 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

153 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

180 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

288 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