Telerik Forums
Kendo UI for jQuery Forum
1 answer
189 views
I have a list view that is created using MVVM style. I am trying to use the "Press to load more" function from KendoUI mobile. I am listing all post from my Wordpress site into a list view that when clicked on it shows a detailed view of the post clicked on. I am using MVVM to accomplish this for now but i am not able to get the list view to load more post from the server using endless scrolling or Press to load more. Here is my full code on Jsbin.com Please help me.
Pavel Kolev
Telerik team
 answered on 30 Oct 2013
3 answers
107 views
I have a very silly problem.

I have a Kendo Grid with Detailed View that can expand/collapse, it works flawlessly and looks good.  The problem is that as soon as I insert a Kendo Line Chart to the page the rows in the Grid can no longer be selected, also not expanding.  I t works well without the Chart within the same page.

I´ve checked the console of Firebug and that does not display any errors.  I also can not detect any events when clicking row within the grid.  It simply will not work.

Do you have any thoughts?  Does Kendo Grid and Chart not work when used on the same page?

Thank you.
Dimiter Madjarov
Telerik team
 answered on 30 Oct 2013
1 answer
135 views
Hi,

I'm looking to use the Kendo Upload control to Import vCards onto a Contact Creation page. Since I want to return a PartialView, and populate a Div's .html attribute, I'd like to do this as a jQuery Post like I've outlined below:
@(Html.Kendo().Upload()
     .Name("vCard")
     .Async(a => a
         .Save("UploadContact", "Contacts") /*Don't really need this if I can post via jQuery */
         .AutoUpload(true)
         )
     .Events(events => events
         .Select("onSelect")
         .Upload("onUpload")
         )
     .ShowFileList(false)
     .Multiple(false)
     )
