Telerik Forums
Kendo UI for jQuery Forum
1 answer
402 views
Hi, 

There is already a post explaining how to use the new  masked textbox control for inline editing, however our needs are a little bit different.

Is there a way to use the masked textbox for formatting a phone number in a readonly grid? Kendo custom formats don't support phone formatting.

For the example below, (which also supports reordering the grid rows), we'd like to have the same appearance as in the attached image.
http://jsbin.com/teqidida/7/edit 


Please note one constrain, I'd like to avoid using a Template function for defining the format, as suggested in http://www.telerik.com/forums/kendo-tostring-not-working-as-expected

Thanks, I'll appreciate if you can point me to the right direction.

-Felipe.
Georgi Krustev
Telerik team
 answered on 25 Aug 2014
5 answers
235 views
Hi,

I'm developing an application using the map widget and the map requires a second click to load completely. The map opens up in a dynamically added splitter pane after the user clicks on an adjacent listview row.

Currently, when the map opens up in the second pane, only a part of it is visible in the pane. Clicking on the map causes the entire widget to display correctly. The desired behaviour is that the map would load completely when triggered by the list vie select event.

Here's some sample code and an image is attached below. This code is from the listview change function.

var menuDiv = jQuery("<div id = 'mapControlMenu'></div>");
                        var mapDiv = jQuery("<div id='map'></div>");

                        this.mapcontrolmenu = new MapControlMenu(menuDiv);
  
                        this.gpsviewer = new GPSViewer(mapDiv);

                        var parentSplitter = self.element.parent("#splitter").data("kendoSplitter");

                        // append a 100px collapsible pane
                        var newPane = parentSplitter.append({
                            size: "50%",
                            collapsible: false,
                            min: "50%",
                            max: "50%"
                        });

                        newPane.append(menuDiv);
                        newPane.append(mapDiv);
Please advise.

Thanks!
Andre




T. Tsonev
Telerik team
 answered on 25 Aug 2014
2 answers
217 views
I have an autocomplete control to call server code to get databack, from the server response, I see the data is passed back correctly, however, it's not populating the list, it shows "loading" icon forver, any idea.

Here is how I configure

  <input id="institutionAutoComplete" 
           data-role="autocomplete"
           data-placeholder="Type an institution name "
           data-min-length="4"           
           data-value-primitive="true"
           data-text-field="Name"
           data-bind="value: selectedInstitution,source: institutions" />
    <br />


var degreeVm = kendo.observable($.extend({
            institutions:new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '@Url.Content("~/CommonData/GetInstitutionList")',
                        data: {
                            name: function(){
                                return $("#institutionAutoComplete").data("kendoAutoComplete").value();
                            }
                        },
                        dataType: "jsonp"
                    }                    
                },
                schema: {
                    data:function(data) {
                        return data;
                    }
                }
            }),
},@(Html.ToJson(Model)))); Here is the data I received back from server
0: {Id:11, Name:The Ohio State University, InstitutionIdentifier:810, City:null, StateId:null,…}City: nullCountryId: 0Id: 11InstitutionIdentifier: "810"Name: "The Ohio State University"StateId: null








Georgi Krustev
Telerik team
 answered on 25 Aug 2014
1 answer
204 views
Hi,

After a few hours of searching the interwebs I'm forced to ask it here in the hope someone points me to a very obvious page that explains it all. Is there an overview of all possible values (ui elements) that can be initialized with mvvm via the data-role attribute? 

For now I could find the ui-elements that I needed in the demo's/docs but now I run into a needed component that I cannot find. If an ui-element has no mvvm bindings (or is not translated for this construction) is it possible to create it myself?

I want to use the "colorpalette" inside the mvvm model and eventually pass my own palette to it.

Thanks in advance!
Atanas Korchev
Telerik team
 answered on 25 Aug 2014
2 answers
129 views
I notice if I try to touch and hold on text in a Kendo mobile view the copy and paste features don't come up, at least on Android.  Is there a reason for this?

Scott
RES
Top achievements
Rank 1
 answered on 25 Aug 2014
5 answers
1.0K+ views
Hello!

I have this little problem, I have huge amounts (260k +) combined with very little amounts (0,0001) in one chart, and sometimes in the first screen I get only very little amounts. The problem is with these very low amounts, my value Axis max value is also very very small, I wish to have a min value for the "max" attribute of my value Axis.

