I'm using knockout-kendo and here is my code:
markup:
<body>
<div id="mursi"
data-bind="kendoGrid:{ dataSource:{data:selectedAsset().RealEstateAssetBlockParcel ,pageSize:3} ,data:selectedAsset().RealEstateAssetBlockParcel, pageable: true,pageSize:5,sortable:true,scrollable:false,selectable:true,columns:[{title:'parcel'},{title:'plot'},{title:'subplot'},{ width:60},{ width:60}] ,rowTemplate: 'rowParcelTmpl', altRowTemplate: 'altParcelTmpl', useKOTemplates: true }"></div>
<button data-bind="replaceSelectedAsset">click me</button>
<script id="rowParcelTmpl" type="text/html">
<tr>
<td>
<div data-bind="text:Block"></div>
</td>
<td>
<div data-bind="text:Plot"></div>
</td>
<td>
<div data-bind="text:SubPlot"></div>
</td>
<td>
<button class="k-button"><span class="update-button"></span></button>
</td>
<td>
<button class="k-button"><span class="remove-button"></span></button>
</td>
</tr>
</script>
<script id="altParcelTmpl" type="text/html">
<tr class="k-alt">
<td>
<div data-bind="text:Block"></div>
</td>
<td>
<div data-bind="text:Plot"></div>
</td>
<td>
<div data-bind="text:SubPlot"></div>
</td>
<td>
<button class="k-button"><span class="update-button"></span></button>
</td>
><span class="remove-button"></span></button></td>
</tr>
</script>
</body>
here is my JS:
var selectedAsset = ko.observable();
//viewmodels
var assetViewModel = function () {
this.RealEstateAssetBlockParcel = ko.observableArray([]);
};
var asset = new assetViewModel();
asset.RealEstateAssetBlockParcel.push({Block: 1, Plot: 2, SubPlot: 3, Id: 0});
selectedAsset(asset);
var replaceSelectedAsset = function () {
selectedAsset(asset);
};
ko.applyBindings();
everything is allright until you press the "click me" button, which suppose to select another asset and display its parcels grid,
Instead i got following error:"Uncaught TypeError: Cannot call method 'find' of undefined "
(which originated in kendo.web.all)
http://jsbin.com/oboxig/3/edit
Help will be appreciated
Thanks
What I see in you JSBin is an error in the data-bind of the button.
Could you try:
function replaceSelectedAsset () {
selectedAsset(asset);
};
and define the button as:
<button onclick="replaceSelectedAsset()">click me</button>
Related
I have a problem with KnockoutJS, where the $parent binding context is undefined.
Code
<div class="row">
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">
<h2 class="panel-title">Products Data</h2>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed" data-bind="with: ProductsViewModel">
<thead>
<tr>
<th>ProductID</th>
<th>Product Name</th>
<th>Units In Stock</th>
<th>Action</th>
</tr>
</thead>
<tbody data-bind="foreach: products">
<tr>
<td data-bind="text: $data.ProductID"></td>
<td data-bind="text: $data.ProductName"></td>
<td data-bind="text: $data.UnitsInStock"></td>
<td><button class="btn btn-danger btn-xs" data-bind="click: $parent.RemoveProduct">[x] delete</button></td>
</tr>
</tbody>
</table>
<button class="btn btn-large" data-bind="click: GetProducts()">Load Data</button>
</div>
</div>
</div>
</div>
and:
/// <reference path="../Scripts/knockout-3.4.0.js" />
/// <reference path="../Scripts/jquery-1.10.2.js" />
function ProductsViewModel() {
var self = this;
self.products = ko.observableArray([]);
self.RemoveProduct = function () {
bootbox.alert({ message: 'Pressed !!', size: 'small' });
}
self.GetProducts = function () {
self.products.removeAll();
$.getJSON('/api/products', function (data) {
$.each(data, function (key, value) {
self.products(data);
});
});
}
}
$(document).ready(function () {
ko.applyBindings(ProductsViewModel);
});
All the binding work correctly in the table, except the click event binding on the button, where the $parent is undefined.
If I remove the button control all the data binds correctly in the table element.
Any ideas how to fix this ?? It's all standard Knockout code to my knowledge.
Thanks in advance.
bax2097
I've fixed this by removing the $parent altogether. All working now.
Problems
In your Html you bind your table into a with: ProductsViewModel. Which is not needed.
In your Load data button you did not pass the actual function, instead you execute it right away, so just remove ().
See this JsFiddle for demo
<tr style="background: #D0CDCD;">
<td colspan='2'>
<input type="text" name="mytext1[]">
</td>
<td></td>
<td colspan='2' style="text-align:right;">
<input type="text" name="mytext2[]" id="txt1" onkeyup="sum();">
</td>
</tr>
This is my html code to add dynamic textboxes.
JS Script is follows
<script type="text/javascript">
$(document).ready(function() {
var max_fields= 3;
var x = 1;
$('a').click(function() {
if(x < max_fields){
x++;
$('#myTable #row').append('<tr class="child"><td class="child" colspan="2"><input type="text" name="mytext1[]"></td><td></td><td colspan="2" style="text-align:right;"><input type="text" name="mytext2[]"></td></tr>');
}
});
});
</script>
My problem is that I need to store the dynamically added textbox values to a variable so that I can perform some mathematical operations in that. I don't know how to achieve this. Please help me.
I got the result. I make use of javascript and jQuery
<tr style="background: #D0CDCD;">
<td colspan='2'><input type="text" name="mytext1[]"></td>
<td></td>
<td colspan='2' style="text-align:right;">
<input type="text" class="value_field" name="mytext2[]" >
</td>
</tr>
Function to append
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
$('#myTable #row').append('<tr class="child"><td class="child" colspan="2"><input type="text" name="mytext1[]"></td><td></td><td colspan="2" style="text-align:right;"><input type="text" name="mytext2[]" class="value_field"></td></tr>');
$("input.value_field").blur(function(){
check_value();
});
});
});
$("input.value_field").blur(function(){
check_value();
});
I have tried to implement a progress bar in my application. When I used a numeric text box the progress bar is not progressing forward. How to make it progress using a numeric text box. Thanks.
<form name="ContactInforForm" action="ContactInformation.html" onsubmit="return ValidateRequiredFields()" method="post">
<div>
<table class="forms" style="padding-left:9em">
<tr>
<td>
<h4>Profile Completeness: <span id="completed">20%</span></h4>
</td>
<td>
<div id="profileCompleteness"></div>
</td>
</tr>
<tr>
<td>
Employee Name:
</td>
<td>
<input type="text" name="FName" id="txtFname" />
</td>
</tr>
<tr>
<td>
Employee Id:
</td>
<td>
<input type="text" name="EmpID" id="txtEmpID" />
</td>
</tr>
<tr>
<td>
Age:
</td>
<td>
<input type="text" name="Age" id="txtAge" />
</td>
</tr>
<tr>
<td>
Contact Phone:
</td>
<td>
<input type="text" name="PrimaryPhone" id="txtPriPhone" />
</td>
<td><span id="PPhoneValidationMsg" style="color:red; font-size:smaller; font-weight:bold; "></span></td>
</tr>
<tr>
<td>
<button style="width:75px;" type="button" id="btnNext" onclick="ValidateRequiredFields();">Submit</button>
</td>
</tr>
</table>
</div>
</form>
<!--Make all the controls into kendo -->
<script>
$(document).ready(function() {
$("#txtFname").kendoMaskedTextBox({
});
$('#txtEmpID').kendoNumericTextBox({
});
$('#txtAge').kendoNumericTextBox({
});
$('#txtDob').kendoDatePicker({
});
$('#txtDesig').kendoMaskedTextBox({});
$('#txtAdd1').kendoMaskedTextBox({
});
$('#txtAdd2').kendoMaskedTextBox({
});
$('#drpStates').kendoDropDownList({
});
$('#drpCountry').kendoDropDownList({
});
$("#txtPriPhone").kendoMaskedTextBox({
mask: "(000)000-0000"
});
$("#btnNext").kendoButton();
var pb = $("#profileCompleteness").kendoProgressBar({
type: "chunk",
chunkCount: 10,
min: 0,
max: 10,
value: 2
}).data("kendoProgressBar");
$(".forms input").change(function() {
var completeness = 2;
$(".forms input").each(function() {
if (this.value != "") {
completeness++;
}
});
pb.value(completeness);
$("#completed").text((completeness * 10) + "%");
});
});
</script>
When I changed the kendo numeric text box to masked text box the code seems to work fine. But for my requirement I require numeric textbox.
The default value of a numeric textbox may not be "". Try something like this:
$(".forms input").change(function () {
var completeness = 2;
$(".forms input").each(function () {
if (this.hasClass("k-numerictextbox") && this.value != "0" && this.value != "") {
completeness++;
} else if (this.value != "") {
completeness++;
}
});
pb.value(completeness);
$("#completed").text((completeness * 10) + "%");
});
Would be pretty easy to set a break point and see what an empty numeric textbox looks like.
I'm trying to put a button into grid. In order to achieve that I wanted to use rowTemplates. However I have a problem with geting and item id and put it into action parameter.
So far I tried these constructinos
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td>
<form action="/Home/EditProduct/?id="+ "#=Id#" class="addEditButton" method="post">
<submit type="button" value="Edytuj"/>
</form>
</td>
</tr>
</script>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td>
<form action="/Home/EditProduct/?id="+ ${ Id } class="addEditButton" method="post">
<submit type="button" value="Edytuj"/>
</form>
</td>
</tr>
</script>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td>
<form action="/Home/EditProduct/?id=${ Id }" class="addEditButton" method="post">
<submit type="button" value="Edytuj"/>
</form>
</td>
</tr>
</script>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td>
<form action="/Home/EditProduct/?id=${ Id } class="addEditButton" method="post">
<submit type="button" value="Edytuj"/>
</form>
</td>
</tr>
</script>
However non of this method can successfully retrieve value of id parameter from object bounded to row. Is it possible to somehow pass value of id into action ??
I think this will answer your question.
http://andregelderblom.wordpress.com/2012/02/27/pass-kendoui-datagrid-variable-to-template-that-uses-zend-url/
I have a simple view that has 2 textboxes and 1 file input.
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<iLoyalty.BackOfficePortal.Models.SegmentModel>" %>
<% using (Html.BeginForm("SaveSegment", "Segment", FormMethod.Post, new { id = "SegmentForm", enctype = "multipart/form-data" }))
{ %>
<div class="StContent">
<h3>
<%= iLoyalty.BackOfficePortal.Globals.GetResourceText("CardSegmentInsert")%></h3>
<br />
<%= Html.HiddenFor(model => model.ApplicationName, new { id = "ApplicationName" })%>
<%--<%= Html.HiddenFor(model => model.SegmentID, new { id = "SegmentID" })%>--%>
<table width="95%" border="0" cellspacing="1" cellpadding="4" class="Table" style="margin: 0 0 0 10px">
<tr class="Tr0">
<td style="width: 200px" class="Tr1">
<%= iLoyalty.BackOfficePortal.Globals.GetResourceText("ApplicationName")%>
</td>
<td>
<span id="ApplicationName">
<%= Model.ApplicationName %></span>
</td>
</tr>
<tr class="Tr0">
<td style="width: 200px" class="Tr1">
<%= iLoyalty.BackOfficePortal.Globals.GetResourceText("CardSegmentName")%>
</td>
<td>
<%= Html.TextBoxFor(model => model.SegmentName, new { id = "SegmentName", #class = "txtBox" })%>
</td>
</tr>
<tr class="Tr0">
<td style="width: 200px" class="Tr1">
<%= iLoyalty.BackOfficePortal.Globals.GetResourceText("RewardRate")%>
</td>
<td>
<%= Html.TextBoxFor(model => model.GainRate, new { id = "GainRate", #class = "txtBox" })%>
</td>
</tr>
<tr class="Tr0">
<td style="width: 200px" class="Tr1">
</td>
<td>
<input name="PostedFile" id="PostedFile" type="file" class="txtBox" style="width: 200px" />
</td>
</tr>
<tr class="Tr0">
<td class="Tr1" colspan="2" style="text-align: right">
<input id="saveBtn" type="submit" class="button" value='<%= iLoyalty.BackOfficePortal.Globals.GetResourceText("Add")%>' />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#saveBtn').click(function () {
//BlockPage();
var options = {
target: '#contentDiv',
success: function () {
BlockDivSuccess('generalCover');
}
};
$('#SegmentForm').ajaxForm(options);
});
});
</script>
<% } %>
After clicking saveBtn I see that in debug mode it posts the appropriate data to the appropriate action and it works well. And in firebug I see the response to the ajax call is just like what I expect to have. But only in ie I get an javascript error that just says:
Microsoft JScript runtime error: Object expected
After I remove the line above, everything is ok in all browsers. But I need this too.
<input name="PostedFile" id="PostedFile" type="file" class="txtBox" style="width: 200px" />
Do you have any idea about this problem? It is interesting that it occurs only in ie.
Thanks in advance,
Just attach your Visual Studio debugger to IE process and then you can see which javascript variable is null.
Open Debug menu, choose Attach to Process..., select iexplore.exe from the list of running processes and click Attach. Make sure, that 'Attach to:' textbox says Script otherwise click Select... button and choose it.
Also make sure that script debugging is not disabled in IE.
See: http://www.jonathanboutelle.com/how-to-debug-javascript-in-internet-explorer