Telerik Forums
Kendo UI for jQuery Forum
5 answers
268 views
Hi, I am trying to code functionality in WCF API which would return grid data by specifications (serverGrouping, serverFiltering, serverSorting);

My MVC code works, and it looks like this:

[AutoMapperConfigurationActionFilter(typeof(OrderDomainMvcProfile))]
[NHibernateSession]
public virtual ActionResult OrderGrid_Select([DataSourceRequest]DataSourceRequest request)
{
   var filterSpecification = KendoToSpecificationHelper.Filter<OrderDomainEntities.Order>(request.Filters);
   var sortSpecificationList = KendoToSpecificationHelper.OrderSort(request.Groups, request.Sorts);
   var groupSpecification = KendoToSpecificationHelper.OrderGroup(request.Groups);
where "KendoToSpecificationHelper" is written-on-my-own class that gets data from request and creates Specifications (see Specification pattern); 

Now I would like to code tse same functionality in WCF REST Service, which receives requests from distributed interface; The code I've just started looks like:

public OrderContract[] ListSpecifiedOrders([DataSourceRequest]DataSourceRequest request)
        {
            _ContextHelper.SetCurrentWebOperationContext();
            if (_ContextHelper.AssertContextIsNull())
                return null;
 
            try
            {
                var filterSpecification = KendoToSpecificationHelper.Filter<Order>(request.Filters);
                var sortSpecificationList = KendoToSpecificationHelper.OrderSort(request.Groups, request.Sorts);
                var groupSpecification = KendoToSpecificationHelper.OrderGroup(request.Groups);
It is very similar to MVC code, but... it is not working :/. My pure javascript Kendo Grid code below:

01.jQuery(ORDER_GRID_ID).kendoGrid({
02.           // below js code to render control....
03.           // ..............
04.            "dataSource": {
05.                    "transport": {
06.                        "read": function (options) {
07.                            getOrders(options);
08.                        },
09.                    },
10.                    "schema": {
11.                        "groups": [{
12.                            "field": "number"
13.                        }],
14.                        "data": "data",
15.                        "total": "total"
16.                    },
17.                    "pageSize": 10,
18.                    "serverPaging": true,
19.                    "serverSorting": true,
20.                    "serverFiltering": true,
21.                    //"serverGrouping": true,
22.                    "serverAggregates": true,
23.                    "error": listOrdersView.OrderGrid_Error
24.                }
25.}

When GRID reads data, it sends to a "getOrders(options)" function an object "options" with all required data; WCF correctly translates JSON to DataSourceRequest, but there is a problem with translating Sort list elements. My sort elements contains "Member" and "Dir" fields - WCF ignores Dir field, and always sets direction of sorting to "Ascending".


Is there any way to omit DataSourceRequest type parameter in a REST method, and manually create on a REST side filterDescriptors, groupDescriptors and sortDescriptors from only that JSON that Kendo Control is sending in Request? How to do that properly?
Daniel
Telerik team
 answered on 29 Nov 2013
1 answer
175 views
Working with KendoUI Mobile & Phonegap for a month or so, all good so far.   Just hoping for some advice on dynamically building tabs/views (if possible).
Basically, I would like to have different tabs/views based on the logged in user.  There could be many different combinations of tabs/views. 

Possible views/tabs: news, about, weather, video, articles, maps, (many more)

For example,
User 1 gets views/tabs: news, weather, maps
User 2 gets view/tabs: video, maps, about

Do you suggest I build the layout programmatically before the page is loaded?  Inject layout into the DOM?  Programmatically hide tabs not associated with current user?  Other ideas?

A simple example would be appreciated if what I'd like to do is feasible.

Thank you.  
Kiril Nikolov
Telerik team
 answered on 29 Nov 2013
1 answer
62 views
I'm trying to help users choose their birthdates, so it would better for them to choose first the year then month and for last the day.
So when I open the datepicker, I would like to open a year range as first values so then when a choose a year it would appear month and then day.
Is it possible?
Georgi Krustev
Telerik team
 answered on 29 Nov 2013
1 answer
185 views
See the following HTML: 

<input id="dateFor" data-role="datepicker" data-format="MMM yyyy" data-bind="value: dateFilter, events: { change: dateForChange }" class="bindable" />
here's the viewModel: 

var viewModel = kendo.observable({ dateFilter: new Date(2013,11,1)});
 
//bind
kendo.bind($('.bindable'), viewModel);

The resulting date picker shows the date as Dec 2013 in Firefox. IE and Chrome (didn't test Safari). 

If you set the month to 12, it ignores the year value and jumps to Jan 2014. 

Regards,
Jacques
Atanas Korchev
Telerik team
 answered on 29 Nov 2013
1 answer
116 views
I have a views in my Index.htm + layout containing a tabStrip. In one of my views I have a form. When I put <textarea/> in the form my layout with tabStrip disappears  (no errors reported in debug console). If I only changed <textarea/> to< input type=”text”/>, layout appears again. I need textareas in my form – how to manage it ?

This works:
< div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">

        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <input id="twrNazwa" type="text" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
< !--
the common layout for all views -->
< div data-role="layout" data-id="main"
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

 

This crushes:

  
< div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">
        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <textarea id="twrNazwa" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
< !--
the common layout for all views -->
< div data-role="layout" data-id="main">
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>
Radoslaw
Top achievements
Rank 1
 answered on 28 Nov 2013
1 answer
91 views

I have a views in my Index.htm + layout containing a tabStrip. In one of my views I have a form. When I put <textarea/> in the form my layout with tabStrip disappears  (no errors reported in debug console). If I only changed <textarea/> to< input type=”text”/>, layout appears again. I need textareas in my form – how to manage it ?

This works:
<div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">

        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <input id="twrNazwa" type="text" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
<!--
the common layout for all views -->
<div data-role="layout" data-id="main"
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

 

This crushes:

  
<div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">
        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <textarea id="twrNazwa" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
<!--
the common layout for all views -->
<div data-role="layout" data-id="main">
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>
Radoslaw
Top achievements
Rank 1
 answered on 28 Nov 2013
3 answers
687 views
Has anyone tried to use the Kendo Slider to choose between date ranges?  

Currently I am using month long millisecond steps and the tool tip template to display the date ranges.  However, I am having trouble updating the tick values using the format option.  

Does anyone know how to format a number to date string using only a kendo format string? 

Or does anyone know how to using templates or JS in the slider format string?

Iliana Dyankova
Telerik team
 answered on 28 Nov 2013
1 answer
184 views
I have an application where I want a window pinned, so it loads in the center of the viewport whenever it is opened.  But I also want the window to be draggable, so the user can slide it out of the way to look at the data underneath it.  This works great when the browser is scrolled all the way to the top, but there is differing behavior in different browsers when scrolled down:

In IE10, the window opens in the middle of the screens and stays pinned when I scroll, but if I try to drag the window, it immediately moves down the same number of pixels as the browser is scrolled (if I'm scrolled down 50 pixels, the window jumps down 50 pixels lower than my mouse pointer), almost as if the math to calculate the window position when dragging isn't being done right.

In Chrome, the window drags correctly, but when it opens up it's not centered on the screen (if scrolled down when opening).  It is positioned down, roughly the same number of pixels the browser is scrolled down.

Has anybody else run into this issue?  Is this a configuration issue on my end or is it a bug in the Kendo Window widget?

Kendo Version: Q3 2012  (Just downloaded today)
Browser Version: IE10 and Chrome 31 on Windows 7
jQuery Version: 1.8.2
Alexander Popov
Telerik team
 answered on 28 Nov 2013
3 answers
5.7K+ views
I notice that when a value is long and unwrappable and the column is narrow the value is display with ellipsis ... to indicate there is more to see if the column is widened.

Is there a way to have the grid always use ellipsis and not wrap cell content?

INFO LOOKS LIKE
THIS BY DEFAULT

want

INFO LOOKS LIKE ...

Thanks,
Richard
Mike
Top achievements
Rank 1
 answered on 28 Nov 2013
1 answer
219 views
I have a grid that has a memo field (+ 5 other fields).    I want to allow the inline editing of that field using the kendo editor - is this possible?  Do you have any samples?

Or, I would like to create a popup window with the text of the cell populated into it for editing?  Any samples of that approach?  
Alexander Valchev
Telerik team
 answered on 28 Nov 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?