Telerik Forums
Kendo UI for jQuery Forum
1 answer
187 views
Hi guys..Do you have nay codes for splash screen? about it will fade hide/fade after 2 seconds?
Thanks you


Keen
Iliana Dyankova
Telerik team
 answered on 05 Apr 2013
1 answer
319 views
I'm moving an application from jQuery UI to kendo UI and have trouble getting kendo autocomplete do what the jquery ui autocomplte does.

The autocomplete queries the server with 3 input paramters and returns a json array of objects:
$('#reportLocation').autocomplete({
    minLength: 4,
    source: function (request, response) {
 
        var country = $('#ddlLocationCountry').val();
 
        $.ajax({
            type: "POST",
            url: "../../ws/wsLocations.asmx/GetLocationsBySearchString",
            data: '{searchString: "%' + request.term.replace(/\ /g, '%') + '%", country: "' + country + '", includeInactive: "False"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            dataFilter: function (data) { return data; },
            success: function (data) {
                $('#locationsByPosition').empty();
                var json = $.parseJSON(data.d);
                response($.map(json, function (item) { return { value: item.LName, id: item.LId} }));
            },
            error: function (result) {
                alert('wsLocations.asmx/GetLocationsBySearchString failed: ' + result.status + ' ' + result.statusText);
            }
        });
    },
    select: function (e, ui) {
 
        var lLocationId = ui.item.id;
        $('#selectedLocationId').text(lLocationId);
 
    }
});
I can't figure how to setup/configure the kendo ui autocomplete (or combobox) datasource right.
Is the above possible?
Morten
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 05 Apr 2013
1 answer
136 views

I want to use the Sparkline functionality within a dashboard web page using the DotNetNuke 6.2 framework.

When I use the sample code snippet below within the DNN framework the height of the sparkline is rendered as 14px.  When I use the same code in a stand alone html file it renders at the specified 50px.  There are no javascript errors thrown in either case.

My only thought is that an internal error is occurring when attempting to find the height and the default render height is 14px.  Debugging the spark line java script using the minimized js files is not working for me.

HTML to render:

<div class='k-content' style='position: relative; width:400px; height:275px;'>
<table style='height: 100%; vertical-align: top;'>
  <tr>
    <td style="width:150px; text-align:middle; line-height: 50px;">
        <span id='htmlsparkline_32ac' style="width: 150px; height: 50px; "></span>
    </td>
    <td style="width:40%; text-align:left;"><span class='ads-summaryvalue'>56795</span>  
      <span>Refund</span></td>
    </tr>
</table>
</div>
 
<script type="text/javascript">
    try {
        $('#htmlsparkline_32ac').kendoSparkline({ data: [1069, 8792, 7078, 6355, 8078, 8066, 9293, 3296, 7559, 56795], type: 'area', theme: 'black' });
    } catch (e) { alert('SparkError: ' + e.message); }
</script>

Code Rendered by kendoSparkline, starting on line 02.

01.<span class="k-sparkline" id="htmlsparkline_32ac" style="width: 150px; height: 50px; position: relative; -ms-touch-action: double-tap-zoom pinch-zoom;" data-role="sparkline">
02.<span style="width: 150px; height: 14px;">
03.<!--?xml version='1.0' ?-->
04.<svg xmlns="http://www.w3.org/2000/svg" style="left: -0.81px; top: -0.83px; display: inline; position: relative;" width="150px" height="14px" version="1.1">
05.<defs id="k10027" />
06.<path style="display: block;" fill="#3d3d3d" fill-opacity="1" stroke="" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="0" d="M 0 0 L 150 0 L 150 14 L 0 14 Z" />
07.<path style="display: block;" fill="none" fill-opacity="1" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="0.1" d="M 2 2 L 147 2 L 147 11 L 2 11 Z" />
08.<path id="k10026" style="display: none;" fill="none" fill-opacity="1" stroke="#8e8e8e" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="1" d="M 2 2 L 2 11" />
09.<path id="k10000" style="display: block;" fill="#fff" fill-opacity="0" stroke="" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" d="M 2 2 L 147 2 L 147 11 L 2 11 Z" data-model-id="k10001" />
10.<g id="k10002"><g>
11.<path id="k10024" style="display: block;" fill="#0081da" fill-opacity="0.4" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" d="M 2 11 L 2 10.863 L 18.111 9.87 L 34.222 10.09 L 50.333 10.183 L 66.444 9.961 L 82.556 9.963 L 98.667 9.805 L 114.778 10.576 L 130.889 10.028 L 147 3.698 L 147 11" data-model-id="k10025" />
12.<path style="display: block;" fill="none" fill-opacity="1" stroke="#0081da" stroke-linecap="butt" stroke-linejoin="round" stroke-opacity="1" stroke-width="0.5" d="M 2 10.863 L 18.111 9.87 L 34.222 10.09 L 50.333 10.183 L 66.444 9.961 L 82.556 9.963 L 98.667 9.805 L 114.778 10.576 L 130.889 10.028 L 147 3.698" data-model-id="k10025" />
13.</g></g>
14.</svg>
15.</span>
16.<div class="k-tooltip" style="font: 12px/normal Arial,Helvetica,sans-serif; border: 1px solid rgb(0, 129, 218); left: 34px; top: -15px; display: none; position: absolute; font-size-adjust: none; font-stretch: normal; opacity: 1; background-color: rgb(0, 129, 218);">
17.<table><tbody><tr><th colspan="2"></th><tr><td>7078</td></tr></tbody></table>
18.</div>
19.</span>

