Questions on Kendo UI for jQuery Forum

0 answers

322 views

Login Form

I want to create a MVC 3 login form and use kendo to call the controller method to validate the user. What is the best approach to do this

General Discussions

asked on 10 May 2012

1 answer

140 views

window is not working with JQuery 1.3 or 1.4 ver

Hello,

window web ui is not working with JQuery 1.3 or 1.4 ver we are using in our application these old version if we update so most of the things will breaks.

so therefore we can not use jquery.min that was supplied with kendo ui kit.

could you please help me on this issue.

Thanks
Wajahat

Window

answered on 10 May 2012

19 answers

899 views

[Solved] 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

126 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

178 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

102 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

109 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

122 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

167 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

118 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