For example when I have lots of values that are 1 < x < 0, I want to see no bars on my chart, but with current options I see full bars, and value axis max value at 0,0002 something. Check the attached photos.

I wish to start with a default max value, but when I get higher values, I wish it to be updated. I used the max attribute for the valueAxis, but with that I cannot get to see my very high value data. Please find a solution to this conundrum.

Thanks and hope to hear back from you asap
T. Tsonev
Telerik team
 answered on 25 Aug 2014
1 answer
146 views
How do I allow for grid sorting by clicking on the grid headers if serveroperation is true.  I have a complex grid filtering and I need to use serveroperation(true)

Best Regards,
Mark Kilroy
Mark
Top achievements
Rank 1
 answered on 24 Aug 2014
0 answers
779 views
THIS IS NOT A QUESTION

I just wanted to give back and maybe help someone else before they wasted as much time as I have :)

Attached is my general all purpose read and update a grid ajax page written in php

it'll parse any filter thrown at it  ( i think ) do server side paging ( MSSQL ) and handle Sorting on the backend

If you have suggestions or better ways PLEASE let me know...

<?php
header("Cache-Control: No-cache");
// THIS IS MY SAMPLE AJAX RESPONSE PAGE FOR ANY GRID I CREATE
 
//Database Connection
$serverName = "HOSTNAME";
$connectionInfo = array( "Database"=>"DBNAME", "UID"=>"DBUSER", "PWD"=>"DSPASSWORD", 'ReturnDatesAsStrings'=>true );
$DEVconn = sqlsrv_connect( $serverName, $connectionInfo );
if( $DEVconn === false ) {
     echo "Connection could not be established.<br />";
     die( print_r( sqlsrv_errors(), true));
}
 
// Define the Default Sort Order if nothing is sent from the grid
if ( !isset( $_REQUEST['sort'][0]['field'] ) ) { $_REQUEST['sort'][0]['field'] = "EmployeeID"; }
if ( !isset( $_REQUEST['sort'][0]['dir']   ) ) { $_REQUEST['sort'][0]['dir'] = "asc"; }
 
/*
 
Parse the kendo passed filter info and make a sql server where clause out of it
Example One: READING
 
read transport config in the grid ...
    read: {
        url: "ajaxdata/grid_governance.php",
        dataType: "json",
        type: "POST",
        data: function() {
            return {
                action: "ReadGrid"
            }
        }
    },
 
Using that the grid sends this to this page...
 
    action:ReadGrid
    take:50
    skip:0
    page:1
    pageSize:50
    filter[logic]:and
    filter[filters][0][field]:UserDeviceCount
    filter[filters][0][operator]:eq
    filter[filters][0][value]:1
    filter[filters][1][logic]:or
    filter[filters][1][filters][0][field]:Office
    filter[filters][1][filters][0][operator]:gt
    filter[filters][1][filters][0][value]:90
    filter[filters][1][filters][1][field]:Remote
    filter[filters][1][filters][1][operator]:gt
    filter[filters][1][filters][1][value]:90
    filter[filters][1][filters][2][field]:Unknown
    filter[filters][1][filters][2][operator]:gt
    filter[filters][1][filters][2][value]:90
 
And this page generates this SQL ...
 
    DECLARE @Page INT = 0;
    DECLARE @PageSize INT = 50;
    WITH    UNPAGED
              AS (
                   SELECT
                        *
                      , COUNT(*) OVER ( ) AS Counter
                      , ROW_NUMBER() OVER ( ORDER BY EmployeeID ASC ) AS RowNumber
                    FROM
                        TABLENAME
                    WHERE                   
                        UserDeviceCount = '1'
                        AND ( Office > 90 OR Remote > 90 OR Unknown > 90 )
                 )
         SELECT * FROM [UNPAGED]
            WHERE [RowNumber] BETWEEN ( @Page * @PageSize + 1 ) AND ( @Page * @PageSize + @PageSize )
 
And sends this JSON back to the grid
 
{"data":
    [
        { "HostID":1573336,"UserID":1268510,"EmployeeID":20264,"Counter":13763,"RowNumber":"1"},
        { "HostID":5646467,"UserID":1268510,"EmployeeID":20264,"Counter":13763,"RowNumber":"2"},
        { "HostID":1237364,"UserID":1268510,"EmployeeID":20264,"Counter":13763,"RowNumber":"3"},
    ],
    "total": 13763 ,
    "sql": "DECLARE @Page INT = 0;<br /> DECLARE @PageSize INT = 50;<br /> WITH UNPAGED AS ( SELECT * <br /> ,COUNT(*) OVER() AS Counter <br /> ,ROW_NUMBER() OVER ( ORDER BY EmployeeID asc ) AS RowNumber <br /> FROM [LCMM].[dbo].[v_HostGovernanceMainGrid] <br /> WHERE UserDeviceCount = '1' and ( Office > 90 or Remote > 90 or Unknown > 90 ) <br /> ) SELECT * FROM [UNPAGED] WHERE [RowNumber] BETWEEN ( @Page * @PageSize + 1 ) AND ( @Page * @PageSize + @PageSize )"
}
 
The Default Filter Below Is To Return Everything
*/
$where = " 1 = 1 ";
 
