Telerik Forums
Kendo UI for jQuery Forum
2 answers
159 views
Hello:

In the following example, the 1st popup receives a dynamic passed ID value, (use the Refresh() ), whereas the 2nd popup uses the fixed ID value.  There is no difference displaying these 2 popup shown in the Browser, all have scrollbars, and scroll correctly.  

However, when the website (MVC4 razor) is access in tablet, i,e. iPad, the 1st popup does NOT scroll, it moves with the background, and anything longer than 400px height, it cuts off.  the 2nd popup scrolls by itself, the background stays, this is the correct outcome, the same as Browser.

I use these two popup just to show that the Refresh() created windows doesn't scroll correctly in tablet devices.

<div id="divEleWrapper">
    @(Html.Kendo().Grid<ElementViewModel>()
.Name("gridEle")
.Columns(cols =>
{
    cols.Bound(e => e.EleNum)
        .ClientTemplate("<span id='btn_#=EleID#' onClick='showDetail(#:EleID#)'>#:EleNum#</span>");
 
    cols.Bound(e => e.EleNum)      
        .ClientTemplate("<span id='btn2_#=EleID#' onClick='showDetail2(#:EleID#)'>#:EleNum#</span>");
     
})
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("GetElements", "Rating", pi).Type(System.Web.Mvc.HttpVerbs.Get))
)
)
   
 
</div>
<div>
     
    @{Html.Kendo().Window()
        .Name("winStandard")
        .Title("Detail")
        .Visible(false)
        .Modal(true)
        .Width(600)
        .Height(400)
        .Draggable()
        .Scrollable(true)
.Render();
    }
 
    @{Html.Kendo().Window()
        .Name("winStandard2")
        .Title("Detail")
        .Visible(false)
        .Modal(true)
        .Width(600)
        .Height(400)
        .Draggable()
        .Content(@<text>
        @{Html.RenderAction("GetStandard", "Standard", new  { eID = 54805 });}
        </text>).Render();
    }
    
</div>
 
<script>
    function showDetail(eID) {
        var dialog = $("#winStandard").data("kendoWindow");
        dialog.refresh({
            url: "./Standard/GetStandard",
            data: { eID: eID }
        });
        dialog.center().open();
    }
 
    function showDetail2(eID) {
        $("#winStandard2").data("kendoWindow").center().open();
    }
 
</script>

Please advise
Thank you

HSO
Top achievements
Rank 2
 answered on 21 May 2013
9 answers
2.1K+ views
Hi:
I'm using Editable Mode: "popup", within a template, and I can't find information about how to set width of the popup windows, here is part of my code:
I need to increase the size (width of my editing PopUp Window)
$(function() {
            
            $("#grid_cate").kendoGrid({
                dataSource: {
                    transport: {
                        read: "cate_lista.php",
                        update: {
                            url: "cate_lista.php",
                            type: "POST"
                        },
                        create: {
                            url: "cate_update.php",
                            dataType: 'jsonp',
                            type: "POST"
                        },
                        destroy: {
                            url: "cate_delete.php",
                            dataType: 'jsonp',
                            type: "POST"
                        },
                         
                    },
                     
                     
                    schema: {  
                        data: "data",
                        model: {
                            id: "recid",
                            fields: {
                                catego: { validation: { required: true} },
                                estatus: { validation: { required: true} },
                                foto: { validation: { required: true} }
                            }
                        }
                    }
                     
                },
                columns: [
                    { field: "catego",title: "CATEGORIA" },
                    { field: "estatus",title: "ESTATUS", width: "100px" },
                    { field: "foto",title: "FOTO", width: "160px" },
                     
                    { command: ["edit" , "destroy"], title: "OPCIONES", width: "200px" }],
                editable: {
                        mode: "popup",
                        template: $("#popup_editor").html()
                },
                save: function(e,c){
                        e.model.set("foto",$("#uploadedFile").val());
                    },
                  
                 scrollable: true,
                 navigable: true,
                 pageable: true,
                 selectable: true,
                 sortable: true,
                 toolbar: [ "create"]
            });
             
        });
        function onSuccess(e){ 
                $("#uploadedFile").val(e.files[0].name);
        }
 
    </script>
