Telerik Forums
Kendo UI for jQuery Forum
5 answers
402 views
I start my app with a listview of several states that have links like this:
example:   <li><a href="#two?st=AZ">Arizona</a><li>

My second view (or page) should be populating my div id's for:
<div id="title"></div>
<div id="img"></div>

with this ajax code:

function getUrlVars() {<br>
    var vars = [], hash;<br>
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');<br>
    for(var i = 0; i < hashes.length; i++)<br>
    {<br>
        hash = hashes[i].split('=');<br>
        vars.push(hash[0]);<br>
        vars[hash[0]] = hash[1];<br>
    }<br>
    return vars;<br>
}    <br>
<br>
var st = getUrlVars()["st"];<br>
<br>
<br>
$(document).ready(function(){<br>
  $.ajax({<br>
       method: 'GET',<br>
       dataType: 'jsonp',<br>
       success: function(data){<br>
       $.each(data, function(){<br>
              $('#title').text(this.stname);<br>
              $('#img').attr('src', 'images/states/lrg/' + this.img);<br>
              })        <br>
        }        <br>
   });<br>
});


It will populate the view if I click refresh on the browser, but how do I get this done without having to do a physical refresh each time?

Thanks,
Pete
Georgi Krustev
Telerik team
 answered on 21 Feb 2012
0 answers
137 views
I have a tabstrip with a chart on each tab. I render the charts when the tabs are selected.

How do I avoid rerendering charts when a tab is reselected?
Bjarke
Top achievements
Rank 1
 asked on 21 Feb 2012
7 answers
789 views
I've used the dev tools in IE (F12) to see what styles are being applied + looked through the theme CSS but cannot find what I need.

I would like to be able to apply the hovered style to items so they appear selected but do not know which one to apply. I've only had luck changing text and such, not the acutal styling.
Dimo
Telerik team
 answered on 21 Feb 2012
1 answer
98 views
Hi,

On grid, if we want to filter belong to a list items such as : male, female,.. how can we implement it?

Thanks,
Phuong
Top achievements
Rank 1
 answered on 21 Feb 2012
4 answers
263 views
Hi,

With the uncertainty over sliverlight, I am focusing on html 5. However, html 5 does not seem to be able to fill the void of a server-side tech like silverlight (or so I think!).

Specifcally, with kendo UI, can I stream data to charts in a real time fashion with C#? I think I saw a thread about providing data from C# to Kendo UI?

Also, I would love to see the product be = to Kendo UI in terms of features and controls (E.g. the book control).



Thanks
1zias01
Top achievements
Rank 2
 answered on 21 Feb 2012
6 answers
231 views
Hi, this is really pretty cool, but I've stumbled into a problem, and I don't know if this is a KendoUI issue that I'm not fully comprehending or and HTML5 issue.

My mobile app is presently setup to have a home page that has a listview of links to various parts of the application.  One such action is to Add a new item.

-- Home Page - (MVC Action) Home/Index
-- Add Item - (MVC Action) Home/Add

I have a NavBar div in the Add Item view with an "a" tag that links back to the home page but it never gets there.  When I hover over the Home link it shows the correct link: http://localhost:[myport]/, but it goes to: http://localhost:[myport]/Home/Add/#/Home/Index.

This is the HTML for the link on the Add Item view that should go back to the Home page:

<div data-role="navbar">
    <span data-role="view-title"></span>
    <a data-align="right"
        data-role="button"
        class="nav-button"
        href="@Url.Action("Index", "Home")">Home</a>
</div>

Is it a better practice to use KendoUI with an HTML site that communicates with a web service instead?  I just don't know if there's some sort of issue with using MVC.  It's probably the other option, which is my incompetence.  ;^)

Any help is appreciated.

Thanks,

King Wilder
King Wilder
Top achievements
Rank 2
 answered on 20 Feb 2012
2 answers
203 views
So if I have an OpenAccess Domain Model built and working how can I connect a Kendo Datasource to it? Can someone provide a code example of this? Thank you!
Burke
Top achievements
Rank 1
 answered on 20 Feb 2012
10 answers
1.7K+ views
I have the grid below. It all runs and displays 5 rows.

