Questions on Kendo UI for jQuery Forum

5 answers

190 views

Hi,
I am facing issues when dropping specific shapes, I mean by specific, some shapes that are drawn using svg paths; in this case, the dropped shape is either dropped as rectangle or failed to be dropped.
I am using the following code:
$("#diagram").kendoDropTarget({
drop: function (e) {
var item, pos, transformed;
if (e.draggable.hint) {
item = e.draggable.hint.data("shape");
pos = e.draggable.hintOffset;
pos = new Point(pos.left, pos.top);
var transformed = diagram.documentToModel(pos);
item.x = transformed.x;
item.y = transformed.y;

diagram.addShape(item);
}
}
});

Thanks in advance.

Diagram

answered on 17 Mar 2015

1 answer

7.4K+ views

[Solved] Get filtered data from paged grid

What is a good way to get datasource results from a grid with paging and filtering applied and you want only the filtered out results?
I see many people asking this kind of question but not many real thorough answers.
datasource.data() gives you everything and datsource.view() gives you the current page you can see in the grid.

Do you have to calculate total / pagesize and iterate for each page...?

Data Source

answered on 17 Mar 2015

1 answer

1.5K+ views

Get the filtered rows from a grid?

Hi there,
I am using a kendo ui grid to let the user filter down a large dataset - and I am interested in the resultant row.

Because the dataset is large, I am using these options:

serverPaging
serverFiltering

Once the user is finished they need to press a button and I need to get the results from the grid ... even if they extend over more then 1 page.

I expected this would be an easy task to get the datasource object and re-query the data somehow for the number of pages.

The pageSize is known, and the total number of rows after filtering is already known:
datasource.total()

So what I am missing is the call to the datasource to get a particular page of filtered data...

This question has already been asked in the DataSource forum and the answer provided by Iliana is shown to not be working for remote data:
http://www.telerik.com/forums/get-filtered-data-from-paged-grid
(It only gets the filtered results from the first page)
With a quick demonstration of the problem and Illiana's solution here: http://dojo.telerik.com/@JBoman32768/EKUGe

Any help on this would be really appreciated - as I really don't want to have to write my own filter UI, or load the complete dataset into the browser.

Cheers,
James.

Grid

answered on 17 Mar 2015

7 answers

1.7K+ views

Autocomplete with multiple dataTextField

Hello,
I need to set a multiple dataTextField property on an autocomplete, because I need the suggestion only on certain properties of the objects contained in the datasource.
I've seen that the dataTextField property accept only a string and not an array of strings.
There is another property to obtain what i need? Or a workaround?

Thanks a lot.
Fabio

AutoComplete

answered on 16 Mar 2015

5 answers

405 views

Search in an Autocomplete box, then popup a Window with the Search results in a Grid

I am using ASP MVC 5, Razor syntax, the Telerik HTML Helpers and the latest Kendo UI tools.
I would like to create an AutoComplete search box that pops up a Window with a Grid of the search results in it.
I have code that works for the AutoComplete box:

@(Html.Kendo().AutoComplete()

.Name("mySearchBox")

.MinLength(3)

.DataTextField("Description")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("AutoComplete", "Home")

.Data("getAutoCompleteValue");

}).ServerFiltering(true);

})

)

<script type="text/javascript">

function getAutoCompleteValue() {

//alert("frak me");

return { term: $("#mySearchBox").val() };

}

</script>

I have a Partial View that displays the search results in a Grid.

@using Experiment6.Web.Models.Home;

@model IQueryable<SearchResult>

<div id="searchResultsList" role="grid" class="panel panel-body" >

@if (Model.Count() != 0)

{

<div><h3>Search Results</h3></div>

@(Html.Kendo()

.Grid<Experiment6.Web.Models.Home.SearchResult>()

.Name("Grid")

.DataSource(datasource => datasource .Ajax() .Read(read => read .Action("GetSearchResults", "Home") .Data("getAutoCompleteValue")))

.Pageable(p => p.ButtonCount(5))

.Sortable()

)

}

</div>

I cannot figure out how to define the Window and wire it up properly.
Here's what I have for the Window:

@(Html.Kendo().Window()

.Name("searchWindow")

.Title("Search Results")

.Visible(true)

.Actions(x => x.Close())

//Neither of these work:

//.Content(Html.Partial("_SearchResults", Model.SearchResults))

//.LoadContentFrom("ShowSearchResultsAjax", "Home", "getAutoCompleteValue"))

)

Any help you can give me showing how to wire up these three controls (AutoComplete, Grid, Window) would be appreciated.
Thanks,
Simon

Window

answered on 16 Mar 2015

3 answers

217 views

Sparkline clipping with negative values and a max of 0

Hi,

I have an issue in the current Kendo 2014.3.1411 with the my sparklines getting clipped when there are data points of negative value and the max value overall is zero. Please see this options object:

{
"data":[-1,0,0,0],
"chartArea":{
"background":"",
"width":125
},
"tooltip":{
"visible":false
},
"axisDefaults":{
"visible":false,
"majorGridLines":{
"visible":false
}
},
"categoryAxis":{
"crosshair":{
"visible":false
}
},
"seriesDefaults":{
"line":{
"color":"#5889AD",
"width":1
},
"markers":{
"visible":true,
"size":1,
"border":{
"color":"#d52b1e",
"width":2
}
}
}

As you can see this is not a great set of data but is something our application is capable of trying to display. Even if you change that -1 to be say -100 the rendering will still be clipped. If you make the values that are 0 to be say 0.1 the rendering works fine.

I believe this to be a defect and would like to bring it to your attention and others who may have the same problem. I have worked around ours by detecting negative values and changing the zeros to be slightly greater than zero.

Thanks,
Rob.

Charts

answered on 16 Mar 2015

1 answer

255 views

Kendo Razor Grid Textbox Validation

Below is my Grid, I am trying to add zip codes to the grid. When I click on Add New Zip Code, I am getting textbox inline. I want to validate that zip Code. User can enter 55555 or 55555-1111. How can I do this ?

@(Html.Kendo().Grid(Model)
.Name("ZipGrid")
.HtmlAttributes(new { @class = "GridStyle" })
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden();
columns.Bound(p => p.ZipCode).Width(250);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ToolBar(toolBar =>
{
toolBar.Create().Text("Add Zip Code");
})
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("onError"))
.Model(model => model.Id(p => p.Id))
.Create(create => create.Action("AddZipCode", "Manage"))
.Read(read => read.Action("GetZipCode", "Manage"))
.Update(update => update.Action("UpdateZipCode", "Manage"))
.Destroy(Destroy => Destroy.Action("AddZipCode", "Manage")).ServerOperation(false)
)
)

Grid

answered on 16 Mar 2015

3 answers

2.4K+ views

DataSource property update and refresh?

I am trying to do something very simple in concept but am having no luck whatsoever in getting it to work. All I would like to do is update a treelist datasource via an ajax call that passes a different parameter each time the user selects a new user id from a dropdown list.

Changing the dropdown list choice simple calls the data source again with the new parameter. I am finding that my attempts to modify the transport options via javascript won't be resubmitted. That is I can see via the debugger that I have changed transport options read/url but I can get the datasource to refresh by using setDataSource() or fetch(). I don't know if there is a correct sequence of options to change but this is quite frustrating.

The treelist is essentially a hierarchical list of records specific to the user selected in a drop down list. All I want to do is change that user and remotely databind again to refresh the grid. Why is this so difficult?

Thanks!

TreeList

answered on 16 Mar 2015

1 answer

3.0K+ views

Export to Excel - Datetime Format

Hello @all,

if i display data in the grid all looks fine, e.g. a date value: 27.01.2015 - 08:49:42
I use this code for display and formatting:

fields: {
...
date_time: { type: "date" }

columns: [
...
{ field: "date_time", title: "Date/Time", format: "{0: dd.MM.yyyy - HH:mm:ss}", width: "160px" }

But when i press "Export to Excel" the datetime value is display as: "27.01.2015". If i double click into a datetime cell then the value is display correctly as "27.01.2015 08:49:42".
How can i change this that the hole datetime value will be displayed from the beginning?

Thx

Grid

answered on 16 Mar 2015

3 answers

508 views

Angular reset form

I am just starting out with Kendo so bear with me.. I have a typical angular form. I have only one kendo component in it (an autocomplete widget). Everything works fine but when I reset the form and model bound to the form that particular field retains its value.

Here is how it is defined

<div class="form-group">