Telerik Forums
Kendo UI for jQuery Forum
3 answers
343 views
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
Petur Subev
Telerik team
 answered on 29 Mar 2013
3 answers
633 views

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.
Vladimir Iliev
Telerik team
 answered on 29 Mar 2013
2 answers
412 views
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.
Vivek
Top achievements
Rank 1
 answered on 29 Mar 2013
4 answers
178 views
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!
SelAromDotNet
Top achievements
Rank 2
 answered on 28 Mar 2013
5 answers
708 views
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.
Phil
Top achievements
Rank 1
 answered on 28 Mar 2013
1 answer
88 views
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!

Georgi Krustev
Telerik team
 answered on 28 Mar 2013
9 answers
717 views
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>
    </div>
   </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.
Iliana Dyankova
Telerik team
 answered on 28 Mar 2013
1 answer
164 views
Is there a way to just pass content to a window instead of having the window load its data from the element used to initialize it? Right now I'm displaying a window after a user clicks a help link like this:

deleteAttribute = function(evt){
  evt.preventDefault();
  $(evt.target).kendoWindow({
    position: "right",
    height: '100px',
    title: 'Confirm Deletion',
    width: '325px'
  });
  var win = $(evt.target).data('kendoWindow');
  win.content(Mustache.to_html($('#confirmDeleteAttributeTemplate').html(), {id: $(evt.target).closest('li.attribute').attr('id')}));
  win.open();
  win.center();
};

I  want the window to position itself near the delete link...that's why I want to use evt.target to initialize the window. The content of the delete link is an icon. Passing in content using the content method appends the content to the window instead of overwriting it. The window also removes the event target from the DOM???

*** Update
I am now using this code:
deleteAttribute = function(evt){
  evt.preventDefault();
  var win = $('.window').data('kendoWindow');
  if(!win) {
    $('.window').kendoWindow({
      title: 'Confirm Deletion',
      width: '325px',
      height: '100px'
    })
    .data('kendoWindow');
    win = $('.window').data('kendoWindow');
  }
  else {
    win.close();
    win.setOptions({
      title: 'Confirm Deletion',
      width: '325px',
      height: '100px'
    });
  }
  win.content(Mustache.to_html($('#confirmDeleteAttributeTemplate').html(), {id: $(evt.target).closest('li.attribute').attr('id')}));
  win.center();
  win.open();
};
There are more than one link on the page to open a window, so I check for the kendoWindow object first. I think centering the window in the viewport looks the best, but for some reason if this function creates and opens the window, it is centered relative to the document. If this function opens an existing window instead, it is centered in the viewport correctly. Even if the function creates and opens the windows, subsequent invocations center the window in the viewport. I must be missing something here.
Dimo
Telerik team
 answered on 28 Mar 2013
1 answer
25 views
Is there a way i can draw Trend Lines on the StockChart control?
Iliana Dyankova
Telerik team
 answered on 28 Mar 2013
11 answers
668 views
Hi All

In my application we are using backbone.js for MV* type functionality.  IT performs navigation events based on hash (#) in a URL.  So for example entering in #profile brings up your profile.  We are using a KendoUI template in a grid (since I couldn't get other templates to work right).  Is there anyway to escape a # that may appear in the template?
Atanas Korchev
Telerik team
 answered on 28 Mar 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?