Questions on Kendo UI for jQuery Forum

1 answer

574 views

How to fetch the values of selected check box items inside PanelBar

Hi ,
I am trying to create a panelbar which will have children containing checkboxes along with a text .
I have been able create such a structure where the page is rendering the checkboxes propely .
Below is the code snippet for the panelbar with dummy data .

<body ng-app="connectUIApp">

<div ng-controller="BrowseContentController">

<button class="k-button" id="applyFilter" ng-click="handleApplyClick(message);">Apply</button>

<div id="creatorSelect" ></div>

</div>

<script>

var app = angular.module('connectUIApp', ['kendo.directives']);

$(document).ready(function()

{

$("#creatorSelect").kendoPanelBar(

{

dataSource:

[

{

text:"Item1",

value:"Item1 Value",

items:[

{

text:"<input type='checkbox' value='type'> Child1</input>",

encoded:false

},

{

text:"<input type='checkbox' value='type'> Child2</input>",

encoded:false

},

{

text:"<input type='checkbox' value='type'> Child3</input>",

encoded:false

}

]},

{

text:"Item2",

value:"Item2 Value",

items:[

{

text:"<input type='checkbox' value='type'> Child1</input>",

encoded:false

},

{

text:"<input type='checkbox' value='type'> Child2</input>",

encoded:false

}

]}

]

});

});

</script>

The requirement is that different checkboxes will be selected and once a button is clicked (the apply button in this case ) ,all the selected values (Child1,Child2 etc) needs to be passed to the backend.

I have written a java script method to iterate over the chil items of the panelbar ,but I have not been able to select the checkbox values (true,false etc).

Below is the javascript method for your reference .

function BrowseContentController($scope)

{

$scope.handleApplyClick = function()

{

var panelBar = $("#creatorSelect").kendoPanelBar().data("kendoPanelBar");

var children = panelBar.element.children();

for (var i = 0; i < children.length; i++)

{

var child = children[i];

var textContent=child.textContent;

//var item=child.item();

alert('textContent:'+textContent);

}

};

}

Please note ,I am using angular and kendo together and the code is to some extent mixed a bit .
I have attached all the required files in the attachment .Please unzip the attached file and run the PanelBar.html file .

I have checked the existing Kendo UI documentation ,but have not found something useful till now in this regard .
I need some help to get the values of the selected checkboxes .
Please help me if any one has some idea on how to proceed in this case .

Regards,
Ayan

PanelBar

answered on 28 Mar 2014

3 answers

130 views

[Solved] Filterable ListView Clears Checkboxs

Hello,

I have a ListView and template defined as follows:

<ul data-role="listview"
id="multiactivity-listview"
data-bind="source: activityTypeDataSource"
data-template="multiactivity-template"
data-filterable="{field: 'name', operator: 'contains', placeholder: 'Search Activity'}">
</ul>

<script type="text/x-kendo-template" id="multiactivity-template">
<label>
<input data-id="${data.id}" type="checkbox" />
${data.name}
</label>
</script>

This works great until the user enters any filter text, and then all the checkboxes get cleared. Is there a recommended approach to solve this? I have tried to data-bind to either the checked binding or doing something within the template using #= # scripts but cannot seem to solve it.

Thanks,

Ben.

ListView (Mobile)

answered on 28 Mar 2014

3 answers

304 views

<button> Disabled from boolean in observable

How do I set enable/disable based on a value in the observable?

I tried everything I can think of.

Thanks!

MVVM

answered on 28 Mar 2014

2 answers

504 views

Kendo grid filtering on field as object property

Some of the columns in my grid are bound to properties of nullable objects. When there exists a nullable object, filtering stops working because the property's owner is null. Is this not supported OOTB? If so, can anyone suggest some alternate solutions for this? Are the only options to flatten my JSON or to modify the received JSON in requestEnd?