<script>
$(function() {
    $("#grid").kendoGrid({
    dataSource: {
        type: "json",
        serverPaging: true,
        serverSorting: true,
        pageSize: 5,
        transport:     { read: { url: "ajax.php", dataType: "json" } },
        schema:     { data: "data" },
    },
    height: 250,
  pageable: true,
    scrollable: { virtual: true },
    selectable: "multiple row",
    columns:[{field: "post_code",title: "Post Code"},{field: "address_street",title: "Address"},{field: "driver",title: "Driver Name"}]
    });
});
</script>

The json response is as below. I validated and seem to be sound.

{
    "pageSize": 100,
    "data": [
        {
            "account": "Account 1",
            "address_street": "Address Line 1",
            "post_code": "Post Code 1",
            "driver": "Driver 1"
        },
        {
            "account": "Acount 2",
            "address_street": "Address Line 2",
            "post_code": "Post Code2",
            "driver": "Driver 2"
        },
        plus 98 other.............
    ]
}

and the GET request is as below.
ajax.php?take=5&skip=0&page=1&pageSize=5.

The problem I am having problems in getting this up and running. If someone could answer the question below it would be greatly appreciated.

Question 1 - Why won't my paginate buttons show? All my CSS and JS files are linked and downloaded examples work perfectly, but still can't paginate or scroll.
Question 2 - You can see I have transport and scheme in my dataSource. If this the proper method?
Question 3 - Is my JSON response formatted correctly? Are their any further parameters which would be required to make pagination work correctly?

If some could get back to me, it would be a massive help.

Thanks in advance,
Abdul.
Maxim
Top achievements
Rank 1
 answered on 20 Feb 2012
4 answers
233 views

Given then below sample grid, that is loaded using a webservice, how do I refresh the data on an event?

as you can see I have a function called refreshGrid().  It gets an instance of the grid successfully.  I know this because the cancelChanges() call works.  But when the refresh() is run nothing happens.  I'd like the grid to re-call the webservice and reload itself.

Thank you in advance.


function refreshGrid()
{
    // get a reference to the grid widget
    var grid = $("#grid").data("kendoGrid");
    // refreshes the grid
    grid.cancelChanges();
    grid.refresh();
}
 
 
function SetWindow(val)
{
    $("#window").kendoWindow({
        title: "Async Window Content",
        content: "popup.aspx?id=" + val,
        visible: false,
        close: refreshGrid
    });
}
 
 
 
$(document).ready(function () {
 
    $('#target').click(function () {
        SetWindow(34);
        var window = $("#window").data("kendoWindow");
        window.center();
        window.open();
    });
 
 
    $("#grid").kendoGrid({
         
        columns: [
                { title: "Action", command: "destroy" },
                { field: "ID", visible: false },
                { title: "Status", template: "<A href=;pop.aspx?id=${ ID }'>${ JobRate }</a>" },
                { field: "Name" },
                { field: "JobRate", title: "Job Rate" },
                { field: "Notes" }
            ],
        editable: true, // enable editing
        toolbar: ["create", "save", "cancel"], // specify toolbar commands
        dataSource: {
            schema: {
                data: "d", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.
                model: { // define the model of the data source. Required for validation and property types.
                    id: "ID",
                    fields: {
                        ID: { editable: false, nullable: true },
                        Name: { validation: { required: true} },
                        JobRate: { validation: { required: true }, type: "number" },
                        Notes: { validation: { required: true} }
                    }
                }
 
            },
            batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
            transport: {
               },
                read: {
                    url: "JobsWebService.asmx/GetAllJobs", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.
                    contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                },
                parameterMap: function (data, operation) {
                    if (operation != "read") {
                        // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
                        return JSON.stringify({ products: data.models })
                    }
                }
            }
        }
    });
Jeremy
Top achievements
Rank 1
 answered on 20 Feb 2012
2 answers
428 views
hi,I just write like the example, my servlet have receive the upload file and wirte to the disk successfuly.but after i upload the file,it says unexpected server response.here is my script and html code:
<script type="text/javascript">
function onSuccess(e) {
var window = $("#message").data("kendoWindow");
window.center();
window.open();
window.content(e.response);
}
$(document).ready(function() {
$("#message").kendoWindow({
visible : false,
width : "400px",
height : "200px",
draggable : false
});
$("#headImg").kendoUpload({
multiple : false,
async : {
saveUrl:"${pageContext.request.contextPath}/doUpLoadHeadImg",
saveField:"headImg",
success : onSuccess
}
});
});
</script>
<input type="file" id="headImg" name="headImg" />
T. Tsonev
Telerik team
 answered on 20 Feb 2012
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
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)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
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
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?