Telerik Forums
Kendo UI for jQuery Forum
5 answers
178 views
Are there any remote view examples in razor syntax anywhere?  I have not been able to find any and need to get them working.
Brian
Top achievements
Rank 1
 answered on 14 Aug 2013
2 answers
246 views
Hi,

I have been following several examples for the CRUD setup but seems i cannot get it to work.
Below is the code i run -
1. It reads perfectly.
2. It calls the save method
3. It sends the correct data to the update php file.
4. If i take the link with the head data from firebug and paste into the browser it do update the records
5. if i do the update from the grid it gets a 200 ok but nothing is updated in the database.

Where do i go wrong?
First is my html code
Next is my php file for update.

            <div id="example" class="k-content">
            <div id="grid"></div>
 
<divclass="console"></div>
 
            <script>
                $(document).ready(function (options) {
                    var company= '<?php echo $_GET["workingcompany"]; ?>';
                    var crudServiceBaseUrl = "../../data",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: "http://www.northpier.org/data/fetchcap.php?company="+company,
                                    dataType: "json"
                                },
 
 
update:  {
 
                                    url: "http://www.northpier.org/data/Updatecap.php?company="+company,
                                    type: "PUT",
                                    dataType: "jsonp"
                       
},
                                destroy: {
                                    url: crudServiceBaseUrl + "/destroy.php",
                                    dataType: "json"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/create.php",
                                    dataType: "json"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 30,
                            schema: {
                                model: {
 
 
                                                id: "id",
 
                                    fields: {
                                        id: { type: "string", editable: false },
                                        date_time: { type: "string"},
                                        Name: { type: "string", editable: true },
                                        Common: { type: "number", validation: { required: true, min: 0} },
                                        SeriesA: { type: "number", validation: { required: true, min: 0} },
                                        SeriesB: { type: "number", validation: { required: true, min: 0} },
                                        SeriesC: { type: "number", validation: { required: true, min: 0} },
                                    }
 
 
                                }
                            }
                        });
 
                    $("#grid").kendoGrid({
                        dataSource: dataSource,
 
filterable:true,
 
groupable:true,
 
                        navigatable: true,
                        pageable: true,
                        height: 400,
                        toolbar: ["create", "save", "update", "cancel"],
                        columns: [{
                                field: "Name",
                                title: "Name",
                                editable: true,
                            },
                            {
                                field: "Common",
                                title: "Common",
                            },
                            {
                                field: "SeriesA",
                                title: "Series A",
                            },
                            {
                                field: "SeriesB",
                                title: "Series B",
                            },   
                            {
                                field: "SeriesC",
                                title: "Series C",
                            }],
 
  columnMenu:{
    messages:{
      columns:"Choose columns",
      filter:"Apply filter",
      sortAscending:"Sort (asc)",
      sortDescending:"Sort (desc)"
    }
  },
 
 
                        editable: true,
                       
 
                       change: function() {
                            console.log("change event");
                        },
                        edit: function() {
                            console.log("edit event");
                        },
                        save: function() {
                            console.log("save event");
                        },
                        saveChanges: function() {
                            console.log("saveChanges event");
                              $('#grid').data().kendoGrid.refresh();
                        },
                        remove: function() {
                            console.log("remove event");
                        }
                    });
                });
            </script>
        </div>
<?php
$dbhost = 'localhost:3036';
$dbuser = 'XXXXXXXXXXXXX';
$dbpass = 'XXXXXXXXXXXXXXX';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
  die('Could not connect: ' . mysql_error());
}
parse_str(file_get_contents("php://input"),$post_vars);
$comp = $_GET['company'];
$mod = $_GET['models'];
$request = json_decode($mod);
 
foreach ($request as $product) {
 
$sql = "UPDATE captable
        SET Name='$product->Name',
        Common='$product->Common',
        SeriesA='$product->SeriesA',
        SeriesB='$product->SeriesB',
        SeriesC='$product->SeriesC'
        WHERE id='$product->id'";
 
mysql_select_db('XXXXXXXXXXX');
$retval = mysql_query( $sql, $conn );
 
if(!$retval )
{
  echo "OUCH!";
  //die('Could not update data: ' . mysql_error());
}
else
{
        $result3 = null;
echo $result3;
 
}
}
mysql_close($conn);
 
 
?>
Kiril Nikolov
Telerik team
 answered on 14 Aug 2013