if ( isset( $_REQUEST['filter'] )) $where = parseFilters( $_REQUEST['filter'] );
 
// Initial count of the returned rows
$total = 0;
 
// What are we doing?
switch ( $_REQUEST['action'] ) {
    case 'ReadGrid':       
        $unpaged = "SELECT
                 *
                ,COUNT(*) OVER() AS Counter
                ,ROW_NUMBER() OVER ( ORDER BY " . $_REQUEST['sort'][0]['field'] . " " . $_REQUEST['sort'][0]['dir'] . " ) AS RowNumber
            FROM TABLENAME WHERE $where
        ";   
        $sql = "DECLARE @Page INT = " . ( $_REQUEST['page'] - 1 ) . ";
            DECLARE @PageSize INT = " . $_REQUEST['pageSize'] . ";
            WITH UNPAGED AS ( $unpaged )
            SELECT * FROM [UNPAGED]
                WHERE [RowNumber] BETWEEN ( @Page * @PageSize + 1 ) AND ( @Page * @PageSize + @PageSize ) ";
        $string=[];
        $results = sqlsrv_query( $DEVconn $sql ) or die( print_r( sqlsrv_errors(), true));
        $count = 0;
        while ( $row = sqlsrv_fetch_array( $results , SQLSRV_FETCH_ASSOC)) {
            // Only do this once
            if ( $count == 0 ) $total = $row['Counter'];
            $string[] = json_encode($row);
            $count++;
        }       
        header("Content-type: application/json");
        /*
         We also return the query itself in the response to aid in debugging...
         You just need an additional div id'd as "sql" on the calling page and add this to your datasource
 
        schema: {
            data: function(response) {
                // Populated the div with the returned sql query
                $("#sql").html( response.sql );
                return response.data;
            },
            total: "total", 
 
        */
        echo "{\"data\": [" . join( $string , "," ) . "] ,\"total\": " . $total . " , \"sql\": \"" . oneline( $sql ) . "\"}";
        break;
    case 'UpdateGrid':        
        $return = 'true';
        foreach ( $_REQUEST['models'] as $record ) {
            $sql = "EXEC [dbo].[sp_StoredProcedure]
                        @Hostid   =" . $record['HostID'] . ",
                        @UserID   =" . $record['UserID'] . ",
                        @GovHardwareActionID         ='" . $record['GovHardwareActionID'] . "',
                        @GovHardwareDecisionID       ='" . $record['GovHardwareDecisionID']."',
                        @GovHardwareRecommendationID ='" . $record['GovHardwareRecommendationID'] . "',
                        @UserHWRecommendationID      ='" . $record['UserHWRecommendationID'] . "',
                        @ManagerHWRecommendedID      ='" . $record['ManagerHWRecommendedID'] . "',
                        @FinalHWRecommendationID     ='" . $record['FinalHWRecommendationID'] . "'
                    \n";  
            sqlsrv_query( $DEVconn $sql );
        }
        echo $return;
        break;
    default:
        break;
}       
 