<script  id="popup_editor" type="text/x-kendo-template"  >
             
            <div class="customClass">ESPAÑOL</div>
            <div class="k-edit-label">
                <label for="Estatus">Estatus:</label>
            </div>
                    <select option name='estatus'>
                         <option   value='Activo'>Activo</option>
                         <option   value='Pendiente'>Pendiente</option>
                    </select>
            <br>
             
            <div class="k-edit-label">
                <label for="Categoria">Categoria:</label>
            </div>
            <input type="text" class="k-input k-textbox" name="catego" data-bind="value:catego">
                 
             
             
            <div class="k-edit-label">
                <label for="Descripcion">Descripcion:</label>
            </div>
             
            <textarea cols="47" rows="6" name="descripcion"></textarea>
            <div class="customClass">INGLES</div>
            <div class="k-edit-label">
                <label for="Categoria_ing">Categoria:</label>
            </div>
            <input type="text" class="k-input k-textbox" name="catego_ing" data-bind="value:catego_ing">
            <div class="k-edit-label">
                <label for="Descripcion_ing">Descripcion:</label>
            </div>
            <textarea cols="47" rows="6" name="desc_ing"></textarea>
             
            <div class="customClass">SELECCIONAR IMAGEN:</div>
            <image src="test/${foto}" width="100"></image>
            <input name="foto" type="hidden" id='uploadedFile' data-bind="value: foto" />
            <input type="file" id="files" data-role="upload" data-async='{"saveUrl": "save.php","autoUpload": "true"}' data-success="onSuccess" name="files" />
             
                 
             
 
</script>
DJo
Top achievements
Rank 1
 answered on 21 May 2013
1 answer
114 views
 i want to put serveral widgets in a li ,  serveral widget in one line ,  multi lines in a listview, but i find  something wrong with it , is it my configure not right? for exmaple, only the first switch can be seen,the second is invisiable,  and the squence of widgets are not same as code below
<div data-role="view" id="foo"  data-title="trest1">
   <ul data-role="listview"  >
      <li>
            <span>test</span>
            <input id="slider" class="balSlider" value="0" />
            <a data-role="button">Foo</a>
            <input type="checkbox" data-role="switch" />       
            <a data-role="button">Foo</a>    
            <input type="checkbox" data-role="switch" />   
      <li>
             <a data-role="button">Foo</a>
             <a data-role="button">Foo</a>
            <input type="checkbox" data-role="switch" />       
            <a data-role="button">Foo</a>    
            <input type="checkbox" data-role="switch" />        
      </li>
 </ul>
Iliana Dyankova
Telerik team
 answered on 21 May 2013
2 answers
107 views
Hi Guys 

Hope someone can help, i am having the most basic of issues with the kendo grid.  I have followed the example for the Kendo MVC grid, i created a UI for MVC Web Application project and to this project added an ado .net Entity Data Model all is well.  

Following the general overview i can get this example working fine, however when i try the ajax databinding i simply cant get my grid to return any data 

i have added the action result method for the read as so 

public ActionResult Meeting_Read([DataSourceRequest]DataSourceRequest request)
        {
            using (var ola = new OnlineActionsEntities())
            {
                IQueryable<Meeting> meetings = ola.Meetings;
                DataSourceResult result = meetings.ToDataSourceResult(request);
                return Json(result);
            }
        }


i have added my grid as so 

@(Html.Kendo().Grid<AdventureWorks.Models.Meeting>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("Meetings_Read", "Home")) // Set the action method which will return the data in JSON format
       )
      .Columns(columns =>
      {
          // Create a column bound to the ProductID property
          columns.Bound(meeting => meeting.ID);
          // Create a column bound to the ProductName property
          columns.Bound(meeting => meeting.Title);
      })
      .Pageable() // Enable paging
      .Sortable() // Enable sorting
)
when i build and run the grid simply never gets populated ? if i break point the Meeting_Read action result it is simply never called ??  

I must be missing something really obvious but cant see what 

Please help.

Eddie
Anthony
Top achievements
Rank 1
 answered on 21 May 2013
2 answers
587 views
Hi,

I'm using a Kendo Grid with MVVM bindings.  In my schema I have an ID field defined.  When I call the create server call a new record is created.  A structure is then returned from WS with one property which is the new records ID.  My code is:

var myDS = new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "GROUP_ID",
                        fields: {
                            "GROUP_ID": {
                                type: "number"
                            },
                            "DESCRIPTION": {
                                type: "string"
                            },
                        }
                    }
                },
                pageSize: 20,
                batch: false,
                transport: {
                read:{
                        url: "/Role/GetRoles"
                },
                update: {
                    url: "/Role/Update"
                    contentType: "application/json",
                    type: "POST"
                },
                destroy: {
                    url: "/Role/Delete"
                    contentType: "application/json",
                    type: "POST",
                },
                create: {
                    url: "/Role/Create"
                    contentType: "application/json",
                    type: "POST",
                },
                parameterMap: function (data, operation) {
                    if (operation != "read") {
                        return JSON.stringify(data);
                    } else {
                        return JSON.stringify(data); //return stringified options to the server
                    }
                }
            }
            });

var vm = kendo.observable({
                groupData: myDS
            });


$("#grid").kendoGrid({
                columns: [
                    { "field": "DESCRIPTION", "title": "Group Name" },
                    { "command": "edit" },
                    { "command": "destroy" },
                ],
                pageable: true,
                navigatable: true,
                toolbar: ["create"],
                editable: { "mode": "popup", "template": $("#popup_editor").html()},               
            });

            kendo.bind($('#grid'), vm);
            

I am having several problems

