Telerik Forums
Kendo UI for jQuery Forum
3 answers
717 views
hello,
<ul data-role="listview" data-type="group" id="itemListView" data-click="listViewClick" data-style="inset">
    <li class="km-group-container words">
        <div class="km-group-title">
            <div class="km-text">test</div>
        </div>
        <ul class="km-list">
            <li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item1">A1</label></li>
            <li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item2">A2</label></li>
            <li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item3">A3</label></li>
            <li class="checkboxlimit" cbl="2" ontouchend="touchEnd(event);"><label class="km-listview-label"><input type="checkbox" id="item4">A4</label></li>
        </ul>
    </li>
</ul>

there is  a checkbox group in listview ,  when user tap checkbox , data-click="listViewClick" ,event fire

function listViewClick(e){
     if(e.target.hasClass("boxlimit")){
 
        //setTimeout(function(){
 
            var target=e.target.find("input[type=checkbox]");
 
            MYAPP.MultiObj=target;
 
            var fathernode=e.target.parent();
            var root=fathernode.parent();
 
            var max=parseInt(fathernode.attr("cbl"));
            if(max=="" || max<=0)  return;
            var total=0;
            var obj=root.find("input[type=checkbox]");
            for(var i=0; i<obj.length;i++){
                //console.log("index:"+i+obj.eq(i).attr("checked"));
                //console.log("index:"+i+obj.eq(i).prop("checked"));
                if(obj.eq(i).prop("checked")){
                    total=total+1;
                    if(total>max){
                        //obj.eq(i).removeAttr("checked");
                        MYAPP.MultiObj.removeAttr("checked");
                        openSubmitDailog(" exceed max number what can be choosed!");
                        //console.log("no more than...");
                        return false;
                    }
 
                }
            }
        //},300);
    }
 
}
Test env:  ipad mini
        when tap down on any  one of  chekcbox group in listview,  checkbox 's  checked status can not be access by right now ,  I have tested, maybe about 300ms delay later,  the choosed  checkbox's checked status can be get. I guess kendui  framework optimized it for touch screen to avoid wrong operation
BUT, My goal is to limit the  number of checkbox can be choosed,  for example ,   in this  code snippets,  four checkbox in group ,can be choose no more than 2 items, so in function listViewClick, I am trying to count the number that checked when user tap down every time,  So because of delay change of  checked status ,  My way can not work !  

 Q: how to get checked status right now when user tap down? or other suggestion for limit the number user can be choose?




 
Petyo
Telerik team
 answered on 01 Aug 2013
1 answer
122 views
When I am trying to edit or add in grid using Custom Dropdown Binding... in the code behind the viewmodel is not binding properly. It shows Id as Null and Name as Collection.
Could any one please solve this problem?
Thanks in Adv.
My View Model:
public class CategoryViewModel
  {
 
      public int? CategoryId { get; set; }
      public string  CategoryName { get; set; }
 
  }
My Editor Template
@model ViewModel.Query.CategoryViewModel
 
@(
    Html.Kendo().DropDownListFor(m => m)
        .DataTextField("CategoryName")
        .DataValueField("CategoryId")
        .BindTo((System.Collections.IEnumerable)ViewData["categories"])
 
)
My Grid Binding
@(Html.Kendo().Grid<TestCategoryQueryModel>()
                      .Name("Grid")
                      .Columns(columns =>
                          {
                              columns.Bound(p => p.Id);
                              columns.Bound(p => p.CatName);
 
                              columns.Bound(p => p.CatDescription).Filterable(false);
                              columns.Bound(p => p.CatImg).Filterable(false);
                              columns.Bound(p => p.Categories).Filterable(false);
                              columns.Bound(p => p.CatPublish).Filterable(false);
                              columns.Bound(p => p.CatShowOrder).Filterable(false);
                              columns.Bound(p => p.CatSubjectToAcl).Filterable(false);
                              columns.Bound(p => p.CatSearchKeys).Filterable(false);
                              columns.Command(c =>
                                  {
                                      c.Edit();
                                      c.Destroy();
                                  });
                          })
                      .ToolBar(tools =>
                          {
                              tools.Create();
                          })
                      .Sortable()
                      .Editable(editable => editable.Mode(GridEditMode.InLine))
                      .Pageable(pageable =>
                          {
                              pageable.Refresh(true);
                              pageable.PageSizes(true);
                          })
                      .Filterable()
                      .Groupable()
                      .ColumnMenu()
                      .DataSource(dataSource => dataSource
                                                    .Ajax()
                                                    .Model(model =>
                                                        {
                                                            model.Id(p => p.Id);
                                                            model.Field(p => p.Categories).DefaultValue(ViewData["defaultCategory"] as CategoryViewModel);
                                                        })
                                                    .Events(events=>events.Error("error_handler"))
                                                    .Read(read => read.Url("/api/TestCategoryWebApi").Type(HttpVerbs.Get))
                                                    .Create(create => create.Url("/api/TestCategoryWebApi").Type(HttpVerbs.Post))
                                                    .Update(update => update.Url("/api/TestCategoryWebApi").Type(HttpVerbs.Put))
                                                    .Destroy(destroy => destroy.Url("/api/TestCategoryWebApi").Type(HttpVerbs.Delete))
                      ))