On line 2 and 4 the height is set to 14px.

Any help would be appreciated.

Alexander Valchev
Telerik team
 answered on 05 Apr 2013
1 answer
641 views
Hi,

I just started using Kendo UI and am still trying to get my head around the css structure.
I am trying to make sure a multi select element is aligned to the right of it's parent div ( see image ).

The HTML code I have is as follows (where the PHP code generates the 2 multiselect widgets) and is used in conjunction with Twitter Bootstrap:
<div class="row-fluid">
    <div class="span5 tfw-right"><?php echo $this->front_mould_codes; ?></div>
    <div class="span2 tfw-center">mould code(s)</div>
    <div class="span5 tfw-left"><?php echo $this->back_mould_codes; ?></div>
</div>
the .tfw-classes are defined as follows:
div.tfw-left {
    text-align: left;
}
div.tfw-right {
    text-align: right;
}
div.tfw-center {
    text-align: center;
}
I can see using Firebug that this alignment is active, but it's not effective. I also tried changing the display to inline-block, but that didn't have the desired result either.
Maybe it's just late and I am looking at it all wrong right now, but some help would be greatly appreciated! :)
Regards,
Rinck
Iliana Dyankova
Telerik team
 answered on 05 Apr 2013
0 answers
76 views
I seem to be unable to get the virtual scrolling to work with large data sets. There seems to be a bug in the calculation of scroll position or height and the effect is different in all browsers. I have created a fiddle to demonstrate.

http://jsfiddle.net/SBxtC/

Firefox seems to max around 234000 depending on exact structure of html
Chrome around 906300
IE around @ 553400

Not sure if there is something im not overrideing correctly.

Also Ive noticed that the naigatable option dosn't work with virtual scrolling. Is there a way around this?
Oliver
Top achievements
Rank 1
 asked on 05 Apr 2013
1 answer
1.1K+ views
I'm trying to build as general a grid as possible. It has a dataSource that uses server side paging, sorting, and filtering. It all works great, at least until the server gets a request from the dataSource and has a hard time figuring out the query that it should execute.

The web server is running .NET, so the dataSource uses web methods to exchange data with the data server via a SqlConnection. The dataSource stringifies all the options very nicely but I can't come up with a general solution for how to write parameters for my web methods that can take a variety of filtering cases.

The simplest case is... simple. Without any filtering or sorting the web method just handles the paging parameters. No problems there.

Adding filtering to the mix, or even doing filtering without any other parameters, is tough. Looking at the JSON that the dataSource sends to the web server, I gather that the filter argument can be complicated. It can be a list of filters and an operation, or a list of lists of filters and operations and filters and operations, yadda yadda yadda. I've attached a tree view of a sample JSON request showing the nested filters; this is a simple case relative to what my grid will eventually have to do.

It almost looks like I need to handle each case explicitly on the server, rather than being able to write a generic filter object that will take any filter parameter sent by the dataSource. That kind of sucks. I have no problem getting the filter out in a particular case (that would be easy) but I can't seem to design a generic object that will take the filter parameter in any case.

Any help on how to represent a filter on the server in the most general case?
Petur Subev
Telerik team
 answered on 05 Apr 2013
1 answer
182 views
Today I've noticed that when using an XML DataSource in a TreeView, KendoUI complains about level method not being defined.

As far as I've seen this method is defined in Data Model but seems that for XML DataSources the code follow a different path and level is not defined.

Given the XML:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<root>
    <doc>
        <nome>fabio</nome>
    </doc>
    <doc>
        <nome>mauro</nome>
    </doc>
</root>
And the following JavaScript code for defining the grid and the datasource:
var ds = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url     : "kendoTWData.xml",
            dataType: "xml"
        }
    },
    schema   : {
        type : 'xml',
        data : '/root/doc',
        model: {
            fields: {
                nome: "nome/text()"
            }
        }
    }
});
 