1) If my web service (in this case a C# MVC controller) returns anything at all I get javascript errors, the create dialog does not disappear.   If I change it to have a void return type everything works.
2) If I edit a record after creating the Update call to my web service is never made.

I think both issues are related in that I want to be able to sync the new ID of the newly created record back with the grid. 
Keith
Top achievements
Rank 1
 answered on 21 May 2013
1 answer
484 views
I have Kendo UI Grid and it's selection mode is set true. I'd like to listen enter presses on grid if user presses enter key from keyboard. How do i get this event?

I managed to get double click to work on selected line but i would like to provide enter selection also. 
Dimiter Madjarov
Telerik team
 answered on 21 May 2013
1 answer
183 views
In the asp.net ajax editor there is a convenient javascript function
'getSelectedElement()' which returns the entire underlying HTML element in
relation to the cursor position.  There appears to be no equivalent
feature in the kendo editor.  Before i resort to digging into the sources
of the ajax editor, i was wondering if the same thing can be achieved for the
Kendo editor using the existing API?

 

getRange() and selectedHtml() seem to be relevant, but there is very little documentation
on how getRange() works and what the available node parameters are.

 

Can anyone
offer a convenient solution?
Vladimir Iliev
Telerik team
 answered on 21 May 2013
3 answers
1.7K+ views

How do you set the value of a numerictextbox client template. I've tried the following:
.Value("\\#=pollorder#")
.Value("\#=pollorder#")
.Value("#=pollorder#")
.Value(Convert.ToInt32("\#=pollorder#"))
All produce errors.

.Columns(columns => {
columns.Bound(s => s.ID).Visible(false);
columns.Bound(s => s.Order)
.ClientTemplate((Html.Kendo().NumericTextBox<int>()
.Name("order_#=ID#")
.Value("#=order#")
.Format("{0:n0}")
.Min(0)
.Max(100)
.Step(1)
.Decimals(0)
.Events(ev => ev.Change("numericBoxChanged"))
.ToClientTemplate()).ToHtmlString());
Petur Subev
Telerik team
 answered on 21 May 2013
1 answer
88 views
hi 
i have a dataSource that spits out data like this:
[{
Amount: "2140402000"
MDetail: "Budget"
Month: "Jan"
Monthnum: "1"
Year: "2013"
},
{
Amount: "2146823206"
MDetail: "Budget"
Month: "Feb"
Monthnum: "2"
Year: "2013"
},
{
Amount: "2257798847"
MDetail: "Projected"
Month: "Jun"
Monthnum: "6"
Year: "2013"
},
{
Amount: "2272474540"
MDetail: "Projected"
Month: "Jul"
Monthnum: "7"
Year: "2013"
}]

and the chart markup looks like htis
$J("#chart").kendoChart({
    dataSource: {
        data:source,
        group: {
            field: "MDetail",
            dir: "asc"
        },
        sort: [
            {field: "Year", dir: "asc"},
            {field: "Monthnum", dir: "asc"}
        ]
    },
    theme: "blueOpal",
    title: {
        text: "Total Cost of Workforce for " + year
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "area",
        format: "${0:0,000}"
    },
    series: [{
        field: "Amount",
        groupNameTemplate: "#= group.value # "
    }],
    valueAxis: {
        labels: {
            template: "#= kendo.format('$ {0:N0}', value / 1000000) # M"
        },
        majorUnit: 100000000,
        line: {
            visible: false
        },
        axisCrossingValue: -10
    },
    categoryAxis: {
        field: "Month",
        majorGridLines: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        format: "$ {0:0,000}"
    }
});


after feb - the 'budget' MDetail falls off to 0
and before jun - i dont know what the 'projected' MDetail does
its drawing a bunch of stuff

what im trying to achieve here is:
if there are no records for anything after feb
then dont draw anything - just cut it off 
ie dont descend to 0

and likewise if there are no records for the beginning
then dont draw anything until theres a record for the category 
ie it iwll be blank until jun and then the 'projected' numbers start drawing

how do i do this?

thanksa!

Iliana Dyankova
Telerik team
 answered on 21 May 2013
6 answers
982 views
By customer request I'm using a tooltip that only appears when explicitly clicked, and does not autohide.

The initialisation looks like:
$("#MyIdentifier").kendoTooltip({
    position: "right",
    autoHide: false,
    showOn: 'click',
    content: $('#calc1'),
    show: model.openCalculator,
    width: "224px"
});
This works like a charm, tooltips open when clicked and hide when explicitly closed (by a close button or clicking anywhere outside the tooltip).

The problem I'm encountering is that the tooltip element is within a division that has a handler for the click event too. And whenever the tooltip opens, the click handler for the surrounding div is being called too. This is undesired behaviour and I would like to know if anyone figured out a way to prevent this from happening?

You can see this behaviour in this simplified example:

http://jsfiddle.net/RedF/pgBNb/

All suggestions are appreciated!
Cheers,
 Fred
Fred
Top achievements
Rank 1
 answered on 21 May 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
Application
Drag and Drop
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?