Telerik Forums
Kendo UI for jQuery Forum
9 answers
372 views
Hello!

I'm having a bit of a problem with the uploader all of a sudden -- I'm thinking that it's happened since the latest version of kendoui (2012.3.1114), but I might be wrong with that.

I have an input field in my view:                     
<input id="personalDetails_files" type="file" />

and some code to wire it up:
$("#personalDetails_files").kendoUpload({
    async: {
        saveUrl: "/Uploader/SaveUserThumbnail.aspx",
        removeUrl: "/Uploader/RemoveUserThumbnail.aspx",
        autoUpload: true,
        multiple: false
    },
    select: function (e) {
        if ($('#personalDetails_files').parents(".k-upload").find('.k-file').length >= 1) {
            e.preventDefault();
        }
    },
    upload: function (e) {
        debugger;
    },
    success: function (e) {
        if (e.operation == "remove") {
            //k-upload-button
            $('#personalDetails_files').parents(".k-upload").find('.k-upload-button').show();
            $("#imgPersonalDetails_Thumbnail")[0].src = "/styles/" + currentTheme + "/default.png";
        } else {
            //k-upload-button
            $('#personalDetails_files').parents(".k-upload").find('.k-upload-button').hide();
            $("#imgPersonalDetails_Thumbnail")[0].src = "/UserThumbnails/" + window.currentUser.ID + "_" + e.files[0].name;
        }
        //remove the select button
    },
    remove: function (e) {
 
    },
    error: function (e) {
    }
});

This works great in the latest version of IE/Windows 8, but when I try it in Chrome it fails when the file is uploaded to the server.

The request payload in Chrome>Network Tab is:  ------WebKitFormBoundarygQUKJsVmVusYpfYS--

So, it appears that the uploaded file is not getting added to the submit form that goes to the server.   

Any ideas as to why this is happening? 

Thanks!



Vladimir Iliev
Telerik team
 answered on 12 Mar 2013
0 answers
218 views
I have a Grid. Add & Edit has been done through modal popup . For modal pop-up i have used template. I want to have multiple forms in modal pop-up . There each form should have its own validation. 
sample code :

<div id="CurrentDiv">
    <div class="editor-label">
        @this.Html.LabelFor(model => model.Stations.Name)
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="StationName" required="required" name="StationName" validationMessage="Station Name Required!" type="text" value="" />
        <span class="k-invalid-msg" data-for="StationName"></span>
    </div>
     
     <div class="editor-label">
        @this.Html.LabelFor(model => model.Stations.ChannelID)
    </div>
    <div class="editor-field">
       <input name="ChannelID"  id="ddlChannelID" data-source="dsChannelDropdown" data-text-field="Text" 
        required="required"   validationMessage="Channel Required!" 
    data-value-field="Value" data-bind="value:ChannelID" data-role="dropdownlist" data-option-label="Select Channel..." disabled="disabled"  />
       <span class="k-invalid-msg" data-for="ChannelID"></span>
        <a href="javascript:void(0)" onclick="showHideChannel(true);">Add</a>
    </div>
</div>   
 div id="divChannel" style="display:none;">
  <div class="editor-label">
        Name :
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="ChannleName"name="ChannleName" validationMessage="Channle Name Required!" type="text" value="" />
        <span class="k-invalid-msg" data-for="ChannleName"></span>
    </div>
      <div class="editor-label">
         Description :
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="ChannelDescrip"
         name="ChannelDescrip" validationMessage="Channel Description Required!" type="text" value="" />
        <span class="k-invalid-msg" data-for="ChannelDescrip"></span>
    </div>
    <div>
<a class='k-button k-button-icontext' onclick='SaveChannel();'>Add</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Cancel</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Back</a>
</div>
</div>
 <script type="text/javascript" language="javascript">
function SaveChannel() {

        $.ajax({
            type: "POST",
            url: "/Channel/CreateAjax",
            data: {
                Id: '0',
                Name: $("#ChannleName").val(),
                Descrip: $("#ChannelDescrip").val(),
                Enabled: true
            },
            error: function (error) {
                alert(error);
            },
            success: function (response) {
                alert(response);
            }
        })
        return false;

    }
    function showHideChannel(show) {
        if (show) {
            $("#divChannel").show();
            $('#CurrentDiv').hide();
            $(".k-edit-form-container").find(".k-grid-update").hide();
            $(".k-edit-form-container").find(".k-grid-cancel").hide();
            $(".k-window-title").html("Add Channel");

        } else {
            dsChannelDropdown.read();
            if ($("#ChannleName").val() != "") {
                var ddlChannelID = $("#ddlChannelID").data("kendoDropDownList")
                ddlChannelID.text($("#ChannleName").val());
            }
            $("#divChannel").hide();
            $('#CurrentDiv').show();
            $(".k-edit-form-container").find(".k-grid-update").show();
            $(".k-edit-form-container").find(".k-grid-cancel").show();
            $(".k-window-title").html("Add/Edit Station");
            
           
        }
    }

