Questions on Kendo UI for jQuery Forum

3 answers

103 views

Is it possible to override the code that generates a row in the kendo grid?
I'd like to add more features to the row model's json, without necessarily putting the field in to the model object.

Currently, I'm using a backbone datasource and model to drive my grid. I'd ideally like to have a callback per model to add this reference. Is it possible to do?

Grid

answered on 29 Mar 2013

1 answer

213 views

Updating bound data does not update displayed node

A remote hierarchical data source delivers JSON that looks like the following: Note the .data property which contains additional information.

jQuery182041788989288830735_1364362919255([

{"id":"6a488457-5b85-48fc-be24-b469219564c4"

,"sprite":"custom3"

,"text":"Silk"

,"hasChildren":true

,"data"

:{"nodetype":"Fabric"

,"level":3

,"activity":0

,"maintenance":NaN

,"status":3

}

,

{"id":"8a9e479a-4448-462e-9151-b1913cc1660e"

,"sprite":"custom3"

,"text":"Wool"

,"hasChildren":true

,"data"

:{"nodetype":"Fabric"

,"level":3

,"activity":0

,"maintenance":NaN

,"status":3

}

,

{"id":"da373cd1-4264-4096-9955-5527e6c49dd9"

,"sprite":"custom3"

,"text":"Canvas"

,"hasChildren":true

,"data"

:{"nodetype":"Fabric"

,"level":3

,"activity":0

,"maintenance":NaN

,"status":4

}

])

The template in the .kendoTreeView constructor is thus and will display additional status information when the treeview is rendering a 'level 3' node:

window.reportUrl = '/reporter';

window.statusCode = [ 'bla', 'bla', 'bla' ];

template:

"<span class='name'>#: item.text #</span>"

+ "# if (item.data.level == 3) {#"

+ "# if (item.hasChildren) {#"

+ " | <a href='#= window.reportURL #?id=#= item.id #' title='View Report' target='_blank'>"

+ "<img alt='View Report' class='cm-icon' src='/images/report.png'>"

+ "</a>"

+ "#}#"

+ "# if (('status' in item.data) && !isNaN(item.data.status)) {#"

+ " | <span class='cs-status'>Status: #= window.statusCode[item.data.status] #</span>"

+ "#}#"

My problem is that when a some property .data changes, the tree node is not redrawn.
User does some activity runs a getJSON that returns an updated status for an id.

$.getJSON ( .... )

.done (function (info) {

// info looks like {result:{id:<some-id>,status:<some-status>}}

var tv = $('#treeview').data('kendoTreeView');

var dsData = tv.dataSource.get(info.result.id);

dsData.data.set('status', info.result.status); // does not cause node to be redrawn

dsData.set('data.status', info.result.status); // does not cause node to be redrawn

dsData.set('text', 'BLA BLA BLA'); // DOES cause node to be redrawn

});

What would need to be done to have the treeview observe the 'additional information' in dsData.data (or dsData.data itself) and rerender when something gets set ?

I would prefer to _not_ have to do something like this (untested):
dsData.set('data.status', info.result.status);
dsData.set('text', dsData.text');

Thanks,
Richard

TreeView

answered on 29 Mar 2013

5 answers

874 views

Change datasource

Hi,

I've created a chart in ASP.NET MVC using the following code:

@(Html.Kendo().Chart(Model)

.Name("Regions")

.Title("Regions")

.DataSource(ds =>

{

ds.Read(read => read.Action("GetClientRecordsCountByRegion", "Home"));

ds.Sort(sort => sort.Add(model => model.Region).Ascending());

}

)

.Series(series =>

{

series.Pie("TrademarkCount", "Region")

.Labels(lbl => lbl.Visible(true).Template("#= category #: #= value #")

.Align(ChartPieLabelsAlign.Circle)

.Position(ChartPieLabelsPosition.OutsideEnd));

})

)

On a button click, I would like to refresh the chart with new data by either calling another Action or passing parameters into the current action. How do I do that?

I tried setDataSource and then redraw as shown below but its not working. Please help. Thanks!

function refreshsource()

{

var dataSource = new kendo.data.DataSource({

transport: {

read: {

type: "GET",

url: "/Home/GetClientRecordsCountByRegionNew",

dataType: "json"

}

});

var chart = $("#Regions").data("kendoChart");

chart.setDataSource(dataSource);

chart.redraw();

}

Charts

answered on 29 Mar 2013

3 answers

451 views

GridForeignKey ComboBox Initial Value is 0 ?

Subject says it all. In my GridForeignKey.cshtml I've placed a combo box rather than the dropdownlist. For editing values in my grid it works fantastically. When adding a new row inline however, the default value displayed is 0. This is a non-nullable field with no default. How can I get my own "Select..." text in there initially or nothing at all?

Thank you!
Michael

ComboBox

answered on 29 Mar 2013

3 answers

711 views

Popup Modal to Add a New Record Does Not Display when the Grid is sorted/filtered

I am using the Grid with remote data, but client side paging/filtering/sorting. The data source is pre-filtered, and setup as follows:

var

dataSource = new kendo.data.DataSource({

error: function (e) {

alert(e.errors);

},

filter: {

field: "CreatorADGuid",

operator: "eq",

value: '@ViewBag.UserId'

},

pageSize: 40,

batch: true,

transport: {

read: {

url: "/api/project/",

dataType: "json"

},

update: {

url: "/api/project/",

type: "POST",

dataType: "json"

},

create: {

url: "/api/project/",

type: "PUT",

dataType: "json"

}

},

schema: {

data: "Body",

total: function (response) {

return response.Body.length;

},

model: {

id: "Id",

fields: {

Id: {

type: "string",

defaultValue: Constants.emptyGUID

},

Title: {

type: "string",

validation: {

required: true

},

editable: true

},

ScheduAllId: {

type: "string",

editable: true

},

CreatorDisplayName: {

type: "string",

editable: false

},

CurrentStatusDate: {

type: "string",

defaultValue: '@DateTime.Now.ToShortDateString()',

editable: false

}

},

errors: "MessageDetails"

}

});

The grid is using a custom templated toolbar that contains a button which allows a user to add a new record. This all works as expected if I do not sort or filter the grid. If the grid is sorted/filtered, clicking the button does not display the popup to add a new record. If I then unfilter/unsort the grid after clicking the button, an empty row is added to the beginning of the grid. The following is my grid:

$("#project-grid").kendoGrid({

dataSource: dataSource,

toolbar: kendo.template($("#project-toolbar-template").html()),

pageable: true,

height: $('body').height(),

sortable: {

mode: "multiple",

allowUnsort: true

},

filterable: true,

columns: [

{

field: "Title",

title: "Title",

template: kendo.template($("#project-title-template").html())

},

{

field: "ScheduAllId",

title: "ScheduAllId",

width: "20%"

},

{

field: "CreatorADGuid",

title: "Creator",

template : '#= CreatorDisplayName #',

width: "20%"

},

{

field: "CurrentStatusDate",

title: "Created Date",

width: "20%",

format: "{0:dd/MM/yy}"

},

{

command: ["edit"],

title: " ",

}],

editable: {

mode: 'popup',

template: kendo.template($("#project-edit-template").html()),

},

edit: function (e) {

var editWindow = e.container.data("kendoWindow");

if (e.model.isNew()) {

e.container.data("kendoWindow").title('Add New Project');

}

else {

e.container.data("kendoWindow").title('Edit Project');

}

});

Please advise if this is a known defect, and possibly a work-around as our requirement is to have the grid pre-sorted for users, but also give them the ability to add a new record while the grid is sorted. I've tried this in the latest 2013 Q1 build and it still behaves as described above. Thank You.

Grid

answered on 29 Mar 2013

2 answers

464 views

[Solved] Kendo DatePicker cannot select a date

Hi,

I am using Kendo DatePicker() in a MVC 3 application along with IE 7. Somehow when i visit my view in the browser, Kendo DatePicker() shows me the date but keeps the today's date selected and does not let me select any other date. It let me browse months and years but does not let me select a date? This is how i am using the Kendo DatePicker()

<div class="editor-field">
             @Html.Kendo().DatePicker().Name("StartDate").Min(new DateTime(1900, 1, 1)).Max(New DateTime(2099, 12, 31)).Value(DateTime.Today)

            @Html.ValidationMessageFor(Function(model) model.StartDate)
        </div>
Also after investigating this in the IE developer toolbar, i am getting the Unselectable = on as shown in the image attached.
However the same thing using Google Chrome works fine and lets me select the date. Any ideas please on what i could be doing wrong? Need help really urgently.

DatePicker

answered on 29 Mar 2013

4 answers

217 views

[Solved] Object #<Object> has no method 'isRtl'

I placed a table in my html:

<table id="comments">

<tr>

<th data-field="module"></th>

<th data-field="author"></th>

<th data-field="date"></th>

<th data-field="comment"></th>

<th data-field="status"></th>

</tr>

</table>

and then called the grid:

$("#comments").kendoGrid();

when I run the page I get this error: Uncaught TypeError: Object #<Object> has no method 'isRtl'
I did originally have this connecting to my datasource, but I removed that to see if maybe the datasource was causing the error, but even at this bare-bones I'm still getting the issue.

I'm fairly new to Kendo so I'm not sure what else I need to supply to give you an idea of what might be wrong, so if you need more info please let me know and I'll supply it!

Thanks!

Grid

answered on 28 Mar 2013

5 answers

767 views

[Solved] MVC Extensions migration & route values

We are in the process of migrating from the MVC Extensions to the Kendo MVC wrappers.

We are using Server-side binding on grids, and in the old MVC Extensions, the basic CRUD methods passed the datakey as a generic "id" parameter, regardless of the actual key field name. In the Kendo wrappers it uses the actual key field name, e.g. orderID.

e.g. our old code would be something like
(View)
.DataKeys(dataKeys => dataKeys.Add(model => model.orderId))
(Controller)
public ActionResult Delete(int id) {}

It appears we have to change them to use the actual field name, e.g.
(View)
.DataSource(source => source.Server()
....Model(model =>{model.Id(o => o.OrderID);}) )
(Controller)
public ActionResult Delete(int orderID){}

Is there a way for me to force it to pass the field name = "id" somehow, e.g. as a parameter on the DataSource .Action ?

Also, we were using RouteData in some of our code to pass search values back & forth. With the Kendo MVC wrappers, the RouteData is lost between the controller & view.

Maybe I'm missing some basic difference related to RouteMaps & Kendo MVC?

Thanks for your help.

Grid

answered on 28 Mar 2013

1 answer

110 views

MultiSelect return no results on subsequent same letter search

Hi Guys!

Steps to reproduce:

1. Open Kendo WebDemos->MultiSelect->Basic usage sample
2. Type 'm' in multiselect, three results appear, select first one
3. Type again 'm' in multiselect, NO results display
4. Delete 'm' and retype 'm', two results display

It appears that the multiselect doesnt produce any results on subsequent same letter search.
Is this standard behavior of the Kendo MultiSelect control ?

Cheers!

MultiSelect

answered on 28 Mar 2013

9 answers

763 views

Mobile Application Navigation - remote views issue(s)

Hi,
I built the functionality and framework for my mobile application using the MVC model prior to integrating with Kendo UI and therefore every action has it own php page. eg. view.php , delete.php, update.php, reply.php. I didn't realise that the Kendo UI Mobile would only work with one file using views. I had read that I can use remote views to link between pages but this doesn't seem to be working well for me. I have read the documentation but am not sure I fully understand it or even if its correct. Can anyone help with my navigation?

I have an index page as set out below:

<div data-role="view" data-title="Control Panel">

<div data-role="header">

<a data-role="backbutton">Back</a>

</div

>

  <?php if (isset($error)){  echo '<p style="color:red">Error: '. $error .'</p>';} ?>

<ul data-role="listview" data-style="inset">

<li><a href="messages/listall">Customer Messages (<?=$unread_messages?>)</a></li>

</ul>

<script>

var listView = $("#listView").kendoMobileListView({

pullToRefresh: true,

appendOnRefresh: true

});

</script>

<div data-role="footer">

<div data-role="tabstrip">

<a href="index" data-icon="/mobile_kendo/">Home</a>

<a href="" data-icon="refresh">Refresh</a>

<a href="settings" data-icon="settings">Settings</a>

</div>

<script>

var app = new kendo.mobile.Application($(document.body), {

icon: "URL to a web clip icon"

});

</script>

I have a listall page which is has the same header and footer as above and then the different central part as set out below:


<div data-role="view" data-title="Control Panel">
    <div data-role="header">
        <a data-role="backbutton">Back</a>
    </div>

<

h2>Messages</h2>

<table>

<?php echo $unread_messages . ' - unread messages'; ?>

<tr>

<th>From</th><th>Intro</th><th>Date</th><th>Status</th>

</tr>

<?php foreach ($messages as $message):?>

<?php if ($message->isnew == 1){ ?>

<tr style="font-weight:bold">

<?php } else { ?>

<tr>

<?php } ?>

<td><?=$message->customer_name?></td><td><a href="messages/view/<?=$message->id?>"><?=$message->message?></a></td><td><?=$message->created?></td><td><?=$message->isnew?></td>

</tr>

<?php endforeach?>

</table

>

    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="index" data-icon="/mobile_kendo/">Home</a>
            <a href="" data-icon="refresh">Refresh</a>
            <a href="settings" data-icon="settings">Settings</a>
        </div>
    </div>
   <script>
      var app = new kendo.mobile.Application($(document.body), {
         icon: "URL to a web clip icon"
     });
 
   </script>

I have a view page as below:


<div data-role="view" data-title="Control Panel">
    <div data-role="header">
        <a data-role="backbutton">Back</a>
    </div><

h2>Message</h2>

<p>Date: <?=$message->message->created?></p>

<p>From: <?=$message->message->customer_name?></p>

<p>Email: <a href="mailto:<?=$message->message->email?>" target="_blank"><?=$message->message->email?></a></p>

<p>Telephone: <?=$message->message->customer_telephone?></p>

<p>Location IP:<?=$message->message->ip?></p>

<p>Message: <?=$message->message->message?></p>

<p><a href="../markasread/<?=$message->message->id?>/0">Mark as unread</a> | <a href="../delete/<?=$message->message->id?>">Delete</a></p>



    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="index" data-icon="/mobile_kendo/">Home</a>
            <a href="" data-icon="refresh">Refresh</a>
            <a href="settings" data-icon="settings">Settings</a>
        </div>
    </div>
   </div> 
   <script>
      var app = new kendo.mobile.Application($(document.body), {
         icon: "URL to a web clip icon"
     });
 
   </script>

My Issues are:
1) When I select theCustomer Messages link on the index page (messages/listall), the # is added automatically to the URL and is causing issues.

2) On the listall page, I select a message in the list and this does not put the # in front of the URL. This takes me to the view page but does not have the styling of the application applied. Why is this?

3) When I select the back button its adds the #, this sometimes works and sometimes doesn't depending on what page Im on. How can I get it to work for all pages?

4) As the code from the different pages is being appended to the main index page, when I perform an action, this is executed multiple times and I only want it to perform the operation once.

Any help would be much appreciated.

General Discussions

answered on 28 Mar 2013