function onUpload(e) {
        var upload = $("#vCard").data("kendoUpload");
        var files = upload.files;
 
        var serialized = "vCard=" + files;
        $.post("/Contacts/UploadContact/", serialized, function (returnHtml) {
            //alert(returnHtml);
            $("#ContactContainer").html(returnHtml);
        });
My issue is that I am constantly getting a null object when posting to /Contacts/UploadContact using jQuery.

Is there any way to pass the entire file list (including FileStream) back to the controller from jQuery like I've outlined in the "onUpload" method?

Any help would be greatly appreciated.

Thanks,
Landon
Dimiter Madjarov
Telerik team
 answered on 30 Oct 2013
1 answer
112 views
I tried to upgrade from v2013.2.716  to v2013.2.918 (kendo.all.min.js) and ran into a few issues. My general question is whether there is a doc that provides more detail on the changes made, outside of the readme that just lists that a fix was applied with not much detail on how. Here are the two major issues I've seen and I've since rolled back to 716 since I don't have time to troubleshoot the issues right now.

View events:event objects always return empty objects. event.view and the other framework params are undefined in the show, init, and hide callbacks. 
Mobile Listview: I have a detailbutton in my template and there an extra icon span with the same detail icon is being added to my li. Below is my template

01.<script id="tmp-favorite" type="text/x-kendo-template">
02.       # var bool = category.toLowerCase().indexOf("documents")<0 #
03.       # var path =  !bool && ThumbnailImage && ThumbnailImage.indexOf("data:")<0?"data:image/jpeg;base64,"+data.ThumbnailImage:data.ThumbnailImage #
04.       <img src="#: path #"/>
05.               <div class="li-text">
06.                   <p class="li-title">#: t # (#: FavoriteName #)</p>
07.                   <p class="li-desc">#: FavoriteType #</p>
08.               </div>
09.           <span data-role="detailbutton" data-icon="isfavorite" class="item-favorite-status alt-btn right-1"></span>
10.       </script>

Petyo
Telerik team
 answered on 30 Oct 2013
2 answers
90 views
Helly Guys,


I have two tabstrip, but I want the first one to always appear as active. Here is the excerpt of the code below (that doesn't work).

    <!-- FOOTER -->
    <div data-role="footer" data-align="left">
        <div data-role="tabstrip" data-align="left">
            <a href="#results" data-icon="globe" data-transition="slide:top" id="resultstab"><div id="results_count_display" style="color:white" class="km-text">Loading..</div></a>
            <a href="#filter" data-icon="settings" data-transition="slide:top" id="settingstab"><div class="km-text" style="color:white">Filter</div></a>
        </div>
    </div
    <!-- END OF: FOOTER -->
<script>
$('#settingstab').bind('click', function () { $('#settingstab').removeClass('km-state-active');$('#resultstab').addClass('km-state-active'); });   
</script>
</div>
I want that when "settingstab" is clicked on: the "resultstab" flips back to active.


Thanks.
Chris @ Willows Consulting Ltd.
Top achievements
Rank 1
 answered on 30 Oct 2013
1 answer
95 views
Using the Menu in IE9, the child menu items are hidden behind the flash object.  When viewing the page in Chrome, the child menus are shown correctly.  Any suggestions on getting this to work?

<div id="header" ></div>
<div id="main-nav" >
    <div class="container_16">
       <ul id="menu">
      <li><a href=".">Funds</a>
       <ul>
        <li><a href=".">Fund Defination</a></li>
        <li><a href=".">Fund Portfolio Datamart</a></li>
       </ul>
      </li>       
      <li><a href="">Partners</a><ul>
        <li><a href=".">Distribution Dashboard</a></li>
        <li><a href=".">Mailing Lists</a></li>
        <li><a href=".">Contact Password Lookup</a></li>
       </ul>
      </li>
      <li><a href=".">Portfolio</a></li>
      <li><a href=".">Supplemental</a></li>
      <li><a href=".">My Reports</a></li>
      <li><a href="">Utilities</a></li>      
     </ul>
</div>    
   </div>
   <div id="site-content">
    <div class="container_16">
     <div id="flashContent">
       <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" title="Get Adobe Flash player" /></a><br />
       You need <a href="Flash'>http://www.adobe.com/go/getflashplayer">Flash Player 8</a> and allow javascript to see the content of this site..
     </div> 
    </div>
   </div>
Dimo
Telerik team
 answered on 30 Oct 2013
2 answers
196 views
Hello,

I am trying to get working hierarchical datasource with MVVM. My data could be described like this: there are documents, documents have sections, sections have questions. By clicking on document I want to fetch sections data of that document, and by clicking on section, I want to fetch questions data of that section. After data is fetched, I want my views to be updated automatically thanks to MVVM.

This is how I descripe hierarchical datasources in code:

var questionsDataSource = {
transport: {
read: {
url: "questions",
dataType: "json"
}
},
schema: {
data: "questions",
model: {
id: 'ID',
hasChildren: false
}
},
change: function(e){
var rootModel = this.parent().parent().parent();
this.parent().parent().parent().set("questions", this.view()); // if I manually set data here, the ordering works
},
sort: {
field: 'order',
dir: 'asc'
}
};

var sectionsDataSource = {
transport: {
read: {
url: "sections",
dataType: "json"
}
},
schema: {
data: "sections",
model: {
id: 'ID',
children: questionsDataSource,
hasChildren: 'hasChildren',
}
},
change: function(e){
var rootModel = this.parent().parent().parent();
this.parent().parent().parent().set("sections", this.data()); // here I assign active sections that would be shown in view
},
};

var documentsDataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "documents",
dataType: "json"
}
},
schema: {
data: "documents",
model: {
id: "ID",
hasChildren: true,
children: sectionsDataSource
}
},
change: function(e){
this.parent().set("documents", this.view());
},
sort: {
field: 'ID',
dir: 'asc'
},
});


var viewModel = kendo.observable({

dataSource: documentsDataSource,

documents: [],

sections: [],

questions: [],

// other data and methods

});


kendo.bind($("#view-model"), viewModel);

documentsDataSource.fetch(function () {
// load first document
// var node = documentsDataSource.at(0); // sorting does not work
var node = documentsDataSource.view()[0]; // sorting works

// load sections
node.load();
});

I have much more code but for the beginning tmabe that'll be enough.

First question - is such nesting of datasources the right way?

Second question: how in view to show the sections that was lastly loaded, that means, active sections? What I do now is on sections dataSource change event asign this.view() data to additional "sections" property in kendo.observable({}) model and bind my view to this property. But thats feel like additional job, as using MVVM changes in datasource should directly reflect in view. Is there a better way?

Third question: when questions data is fetched, it is not sorted by "order" property. Only if I manually set "questions" to be equal to this.view() on change event in questionDataSource, it gets ordered. So MVVM gets no meaning if I need to manually update my data on change event. What am I doing wrong?
P
Top achievements
Rank 1
 answered on 30 Oct 2013
2 answers
183 views
I can't bring window to front by touching neither titlebar, nor content area
http://jsfiddle.net/YreX4/
We are still on 2012.3.1114 (an upgrade requires long scrupulous testing)
Same behaviour on android (4.0) and iOS5
On desktop you can see this in latest Chrome by enabling "emulate touch events" in developer tools.