</script>


on click of add button it will show channelDiv and will hide currentDiv on click of Add button it will call ajax method and will save channel and will take you back to currentDiv where in dropdown currently added channel will appear. and on click of update button of main div it will save station information in db .
problem is on click of update in Main modal pop-up , it calls validation of all Divs , where as I want validation of currentDiv should be done . and on click of Add button of channelDiv it should validate Channel Div .
Sameer
Top achievements
Rank 1
 asked on 12 Mar 2013
0 answers
196 views
Hi,
I have a tree view which uses dynamic loading from server when expanded. In my case there are two different URL's from where the initial and the child data is to be fetched. I tried changing the read URL from script but it is defaulted back when the user expands the tree which should not be the case.

Below is my tree
@(Html.Kendo().TreeView()
        .Name("MyTree")
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read.Url("../api/User/?getAll=false").Type(HttpVerbs.Get))
        )
    )

I then change the read url in script as following 

 var tree = $("#MyTree").data("kendoTreeView");
 tree.dataSource.transport.options.read.url =  "../api/User/?getChildren=true";

But when the tree is expanded the URL is still /api/User/?getAll=false&id=1 instead of ./api/User/?getChildren=true&id=1

Wasae
Top achievements
Rank 1
 asked on 12 Mar 2013
1 answer
147 views
I'm having difficulty getting the TimePicker binding with my TimeSpan properties. I have a ListView where I want to show the timespan properties however it only says [Object object]. With the DateTime object these properties are displayed but not with the TimeSpan object. Any ideas? I haven't seen any examples using the timespan object even though it is supported, I'm using the fluent syntax. Thanks
Petur Subev
Telerik team
 answered on 12 Mar 2013
2 answers
191 views
Hi,

I have an issue with TabStrip content pane which seems to keep initial height or the height set after the first resize operation. I tried a couple of solution found on the forums and i did my own but it still has the same issue. The solution available on http://jsfiddle.net/dimodi/8etzB/ has the same problem. To see it please do the following: 1- resize once and go to next tab (this part is working nice), 2-now resize second time and go to other tab. Other tab will be activate with previous height. Now back to the tab which was active during second resize. The height of this tab will be back to previous height.
I am not sure but it seems that tabstrip keeps somewhere the height of the first resize and then overwrites the value i set on resize event.
I need tab strip content height to be set to available height after each resize.

Thanks,
Frank
Top achievements
Rank 1
 answered on 12 Mar 2013
1 answer
81 views

I am using Kendo with the "Silver" color palette. I also use jQ UI for certain things but mainly want to re-use the jQ UI sprite for various images. Question: Do the Kendo themes correspond to any of the pre-rolled jQ UI themes?

Thanks

S
Dimo
Telerik team
 answered on 12 Mar 2013
3 answers
162 views
Hi, I was wondering if anyone could help with an issue I am having with the mobile list view on anything but the iPhone.

I have a page that has a MVC grid on it and a mobile listview on it. The MVC grid is hidden when the size of the screen comes down and is hidden with media queries for responsiveness.

The code is below, but this only appears to work on the iPhone. The Android devices don't appear to show anything except the loading symbol?
@{
    ViewBag.Title = "Racing Selections";
}
 
<h2>@ViewBag.Message</h2>
 