1 answer
65 views
Hi,
I'm using a scroller for displaying readable paragraphs of text.  Right now in the Icenium simulator and on iOS and android clients the scroller shows any left or right aspect of the swipe as a springy left or right animation and then the scroller text recenters.  Is there any way to force a scroller to only scroll up and down and ignore any left/right info in the swipe so that the scroller doesn't feel loosely attached to the rest of the UI?

Thanks,
Dave
Alexander Valchev
Telerik team
 answered on 14 Aug 2013
6 answers
207 views
Hi,

Is it possible to have a multi axis chart using grouped data?

Country     Project     Product     Date
Philippines Project1    Product A   1-May-13
Philippines Project1    Product B   1-May-13
Philippines Project1    Product C   1-May-13
Japan       Project2    Product D   3-Jun-13
Japan       Project2    Product E   3-Jun-13
I have the above data and I need to show a line chart of the number of distinct Projects per country per month in the firs axes and on the 2nd I want to show the number of Products per country per month in a column chart.

On the CategoryAxis is the date field and I've set the ChartAxisBaseUnit to Months.

The line chart seem to be working fine but he column chart isn't displaying as expected.

I could use some help.

Thanks,
Ronald
Ronald
Top achievements
Rank 1
 answered on 14 Aug 2013
1 answer
92 views
Hi

I have upgraded Kendo UI for ASP.NET MVC to version 2013.2.716 from 2013.1.319 (to fix grouping issue in IE8, which it has) but now the grid sort functionality is no longer working.  In Fiddler I can see the sort value is 'undefined-asc' so the sort column is not getting set.

Is this an issue you are aware of and can help fix? 

Kind regards
David
Atanas Korchev
Telerik team
 answered on 14 Aug 2013
1 answer
270 views
How I can use it correctly. All accent are broken when I use this culture with calendar. A got wierd caracter instead. I try to open the file directly from the browser, same thing. But file open with "normal" text editor are OK. Do I need to set the charset in the js file? I try to set it to UTF8 in the <script> definition without success.

Thanks
Atanas Korchev
Telerik team
 answered on 14 Aug 2013
10 answers
423 views
Hi,
I am evaluating Kendo UI framework to build cross device app!

I've put together a few Views and it looks good so far.
As I am trying it out on iPad, I noticed that the elastic scrolling behavior gives the app non-native like behavior!

If the web app is flicked past the bottom or top of the page, the page would elastically get tugged away from
the header or footer bar (essentially bottom/top of the screen).

How do I prevent the elastic scrolling in views so that the app behaves like native app (without elastic scrolling)?

I've tried setting the view scroller elatic property false on the view's data-init function and that didn't help.
Here is the two lines I've put in data-init function:
            var scroller = e.view.scroller;
            scroller.setOptions({ elastic: false });

(Found a few suggestions on the internet like blocking touch move on body, setting overflow to hidden on body
and none of them helped!).

Please let me know how to prevent elastic scrolling.
Thanks.

B.Manohar
Petyo
Telerik team
 answered on 14 Aug 2013
1 answer
66 views
I have just had to upgrade to kendoui.aspnetmvc.hotfix.2013.2.813.commercial to fix some other issues with this control. However it now appears that the CustomTemplate is not displaying in the toolbar. I did note that in this package the dll is still version 2013.2.729.340, however it did fix my bug from the original 2013.2.729 major build.

Are you able to have a look at this and tell me if there is a quick fix 

@(Html.Kendo().Editor()
      .Name("sectionBlockEditor")
      .HtmlAttributes(new { style = "width: 900px;height:530px" })           
      .Tools(tools => tools
                          .Clear()                         
                          .Formatting()
         
                          .CustomTemplate(ct => ct.Template("<label for='templateTool' style='vertical-align:middle;'>Background:</label> <select id='templateTool'><option value=''>none</option><option value='\\#ff9'>yellow</option><option value='\\#dfd'>green</option></select>"))
         
         
      )     
)
That didnt work although it should.
Alex Gyoshev
Telerik team
 answered on 14 Aug 2013