Is it a bug? Are there any workarounds?
Dimo
Telerik team
 answered on 30 Oct 2013
2 answers
744 views
I have a kendo grid (batch editable) with a detailTemplate. My detail template has two drop down lists (SubItem, and SubItemSerial). The SubItem is not showing the correct value when template is expanded.  Also when the value is changed on first drop down, in the change event, I set() the correct value on the grid's model. But as soon as I do this, the detail template closes right away, which I don't want to happen.

I am assuming that people often want to set a value from a detail template, but I could not find a good example. Here is what I have so far:
001.function MrItemsGrid(mr_ID, grid_id, is_editable, default_billable) {
002.    var self = this;
003.    self.mr_ID = mr_ID;
004.    self.GRID_ID = '#' + grid_id;
005.    self.HANDLER_URL = "/MaterialRequestItem";
006.    self.IS_EDITABLE = is_editable;
007.    self.DEFAULT_BILLABLE = default_billable;
008. 
009.    self.mr_source = new kendo.data.DataSource({
010.        batch: true,
011.        filter: [],
012.        serverPaging: true,
013.        serverSorting: true,
014.        serverFiltering: true,
015.        serverGrouping: true,
016.        serverAggregates: true,
017.        type: "aspnetmvc-ajax",
018.        pageSize: 50,
019.        schema: {
020.            data: "Data",
021.            total: "Total",
022.            errors: "Errors",
023.            model: {
024.                id: "MaterialRequestItemId",
025.                fields: {
026.                    MaterialRequestItemId: { type: "string" },
027.                    MaterialRequisitionId: { type: "string", defaultValue: self.mr_ID },
028. 
029.                    ItemID: { type: "number", defaultValue: 0 },
030.                    ItemName: { type: "string", defaultValue: "" },
031. 
032.                    SubItemId: { type: "number", defaultValue: 0 },
033.                    SubItemName: { type: "string", defaultValue: "" },
034. 
035.                    SubItemSerialId: { type: "number", defaultValue: 0 },
036.                    SubItemSerialNumber: { type: "string", defaultValue: "" },
037. 
038.                    BusinessPartnerID: { type: "number", defaultValue: 0 },
039.                    BusinessPartnerName: { type: "string", defaultValue: "" },
040. 
041.                    Description: { type: "string" },
042. 
043.                    Price: { type: "number", defaultValue: 0 },
044.                    Quantity: { type: "number", defaultValue: 0, validation: { required: true, min: 0 } },
045.                    Total: { type: "number", defaultValue: 0 },
046.                },
047.            }
048.        },
049. 
050.        transport: {
051.            prefix: "",
052.            read: {
053.                url: self.HANDLER_URL + "/Read?mrId=" + self.mr_ID,
054.                type: "GET",
055.                cache: false,
056.            },
057.            update: {
058.                url: self.HANDLER_URL + "/Update",
059.                type: "PUT",
060.            },
061.            create: {
062.                url: self.HANDLER_URL + "/Create",
063.                type: "POST",
064.            },
065.            destroy: {
066.                url: self.HANDLER_URL + "/Destroy",
067.                type: "DELETE",
068.            }
069.        },
070. 
071.        error: GridCommon.showCallBackError
072.    });
073. 
074.    self.items_src = new kendo.data.DataSource({
075.        transport: {
076.            read: {
077.                url: self.HANDLER_URL + "/GetItems",
078.                dataType: "json",
079.                type: "GET"
080.            }
081.        },
082.        error: GridCommon.showCallBackError
083.    });
084. 
085.    self.vendors_src = new kendo.data.DataSource({
086.        transport: {
087.            read: {
088.                url: self.HANDLER_URL + "/GetVendors",
089.                dataType: "json",
090.                type: "GET"
091.            }
092.        },
093.        error: GridCommon.showCallBackError
094.    });
095. 
096.    self.itemDropDownEditor = function(container, options) {
097. 
098.        $('<input required data-text-field="ExtendedItemName" data-value-field="ItemName" data-bind="value:' + options.field + '"/>')
099.            .appendTo(container)
100.            .kendoComboBox({
101.                autoBind: false,
102.                serverFiltering: false,
103.                select: "",
104.                optionLabel: { ExtendedItemName: "", ItemID: 0 },
105.                dataSource: self.items_src,
106.                filter: "contains",
107.                change: function(e) {
108.                    options.model.set('ItemID', e.sender.dataItem().ItemID);
109.                }
110.            });
111.    };
112. 
113.    self.vendorDropDownEditor = function (container, options) {
114. 
115.        $('<input required data-text-field="BusinessPartnerName" data-value-field="BusinessPartnerName" data-bind="value:' + options.field + '"/>')
116.            .appendTo(container)
117.            .kendoComboBox({
118.                autoBind: false,
119.                filter: "contains",
120.                select: "",
121.                serverFiltering: false,
122.                optionLabel: { BusinessPartnerName: "", BusinessPartnerID: 0 },
123.                dataSource: self.vendors_src,
124.                change: function(e) {
125.                    options.model.set('VendorId', e.sender.dataItem().BusinessPartnerID);
126.                }
127.            });
128.    };
129. 
130.    self.updateTotal = function (e) {
131.        var r = e.values.Price ? e.values.Price : e.model.Price;
132.        var q = e.values.Quantity ? e.values.Quantity : e.model.Quantity;
133.        e.model.set('Total', q * r);
134.    }
135. 
136.    self.init = function () {
137. 
138.        var tools = null;
139.        var row_commands = null;
140.        if (self.IS_EDITABLE) {
141.            tools = [
142.                { name: "save", text: "Save" },
143.                { name: "create", text: "Add" },
144.                { name: "cancel", text: "Cancel" }
145.            ];
146.            row_commands = [{
147.                name: "destroy",
148.                template: '<a href="##" class="k-grid-delete"></a>'
149.            }]
150.        } else {
151.            $(self.GRID_ID).addClass('readonly');
152.        }
153.        $(self.GRID_ID).kendoGrid({
154.            toolbar: tools,
155.            save: self.updateTotal,
156.            detailTemplate: kendo.template($("#SubItem").html()),
157.            detailInit: self.detailInit,
158.            dataBound: function () {
159.//              this.expandRow(this.tbody.find("tr.k-master-row").first());
160.            },
161. 
162.            columns: [
163.                { field: "ItemName", title: "Item Type", editor: self.itemDropDownEditor },
164.                { field: "BusinessPartnerName", title: "Vendor", editor: self.vendorDropDownEditor },
165.                { field: "Description" },
166.                { field: "Price", title: "Price", format: "{0:c}", width: 90, editor: GridCommon.notEditable },
167.                { field: "Quantity", title: "QTY", width: 65, editor: GridCommon.numberEditor },
168. 
169.                { field: "Total", editor: GridCommon.notEditable, format: "{0:c}", width: 95 },
170.                { command: row_commands, width: 40 }
171.            ],
172. 
173.            pageable: true,
174.            scrollable: true,
175.            editable: self.IS_EDITABLE,
176.            navigatable: true,
177.            sortable: true,
178.            batch: true,
179. 
180.            dataSource: self.mr_source,
181.            saveChanges: GridCommon.saveAll
182.        });
183.    }
184.     
185.    self.items_src = new kendo.data.DataSource({
186.        transport: {
187.            read: {
188.                url: "/EquipmentEntry/GetItems",
189.                dataType: "json",
190.                type: "GET"
191.            }
192.        },
193. 
194.        error: GridCommon.showCallBackError
195.    });
196.     
197.    self.tempSubItemId = null;
198. 
199.    self.detailInit = function (context) {
200.        var detailRow = context.detailRow;
201.        var masterRow = context.masterRow;
202.        var mrModel = context.data;
203.        var grid = this;
204.        var viewCollection = grid.dataSource.view();
205. 
206.        var subItemContainer = detailRow.find(".sub-item");
207.        var subItemSerialContainer = detailRow.find(".sub-item-serial");
208. 
209.        $('<input required data-text-field="ExtendedItemName" data-value-field="ExtendedItemName" data-bind="value: ?ItemID" data-mr-sub-uid="'+ mrModel.uid +'"/>')
210.            .appendTo(subItemContainer)
211.            .kendoDropDownList({
212.                autoBind: false,
213.                dataTextField: "ExtendedItemName",
214.                dataValueField: "ItemID",
215.                dataSource: self.items_src,
216.                optionLabel: { ExtendedItemName: GridCommon.emptyText, ItemID: 0 },
217.                change: function (ee) {
218.                    var ds = $(self.GRID_ID).data('kendoGrid').dataSource;
219.                    var mrUid = ee.sender.element.data('mr-sub-uid');
220.                    var mr = grid.dataSource.getByUid(mrUid);
221.                    var newItem = ee.sender.dataItem();
222.                    mr.set('SubItemId', newItem.ItemID);
223.                    mr.set('SubItemName', newItem.ItemName);
224.                    //self.tempSubItemId = ee.sender.dataItem().ItemID;
225.                }
226.            });
227. 
228. 
229.        $('<input required data-text-field="Description" data-value-field="Description" data-bind="value:SubItemSerialId"/>')
230.            .appendTo(subItemSerialContainer)
231.            .kendoDropDownList({
232.                autoBind: false,
233.                dataTextField: "Description",
234.                dataValueField: "ItemSerialID",
235.                optionLabel: { Description: GridCommon.emptyText, ItemSerialID: 0 },
236.                dataBound: function () {
237.                    if (this.dataSource.data().length == 0) {
238.                        this.enable(false);
239. 
240.                        this.text("No items found");
241.                    }
242.                },
243.                dataSource: {
244.                    transport: {
245.                        read: {
246.                            url: "/EquipmentEntry/GetSerials",
247.                            dataType: "json",
248.                            type: "GET",
249.                            data: function () {
250.                                return {
251.                                    itemid: self.tempSubItemId,
252.                                    exclude_List: "0"
253.                                };
254.                            }
255.                        }
256.                    },
257. 
258.                    error: GridCommon.showCallBackError
259.                }
260.            });
261.    }
262.}
Any ideas?
Shea
Top achievements
Rank 1
 answered on 30 Oct 2013