@(Html.Kendo().Grid<EachWayRatings.Models.spFetchQualifiers_Result>()
    .Name("Grid")
    .Columns(columns =>
    {
       columns.Bound(p => p.RH_DateTime).Title("Race Time").Format("{0:HH:mm}").Hidden(true);
       columns.Bound(p => p.Course).Title("Course");
       columns.Bound(p => p.H_Name).Title("Horse");
       columns.Bound(p => p.Selection);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetRaces", "Home"))
        .PageSize(100)
        .Group(group => group.Add(o => o.RH_DateTime))
    )
    .Pageable()
)
 
<div id="mobile-wrapper">
   <div id="mobile">
      <div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped" data-transition="" data-title="ListView" data-layout="databinding">
           <ul id="grouped-listview"></ul>
      </div>
   </div>
</div>
 
 
 
<script>
   function mobileListViewDataBindInitGrouped() {
      var ds = kendo.data.DataSource.create({
         schema: {data: 'Data'},
         transport: { read: { url: "/Home/GetMobileRaces", dataType: "json" } },
         group: "racetime"
      });
 
      $("#grouped-listview").kendoMobileListView({
         dataSource: ds,
         template: "${name}",
         fixedHeaders: true
      });
   }
</script>
 
<script>
   var app = new kendo.mobile.Application('#mobile');
</script>
Alexander Valchev
Telerik team
 answered on 12 Mar 2013
0 answers
380 views
Hello everybody,

I am very new at KendoUI, so please excuse me if me question sounds silly.

I have a KendoUI grid on a page displaying some data. I defined data source with JSON POST methods to my ASP.NET MVC code and am using popup editing mode. I have schema definition in data source that goes something like this:
model: {
    id: "SID",
    fields: {
        //kuiRecordKey: { type: "number", editable: false, nullable: true },
        SID: { type: "number", editable: true, nullable: false },
        Name: { validation: { required: true, maxlength: 50 }, type: "string" },
        Second: { type: "number", validation: { required: false, min: 0, max: 1 } },
        Third: { type: "number", validation: { required: false, min: 0, max: 1 } }
    }
As you can see I am making primary key field editable. It does not make sense in all occasions, but in some it is necessary. If I run it like this, I will end up with a popup which will allow me to change the primary key field value and do POST of this changed value.

The real question here is: how do I get to know the ORIGINAL primary key value so I could know which row in database to change? I am trying to construct additional field here that would hold this value in case of an edit (kuiRecordKey - commented in the code above) and POST it so my processing logic would pick it up and use it accordingly.
Dragan
Top achievements
Rank 1
 asked on 12 Mar 2013
2 answers
181 views
I have already performed an ajax call to retrieve JSON.  Part of the JSON result is used to display a graph, and another is intended to be used in the grid.  When I set this up, I cannot get the data to display....I see an accurate count of records, but in the columns, I just see "unefinedundefinedundefinedundefined".  Consequently, the JSON seems to work just fine to render the graph, but not the grid.  I have also attached a screenshot.  Here is what the code/HTML looks like:

JSON looks like this (just copied first few records...):
[{"p":"hasLogonId","s":"AD#10145","o":"AD_SID#S-1-5-21-1123561945-492894223-1417001333-12823"},{"p":"hasDtgStartU","s":"AD#113317","o":"1344848836"},{"p":"hasDtgEndU","s":"AD#128486","o":"1344855539"},{"p":"hasType","s":"AD#129917","o":"AD_logonType#3"},{"p":"hasAcctName","s":"AD#131092","o":"AD_acctName#3w546r1$"}]

Javascript:
           
    $(document).ready(function() {
        // Populate arrays for the menu items
        var Qdata = [{"title":"query 3","description":"Return a graph of source and destination IPs limited to 5000"},{"title":"query 4","description":"Show list of all predicates and counts of each"},{"title":"query 5","description":"Show ontology"},{"title":"query 1","description":"DNS relationships 1000"},{"title":"query 6","description":"return first 500"},{"title":"query 6","description":"return first 500"}];
        var Edata = [{"ep":"discover","title":"discover"},{"ep":"sc1","title":"sc1"},{"ep":"marple","title":"marple"}];
        var JSO;
        // Dropdown menu for the queries
        $("#query-picker").kendoDropDownList({
            optionLabel: "Queries",
            dataTextField: "description",
            dataValueField: "title",
            dataSource: Qdata,
            index: 0,
            enable: false,
            change: onChangeQ
        });
        // Dropdown menu for the endpoints
        $("#endpoint-picker").kendoDropDownList({
            optionLabel: "Endpoints",
            dataTextField: "title",
            dataValueField: "ep",
            dataSource: Edata,
            index: 0,
            change: onChangeE
        });
         
        // OnChange event for endpoint dropdown
        var epval;
        function onChangeE() {
            ddlist=$("#query-picker").data("kendoDropDownList");
            ddlist.enable(true);
            epval=$("#endpoint-picker").data("kendoDropDownList");
        };
        // OnChange event for query dropdown
        function onChangeQ() {
            var qval=$("#query-picker").data("kendoDropDownList");
             
            $.getJSON('./query?ep=' + epval.value() + '&qry=' + qval.value(), function(JSO) {
                $("#graph-container").empty();
                 
                var sigInst = sigma.init(document.getElementById('graph-container')).drawingProperties({
                    defaultLabelColor: '#fff',
                    defaultLabelSize: 14,
                    defaultLabelBGColor: '#fff',
                    defaultLabelHoverColor: '#000',
                    labelThreshold: 6,
                    defaultEdgeType: 'curve'
                }).graphProperties({
                        minNodeSize: 1,
                        maxNodeSize: 10,
                        minEdgeSize: 1,
                        maxEdgeSize: 1
                    }).mouseProperties({
                        maxRatio: 32
                });
                $.each(JSO.data.results.graph.nodes, function(idx,obj) {
                    sigInst.addNode(obj.index,{'color' : '#E68A00','x':Math.random(),'y':Math.random(),'size' : obj.degree, 'shape' : 'circle', 'label' : obj.label, 'degree' : obj.degree});
                });
                $.each(JSO.data.results.graph.edges, function(idx,obj) {
                    sigInst.addEdge(obj.index, obj.source, obj.target, { 'label' : obj.label});
                });
                sigInst.draw();
                 
                var kdata=JSON.stringify(JSO.data.results.triples);
                alert(kdata);
                $("#main-body-TR").kendoGrid({
                    dataSource: {
                        data: JSO.data.results.triples,
                        schema: {
                            model: {
                                fields: {
                                    s: { type: "string" },
                                    p: { type: "string" },
                                    o: { type: "string" }
                                }
                            }
                        }
                    },
                    scrollable: true,
                    sortable: true,
                    filterable: true,
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    columns: [
                        {
                            field: "s",
                            title: "Subject"
                        },
                        {
                            field: "p",
                            title: "Predicte"
                        },
                        {
                            field: "o",
                            title: "Object"
                        }
                    ]
                });
                 
                var isRunning = false;
                document.getElementById('stop-layout').addEventListener('click',function(){
                  if(isRunning){
                    isRunning = false;
                    sigInst.stopForceAtlas2();
                    document.getElementById('stop-layout').childNodes[0].nodeValue = 'Start Layout';
                  }else{
                    isRunning = true;
                    sigInst.startForceAtlas2();
                    document.getElementById('stop-layout').childNodes[0].nodeValue = 'Stop Layout';
                  }
                },true);
                document.getElementById('rescale-graph').addEventListener('click',function(){
                  sigInst.position(0,0,1).draw();
                },true);
                 
                var greyColor = 'rgba(180,180,180,0.3)';
                sigInst.bind('overnodes',function(event){
                  var nodes = event.content;
                  var neighbors = {};
                  sigInst.iterEdges(function(e){
                    if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){
                      if(!e.attr['grey']){
                        e.attr['true_color'] = e.color;
                        e.color = greyColor;
                        e.attr['grey'] = 1;
                      }
                    }else{
                      e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
                      e.attr['grey'] = 0;
                
                      neighbors[e.source] = 1;
                      neighbors[e.target] = 1;
                    }
                  }).iterNodes(function(n){
                    if(!neighbors[n.id]){
                      if(!n.attr['grey']){
                        n.attr['true_color'] = n.color;
                        n.color = greyColor;
                        n.attr['grey'] = 1;
                      }
                    }else{
                      n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
                      n.attr['grey'] = 0;
                    }
                  }).draw(2,2,2);
                }).bind('outnodes',function(){
                  sigInst.iterEdges(function(e){
                    e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
                    e.attr['grey'] = 0;
                  }).iterNodes(function(n){
                    n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
                    n.attr['grey'] = 0;
                  }).draw(2,2,2);
                });
            });
        };
        $("body").on({
            ajaxStart: function() {
                $("#loading-query").removeAttr('style');
            },
            ajaxStop: function() {
                $("#loading-query").css('display','none');
            }
        });
    });
Rosen
Telerik team
 answered on 12 Mar 2013
0 answers
100 views
Hello,

All users of Kendo UI DataViz are urged to update to the latest internal build (v. 2012.3.1512). It fixes an important defect that can cause the Chart/StockChart to hang if the selected range contains a DST transition.

The build is also available on our public CDN.

Apologies for the caused inconvenience.
Kendo UI
Top achievements
Rank 1
 asked on 12 Mar 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
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
Dialog
Chat
DateRangePicker
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
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
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?