When I am trying to edit, the datasource in Json Format
({$id:"2", Id:1, CatName:"Category Name1", CatDescription:"Test Description1", CatImg:"Image1", CatParentId:1, CatSubjectToAcl:false, CatSearchKeys:"Test 1", CatPublish:true, CatShowOrder:1, Categories:{CategoryId:3, CategoryName:"Category Name11"}})
and in the code behind(Web APi)when I trying to capture in the model it shows like this(Plz check the attachment)
 
Vladimir Iliev
Telerik team
 answered on 01 Aug 2013
1 answer
154 views
Following the SDK example on a fully configured scheduler with 3 views (day, month, agenda) and bound remote data:

var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.destroy();

This seems to only destroy the "views"... but the Day|Month|Agenda buttons as well as the date picker and outer container remain.  I would expect the destroy() method to destroy everything properly.

Is there something I am missing?





Rosen
Telerik team
 answered on 01 Aug 2013
1 answer
225 views
Hi All,

I am getting this error.

Cannot read property '__count' of undefined

I have read up on this and the solution was to make sure that this statement is part of the model.

                    total: function (data) {
                        return data["odata.count"];
                    },

Fiddler returns the correct information 

  "odata.metadata":"<url>/%24metadata#categories","odata.count":"1","value":[
    {
      "SubCategories":[
        {
          "Id":1,"Name":"Skateboards","CategoryId":1,"Tracking":{
            "CreatedBy":"tester","CreatedOn":"2013-07-29T14:48:25.987","ModifiedBy":"tester","ModifiedOn":"2013-07-29T14:48:25.987","Timestamp":"AAAAAAAACAk="
          }
        }
      ],"Id":1,"Name":"Sports","Tracking":{
        "CreatedBy":"tester","CreatedOn":"2013-07-29T14:48:25.987","ModifiedBy":"tester","ModifiedOn":"2013-07-29T14:48:25.987","Timestamp":"AAAAAAAACAY="
      }
    }

Here is the data source configuration.  

new kendo.data.HierarchicalDataSource({
            type: "odata",
            transport: {
              read: {
                  url: resourceurl + "/categories",
                  data: {
                      $expand:"SubCategories"
                  },
                  dataType: "json"
              }  
            },
            schema: {
                model: {
                    id: "Id",
                    hasChildren: true,
                    children: "SubCategories",
                    data: function (data) {
                        if (data.value) {
                            return data.value;
                        }
                        delete data["odata.metadata"];
                        return [data];
                    },
                    total: function (data) {
                        return data["odata.count"];
                    },
                    errors: function (data) {
                    }                    
                }
            }
        });

Any ideas?

Regards

Richard...
Richard
Top achievements
Rank 1
 answered on 31 Jul 2013
3 answers
2.3K+ views
I have something like this:
<div id="view1" data-role="view" data-model="viewModel" data-title="view1">
    <ul id="listview" data-bind="source: dataSource, click: foo" data-role="listview" data-template="template"></ul>
</div>
  
<script type="text/x-kendo-template" id="template">
    <a>${link}</a>
</script>

And on a separate js file:
var viewModel = kendo.observable ({
    foo: function (parameter) {
        //use parameter
    }
});

I want to know if there is any way to pass a parameter to foo through the click event in bind-data.
leniency
Top achievements
Rank 1
 answered on 31 Jul 2013
2 answers
86 views
I have created a custom widget based on the tutorial: http://docs.kendoui.com/howto/create-custom-kendo-widget

if I try to do: $( '#widgetId' ).data( 'kendoMyCustomWidget' ).something(); 

This doesn't work or:

$( '#widgetId' ).data( 'MyCustomWidget' ).something(); 

This is how the kendoWindow API example references internal methods and I would like to be able to do this also.

Any ideas?


Thanks.


Stephen
Top achievements
Rank 1
 answered on 31 Jul 2013
1 answer
79 views
I just want to react if the user is clicking on page forward or page backward. Depending which page command gets executed I want to call my separate functions. In these functions I want to load my datasource (next/prior e.g. 50 entries). 
I don't wan't to use automatic server calls. 
Is there any way to do so?

Best regards
Rajeev kumar pandit
Atanas Korchev
Telerik team
 answered on 31 Jul 2013
1 answer
121 views
Based on the documentation, I expected the .date property to support a time, so I could say what day and time I want the VIEW to default to, while "StartTime" would determine how much time to show total.

Anyway - how do I allow the Week view show midnight to midnight but have "9am" the default viewable area so users don't need to scroll down?
Vladimir Iliev
Telerik team
 answered on 31 Jul 2013
2 answers
57 views
Do you plan to add resource view to the scheduler  where resources will be rendered on some axis?
Anton
Top achievements
Rank 1
 answered on 31 Jul 2013
1 answer
261 views
First of all...this is my first Kendo app...I've been using Telerik controls for a couple of years, but we are upgrading and this is my first attempt here.

I have a simple app that I have extracted from my real page, that I cannot seem to get the treeview to show up on.  The data appears to be getting there, but I'm missing something on my definition, I just don't know what.

Here is the HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CDefault.cs" Inherits="CDefault" %>

<%@ Register Assembly="ABL.Controls, Version=1.0.0.0, Culture=neutral, PublicKeyToken=d35011ca6b35a98a" Namespace="ABL.Controls" TagPrefix="cc1" %>

<!DOCTYPE html>
<html>
<head>

<title>View Document Library</title>

<!-- Kendo styles from the CDN! -->
<link href="https://da7xgjtj801h2.cloudfront.net/2013.1.319/styles/kendo.blueopal.min.css" rel="stylesheet" />
<link href="https://da7xgjtj801h2.cloudfront.net/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />

</head>
<body id="pageBody">
<form id="form1" runat="server">
<div>
<div id="treeviewLeft" >
</div> 
<br />
<table>
<tr>
<td></td>
<td style="padding-left:120px">
<button class="k-button" id="btnUploadDocument">Upload Document</button>
</td>
<td style="padding-left:820px">
<button class="k-button" id="btnUseSelected">Use Selected</button>
&nbsp;&nbsp;
<button class="k-button" id="btnClose">Close</button>
</td>
<td></td>
</tr>
</table>
</div>
<!-- JavaScript at the bottom for fast page loading -->

<!-- Fix for IE < 8 that don't have built in JSON support -->
<script src="javascript/json2.js" type="text/javascript"></script>

<!-- Grab Google CDN's jQuery, with a protocol relative URL -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- IE HTML5 enabling script: -->
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<!--kendo web-->
<script src="https://da7xgjtj801h2.cloudfront.net/2013.1.319/js/kendo.web.min.js"></script>

<!-- libraries -->
<script src="libs/rotate/jQueryRotateCompressed.2.2.js" type="text/javascript"></script>
<script src="libs/jQueryFileDownload/jquery.fileDownload.js" type="text/javascript"></script>

<!-- local javascript -->
<script src="javascript/authentication.js" type="text/javascript"></script>
<script src="javascript/adcUtilities.js" type="text/javascript"></script>
<script src="javascript/CdefaultViewController.js" type="text/javascript"></script>

<%--<% End If%>--%>
</form>
</body>
</html>

AND here is the Controller file:
// Copyright 2013 Acuity Brands Lighting, Inc. All Rights Reserved.

// This is the view controller for the default.aspx web page.

$(function () {

$.ajax({
//Call for data goes here
url: 'Data/data.aspx',
dataType: 'json',
async: true,
success: function (returnedTreeNodeData)
{
$('#loadingIndicator').remove();
console.log("Get TreeviewNodeData CALL SUCCESS");
console.log("********** treeView data: JSON structure data, from the data.aspx Call **********");
console.log(JSON.stringify(returnedTreeNodeData, null, 1));
alert("Get TreeviewNodeData Success!");
treeView.dataSource.data(returnedTreeNodeData);
}
})

var treeView = $("#treeviewLeft").kendoTreeView({
expanded: true,
autoBind: true,
dataTextField: "Text",                                  //I've tried several things here...so far no joy.
items: "ChildNodes",
datasource: []
}).data("kendoTreeView");
});

AND here is where I get my data, which as I say appears to be getting to the Controller just fine.  BTW...this is a treeview Light version of what I'll eventually be sending.


#region DataClass

[Serializable]
public class TreeviewNodeData
{
private TreeNode tNode;
public TreeNode libraryNde
{
get
{
tNode = new TreeNode("Rep Library");
return tNode;
}
set
{ }
}

public List<TreeNode> topNde { get; set; }
}

#endregion


public partial class Data_data : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string hold_brand = string.Empty;
string output = "default";
JavaScriptSerializer jss = new JavaScriptSerializer();

TreeviewNodeData tvOut = new TreeviewNodeData();
List<TreeNode> tList = new List<TreeNode>();

TreeNode ABLParentNode = new TreeNode("ABL");
tList.Add(ABLParentNode);
TreeNode NonABLParentNode = new TreeNode("non-ABL");
tList.Add(NonABLParentNode);
tvOut.topNde= tList;

 output = jss.Serialize(tvOut);

//Output the response
Response.Clear();
Response.ContentType = "application/json";
Response.Write(output);
Response.End();
}
}


Anyone see what I'm missing or have any suggestions?  The page comes up with the buttons on the bottom, but nothing else is on the page.

Thanks.
Dimiter Madjarov
Telerik team
 answered on 31 Jul 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
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)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
Gauges
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
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
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
+? 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?