function parseFilters( $filters , $count = 0 ) { 
    $where = "";   
    $intcount = 0;
    $noend= false;
    $nobegin = false;
    // Do we actually have filters or noi ?
    if ( isset( $filters['filters'] ) ) {       
        $itemcount = count( $filters['filters'] );
        if ( $itemcount == 0 ) {
            $noend= true;
            $nobegin = true;
        } elseif ( $itemcount == 1 ) {
            $noend= true;
            $nobegin = true;          
        } elseif ( $itemcount > 1 ) {
            $noend= false;
            $nobegin = false;          
        }
        foreach ( $filters['filters'] as $key => $filter ) {
            if ( isset($filter['field'])) {
                switch ( $filter['operator'] ) {
                    case 'startswith':
                        $compare = " LIKE ";
                        $field = $filter['field'];
                        $value = "'" . $filter['value'] . "%' ";
                        break;
                    case 'contains':
                        $compare = " LIKE ";
                        $field = $filter['field'];
                        $value = " '%" . $filter['value'] . "%' ";
                        break;
                    case 'doesnotcontain':
                        $compare = " NOT LIKE ";
                        $field = $filter['field'];
                        $value = " '%" . $filter['value'] . "%' ";
                        break;
                    case 'endswith':
                        $compare = " LIKE ";
                        $field = $filter['field'];
                        $value = "'%" . $filter['value'] . "' ";
                        break;
                    case 'eq':
                        $compare = " = ";
                        $field = $filter['field'];
                        $value = "'" . $filter['value'] . "'";
                        break;
                    case 'gt':
                        $compare = " > ";
                        $field = $filter['field'];
                        $value = $filter['value'];
                        break;
                    case 'lt':
                        $compare = " < ";
                        $field = $filter['field'];
                        $value = $filter['value'];
                        break;
                    case 'gte':
                        $compare = " >= ";
                        $field = $filter['field'];
                        $value = $filter['value'];
                        break;
                    case 'lte':
                        $compare = " <= ";
                        $field = $filter['field'];
                        $value = $filter['value'];
                        break;
                    case 'neq':
                        $compare = " <> ";
                        $field = $filter['field'];
                        $value = "'" . $filter['value'] . "'";
                        break;
                }               
                if ( $count == 0 && $intcount == 0 ) {
                    $before = "";
                    $end = " " . $filters['logic'] . " ";
                } elseif ( $count > 0 && $intcount == 0 ) {
                    $before = "";
                    $end = " " . $filters['logic'] . " ";
                } else {
                    $before = " " . $filters['logic'] . " ";
                    $end = "";
                }       
                $where .= ( $nobegin ? "" : $before ) . $field . $compare . $value . ( $noend ? "" : $end );
                $count ++;
                $intcount ++;
            } else {
                $where .= " ( " . parseFilters( $filter , $count ) . " )" ;       
            }     
            $where = str_replace( " or  or " , " or " , $where );
            $where = str_replace( " and  and " , " and " , $where );
        }
    } else {
            $where = " 1 = 1 ";
    }
    return $where;
}
 
function oneline( $sql ) {
    $str = $sql;   
    $str = str_replace("\n\r", '<br />', $str );
    $str = str_replace("\r\n", '<br />', $str );
    $str = preg_replace("/[ ]+/", ' ', $str );
    $str = str_replace("\t", '', $str );
    return trim($str);
}

DavidOBrien
Top achievements
Rank 2
 asked on 22 Aug 2014
1 answer
274 views
Hi,

It appears that Google maps and Bing maps both support custom overlays, which are layers that allow you to put an image layer or an HTML5 canvas layer on the map. So I was wondering whether kendo UI has support for this built into the mapping tool, I have not seen anything which might suggest that in the documentation.

For our use case, we would like to add a canvas element to the map and draw our own polylines, markers etc. on it. The coordinates of these elements would have to map to the correct latitude/longitude values on the underlying map layer. From what I have read, the google maps API provides methods that can help scale the overlay and to the map in terms of size and the element's locations.

Please advise.

Thanks!

Andre
T. Tsonev
Telerik team
 answered on 22 Aug 2014
1 answer
267 views
Hi!

I have started working with Kendo Toolbar and I have got one question...

Is it possible to create multi-levels drop down menu in such toolbar? I mean somthing like that with hidden elements on the right side in demo example, but with few more levels (http://demos.telerik.com/kendo-ui/toolbar/index). I want to use this toolbar as a reposnsive mobile navigation bar and I need such feature.

Thank you in advance for your help!
Alexander Valchev
Telerik team
 answered on 22 Aug 2014
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
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
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?