Questions on Kendo UI for jQuery Forum

19 answers

835 views

Custom binding and complicated binding path

Hello,
I'm trying to create custom binding for CSS classes with switching by condition because the "style" binding isn't useful for my case. My cssClass binding uses "path with params " like "style" and "attr" bindings:

data-bind="cssClass: {condition: isEnabled, class1: style-red, class2: style-blue }"

In docs I see one example this.bindings["slide"].get() for simple path like data-bind:"slide:isEnabled"
What is the legit solution for processing this types of bindings (with complicated pathes)?

Please, take a look on my realisation CSS custom binding example
It works on page load but not works when isEnabled updated. I suspect that this behavior is due to the fact that I did not cal .get() function. But when I call that function I've got this error message: Uncaught TypeError: Object #<Object> has no method 'charAt'.

MVVM

answered on 10 May 2012

0 answers

102 views

Drag and Drop works with jQuery resizable

Can I implement both? I found that after I attached both on them to a control, drag is ok. However, when I try to resize the control, it also trigger drag event. Can I disable the drag event when I resize the control?

Drag and Drop

asked on 10 May 2012

1 answer

152 views

initiate function for each datasource item in template

I have a datasource which I display in a listview and am using a template. I want to be able to shorten the text of one of the datasource fields on page load and am struggling with how to do this. Can any one point me in the right direction? Below is what I have so far.

<div data-role="view" data-title="Control Panel - Mobile" id="listmessages" data-init="listMessagesInit">

<h2>Customer Messages</h2>

<p><?php echo $unread_messages . ' - unread messages'; ?></p> <a data-align="right" data-role="button" id="markasread">Mark as read</a><a data-align="right" data-role="button" id="delete">Delete</a>

<ul id="message_list"></ul>

</div>

<script id="message_list_template" type="text/x-kendo-template">

<li class="isnew_#= isnew #" id="#= id #"><a href="/messages/view/#= id #">

<div style="float:left; width:150px; height: 50px">#= customer_name #<br />#= created #</div>

<div style="height: 50px" id="message_#= id #" data-bind="value:short_text(message_#= id #, #= message #)">#= message #</div>

</a></li>

</script>

<script>