Below is a plnkr that demonstrates the issue. Btw, not sure why the live preview isn't working. Click the 'Launch preview in separate window' to view the code in action. To reproduce, 1. filter the 'foo value' column with any value. 2. you will see the grid display a timer. the console will also display an error.

https://plnkr.co/edit/wCrMZM5ieDHVpjLJpHhP?p=preview

Grid

answered on 28 Mar 2014

2 answers

2.2K+ views

How do we combine 2 values to show as comboxo datatextfield

We have data bound to a combox, all is working fine. When the user clicks the dropdown the list of items appears and is showing data assigned by the template -> template: "#=FirstName # #=LastName #, #=CompanyName #",

However, once the user selects something the datatextfield is shown, where as we want the same template shown. How can we do this?

Thanks - here is our code.

$(this).kendoComboBox({
                placeholder: "Select A Client...",
                //dataTextField: 'LastName',
                dataValueField: 'ContactID',
                template: "#=FirstName # #=LastName #, #=CompanyName #",
                filter: "contains",
                autoBind: false,
                minLength: 3,
                text: $(this).attr('data-text'),
                dataSource: {
                    type: "odata",
                    serverFiltering: true,
                    serverPaging: true,
                    page: 1,
                   pageSize: 50,
                    sort: { field: "Name", dir: "asc" },
                    filter: filter,
                    transport: {
                        read: {
                            url: "/ajax/comboContactFilter.json",
                        }
                    }
                }
            });

General Discussions

answered on 27 Mar 2014

2 answers

242 views

Read values in controller

Hello, I'm fairly new to Kendo & HTML5 so please bare with me. I'm looking for an example on how to actually use the values in the controller so that I can pass them to my BLL for processing but I can't seem to find anything where the values are being used in the controller. What am I missing?

Thanks!

MultiSelect

answered on 27 Mar 2014

1 answer

259 views

Drawer with dynamic views

Im using the drawer to display a dynamic number of remote views. A PHP page is used to display the views:

data-views="['drawer-home', 'drawer-settings', 'item.php?id=1', 'item.php?id=2', 'item.php?id=3' ]

Loading the first view with Item 1 works fine, but then when switching to Item 2 the framework seems to think that it is the same page and displays the Item 1 view again.

How can I fix this?

And a second question, is it possible to force and update of a remote view? (Reload)

Drawer (Mobile)

answered on 27 Mar 2014

2 answers

257 views

[Solved] Format Error Message for Custom Validator

I have implemented custom rules for the Kendo Validator. I would like to be able to use a format string for my error message and replace parameters in it with values from the validation. For example, on the server side I am using a format string of: "{0} cannot contain two groups with the name '{1}'." and I replace {0} with a friendly name of the input and {1} with the duplicated group name (a value available as a result of the validation logic). If I use this same string as the error message for the Kendo validation rule, the {0} is being replaced automatically by the value of the "name" attribute on the input being validated, and the {1} is being removed.

Is there a standard way for me to provide my own values to format the validation error message?

Thanks,
Brian

Validation

answered on 27 Mar 2014

6 answers

296 views

onClick on Second usage does not send object

I am using the MVVC pattern in my application.

On one view I am calling another view and passing a variable on "click" via a dynamic ListView. The datasource is being populated onShow.

It is working as expected on first usage but if 1) go BACK and choose another option OR 2) complete the first entry and try to create a new one - it blows trying to read the e.dataItem.{somevar}. Ideas why?

app.myService = {

onShow: function (e) {

....

$("#lvLevel2Options").kendoMobileListView({

dataSource: kendo.data.DataSource.create({data: ds }),

template: $("#templateCategoryLevel2").html(),

click: app.myService.categoryClicked

});

}

categoryClicked: function (e) {

//It blows HERE but only on second pass

var id= e.dataItem.id;

....

}

Other info: I checked the source of the List and see the data-uid values are changing each time i view the page as I would expect since the datasource is being refreshed onShow (it needs to be because it is dynamic filtered data).

ListView (Mobile)