$("#treeview").kendoTreeView({
    dataSource   : ds,
    dataTextField: "nome"
});
 It complains about level not being defined.

If I add into the model a level function returning any number then it works.
model: {
    fields: {
        nome: "nome/text()"
    },
    level : function () {
        return 0;
    }
}
Is this a bug or XML datasources are not supported in Kendo UI TreeView widgets?
Alex Gyoshev
Telerik team
 answered on 05 Apr 2013
1 answer
168 views
Hi,
I've been playing around with the ImageBrowser (Editor) and would love to see a variation of the ImageBrowser as a standalone widget. If I could use it without the Editor to simply select or upload an image file that would really add value to some of my applications (for which I now have to use a different tool: elFinder).

Since the ImageBrowser already exists, hopefully this would be an easy addition to the KendoUI toolset! :)
Sebastian
Telerik team
 answered on 05 Apr 2013
1 answer
192 views
I cant make the grid to update de database. i press the save button and it does nothing. 

Code for the grid: 

<!DOCTYPE html>
<html>
<head>
    <title>Customizing filter menu</title>

<link href="/styles/kendo.common.min.css" rel="stylesheet">
<link href="/styles/kendo.default.min.css" rel="stylesheet">

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/kendo.all.min.js"></script>
<script type="text/javascript" src="/js/people.js"></script>

<style>
.k-grid {
margin: 5px;
}
</style>
</head>
<body>
<div id="grid"></div>
        <script>
$(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: "data.php",
update: {
                url: "data.php",
                type: "POST"
}
                    },
       
                    schema: {
                        data: "data",
                        model: {
codmat: "codmat",
fields: {
                  codmat: { editable: false }, 
codarea:{ editable: false },
codrubro:{ editable: false },
codsubrub:{ editable: false },
secuencia:{ editable: false },
nombre:{ editable:true},
}
}
}
                },
                columns: [{ field: "codmat" }, { field: "codarea" }, { field: "codrubro" }, { field: "codsubrub" }, { field: "secuencia"}, { field: "nombre" }],

    editable: true,
navigable: true, //habilita el teclado para navegar
toolbar: ["save", "cancel"]//adds save and cancel buttons
            }); 
        });
        </script> 
</body>
</html>


Code for the database:




<?php

    $link = mysql_pconnect("localhost", "root", "") or die("Unable To Connect To Database Server");
   mysql_select_db("datos") or die("Unable To Connect To Northwind");

 
 // add the header line to specify that the content type is JSON
    header("Content-type: application/json");

    // determine the request type
    $verb = $_SERVER["REQUEST_METHOD"];

    // handle a GET 
    if ($verb == "GET") {
        $arr = array();

        $rs = mysql_query("SELECT codmat, codarea, codrubro, codsubrub, secuencia, nombre FROM mater");

        while($obj = mysql_fetch_object($rs)) {

            $arr[] = $obj;

        }
        echo "{\"data\":" .json_encode($arr). "}";
    }

// handle a POST  
    if ($verb == "POST") {

 // DISCLAIMER: It is better to use PHP prepared statements to communicate with the database. 
        //             this provides better protection against SQL injection.
        //             [http://php.net/manual/en/pdo.prepared-statements.php][4]
        // get the parameters from the post. escape them to protect against sql injection.

        $codmat = mysql_real_escape_string($_POST["codmat"]);
$nombre = mysql_real_escape_string($_POST["nombre"]);
        $rs = mysql_query("UPDATE mater SET nombre = '" . $nombre ."' WHERE codmat = " .$codmat);
if ($rs) {
        echo json_encode($rs);
    }
    else {
        header("HTTP/1.1 500 Internal Server Error");
        echo "Update failed for EmployeeID: " .$employeeId;
    }

}
 ?>

Vladimir Iliev
Telerik team
 answered on 05 Apr 2013
5 answers
1.3K+ views
Hello,
I am binding a Kendo Dropdownlist from a remote datasource just like in this example:
http://demos.kendoui.com/web/dropdownlist/remotedatasource.html

My problem is that I can't figure out a way to set the width of the dropdownlist automatically based on the largest item. Instead of having an ellipsis on the selected item or have the text wrap in the drop down options (like in the example above), I want the dropdowns width to auto adjust based on it's longest item just like a regular drop down list. Setting the css width to auto did not work for me. Setting it to 100% stretches the dropdown accross the page which i don't want either.

Is there a way to set the dropdowns width to adjust automatically based on it's items?

Thanks in advance!
Jeff
Top achievements
Rank 1
 answered on 05 Apr 2013
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
Drag and Drop
Application
Map
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
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
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?