Questions on Kendo UI for jQuery Forum

1 answer

689 views

Kendo UI Autocomplete not working as expected

I have run into an issue with the new version of Kendo UI that throws an exception when an autocomplete text box is manually deleted. In the old version of Kendo, when you remove the input from the text box, no subsequent call is made to the server to retrieve new data. The new versions, however, will make a call to the server with an empty string when the input is deleted which causes my application to get an error. The behavior in the Kendo UI Dojo returns all the values when the input is deleted which seems incorrect. I would think there would be no drop-down values if there is no input. You can see the difference in behavior by performing the following:

Go to http://dojo.telerik.com/AyEfe

Select Kendo 2014 Q2 from the library drop-down.
Run
Type "che" in the input box - you will get a drop-down with the search results
Manually delete the input using backspace - the drop-down results go away

Now select Kendo 2014 Q3 SP2 from the library drop-down.
Run
Type "che" in the input box - you will get a drop-down with the search results
Manually delete the input using backspace - the drop-down lists all the values

I think the Q3 SP2 version has a bug since a blank input should return no drop-down data. Is this accurate or is this by design? Should I log a bug for this issue?

AutoComplete

answered on 13 Feb 2015

1 answer

153 views

Radial Gauge arrow

Hello Radial Gauge / Scale options has very good control but we need to change the arrow! I can draw new arrow with svg but I don't know how to include it in Radial Gauge. How can I do this ?

Thank you in advance !

LinearGauge

answered on 13 Feb 2015

1 answer

175 views

kendoDatePicker "Member Not Found" issue in IE11 browser with IE7 document mode

Using Browser "IE11" with document mode as IE7
<httpProtocol><customHeaders><add name="X-UA-Compatible" value="IE=7" /></customHeaders></httpProtocol>

http://demos.kendoui.com/web/datepicker/index.html

jquery.min.js Script Error "Member not found" at kendoDatePicker()

We are facing this issue in our application since we migrated to IE11, and our application has a need to run in IE7 compatible mode. So please suggest a solution for this bug.

DatePicker

answered on 12 Feb 2015

1 answer

501 views

MVC Grid client side Updating

I have a MVC Grid as declared below what I want to do is instead of using the popup editor I want to edit and create rows in a custom template.
The 'GridFieldDefinitions_EditClick' function pops up a dialog and inserts my custom template 'templateField' into it. Basically any edits I make to the template I want reflected in the grid then I'll do my own custom batch Save to save all changes I did in the grid.
I'm having some problems reflecting the template changes into the grid.

1. Should these changes not be refelected automatically from my template?
2. If they are not why not?
3. If they are not meant to then I propose to use the Template Save button 'updateGridField' onClick method to reflect the cahnges to the grid - is this possible?

My template is as follows:

<script type="text/x-kendo-tmpl" id="templateField">

<div class="divFields">

@*<div style="overflow:auto; width:100%; height:10em; border:1px solid;">*@

<div>

<table class="tbl2Cols">

<tr>

<td>Uid</td>

<td>#= data.uid #</td>

</tr>

<tr>

<td>Oid</td>

<td>#= data.oid #</td>

</tr>

<tr>

<td>Key</td>

# if (data.oid) { #

<td>#= data.key #</td>

#} else { #

<td>

<input class="k-textbox k-textbox person" data-val-required="The Key is required." id="key" name="key" style="width:100%" />

<span class="requiredAfter"></span>

<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="key"></span>

</td>

# } #

</tr>

<tr>

<td>Label</td>

<td>

<input data-bind="value:label" class="k-textbox" id="label" name="label" style="width:100%" value="#= data.label #" />

</td>

</tr>

<tr>

<td></td>

<td>

<div id='#= data.uid #' class="k-button" onclick="updateGridField(this);" data-rowid="#= data.uid #">Save</div>

</td>

</tr>

</table>

</div>

</script>

My MVC Grid

@(Html.Kendo().Grid<field>()

.Name("GridFieldDefinitions")

.HtmlAttributes(new { @class = "ignore" })

//.ToolBar(toolbar =>

//{

// if (pnlViewUserAccess == PageViewType.Edit || pnlViewUserAccess == PageViewType.Create)

// {

// toolbar.Create().HtmlAttributes(new { @class = "ignoreDirty" });

// }

//})

.Scrollable(s => s.Height("auto"))

.Columns(columns =>

{

if (pnlViewUserAccess == PageViewType.Edit || pnlViewUserAccess == PageViewType.Create)

{

columns.Command(command => command.Custom("Edit").Click("GridFieldDefinitions_EditClick"));

}

columns.Bound(p => p.order).Title("").HtmlAttributes(new { @class = "noEdit noCreate" }).Width(50);

columns.Bound(p => p.key).Title("Key").HtmlAttributes(new { @class = "noEdit", @disabled = true }).Width(150);

columns.Bound(p => p.label).Width(200);

columns.Bound(p => p.valueLength).Title("Length").Width(100);

})

.Events(e => e.Edit("GridFieldDefinitions_onEdit"))

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(40)

.Model(model =>

{

model.Id(p => p.oid);

model.Field(p => p.oid).Editable(true);

})

.Events(e => e.Error("handleAjaxError"))

.Read(read => read.Action("FieldDef_Read", "Forms", new { recordTypeOid = Model.Entity.Oid }))

)

Templates

answered on 12 Feb 2015

3 answers

139 views

Don't display loading dialog when loading Kendo UI Mobile listview from external data source?