1 answer
73 views
Hey guys. I'm new to Kendo UI and basically to MVC framework but that is the tool I have to use so... :)

 In the example below IEnumerable is used to simply enumerate over entire data stored in Close.
But if I send data as a List

@model List<Kendo.Mvc.Examples.Models.StockDataPoint>

and later would like to access specific data(not all data like hereseries.Column(model => model.Close)  )  how could I do that exactly ?

http://demos.kendoui.com/dataviz/bar-charts/grouped-data.html

@model IEnumerable<Kendo.Mvc.Examples.Models.StockDataPoint>
 
<div class="chart-wrapper">
    @(Html.Kendo().Chart(Model)
        .Name("chart")
        .Title("Stock Prices")
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("_StockData", "Scatter_Charts"))
            .Group(group => group.Add(model => model.Symbol))
            .Sort(sort => sort.Add(model => model.Date).Ascending())
        )
        .Series(series => {
            series.Column(model => model.Close)
                .Name("#= group.value # (close)");
        })
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels
                .Format("${0}")
                .Skip(2)
                .Step(2)
            )
        )
        .CategoryAxis(axis => axis
            .Categories(model => model.Date)
            .Labels(labels => labels.Format("MMM"))
        )
    )
</div>
 
Mateusz
Top achievements
Rank 1
 answered on 14 Aug 2013
3 answers
250 views
Here is my page with the code and the script, basically the validator does not validate the date. I don't know how to make the control get validated by the custom rule.  You can do control F  $("#service").kendoValidator to see the where the validation is called and configured.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Edit Service - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/KendoUI/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/KendoUI/styles/kendo.metro.min.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

</head>

<body>
<input type="hidden" id="RootUrl" value="http://localhost:64728/"/>
<div class="page">
<div class="header">
<div class="title">
<h1>
Provider Site Maintenance
</h1>
</div>
</div>
<div style="clear: both;">
</div>
<div id="mainMenu">
</div>
<div class="main">





<h2>Edit Service</h2>

<input type="hidden" id="serviceId" value="12" />
<input type="hidden" id="getServiceUrl" value="/Services/GetService"/>
<input type="hidden" id="saveServiceUrl" value="/Services/SaveService"/>


<form id="service" name="service" action="">
<fieldset>
<legend>Service</legend>
<input type="hidden" name="serviceId" id="serviceId" data-bind="value: serviceId"
class="k-textbox" />
<label for="serivceName">
Service Name :
</label>
<input type="text" id="serivceName" name="serviceName" data-bind="value: serviceName"
class="k-textbox" required="true" maxlength="255" validationmessage="Service Name is required" />
<span class="k-invalid-msg" data-for="serivceName"></span>
<br />
<label for="serviceDescription">
Service Description :
</label>
<input type="text" id="serviceDescription" name="serviceDescription" data-bind="value: serviceDescription"
class="k-textbox" required="true" maxlength="1000" validationmessage="Service Description is required" />
<span class="k-invalid-msg" data-for="serviceDescription"></span>
<br />
<label for="serviceCode">
Service Code :
</label>
<input type="text" id="serviceCode" name="serviceCode" data-bind="value: serviceCode" maxlength="20"
class="k-textbox" validationmessage="Service Code is required" required="true" />
<span class="k-invalid-msg" data-for="serviceCode"></span>
<br />
<label for="baseCostAmount">
Cost :
</label>
<input type="text" id="baseCostAmount" name="baseCostAmount" required="true" min="1"
data-bind="value: baseCostAmount" validationmessage="Cost Must be greater than 0" />

<br/>
<label for="newEffectiveDate">
Effective Date :
</label>
<input id="newEffectiveDate" name="newEffectiveDate" required="true" type="date" data-bind="value: newEffectiveDate"
/>
<span data-bind="text: newEffectiveDateMessage" class="warning"> </span>
</fieldset>



