or
2 answers
431 views
Hi,
I have a grid with inline editing enabled set as a template for a master grid. However when i click on the Edit button, make a change and then Update the create function is called (3 times). I have checked the forums and the closest possible answer was that the other user had additional ',' characters in their javascript. I seem to have no extra character.
I can successfully use the edit command in the outer grid and in other pages / grids that have no detail records.
Please see below for the full .cshtml file i am using with MVC4 / .NET 4.5RC.
Thanks,
@section scripts { @Scripts.Render("~/bundles/kendo") @Styles.Render("~/Content/kendo") <script src="~/Scripts/kendo/2012.2.710/cultures/kendo.culture.en-GB.min.js"></script> <script type="text/javascript"> //set current culture to the "en-GB" culture script. kendo.culture("en-GB"); </script>}<style> .ysiFieldLabel { width: 100px; text-align: right; padding-right: 5px; } .ysiFieldControl { width: 12.4em; }</style> @section featured { <section> <div class="k-content"> <div id="grid"></div> </div> </section>} <script type="text/x-kendo-template" id="detailTemplate"> <div class="tabstrip"> <ul> <li class="k-state-active"> Details </li> <li> Projects </li> </ul> <div> <div class='details'> <ul> <li><label>Name: </label>#= Name #</li> </ul> </div> </div> <div> <div class="projects"></div> </div> </div></script> <script type="text/x-kendo-template" id="toolbarTemplate"> <div class="toolbar"> <div class="toolbar" style="float:left"> <a class="k-button k-button-icontext"> <span class="k-icon k-add" /> New </a> </div> </div> </script> <script> $(document).ready(function () { var grid = $("#grid").kendoGrid({ dataSource: { transport: { read: { url: '/Releases/ReleaseItems?projectId=@(Model.TFSProject.Id)', dataType: "json", contentType: "application/json; charset=utf-8" }, create: { url: '@Url.Action("ReleaseItemCreate", "Releases")', dataType: "json", contentType: "application/json; charset=utf-8", type: "POST" }, destroy: { url: '@Url.Action("ReleaseItemDestroy", "Releases")', dataType: "json", contentType: "application/json; charset=utf-8", type: "POST" }, parameterMap: function (data, operation) {// if (operation !== "read" && options.models) { // batch mode return kendo.stringify(data);// } } }, schema: { type: "json", data: "Items", total: "TotalItemCount", model: { id: "Id", fields: { Id: { type: "number", editable: false }, Name: { type: "string", editable: false }, ApplicationName: { type: "string", editable: false }, Version: { type: "string", editable: false }, ReleaseDate: { type: "date", editable: false }, ProjectId : { type: "number" } } } }, pageSize: 3, serverPaging: true, serverFiltering: false, serverSorting: false }, height: 500, filterable: true, sortable: false, pageable: true, columnMenu: true, resizable: true, toolbar: kendo.template($("#toolbarTemplate").html()), editable: "inline", detailTemplate: kendo.template($("#detailTemplate").html()), detailInit: detailInit, columns: [ { field: "Id", title: "Id", filterable: true, width: "10px" }, { field: "Name", title: "Name", filterable: false, width: "80px" }, { field: "ApplicationName", title: "ApplicationName", width: "100px" }, { field: "Version", title: "Version", width: "80px" }, { field: "ReleaseDate", title: "ReleaseDate", width: "100px", format: "{0:G}" }, { command: ["destroy", { template: '<a class="k-button k-buttonicon-text"><span class="k-icon k-i-custom"></span>Build</a>', click: buildProject }], title: " ", width: "100px" } ] }); }); function buildProject() { } function detailInit(e) { var detailRow = e.detailRow; detailRow.find(".tabstrip").kendoTabStrip({ animation: { open: { effects: "fadeIn" } } }); detailRow.find(".projects").kendoGrid({ dataSource: { transport: { read: "/Releases/ReleaseItemProjects?id=" + e.data.Id + "&projectId=@(Model.TFSProject.Id)", create: { url: '@Url.Action("ReleaseProjectItemCreate", "Releases")', dataType: "json", contentType: "application/json; charset=utf-8", type: "POST" }, update: { url: '@Url.Action("ReleaseProjectItemUpdate", "Releases")', dataType: "json", contentType: "application/json; charset=utf-8", type: "POST" }, parameterMap: function (data, operation) { // if (operation !== "read" && options.models) { // batch mode return kendo.stringify(data); // } } }, schema: { type: "json", data: "Items", total: "TotalItemCount", model: { fields: { ReleaseProjectId: { type: "number", editable: false }, ReleaseProjectName: { type: "string", editable: false }, ReleaseProjectVersion: { type: "string", editable: false }, Type: { type: "string", editable: false }, Build: { type: "boolean", editable: true }, ProjectId: { type: "number", editable: false }, ReleaseId: { type: "number", editable: false } } } }, pageSize: 5, serverPaging: true, serverFiltering: false, serverSorting: false }, scrollable: false, sortable: false, pageable: true, filterable: false, columnMenu: true, columns: [ { field: "ReleaseProjectName" }, { field: "ReleaseProjectVersion" }, { field: "Type" }, { field: "Build", width: "50px", template: '<input type="checkbox" #= Build ? checked="checked" : "" # disabled="disabled" ></input>' }, { command: ["edit"], title: " ", width: "220px" } ], editable: "inline", }); }</script>
3 answers
140 views
Hi!
I have been spending the last few hours on this problem. I am trying to present a view that contains a html select element and uses a layout element. My code is as follows:
<head>
<title>Branch</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.mobile-1.1.1.min.js"></script>
<script src="./js/kendo.mobile.min.js"></script>
<link href="./styles/kendo.common.min.css" rel="stylesheet" />
<link href="./styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="myBookings" data-id="myBookings" data-layout="overview" data-title="My Bookings">
Current Branch: <select id="branch-select">
</select>
</div>
<div data-role="layout" data-id="overview">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application($(document.body)/*, {initial:"myBookings"}*/);
</script>
</body>
This almost works. However, if I inspect the webpage, the <div> element of the view is in the website three times. For ios users, this means that they can navigate through all three select elements using the "previous"/"next" buttons when the select is expanded.
I already tried uncommenting the commented line with the initial setting. However, this does not work at all. According to the console, the browser appears to try to load a file named "myBookings".
How do i get this to work so that the ios devices treat the select as one?
I have been spending the last few hours on this problem. I am trying to present a view that contains a html select element and uses a layout element. My code is as follows:
<head>
<title>Branch</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.mobile-1.1.1.min.js"></script>
<script src="./js/kendo.mobile.min.js"></script>
<link href="./styles/kendo.common.min.css" rel="stylesheet" />
<link href="./styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="myBookings" data-id="myBookings" data-layout="overview" data-title="My Bookings">
Current Branch: <select id="branch-select">
</select>
</div>
<div data-role="layout" data-id="overview">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application($(document.body)/*, {initial:"myBookings"}*/);
</script>
</body>
This almost works. However, if I inspect the webpage, the <div> element of the view is in the website three times. For ios users, this means that they can navigate through all three select elements using the "previous"/"next" buttons when the select is expanded.
I already tried uncommenting the commented line with the initial setting. However, this does not work at all. According to the console, the browser appears to try to load a file named "myBookings".
How do i get this to work so that the ios devices treat the select as one?
Gabriel
Top achievements
Rank 1
Rank 1
answered
on
03 Aug 2012
10 answers
428 views
Just wondering if the Grid widget will have search filtering integrated into it for the official release?
3 answers
118 views
Is there any way I can override the silver ipad look and feel with the blue iphone theme?
I am building a very large application for several devices, and depending on the device, I may execute different logic. Having said this, I am trying to avoid doing this by passing platform as a parameter in kendo.mobile.Application because I fear that it may have some side effects on the platform-specific logic I have implemented.
Are there some classes that can be inherited by my navbars/buttons/other elements to achieve this?
I am building a very large application for several devices, and depending on the device, I may execute different logic. Having said this, I am trying to avoid doing this by passing platform as a parameter in kendo.mobile.Application because I fear that it may have some side effects on the platform-specific logic I have implemented.
Are there some classes that can be inherited by my navbars/buttons/other elements to achieve this?
Kamen Bundev
Telerik team
answered
on
03 Aug 2012
1 answer
177 views
I would like to pass the filter and sort criteria to an action using a toolbar custom command. Ultimately, I'd like to export a CSV or Excel file. What is the best way to go about this?
I first tried the following, but it did not work.
The view
The controller
I first tried the following, but it did not work.
The view
@(Html.Kendo().Grid<KendoGridApplication.Models.Order>() .Name("Grid") .ToolBar(o => o.Custom().Action("Export", "Home").Name("Export")) ...The controller
public ActionResult Export([DataSourceRequest] DataSourceRequest request){ // request.Filters is null // request.Sorts is null
Petur Subev
Telerik team
answered
on
03 Aug 2012
0 answers
174 views
Hi Guys, Im trying to refactor my javascript to fit the Revealing Module Pattern, but am coming up with a few issues. To start with following is my viewModel function:
/***********************************/
function Contacts_Details_ViewModel(SelectedContactID) {
var self = this;
var selectedContact;
var selectedContactID = SelectedContactID;
var contacts_Details_DataSource = new kendo.data.DataSource({
transport: {
read: {
url: $('#urlLink').data('url') + '?tenantID=1&dataType=Contacts_Details',
dataType: "json",
data: {
actionName: function () {
return selectedContactID;
}
}
},
update: {
url: $('#urlLink').data('url') + '/SaveChanges?tenantID=1&actionName=Contacts_Details',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return JSON.stringify(options.models);
}
return options;
}
},
batch: true,
change: function () {
selectedContact = this.view()[0];
},
schema: {
model: {
id: "ContactID"
}
}
});
contacts_Details_DataSource.read();
var goToContactsListing = function () {
this.selectedContactID = null;
location.hash = ''
}
var change = function () {
hasChanges = true;
}
var hasChanges = false;
var saveChanges = function () {
contacts_Details_DataSource.sync();
hasChanges = false;
}
return {
contacts_Details_DataSource: contacts_Details_DataSource,
selectedContact: selectedContact,
goToContactsListing: goToContactsListing,
change: change,
hasChanges: hasChanges,
saveChanges: saveChanges
};
}
/***********************************/
function Contacts_Details_ViewModel(SelectedContactID) {
var self = this;
var selectedContact;
var selectedContactID = SelectedContactID;
var contacts_Details_DataSource = new kendo.data.DataSource({
transport: {
read: {
url: $('#urlLink').data('url') + '?tenantID=1&dataType=Contacts_Details',
dataType: "json",
data: {
actionName: function () {
return selectedContactID;
}
}
},
update: {
url: $('#urlLink').data('url') + '/SaveChanges?tenantID=1&actionName=Contacts_Details',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return JSON.stringify(options.models);
}
return options;
}
},
batch: true,
change: function () {
selectedContact = this.view()[0];
},
schema: {
model: {
id: "ContactID"
}
}
});
contacts_Details_DataSource.read();
var goToContactsListing = function () {
this.selectedContactID = null;
location.hash = ''
}
var change = function () {
hasChanges = true;
}
var hasChanges = false;
var saveChanges = function () {
contacts_Details_DataSource.sync();
hasChanges = false;
}
return {
contacts_Details_DataSource: contacts_Details_DataSource,
selectedContact: selectedContact,
goToContactsListing: goToContactsListing,
change: change,
hasChanges: hasChanges,
saveChanges: saveChanges
};
}
/***********************************/
Than I have the following to initialize the Contacts View Model:
/***********************************/
$(document).ready(function () {
var contacts_Details_ViewModel = kendo.observable(new Contacts_Details_ViewModel(1));
kendo.bind($("#ContactsDetails"), contacts_Details_ViewModel);
});
/***********************************/
Than I have the following html on the page that binds to the view model
/***********************************/
<div id="ContactsDetails" >
<ul>
<li><label>ID</label> <span data-bind="text:selectedContact.ContactID, events: { change: change }"></span></li>
<li><label>Name</label> <input type="text" class="k-textbox" data-bind="value: selectedContact.FirstName, events: { change: change }" /></li>
<li><label>UnitPrice</label> <input type="text" class="k-textbox" data-bind="value: selectedContact.LastName, events: { change: change }" /></li>
</ul>
<button data-bind="click: goToContactsListing">Back to Listing</button>
<button data-bind="click: saveChanges, enabled: hasChanges">Save Changes</button>
</div>
/***********************************/
My problem is nothing ever shows up in the SelectedContact fields (ID label and firstname lastname textboxes), they are always blank. Everything else seems to be bound correctly (events and simple strings work fine) but just not the selectedContact.
Any ideas on where Im going wrong? Im thinking whether it is how I set the selectedContact var in the change event of the datasource, im not confident that its being set there correctly.
Please help I've waisted a day trying to get this to work, so ive got to tap out for my own sanity.
Thanks in advance
Than I have the following to initialize the Contacts View Model:
/***********************************/
$(document).ready(function () {
var contacts_Details_ViewModel = kendo.observable(new Contacts_Details_ViewModel(1));
kendo.bind($("#ContactsDetails"), contacts_Details_ViewModel);
});
/***********************************/
Than I have the following html on the page that binds to the view model
/***********************************/
<div id="ContactsDetails" >
<ul>
<li><label>ID</label> <span data-bind="text:selectedContact.ContactID, events: { change: change }"></span></li>
<li><label>Name</label> <input type="text" class="k-textbox" data-bind="value: selectedContact.FirstName, events: { change: change }" /></li>
<li><label>UnitPrice</label> <input type="text" class="k-textbox" data-bind="value: selectedContact.LastName, events: { change: change }" /></li>
</ul>
<button data-bind="click: goToContactsListing">Back to Listing</button>
<button data-bind="click: saveChanges, enabled: hasChanges">Save Changes</button>
</div>
/***********************************/
My problem is nothing ever shows up in the SelectedContact fields (ID label and firstname lastname textboxes), they are always blank. Everything else seems to be bound correctly (events and simple strings work fine) but just not the selectedContact.
Any ideas on where Im going wrong? Im thinking whether it is how I set the selectedContact var in the change event of the datasource, im not confident that its being set there correctly.
Please help I've waisted a day trying to get this to work, so ive got to tap out for my own sanity.
Thanks in advance
5 answers
826 views
Hi,
I want to have a input text box with search enabled just like the type='search' input box available in the jquerymobile.
i.e. No need to have the search button next to it, but it turns the iPhone return button into the search button.
http://jquerymobile.com/demos/1.1.0/docs/forms/search/index.html
Would it be possible to do this in Kendo Mobile view?
alternatively, I wouldn't mind using the jquerymobile directly in my Kendo Mobile view if possible(I tried this ,, <input type='search' /> and didn't work.
Any help would be much appreciated,
Regards,
JOhn C
I want to have a input text box with search enabled just like the type='search' input box available in the jquerymobile.
i.e. No need to have the search button next to it, but it turns the iPhone return button into the search button.
http://jquerymobile.com/demos/1.1.0/docs/forms/search/index.html
Would it be possible to do this in Kendo Mobile view?
alternatively, I wouldn't mind using the jquerymobile directly in my Kendo Mobile view if possible(I tried this ,, <input type='search' /> and didn't work.
Any help would be much appreciated,
Regards,
JOhn C
Joon
Top achievements
Rank 1
Rank 1
answered
on
03 Aug 2012
2 answers
125 views
Hi,
Is there a method available to smooth the pointer's transition between values in a radial gauge?
For example, if I set the value to 0 and then click to change the value to 100, the needle seems to very quickly (almost instantly) jump to the 100 position. This results in a unrealistic gauge. Is there a way to slow the animation?
I have tried the suggestion seen in another thread here, but it seemed to have no effect:
animation: {
duration: 10 // milliseconds that the animation will take to play
}
Thanks.
Is there a method available to smooth the pointer's transition between values in a radial gauge?
For example, if I set the value to 0 and then click to change the value to 100, the needle seems to very quickly (almost instantly) jump to the 100 position. This results in a unrealistic gauge. Is there a way to slow the animation?
I have tried the suggestion seen in another thread here, but it seemed to have no effect:
animation: {
duration: 10 // milliseconds that the animation will take to play
}
Thanks.
Dave
Top achievements
Rank 1
Rank 1
answered
on
03 Aug 2012
0 answers
169 views
Hi
Using the TabStrip UI element in our ASP.NET MVC 3 application using the Razor engine and binding the control to an IEnumerable<T> we noticed the following behaviour.
Using the TabStrip UI element in our ASP.NET MVC 3 application using the Razor engine and binding the control to an IEnumerable<T> we noticed the following behaviour.
- Using a FOR loop on the IEnumerable<T> to generate the Tab Items (Tab pages) works fine
- But setting the Tab Item Content within the same loop for some reason causes some kind of a deferred execution, the contents seem to be set after the tab pages are created (which I assume is related to the load-on-demand feature of the tabstrip)
- The problem is, the iteration seem to be using the last element in the model to set the content of all the tab pages.
Here is the sample code, could you please direct to the mistake in it or the right method using razor to acheive the same.
@model IEnumerable<KendoMVCExample.Models.CustomerAddress>
...@(Html.Kendo().TabStrip() .Name("CustomerAddressTabStrip") .Items(items => { foreach (var customer in Model) { items.Add() .Content(@<text> @RenderTableContent(customer) </text>)//<----this fails {last address is repeated on all} .Text(customer.CustomerName); //<----this works fine } }).SelectedIndex(0) ) @helper RenderTableContent(KendoMVCExample.Models.CustomerAddress customer) { <table> <tr> <td> @customer.AddressLine1<br /> @customer.AddressLine2<br /> @customer.AddressLine3<br /> </td> </tr> </table> }
0 answers
122 views
In editor, How Do I Add A Background Image To My TextArea? How to change backgroundcolor of a textarea?
this way don't work:
<textarea id="editor" rows="10" cols="30" style="width:710px; height:750px; background-image:url(layout.jpg); background-repeat:no-repeat;">
</textarea>
this way don't work:
<textarea id="editor" rows="10" cols="30" style="width:710px; height:750px; background-image:url(layout.jpg); background-repeat:no-repeat;">
</textarea>