function listMessagesInit(){

function short_text(id, message){

if (message.length > 100){

var shortText = jQuery.trim(message).substring(0, 100).split(" ").slice(0, -1).join(" ") + "...";

} else {

var shortText = message;

}

$(id).text(shortText);

}

function listMessagesInit(){



          var messageDataSource = new kendo.data.DataSource({

           

            transport: {

                read: "/messages/data",

                dataType: "json",



                update:function(id, isnew) { 

                    url:  "/messages/markasread/" + id + "/" + isnew ;  //how should these vars be passed? like this

                    type: "POST"

                },

                destroy: {

                    url: function(id, isnew) {

                            return "/messages/delete/" + id  ;  //or like this?

                        },

                   // url: "/messages/delete/210643",

                    type: "DELETE"

                },

                parameterMap: function(options, operation) {  //not sure what this does or if I even need it

                    if (operation !== "read" && options.models) {

                        return {models: kendo.stringify(options.models)};

                    }

                }                

            },              

            error: function(e) {

                alert(e.responseText);

            },              

            schema: {

              model: {

                  id: "id",

                  fields: {

                      created: { type: "string" },

                      message: { type: "string" },

                      customer_name: { type: "string" },        

                      isnew: { type: "string" }    

                     }

                     

                 }

             },

                   

           }); 



          $("#message_list").kendoMobileListView({

              dataSource: messageDataSource,

              //pullToRefresh: true,

              //appendOnRefresh: true,

              style: "inset",

              template: $("#message_list_template").text()

          });

}

General Discussions

answered on 10 May 2012

0 answers

71 views

Grid Scrolling doesn't work in grid inside window on iPad

I have a kendo Window with a grid inside the content area. When I run this example on my pc everything works fine as expected. However, when I run the same example on my iPad, the grid does not scoll.

eg

if (!window.data("kendoWindow")) {
window.kendoWindow({
width: "800px",
title: "Unscrollable grid",
content: "grid_demo.html",
close: onClose
});
}

(grid_demo.html is a copy of a grid example taken from the demos link).

General Discussions

asked on 10 May 2012

3 answers

87 views

grid popup edit add new record and cancel in popup causes record to disapper

Hi

When i try and add a row for the grid using the popup editable grid, then the row gets added fine. Now i click on the edit button for the row in the grid and click on cancel the row disappears.
this is on version 2012.1.322..

Grid

answered on 10 May 2012

1 answer

87 views

Setting a value from a function

Here's the scenario...I have a button on my model....essentially a toggle. However the model STATE should only change if the $.ajax call returns success...so this is what I tried

viewModel = kendo.observable({

releaseMe: function (item) {

release(item);

}

});

function release(item) {

var releaseState = item.data.Released;

var campus = item.data.CampusID;

var block = viewModel.BlockID;

var url = "/api/cps/clerkship/blocks/" + block + "/" + campus + "/";

if (!releaseState)

url += "release";

else

url += "unrelease";

$.ajax({

url: url,

type: "PUT",

data: {

id: block,

campus: campus

},

success: function (e) {

if (!releaseState)

item.set("Released", true

); //WHAT SHOULD THIS BE

else

item.set("Released", false); //WHAT SHOULD THIS BE

}

});

}

Any idea? Should it literally just be a simple

item.data.Released = true;

MVVM

answered on 10 May 2012

0 answers

123 views

How to add New Record without inline edit.?

Hi all,

i have refered video(Get Started With The Kendo UI DataSource) provided 
by kendo team and i have tried to do the same, but on click of create-click button create: {} section of datasource is not called. as per video on click of create 
button create:{} section will be called automatically.
 please find the code example below. 

 $(document).ready(function () {
            // --------------------------------------------------------------------------------
            // DataTable Section
            // --------------------------------------------------------------------------------
            clinetDataSource = new kendo.data.DataSource({
                batch: true,
                editable:true,
                transport: {
                    create: {
                        url: _WebServiceAddress + "Client/Client",
                        contentType: "application/json; charset=utf-8", 
                        type: "POST" 
                    },
                    read: {
                        url: _WebServiceAddress + "Client/ClientTable", 
                        datatype: "odata"
                    },
                    parameterMap: function (data, operation) {
                        if (operation !== "read" && data.models) {
                                       return { models: kendo.stringify(data.models) };
                                   }
                                   else if (operation != "read") {
                                       // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
                                       return JSON.stringify(data)
                                   }
                    }
                },
                schema: {
                    model: clientModel
                },
                pageSize: 10,
                batch: true
            });
            var clientModel = kendo.data.Model.define({
                id: "RecId",
                fields: {
                    RecId: { editable: false, nullable: true },
                    ClientName: { type: "string" },
                    ResponsibleName: { type: "string" },
                    IsActive: { type: "boolean" }
                }
            });
             _Table=   $("#tableClientDetails").kendoGrid({
                    columns: [
                     {field: "RecId", title: "Action", width: 50,
                      template: '<img class="buttonEditTable" id="buttonEditTable_#=RecId#" alt="#= RecId #" src="/Desktop/Global/Images/DataTable/Edit.png"/> '
                     },
                    { field: "ClientName", title: "Name" },
                    { field: "ResponsibleName", title: "Contact Person" },
                    { field: "IActive", title: "Active", width:100,
                        template: '<input class="checkboxActive" id="checkbox_#=RecId#" type="checkbox" #= IsActive ? "checked=checked" : "" # ></input>'
                    }
                ],
                    dataSource: clinetDataSource,
                   groupable: true,
                     filterable: true,
                    sortable: true,
                    pageable: true,
                    scrollable:false,
                    editable: true
                });
              
            });
           
            $("#create-client").click(function () {
                clinetDataSource.add({
                    Address: $("#textareaAddress").val(),
                    ResponsibleEmailAddress: $("#fieldContactPersonEmailId").val(),
                    Telephone: $("#fieldTelephone").val(),
                    City: $("#fieldCity").val(),
                    State: $("#selectState").find(':selected').text(),
                    Country: $("#selectCountry").find(':selected').text()
                });
                clinetDataSource.sync();
               
            });
please advice. how create:{}/update:{} will be called.
Thanks,
Shankar

Data Source

asked on 10 May 2012

0 answers

92 views

Analog RadDiagram?

I need an analog component RadDiagram on Silverlight(http://www.telerik.com/products/silverlight/controls/diagrams.aspx
). Will it in Kendo? When? I need in this widget. Sorry, my English so bad =)

General Discussions

asked on 10 May 2012

5 answers

232 views

Attach window somewhere other than end of body

I'm trying to add a Kendo window to an existing .NET Webforms project. Unfortunately, the window moves the window contents to just before the closing body tag. The problem with this is that I have a button that needs to remain inside of the page's main form.

Attempting to detach and then append the k-window div fixes the button issue, but on closing the window the overlay does not disappear. Any suggestions?

Window

answered on 09 May 2012

7 answers

196 views

Get Grid's Selection inside a Grid

Hello,

I want to get the grid's selection which is inside a parent Grid (in hierarchy way).
I tried this : http://jsfiddle.net/E9HAt/6/ but it doesn't seem to work.

Do you have any idea to achieve that ?

Regards,
Guillaume

Grid

answered on 09 May 2012