Telerik Forums
Kendo UI for jQuery Forum
0 answers
177 views

Hi All,

I am trying to render a Kendo Window from within a Template. And I am facing issues while doing so. When I use any kendo widget inside the window it’s not rendered (only the base html element is displayed) when placed in the kendo template and also only first time window gets rendered, once the window is closed next subsequent button clicks produces only the base html elements
 

If you place the same widgets outside the kendo window in the template they are rendered properly.

The scenario that I am working on is something like:

  1. If Country is Non-US, then the “Select” button shall not show up
  2. If I select US as country, a Select button appears which allows me searching the country by ZipCode
  3. For searching we is opening a Kendo window, with its title set to the US State Name
  4. Once the Window opens a user can perform a search for the Zip Codes (Searching feature currently not Implemented)


I have created a JSFiddle for show casing the problem I am facing. Refer URL http://jsfiddle.net/ganeshgupta/xRTbw/12/. Attached are the snap shots of the UI when I click on the “Select” button the first & second time, displaying only the Kendo Window in the first place (Without tab controls) and next time just the base controls only (No Window & Tab controls).

Kindly have a look at the same & let me know if I have a work around that can address the same.

Thanks & Regards,

Manoj Kapoor

Manoj Kapoor
Top achievements
Rank 2
 asked on 06 Apr 2012
3 answers
137 views
I have a chart with 5 series - 2 area series and 3 line series, but the area is showing up on top of the lines.  Is there a way to control the order the series get drawn?

Thanks,
Sara
Iliana Dyankova
Telerik team
 answered on 06 Apr 2012
1 answer
1.4K+ views
Hi,

I have a kendo grid. And i am using filters on all the columns. Suppose i filtered on some column and did not clear it. Now, when i reload the grid, i want to clear the filter.I dont want to preserve the filtered stated. If i don't clear it, then the new data is getting rendered only when i clear the filter(as it doesn't have any row matching the filter search criteria). I am reloading the grid this way :

var grid = $("#" + gridDivId).data("kendoGrid");
        var new_data = gridData;
        grid.dataSource.data(new_data);
        grid.dataSource.page(1);

What should i add to achieve that?

Regards,
Khushali
Iliana Dyankova
Telerik team
 answered on 06 Apr 2012
1 answer
111 views

This shows how navigatable doesn’t work when the user navigates using the right arrow key…

Run the fiddle – then select the first column of the second row.  Hit your right arrow key two times… the grid doesn’t scroll to the right to show the City column as it should:

 Check it out: http://jsfiddle.net/NqSuS/22/ 

I tried using e.item.scrollIntoView() in  http://jsfiddle.net/ElanHasson/DtbNC/  but you still have to press spacebar to select it.

Any ideas?
Nikolay Rusev
Telerik team
 answered on 06 Apr 2012