Is this possible? To not display the little loading spinner when loading JSON into a Kendo UI Mobile listview?

ListView (Mobile)

answered on 12 Feb 2015

3 answers

203 views

CSS issue with with sub items in right aligned menu using Bootstrap theme

Kendo UI Version: 2014.1.415

The issue is that the sub-item inherits an incorrect background color and makes the contents of the sub item unreadable until the user hovers over it. See attached images for clarification. Below are some specifics on how to replicate the issue

This issue occurs when

Using a menu with at least two layers of sub-items
Menu is aligned along right edge of screen so that the first layer's sub-items are forced to expand to the left instead of the right. Attached images can help clarify this.
Theme is set to Bootstrap. Issue does not occur with the other themes in use in our application (BlueOpal and Black)
Note: When the menu menu has enough room to expand its nested sub-items to the right, the issue does not occur.

The attached images use the exact same source code as below. The only difference is that one is aligned along the left side of the screen while the other is aligned along the right side. Any help or advice you could give would be greatly appreciated!

Code

01.@(Html.Kendo().Menu()

02. .Name("Navigation")

03. .HighlightPath(false)

04. .Items(items =>

05. {

06. items.Add().Encoded(false).Text("<span class='fa fa-home'></span>").Action("Index", "Home");

07. items.Add().Encoded(false).Text("<span class='fa fa-navicon' style='padding-right:6px;'></span>Navigation")

08. .Items(item =>

09. {

10. item.Add().Encoded(false).Text("<span class='fa fa-desktop' style='padding-right:6px;'></span>Dashboard").Action("Index", "Dashboard");

11. item.Add().Encoded(false).Text("<span class='fa fa-truck' style='padding-right:6px;'></span>Shipping").Action("Index", "Test")

12. .Items(ship =>

13. {

14. ship.Add().Encoded(false).Text("<span class='fa fa-tachometer' style='padding-right:6px;'></span>Shop").Action("Shop", "Test");

15. ship.Add().Encoded(false).Text("<span class='fa fa-truck' style='padding-right:6px;'></span>Ship").Action("Index", "Test");

16. ship.Add().Encoded(false).Text("<span class='fa fa-globe' style='padding-right:6px;'></span>Track").Action("Index", "Track");

17. });

18. item.Add().Encoded(false).Text("<span class='fa fa-bar-chart-o' style='padding-right:6px;'></span>Report").Action("Index", "Reports");

19. item.Add().Encoded(false).Text("<span class='fa fa-wrench' style='padding-right:6px;'></span>Tools").Action("Index", "Tools")

20. .Items(tool =>

21. {

22. tool.Add().Encoded(false).Text("<span class='fa fa-print' style='padding-right:6px;'></span>Printing").Action("Index", "Print");

23. tool.Add().Encoded(false).Text("<span class='fa fa-image' style='padding-right:6px;'></span>Image Cleanup").Action("Index", "ImageCleanup");

24. });

25. item.Add().Encoded(false).Text("<span class='fa fa-file' style='padding-right:6px;'></span>Billing").Action("Index", "Main");

26. item.Add().Encoded(false).Text("<span class='fa fa-cogs' style='padding-right:6px;'></span>Admin").Action("Admin", "Admin");

27. });

28. })

29.)

Menu

answered on 12 Feb 2015

1 answer

261 views

[Solved] Unable to refresh datasource when initialized with Javascript Array

Hi,

We are building a mobile app and using Angular JS with Kendo UI. We also have a Worklight Adapter to make the Rest call to get JSON Response Data.
The datasource is being initialized in the Angular JS controller, by the response returned from the Adapter call. Something like

    $scope.gridOptions = {
               dataSource: {
                   data: tempData
                },
    sortable: false,
                pageable: false,
                columnMenu: true,
                height: "35rem",
               columns: [
                  { field: "CarlineName", title: "Carline Name" },
                  { field: "Today", title: "Today" },
                  { field: "PrevDay", title: "Prev Day" }
               ],
               }
           };
       };

The issue with this, when the JSON data is refreshed, I see the Adapter returning new data but the grid does not refresh and reflect the new data. Please help !

How can we make the grid refresh too ?

Grid

answered on 12 Feb 2015

2 answers

126 views

Busy Tile

Hi

Is there a possibility to influence the way the event look (changing the solid blue or green etc.)?

I would like to display events that have a "busy flag" as hatched.

Many thanks

Grid

answered on 12 Feb 2015

2 answers

113 views

Selecting just-added record is not setting value in Select control

Hi,
In this example: http://dojo.telerik.com/OcifE/63

Click on "Add Row", fill in details, then click on "Add Product".
Then, select the newly added product from the list, the editing form is not showing. With some debugging, the selectedProduct is not being set for newly created objects.

Any idea why?

Best regards
Bilal Haidar

General Discussions

answered on 12 Feb 2015

1 answer

569 views

Kendo Scheduler Datasource date format

Hi

I am loading (trying to) data from my db for the scheduler.

http://dojo.telerik.com/uNupe

I cannot find any documentation of how the date format should arrive from the database to be displayed properly.

In above example the Date() function is used like this:

dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]

I do now want to create data on the fly so how to format the date so Kendo Scheduler understands? Preferably YYYYMMddhhmmss - 20130606142023

I have also seen that in some of your examples you plug in data with date strings like this:

"Start": "/Date(1370847600000)/",
"End": "/Date(1370851200000)/",

Those appear on the 10th of June but I cannot figure out how?

Thanks

Grid

answered on 12 Feb 2015