Questions on Kendo UI for jQuery Forum

3 answers

1.6K+ views

Delete confirmation message that contains information from row's model

Grid configuration properties allows for only a static text message. The default is

DELETECONFIRM = "Are you sure you want to delete this record?",

I typically like to include teaser information in case the user isn't paying attention or stray clicked. For example:

"Are you sure you want to delete Jim Bob's dental records?",

Such a message requires Grid _confirmation method to handle a confirmation setting which is a function. The following code modifications does so:
grid.js
removeRow calls _confirmation with model

removeRow: function(row) {

var that = this,

model,

mode;

row = $(row); //RAD

model = that._modelForContainer(row); // RAD

// if (!that._confirmation()) {

if (!that._confirmation(model)) { // RAD pass model unconditionally. callee will decide what to do with it

return;

}

row.hide();

// row = $(row).hide(); // RAD

// model = that._modelForContainer(row); // RAD

if (model && !that.trigger(REMOVE, { row: row, model: model })) {

that.dataSource.remove(model);

mode = that._editMode();

if (mode === "inline" || mode === "popup") {

that.dataSource.sync();

}

},

if confirmation is a function pass the model to it

_confirmation: function(model) { // RAD

var that = this,

editable = that.options.editable,

confirmation = editable === true || typeof

editable === STRING ? DELETECONFIRM : isFunction(editable.confirmation) ? editable.confirmation(model) : editable.confirmation;

return confirmation !== false && confirmation != null ? that._showMessage(confirmation) : true;

},

mypage.js
and in .kendoGrid configuration specify confirmation as a function.

editable: {

mode:"popup",

confirmation: function(model) {

return 'Are you sure you want to delete the '+model.rectype+' record of '+model.name+'?'

}},

A coder could also template the confirmation text, but only the text because the confirmation dialog raised by _showMessage is the native browser routine window.confirm(text).

A further modification of _confirmation could handle the return type to enable an even more sophisticated custom confirmation() behavior:
string -> use standard kendo prompter with returned text as prompt
false -> cancel the delete action. function raised a custom dialog, or programmatic determination
true -> attempted an unprompted deletion. function raised a custom dialog, or programmatic determination

Enjoy,
Richard

Grid

answered on 28 May 2012

0 answers

92 views

Stacked bars - hide a serie

Hello,

Is it possible to hide a serie from the chart when switching from normal columns mode to stack mode? I searched the docs but didn't find a solution.

Thank you,
soso

EDIT:
Nevermind managed a fairly clean workaround. Another idea is here http://www.kendoui.com/forums/dataviz/chart/dynamically-switching-on-and-off-series.aspx

Charts

asked on 28 May 2012

0 answers

71 views

Aggregates with no data

Hi!
I've run into an issue with the aggregates and footer templates. When refreshing the grid, if there's no data, the console shows an error (about a missing aggregate) and the footers don't get updated. I've created a simple demo of this issue here:

http://jsfiddle.net/GNdy9/5/

Is this a known problem? Did I mess up the aggregate declaration?

Thanks a lot,
Andrés

Grid

asked on 28 May 2012

8 answers

98 views

Mobile tabstrips apprear to be broken in 2012.1.515

This release broke my tabstrips completely.

I tried to run the example from the web site using this release and going from tab to tab doesn't display the new tab contests correctly.

As far as I can see tabstrips just aren't working.

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>
    <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">
      <ul data-role="listview" data-style="inset" data-type="group">
        <li>
          <ul>
            <li>
              <h2>
                Carine <span>Callahan</span>
              </h2>
            </li>
            <li>
              Weekly average sales <span class="sales-up">$ 8,250</span>
            </li>
            <li>
              Monthly average sales <span class="sales-up">$ 32,000</span>
            </li>
          </ul>
        </li>
        <li>
          Languages
          <ul>
            <li>
              English <span class="value">Native</span>
            </li>
            <li>
              Hungarian <span class="value">Advanced</span>
            </li>
            <li>
              French <span class="value">Advanced</span>
            </li>
            <li>
              Chinese <span class="value">Beginner</span>
            </li>
          </ul>
        </li>
        <li>
          Sales commodity
          <ul>
            <li>Beverages</li>
            <li>Condiments</li>
            <li>Confections</li>
            <li>Diary Products</li>
            <li>Grains/Cereals</li>
            <li>Meat/Poultry</li>
            <li>Produce</li>
            <li>Seafood</li>
          </ul>
        </li>
        <li>
          PC Skills
          <ul>
            <li>MS Word</li>
            <li>MS Excel</li>
            <li>MS Outlook</li>
            <li>MS PowerPoint</li>
            <li>MS Project</li>
            <li>Windows (XP, Vista)</li>
            <li>Internet</li>
            <li>SAP - Sales and Marketing Module</li>
            <li>MS Visual Studio</li>
            <li>Adobe Acrobat</li>
            <li>CorelDraw</li>
          </ul>
        </li>
      </ul>
    </div>

    <div data-role="view" id="tabstrip-sales" data-title="Sales History" data-layout="mobile-tabstrip">
      <ul data-role="listview" data-style="inset" data-type="group">
        <li>
          Sales 2011
          <ul>
            <li>
              January <span class="sales-up">↑ $ 35,000</span>
            </li>
            <li>
              February <span class="sales-down">↓ $ 25,000</span>
            </li>
            <li>
              March <span class="sales-down">↓ $ 23,000</span>
            </li>
            <li>
              April <span class="sales-up">↑ $ 30,000</span>
            </li>
            <li>
              May <span class="sales-up">↑ $ 31,000</span>
            </li>
            <li>
              June <span class="sales-down">↓ $ 29,000</span>
            </li>
            <li>
              July <span class="sales-up">↑ $ 35,000</span>
            </li>
            <li>
              August <span class="sales-up">↑ $ 37,000</span>
            </li>
            <li>
              September <span class="sales-hold">→ $ 37,000</span>
            </li>
            <li>
              October <span class="sales-hold">→ $ 37,000</span>
            </li>
            <li>
              November <span class="sales-up">↑ $ 38,000</span>
            </li>
            <li>
              December <span class="sales-up">↑ $ 40,000</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip">
      <ul data-role="listview" data-style="inset" data-type="group">
        <li>
          Sales Representatives
          <ul>
            <li data-icon="toprated">1. Andrew Fuller</li>
            <li data-icon="toprated">2. Janet Leverling</li>
            <li data-icon="toprated" style="background-color: #3589e7; color: #fff;">3. Carine Callahan</li>
            <li data-icon="toprated">4. Margaret Johnson</li>
            <li data-icon="toprated">5. Steve Collins</li>
            <li data-icon="toprated">6. Maria Steward</li>
          </ul>
        </li>
      </ul>
    </div>

    <div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip">
      <ul data-role="listview" data-style="inset" data-type="group">
        <li>
          Carine Callahan
          <ul>
            <li>
              Notify when online
              <input type="checkbox" data-role="switch" checked>
            </li>
            <li>
              Administrator
              <input type="checkbox" data-role="switch">
            </li>
            <li>
              Access to stats
              <input type="checkbox" data-role="switch" checked>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div data-role="layout" data-id="mobile-tabstrip">
      <header data-role="header">
        <div data-role="navbar">
          
          <span data-role="view-title"></span>
          <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
      </header>

      <p>TabStrip</p>

      <div data-role="footer">
        <div data-role="tabstrip">
          <a href="#tabstrip-profile" data-icon="contacts">Profile</a>
          <a href="#tabstrip-sales" data-icon="history">Sales</a>
          <a href="#tabstrip-rating" data-icon="favorites">Rating</a>
          <a href="#tabstrip-settings" data-icon="settings">Settings</a>
        </div>
      </div>
    </div>

<style scoped>
    #tabstrip-profile h2
    {
      display: inline-block;
      font-size: 1.1em;
      margin: 1.5em 0 0 1em;
    }
    #tabstrip-profile h2 span
    {
      display: block;
      clear: both;
      font-size: 2em;
      margin: .2em 0 0 0;
    }
    #tabstrip-profile img
    {
      width: 5em;
      height: 5em;
      float: left;
      margin: 1em;
      -webkit-box-shadow: 0 1px 3px #333;
      box-shadow: 0 1px 3px #333;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }
    .sales-down,
    .sales-hold,
    .sales-up,
    .value
    {
      float: right;
    }
    .sales-up { color: green; }
    .sales-down { color: red; }
    .sales-hold { color: blue; }
    .value { color: #bbb; }
</style>

<script>
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>

TabStrip (Mobile)

answered on 28 May 2012

3 answers

336 views

How can I change a property of the slider after it has been initialized?

I need to update the smallStep property based on user actions.

I tried:

var slider = $("#sliderHours").data("kendoSlider");

slider.smallStep = "1";

but it had no impact. The first line did access the slider, but 'slider.smallStep' is undefined. I tried to re-initialize the slider but that also had no impact.

Slider

answered on 28 May 2012

1 answer

55 views

Access to the thumb selector through JQuery...

Hi,
I'm trying to hide the thumb selector in code, and I can obviously find it using

$('.k-draghandle').hide();

but what is a 'correct' way of doing so if I want to ensure only the specified one is hidden?

For example:

$('#slider .k-draghandle').hide();

doesn't work.

Am I missing something obvious? Do I have to add my own <div id='whatever'> around the slider?

Cheers,
Jason

Slider

answered on 28 May 2012

1 answer

259 views

Page with two view models -

Hi,

I have an app that has a menu using MVVM which is created on the layout page (asp.net mvc 3)

The "center" part of my app, is actually a specific UI to get something done, that also uses MVVM.

So my page has 2 view models at the same time, always.

I have noticed that depending on the order in which I do kendo.bind(), it may break the MVVM functionality for events.

The change event of my grid, get's the wrong viewmodel sent as an argument.

This is the actual error :

Uncaught TypeError: undefined is not a function kendo.web.js:7038
1. binders.widget.events.Binder.extend.refresh.handlers.(anonymous function)kendo.web.js:7038
2. Class.extend.triggerkendo.web.js:156
3. Widget.extend._selectable.that.selectable.kendo.ui.Selectable.changekendo.web.js:18322
4. Class.extend.triggerkendo.web.js:156
5. Widget.extend.valuekendo.web.js:10465
6. Widget.extend._upkendo.web.js:10448
7. e.extend.proxy.gjquery-1.7.2.min.js:2
8. f.event.dispatchjquery-1.7.2.min.js:3
9. f.event.add.h.handle.ijquery-1.7.2.min.js:3

I have also created a JsFiddle that shows the exact same error.

Is this an actual error, or am I doing something really wrong ?

Thanks,

Alvaro Oliveira.

MVVM

answered on 28 May 2012

1 answer

154 views

listview scrolling question

I'm trying to design a view with a full screen google map and a scrolling listview pinned to the right side. Items in the listview would correspond to locations on the map.

I can't seem to accomplish this without the map scrolling in tandem with the listview.

1. is it possible to have multiple elements inside a view that scroll independently?
2. is it possible to have more than one view on the screen at the same time?

Thank you!
-Adam

ListView (Mobile)

answered on 28 May 2012

10 answers

239 views

invalid label "d" : {

I'm trying to bind the KendoDS to a simple oData method

[WebInvoke(Method = "GET")]

[WebGet]

public string HelloGET() {

return "Hi THere from GET";

}

var helloDS = new kendo.data.DataSource({

transport: {

read: {

// the remote service URL

type: "GET",

url: oDataBasePath + "/USDA.svc/HelloGET?$format=json",

dataType: "jsonp",

contentType: "application/json; charset=utf-8",

}

},

change: function () {

alert("Change");

},

error: function(){

alert("error");

}

});

helloDS.fetch();

So I see the GET works, I get my JSON back

{

"d" : {

"Hello": "Hi THere"

}

But Firebug throws the error:

invalid label

"d" : {

This is the callback from Firebug

http:

//odata.gourmetsleuth.com/USDA.svc/HelloGET?$format=json&callback=jQuery17106241045930093632_1323571371269&_=1323573597895

So I'm getting my callback method

What am I doing wrong here? Shouldn't the odata method be returning that callback ID in the result?

Data Source

answered on 28 May 2012

3 answers

369 views

Row selection across pages

Hi,

I have a kendo grid, where i have enabled multiple row selection. Right now, i can select rows by using shift key and clicking on the rows in a page. But, when i move to other page, rows that were selected in last page does not remain selected. I want them to remain selected and also, that the user should be able to select new rows across the pages. Is it possible?

Regards,
Khushali

Grid

answered on 28 May 2012