<br/>
<button class="k-button" id="editServiceSaveButton" data-bind="click : validateAndSave">Save</button>
<span style="margin-left:5px; color:green" id="saveComplete" name="saveComplete" data-bind="text : SaveComplete, visible : ShowSaveComplete" ></span>
<span style="margin-left:5px; color:red" id="saveError" name="saveError" data-bind="text : SaveError, visible : ShowSaveError" ></span>
</form>


</div>
</div>
<script src="/Content/KendoUI/JS/jquery.min.js"></script>
<script src="/Content/KendoUI/JS/kendo.web.min.js"></script>
<script src="/Scripts/Views/Common.js"></script>
<script src="/Scripts/Views/Shared/_Layout.js"></script>


<script>



$(document).ready(function () {
//local variables
var getServiceUrl = $("#getServiceUrl").val();
var saveServiceUrl = $("#saveServiceUrl").val();
var serviceId = $('#serviceId').val();

var viewModel = kendo.observable({
toJSON: function () {
// This hack is because .net controllers don't like dates.
// call the original toJSON method from the observable prototype
var result = kendo.data.ObservableObject.prototype.toJSON.call(this);
result.currentEffectiveDate = common.dateFormat(this.get("currentEffectiveDate"), "mm/dd/yyyy HH:MM:ss");
result.newEffectiveDate = common.dateFormat(this.get("newEffectiveDate"), "mm/dd/yyyy HH:MM:ss");

return result;
},
saveComplete: '',
showSaveComplete: function () {
return this.get("saveComplete") != '';
},
saveError: '',
showSaveError: function () {
return this.get("saveError") != '';
},
isNew: null,
serviceId: null,
serviceName: "",
serviceDescription: "",
baseCostAmount: null,
currentEffectiveDate: null,
newEffectiveDate: null,
newEffectiveDateMessage: function () {
return "Effective date must be greater than or equal to " + common.getDateString(this.get("currentEffectiveDate"));
},
validateAndSave: function (e) {

e.preventDefault();



var validator = $("#service").kendoValidator().data("kendoValidator");
if (!validator.validate())
return false;
$.ajax({
type: "POST",
url: saveServiceUrl,
data: viewModel.toJSON(),
cach: false
}).done(function (result) {
if (!result.Success) {
viewModel.set("saveComplete", '');
viewModel.set("saveError", "Update Failed " + result.Message);
} else {
viewModel.set("SaveError", '');
viewModel.set("currentEffectiveDate", viewModel.get("newEffectiveDate"));
viewModel.set("caveComplete", 'Save Successful');
}
});
return false;
}
});

//local functions
function initControls() {
$("#baseCostAmount").kendoNumericTextBox({
format: "c",
decimals: 2
});
$('#newEffectiveDate').kendoDatePicker({ format: "MM/dd/yyyy" });

$("#service").kendoValidator({
rules: {
//implement your custom date validation
dateValidation: function (e) {
var currentDate = Date.parse($(e).val());
//Check if Date parse is successful
if (!currentDate) {
return false;
}
return true;
}
},
messages: {
//Define your custom validation massages
required: "Date is required message",
dateValidation: "Invalid date message"
}
});
}

function loadViewModelFromController() {
$.ajax({
type: "GET",
contentType: 'application/json',
url: getServiceUrl,
data: { id: serviceId },
cach: false
}).done(function (o) {
viewModel.set("isNew", o.IsNew);
viewModel.set("serviceId", o.ServiceId);
viewModel.set("serviceName", o.ServiceName);
viewModel.set("serviceDescription", o.ServiceDescription);
viewModel.set("serviceCode", o.ServiceCode);
viewModel.set("baseCostAmount", o.BaseCostAmount);
viewModel.set("newEffectiveDate", new Date(common.getDateString(o.NewEffectiveDate)));
viewModel.set("currentEffectiveDate", new Date(common.getDateString(o.CurrentEffectiveDate)));
kendo.bind($("#service"), viewModel);
});
}

function addNew() {
viewModel.set("isNew", true);
kendo.bind($("#service"), viewModel);
}

//Init the form
initControls();
if (serviceId > 0) {
loadViewModelFromController();
} else {
addNew();
}

});
</script>

</body>
</html>
Petyo
Telerik team
 answered on 14 Aug 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?