Telerik Forums
Kendo UI for jQuery Forum
4 answers
331 views

I am just getting started with Kendo and am very intrigued by what has been put together thus far.  

At the moment, I am trying to better understand the use of the Grid widget and binding to an external source, but I keep running into conflicting answers in this forum.

What I want to do is to bind to a standard web service (not JSON).   

Perhaps I am not understanding this completely, but it seems that in some discussions, people say this is not possible (http://www.kendoui.com/forums/framework/data-source/bind-to-remote-xml.aspx), but then I see other postings saying that it is (http://www.kendoui.com/forums/ui/grid/grid-data-binding-to-xml.aspx).

Either way, I cannot seem to get it to work, in fact, it doesn't even seem to hit my web service at all.   Can someone shed some light on this?

Here is my code:

<script>
    var dateRegExp = /^\/Date\((.*?)\)\/$/;
 
    function toDate(value) {
        var date = dateRegExp.exec(value);
        return new Date(parseInt(date[1]));
    }
 
    var esData = new kendo.data.DataSource({
        transport: {
            read: { url: "http://localhost/esplanning/esweb.asmx/EmployeeList", type: "xml" }
        }
    });
     
    $(document).ready(function() {
        $("#grid").kendoGrid({
            dataSource: esData,
            schema: {
                type: "xml",
                data: "/EmployeeListResponse/Results/RowSet/Rows"
            },
            height: 250,
            filterable: true,
            sortable: true,
            pageable: true });
    });
</script>


And my corresponding XML data:

<?xml version="1.0" encoding="utf-8"?>
    <soap:Body>
        <EmployeeListResponse xmlns="http://tempuri.org/">
            <Results xmlns="" CubeName="Employee" ViewName="EmployeeList">
                <Scenario DimName="Scenario" ID="Working Budget" Name="Working Budget" />
                <EntityDept DimName="Entity-Dept" ID="1110-3030" Name="1110-3030" />
                <ProductLine_s DimName="Product Line_s" ID="1020" Name="Aviation Electronic Solutions" />
 
                <RowSet ColDims="Employee_m">
                    <Rows IsUpdated="false">
                        <Employee Name="All Employees - All Employees" DimName="Employee" ID="All Employees" IsUpdated="false" EmployeeName="All Employees">All Employees - All Employees</Employee>
                        <Position Name="Current" DimName="Position" ID="1" IsUpdated="false">Current</Position>
                    </Rows>
                    <Rows IsUpdated="false">
                        <Employee Name="Rai, Colleen - 0000000702" DimName="Employee" ID="0000000702" IsUpdated="false" EmployeeName="Rai, Colleen">Rai, Colleen - 0000000702</Employee>
                        <Position Name="Current" DimName="Position" ID="1" IsUpdated="false">Current</Position>
                    </Rows>
                    <Rows IsUpdated="false">
                        <Employee Name="Romero, Walter - 0000000806" DimName="Employee" ID="0000000806" IsUpdated="false" EmployeeName="Romero, Walter">Romero, Walter - 0000000806</Employee>
                        <Position Name="Current" DimName="Position" ID="1" IsUpdated="false">Current</Position>
                    </Rows>
                </RowSet>
            </Results>
        </EmployeeListResponse>
    </soap:Body>
</soap:Envelope>

Rosen
Telerik team
 answered on 12 Dec 2011
3 answers
141 views
Hi,

I'm not sure if this is possible, but, Can I add the KendoUI ComboBox widget to an ASP.NET DropDowList?

According to the KendoUI Documentation is possible to create a combobox from existing select HTML element:

<!-- HTML -->
<select id="combobox">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>

So, if I have a ASP.NET DropDowList:

<asp:DropDownList ID="DropDownList2" class="combobox-kendo" runat="server">
    <asp:ListItem>A</asp:ListItem>
    <asp:ListItem>B</asp:ListItem>
    <asp:ListItem>C</asp:ListItem>
</asp:DropDownList>

and if in a browser is converted to:

<select name="DropDownList2" id="DropDownList2" class="combobox-kendo">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
and, according to the KendoUI documentation, I should add:
$(document).ready(function(){
     $("#combobox").kendoComboBox();
 });
Then..
<script type="text/javascript">
        $(document).ready(function () {
            $(".combobox-kendo").kendoComboBox();
        });
</script>
it should work, right?

In VST2010 when I debug the ASP.NET page, IE9 show me the next error:
Error: 'jQuery' is undefined in the kendo.all.min.js file...

Any idea what could be the problem?
John
Top achievements
Rank 1
 answered on 12 Dec 2011
0 answers
124 views
Hi,

My x values are msec since epoch and I wish display it on x-axis and tooltip like hh:mm for instance with a function like this:
function parseDateTime(epoch){
    var date = new Date(epoch);
    return date.getHours() + ':' + date.getMinutes();
}

And with a chart configuration like this:
//...
tooltip: {
    visible: true,
    format: "{1:N2} m3 @ " + parseDateTime(xValue),
}
//...

Unfortunately I'm not able to retrieve the x value. The '{0}' joker may not be useful in such case. Has someone any idea how perform this task and even is it possible?

Thanks
Yvan
Yvan
Top achievements
Rank 1
 asked on 12 Dec 2011
0 answers
77 views
Just wondering... :)
sitefinitysteve
Top achievements
Rank 2
Iron
Iron
Veteran
 asked on 11 Dec 2011