2 answers
1.0K+ views
Hello, I am building some kind of single page application with Kendo UI controls included on each view;

Navigation between sites is written in javascript with no server page reload (main div container is re-rendering depending on the content via ajax call).

Main view contains Kendo.Window, and looks like this:

<div id="content">
    <!-- SOME PAGE CONTENT-->
</div>
 
<div id="Window">
    <div class="group">
        <div class="toolbar">
            <input type="WindowButton" id="Add" class="icon add" />
        </div>
        <!-- SOME WINDOW CONTENT-->
    <div>
</div>
My kendo window render function is placed in script file, which starts with the page, when it is "$(document).ready()"; here is the code:

jQuery("#Window").kendoWindow({
                "open": //some function,
                "refresh": //some function,
                "height": "340px",
                "width": "550px",
                "modal": true,
                "title": //some title,
                "draggable": true,
                "visible": false
            });


When I open this view for the first time and click the button to open the window - it becomes visible; when I click on "#WindowButton" it shows one alert "button clicked!";


Problem starts, when I go to other view, and back again to this first view (I remind: with no page refresh, it is single page app) - then, when I open the window, and click on "#WindowButton", alert "button clicked!" openes two times - one after the other. When I go to other view and back to this once again (for the 3rd time), it shows 3 times and so on;