0 answers
221 views
My css is below:
html, body
{
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
html
{
    overflow: hidden;
}

My layout is below:
<div id="splitter1" style="height: 100%; border: 0">
    <div id="top_pane"></div>
    <div id="middle_pane">
        <div id="splitter2" style="height: 100%; width: 100%;">
            <div id="nav_pane" style="padding: 5px">    //padding works well
                <div  id="nav" style="border:1px solid red;"> </div>
            </div>
            <div id="content_pane"  style="padding:5px">  //padding right works not well !!! why?
                <div id="content" style="border:1px solid red;"></div>
            </div>
        </div>
    </div>
    <div id="bottom_pane"></div>
</div>

my script is below:
$(document).ready(
    function () {
        var splitter1 = $("#splitter1").kendoSplitter({
            orientation: "vertical",
            panes: [{ size: "30px", resizable: false }, {}, { size: "20px", resizable: false}]
        }).data("kendoSplitter");
 
        var splitter2 = $("#splitter2").kendoSplitter({
            orientation: "horizontal",
            panes: [{ collapsible: true, size: "200px" }, {}]
        }).data("kendoSplitter");     
 
        var triggerResize = function () {
            splitter1.trigger("resize");
            splitter2.trigger("resize");
        }
 
        $(window).resize(triggerResize);
    }
);
Nick Wu
Top achievements
Rank 1
 asked on 06 Apr 2012
2 answers
89 views
i need to use row template and sortable features together. But it is not working. Can somebody help me how do i fix this?
My sample code is below: 
###############################################


<script src="path/to/jquery"></script> 
        <script src="path/to/kendo/all/js"></script> 
<script src="../../content/shared/js/people.js"></script>
        <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
<div id="example" class="k-content">
            <table id="people">
                <thead>
                    <th>Id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Title</th>
                    <th>Age</th>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <script id="template" type="text/x-kendo-template">
                <tr class="asdf">
                     <td>#= Id #</td>
                    <td>#= FirstName #</td>
                    <td>#= LastName #</td>
                    <td>#= Title #</td>
                    <td>#= Age #</td>
                </tr>
            </script>
            <script>
                $(document).ready(function() {
                    //initialize dropdownlist components
$("#people").kendoGrid({
dataSource: {data: createRandomData(500)},
height: 200,
sortable: true,
rowTemplate: kendo.template($("#template").html())
});
   
                });
            </script>




#############################################


Thank you!
Jesus
Top achievements
Rank 1
 answered on 06 Apr 2012
0 answers
186 views
I've integrated a Kendo splitter into SharePoint 2010.  I see the following error in the firebug console:
kendo.ui.Resizable is not a constructor
http://domain/sites/TestDeployment/Pages/_layouts/1033/STYLES/KendoUI/Web/kendo.splitter.js
Line 931

I also find that I'm unable to access my existing splitter using
var splitter = $("#mainArea").data("kendoSplitter");
where #mainArea is the ID of the div where I attached the splitter.  When I try this, I see an error in the firebug console indicating that "splitter is undefined".
$("#mainArea").height() returns the height of the div, and there is a splitter there that otherwise works.

Any ideas?  Please let me know if I can provide any other information that may help.

Thanks.
Bruce
Top achievements
Rank 1
 asked on 06 Apr 2012
0 answers
92 views
Hello.
I understand that you want to provide developers with complete framework for building html5 apps. But with the last release where you have added your own MVVM implementation we've got into troubles.
We have our own objects and can't inherit them from kendo.ObserableObject. We was adding them into kendo.Grid and evething worked. But now kendo automatically tries to wrap our objects into its own ObserableObject/ObserableArray objects. As our object have cyclic references wrapping process fails with StackOverflow exception. I wonder what's your position about using kendo with "foreign" viewModels (which weren't created by kendo.obsersable): do you suppose it to work or not? Tnx.
Sergei
Top achievements
Rank 1
 asked on 05 Apr 2012
2 answers
105 views
If I have a object with properties bound to a grid: A, B, C, D (Object Order), but columns as displayed (D, C, B, A) by changing the columns value on the gird when an item is added it seems to be added in the grid column order, not the object order, so I get a very interesting collection:

A, B, C, D
A, B, C, D
D, C, B, A

Where the first two are items retrieved from a database and the last one is added via the add button on the grid.

Needless to say when I send the data to the web service, it really doesn't like it.

I don't know if this is a Javascript problem, a WCF problem, a Kendo MVVM problem or a Kendo Grid problem. If I rearrange the object on the WCF side to list in the order I want to display things. All seems fine.

What is the best way to handle this?

Thanks
Randy
Randy
Top achievements
Rank 1
 answered on 05 Apr 2012
4 answers
802 views
Hello,

I have downloaded for testing Kendo Mobile and tried to create a simple login page but failed.
My login page has a very strange layout problem that I can't solve.

Currently I have no idea why it is impossible to create a simple login page with Kendo Mobile or what I'm doing wrong.

The code of the login page is here:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=600, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery.json-2.3.min.js"></script>
        <script type="text/javascript" src="Scripts/knockout-2.0.0.js"></script>
 
        <script type="text/javascript" src="Scripts/kendo/kendo.mobile.min.js"></script>
        <script type="text/javascript" src="Scripts/kendo/plugins/console.js"></script>
        <link href="Styles/kendo/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
     
<div data-role="view" data-layout="login" data-title="Login">
    <div data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </div>
    <div data-role="footer">
        <div data-role="tabstrip">
            <a data-icon="globe" href="#overview-cities">Login</a>
            <a data-icon="contacts" href="#overview-contacts">Contacts</a>
        </div>
    </div>
    <div id="container">
        <span>Main header</span>
        <div>
            <label for="Username">Username</label>
            <input id="Username" name="Username" type="text" />
        </div>
        <div>
            <label for="Password">Password</label>
            <input id="Password" name="Password" type="password" />
        </div>
        <div class="clear">
        </div>
        <div>
            <label for="SelectedLanguage">SelectedLanguage</label>
            <select id="SelectedLanguage" name="SelectedLanguage">
                <option value="da-DK">dansk (Danmark)</option>
                <option value="en-GB">English (United Kingdom)</option>
                <option value="fi-FI">suomi (Suomi)</option>
                <option value="de-DE">Deutsch (Deutschland)</option>
                <option value="nb-NO">norsk, bokmål (Norge)</option>
                <option selected="selected" value="ru-RU">русский (Россия)</option>
                <option value="sv-SE">svenska (Sverige)</option>
            </select>
        </div>          
        <div>
            <a input="button" data-role="button">Login</a>
        </div>
    </div>
</div>
 
<script type="text/javascript">
    window.kendoMobileApplication = new kendo.mobile.Application();
</script>
</body>
</html>

I have also attached a simple project with this page to illustrate the problem.

Can anybody help me?
Did anyone try to create a mobile login form with Kendo mobile?

Thank you very much.

Vladimir
Kamen Bundev
Telerik team
 answered on 05 Apr 2012
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?