0 answers
158 views

This has been solved.
I have made the following changes and it now works.  here are the changes:
// change from:
    mainTabs.select('#' + mainTabActive);
    themeTabs.select('#' + themeTabActive );
    mainTabs.reload('#' + mainTabActive );
 
// to this:
 
        mainTabs.select(mainTabs.tabGroup.children('#' + mainTabActive));
    themeTabs.select(themeTabs.tabGroup.children('#' + themeTabActive ));


Below is my code.
I have a tab within a tab.
When I click on a tab I save the index to the local storage (thanks HTML5).  Then when I reload I want to set the tabs back to what they were.  I can set either tab OK, but if I try to set both I get redraw issues.

Here is the code.
$jQ = jQuery.noConflict();
 
$jQ(document).ready(function($) {
 
    /*    TABS SECTION  */
    var mainTabs =$('#tabs').kendoTabStrip().data("kendoTabStrip");
    var themeTabs = $('#theme-tabs').kendoTabStrip().data("kendoTabStrip");
     
    var mainTabActive = $.jStorage.get("mainTab");
    var themeTabActive = $.jStorage.get("themeTab");
 
    mainTabs.select('#' + mainTabActive);
    themeTabs.select('#' + themeTabActive );
    mainTabs.reload('#' + mainTabActive );
     
        //MainTab
        $( '#tabs' ).click(function(e) {
            var selectedTab = e.currentTarget.id;
            $.jStorage.set("mainTab", selectedTab);
        });
         
        //theme tabs
        $( '#theme-tabs' ).click(function(e) {
            var selectedTab = e.currentTarget.id;
            $.jStorage.set("themeTab", selectedTab);
        });
});
Damon
Top achievements
Rank 1
 asked on 11 Dec 2011
11 answers
165 views
I suggested to a client that they look at Kendo UI for development. They have a major LOB app on Windows (WPF/Silverlight/WinForms) and are looking to jump to a similarly rich UI platform. I suggested looking at Kendo UI and here is their response:

"I looked at their site and widgets. Very primitive. For example, I don't see any events triggered on a cell in the grid widget. I also don't see any provision for different cell types in the grid. Combo, button, masked edit, etc."

Any advice for developers coming from rich UI environments and looking to replace UI with similar richness?
Alec
Top achievements
Rank 1
 answered on 10 Dec 2011