I noticed that all kendo controls are rendering on every single view load, and the old ones aren't replaced by new rendered, but they are duplicating, below the code from google chrome developer tools:

First view opened for the first time:


01.<html>
02.  <head>...something here...</head>
03.  <body>
04.    <div id="content">
05.      SOMETHING HERE
06.    </div>
07.    <div class="k-widget k-window" data-kendo-role="draggable" style="padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;">
08.  </body>
09.</html>

Control is rendered on the 7th line - when I open window, property "display" changes its value from "none" to "block" - it is obvious and correct;

When I open the same view for the second time (without server page reload), my HTML looks like this:

01.<html>
02.  <head>...something here...</head>
03.  <body>
04.    <div id="content">
05.      SOMETHING HERE
06.    </div>
07.    <div class="k-widget k-window" data-kendo-role="draggable" style="padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;">
08.    <div class="k-widget k-window" data-kendo-role="draggable" style="padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;">
09.  </body>
10.</html>

As you can see, kendo window control is rendered two times, so when I call button, placed on a window, the action is called two times :/ (action is recognized by jQuery function when element with id="WindowButton" is clicked - now there are two same buttons with the same ID). When I go to this page 3rd, 4th, 5th and so on, I receive html with as many duplicates of kendo controls as many times I have been opening this view.

Ofcourse it is simplified code above, true code is much, much heavier.


When I click refresh button on my web browser - html shows one kendo window, and all is back set to normal.


What should I do to avoid this problem? Maybe should I manually delete kendo html elements from view "on view detach" in javascript function? Are there any detach functions for kendo UI controls?
Michal
Top achievements
Rank 1
 answered on 30 Oct 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?