0 answers
76 views
Hello hello ...

I just got a look-see at Kendo UI, looks nice and I was impressed enough to take it to the first step -- Put a few localhost pages together and see how I like it and if it is enough of a step-forward from jQuery or Dojo to put real-time into this thing-o.

I reckon that is going to be a common theme, and imhx [in my humble eXperience] ... most of us go through this when we see a new framework or tool with some potential.  So I started this thread for YOU to add your "next step forward" to the forum thread.  Hopefully people like me (but sometimes with more time, than I had this weekend) can answer your query and we will all do better-er. .... Why no yes?  Here's my 'thing' ...

  • Assemble different widgets on a splitter page.

So I made a page from the Splitter demo -- With the intention to put a Menu or Treeview in the left-hand panel.  I was looking to assemble a page from different panels with a different widget in each.  When I load that simple idea as page the menu or treeview (doesn't matter) only shows as a HTML mark-up and not showing as a Kendo widget.

I'd like it if someone or me finds out how to to something simple like that -- Combining Kendo widgets?  My second curiosity, is to figure out how to load that left-hand splitter with a menu or treeview thing via ajax.

Really; I wanted to put three or four of these coool loooooking wiiiiidegets on-screen ensemble.  It doesn't seem to be so sweet to effect that.  I worked that I need to get an element loaded before asking a jQuery or Kendo element to work with it.

I'm interested as a beginner -- What are the effective and simple ways to assemble a page-layout using widgets, static content, and/or ajax loads?

That's my beginner question ...

ADD your question ... !

Many thanks ... Will

Will
Top achievements
Rank 1
 asked on 10 Dec 2011
1 answer
372 views
Hi - Kendo UI looks great.

Is there an overall CSS/HTML framework that can work with it, like 960, Blueprint, YUI or Zurb's Foundation??  I don't want my template grids and CSS to fight with Kendo UI.

thx
Arik
Top achievements
Rank 1
 answered on 10 Dec 2011
0 answers
112 views
I have looked through all the examples and tried many iterations and am unable to get my groups to collapse.
var localDataSource = new kendo.data.DataSource({
               data: skills,
               schema: {
                   model: {
                       fields: {
                           CatId: { type: "number" },
                           SkillCat: { type: "string" },
                           Skill: { type: "string" },
                           IsCorrect: { type: "string" }
                       }
                   }
               }
  
           });
           var grid = $("#grid").kendoGrid({
               dataSource: localDataSource,
               columns: [
                   { field: "Skill" },
                   { field: "IsCorrect" }
                   ],
               height: 470,
               pageable: true,
               scrollable: true,
               dataBound: function () {                  
                   localDataSource.group({ field: "CatId" }); 
                   grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row:first"));
                   for (i = 1; i <= 6; i++) {
                       grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row").eq(i));
                   };                    
               }
           });

I also need to have my group headers changed to SkillCat value. Can I do this with templates? I haven't tried that yet.
Jana
Top achievements
Rank 1
 asked on 09 Dec 2011
1 answer
50 views
We were really hoping for a complete solution when we purchased Kendo.  For interactive tables, we currently use datatables.  It seems as if the way the Kendoui grid is implemented, it eliminates attributes of the table cells.  For instance when this code is viewed in firebug:
 '<tr><td id="prod1234Name" class="red">bananas</td></tr>'
firebug shows that all attributes were gone:
 '<tr><td>bananas</td></tr>'

Because our application acts upon various cell via the elements attributes, this is a non-starter for us. 

We then thought maybe we could 'Jimmy-It' by wrapping the content in a span:
 '<tr><td><span id="prod1234Name" class="red">bananas</span></td></tr>'
That failed as well and rendered the span on the page as text.

Why would being able to add attributes to the cells in a table break the GRID?



Dimo
Telerik team
 answered on 09 Dec 2011
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
Drawer (Mobile)
Drawing API
Globalization
Gauges
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?