Telerik Forums
Kendo UI for jQuery Forum
1 answer
124 views
hi, i want to make a notification when user get a new messege like outlook mail.
do you have any Suggestion how do to it?
Duke
Top achievements
Rank 1
 answered on 05 Jun 2013
1 answer
402 views
Hello

I am running into a problem  using the data field on the transport read. The additionalData function is called  only the 1st time the datasource executes read. 
I have an event that updates the viewModel and the calls read() on the datasource. I can confirm that  it makes a call to the server every time but it only calls additionalData the 1st time.
Here are extracts of the related bits of code.

//in the datasource setup
transport: {
    read: {
    url: crudServiceBaseUrl + "/NoteSource",
    dataType: "json",
     data: App.Notes.additionalData(),
    cache: false
  },
  create: {
    url: crudServiceBaseUrl + "/Editing_Create",
    dataType: "json"
   }
 }

//in App.Notes 
where additionalData is:
additionalData: function () {
    console.log("additionalData");
    console.log(App.Notes.viewModel.linkedModel());
    return { entity: App.Notes.viewModel.linkedModel(), entityId: App.Notes.viewModel.linkedModelId() };
}
in the App.Notes namespace.

and viewModel is:
viewModel: {
                linkedModel: ko.observable(""),
                linkedModelId: ko.observable(0),
                username: ko.observable(""),
                noteType: ko.observable(""),
                createdAt: ko.observable(new Date())
            }
also in the same namespace.

The event handler contains the following that triggers the read and subsequent call to the server:
listView.dataSource.read();

Also just as a side note. This worked when i used the mvc version but I then got a stack overflow when I tried to include a partial of the cshtml page that contains this in my _Layout.
@(Html.Kendo().ListView<TimeTarget.RDM.Core.DataTransferObjects.NoteDto>()
                .Name("listView")
                .TagName("div")
                .ClientTemplateId("template")
                .Editable()
                .DataSource(dataSource => dataSource
                    .Model(model => model.Id("NoteId"))
                    .Create(create => create.Action("Editing_Create", "Note"))
                    .Read(read => read.Action("NoteSource", "Note")
                    .Data("App.Notes.additionalData")
                    ) // Specify the action method and controller name

                )
                .Pageable(paging => paging.Enabled(true))
                  )
Nikolay Rusev
Telerik team
 answered on 05 Jun 2013
2 answers
419 views
Hello,

I am struggling with declarative setting grid column to a external template

Here's my template
<script type="text/x-kendo-template" id="someTemplate">
    <div>
        <label> ${firstName}</label>  
        <label>${lastName}</label>
    </div>
</script>
and here's the grid declaration
<div data-role="grid" data-bind="source: people" data-columns='[
    {"field": "firstName",
     "title": "Full Name",
     "template": "kendo.template($("#someTemplate"))"
    }
]'></div>
And here's JS Fiddle reproducing my problem
http://jsfiddle.net/malovicn/bSGdW/8/

Anyone knowing how to fix that JS fiddle? :)
Nikola
Top achievements
Rank 1
 answered on 04 Jun 2013
1 answer
93 views
 My html is:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><link href="../../Content/kendo.common.min.css" rel="stylesheet" type="text/css" /><link href="../../Content/kendo.default.min.css" rel="stylesheet" type="text/css" /><link href="../../Content/examples-offline.css" rel="stylesheet" type="text/css" /><script src="../../Scripts/jquery.min.js" type="text/javascript"></script><script src="../../Scripts/kendo.web.min.js" type="text/javascript"></script><script src="../../Scripts/console.js" type="text/javascript"></script></head><body><select id="size"></select><script >$(document).ready(function() {$("#size").kendoDropDownList({dataTextField: "Text",dataValueField: "Value",dataSource: {transport: {read: {dataType: "jsonp",url: "/Grid/GetStateList",}}}});});</script></body></html>  And Controller is     public JsonResult GetStateList()        {            List<ListItem> list = new List<ListItem>() {                new ListItem() { Value = "1", Text = "One" },                new ListItem() { Value = "2", Text = "Two" },                new ListItem() { Value = "3", Text = "Three" }            };            return this.Json(list,JsonRequestBehavior.AllowGet);         /*   in MVC v3,v2   Json is blocked for GET requests (as you can tell from the error) for security reasons. If you want to override that behavior, check out the overload for Json that accepts a JsonRequestBehavior parameter.*/        }   But I am Unable to bind kendo dropdown in case of remote data .In case of local data its working fine .What changes should be done so that  kendoDropDownList can be bound ?Thank and Regards,Karan ShahSoftware Engineer,GIPL
Daniel
Telerik team
 answered on 04 Jun 2013
2 answers
1.4K+ views
I am developing an MVC 4 website for a customer and have run into an issue with the dropdownlist. 

I have a Grid, bound to my model, and I can see all the data (correctly) in the grid.
@(Html.Kendo().Grid((IEnumerable<MyModel>)ViewBag.Model)
                    .Name("Grid")
                    .Columns(columns =>
                    {
                        ..
                        removed for brevity
                        ..
                        columns.Command(command => { command.Edit(); command.Destroy(); });
                    })
                    .ToolBar(toolbar => toolbar.Create())
                    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditorTemplate"))
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Events(events => events.Error("error_handler"))
                        .Model(model => model.Id(m => m.recordID))
                        .Create(update => update.Action("Create", "Controller"))
                        .Update(update => update.Action("Update", "Controller"))
                        .Destroy(update => update.Action("Destroy", "Controller"))
                    )
                )
The above code loads the grid fine, I can trigger all the actions correctly, and they all work great.

My problem comes in when I edit a row, and the field I need to change is a DropDownList. For this particular issue, it is a list of States. We are using popup edit mode, and have a custom editor template.

This is the Editor Template code.
@(Html.Kendo().DropDownListFor(m => m.StateId)
        .Name("StateId")
        .DataTextField("StateName")
        .DataValueField("StateId")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetStatesList", "Controller");
            })
            .ServerFiltering(true);
        })
        .SelectedIndex(0)
        .OptionLabel("Select a State")
    )

The control successfully loads the states, and binds to the model, and shows the correct state value, if there is one provided. In our database, the StateId field is Nullable, and I think this is where the problems arise. 

For completeness, here is the controller function that populates the state list.
public JsonResult GetStatesList()
{
    var states = client.GetStates();
    return Json(states, JsonRequestBehavior.AllowGet);
}
the client.GetStates() returns an IEnumerable<State> collection.

NOTE: This exact same code works in a non-grid view in our MVC project.

Now, when the StateId is populated on load, it will display the correct state in the DropDownList. If I change this state and click the Update button on my popup editor, the Update Action is triggered, model.StateId = NewIDSelected and the change gets saved to the database. Now if the StateId is NULL from the database, obviously no state is selected, but now, if I select a state from the DropDownList, and click the Update button on my editor, the Update Action is not triggered, and no change is saved to the database.

To add to that, if I change any other field on the editor (say change or add the street address)  in addition to the State change (from null to a state value), the Update Action is correctly triggered, but the model.StateId = null.

As I stated before, this exact same scenario works perfectly on a view that does not use a grid at all (as a matter of fact the popup editor is an exact duplicate of that view).

Can anyone help me figure out how to fix this? We have got around it by using a plain HTML DropDownList, but it is ugly ugly... but it works.

I am using Chrome, .net Framework 4, kendo Q1 2013
Jeff Goldsack
Top achievements
Rank 1
 answered on 04 Jun 2013
12 answers
369 views
Hey everyone!

I was searching all over but couldn't find an answer to my question. I'm initializing an autocomplete widget as the following:

This code is loaded into my DOM as a result of an Ajax request:
<div id="view_ticketCreate">
    <form id="jar_ticketing_create"action="" class="k-block jar-container">
        <fieldset class="login">
            <legend>Kontaktinformationen</legend>
            <p class="notice">Definieren Sie hier die Kontaktinformationen zu diesem Ticket.</p>
            <p>
                <label>Kunde</label>
                <input data-role="autocomplete" data-bind="source: customers, events{click: inject}" data-text-field="CName" placeholder="Suchen Sie nach dem Kunde" type="text" id="jtc_cID" class="k-textbox sourced">
            </p>
            <p>
                <label>Kontakt</label>
                <input type="text" name="jtc_cName" class="k-textbox">
            </p>
            <p>
                <label>E-Mail</label>
                <input data-bind="value: cMail" type="text" name="jtc_cMail" class="k-textbox">
            </p>
            <p>
                <label>Telefon</label>
                <input data-bind="value: cPhone" type="text" name="jtc_cPhone" class="k-textbox">
            </p>
            <p>
                <label>Gerät</label>
                <select name="dID" class="k-textbox sourced">
                  <option value="000">Nicht geräte spezifisch</option>
                  <option value="001">CFBS01</option>
                  <option value="002">CFBS02</option>
                  <option value="003">CFBS03</option>
                  <option value="004">CFBS04</option>
                </select>
            </p>
            <p>
                <label>Login</label>
                <input type="text" name="cLogin" class="k-textbox">
            </p>
        </fieldset>
</form>
</div>
<script>
      kendo.bind($("#view_ticketCreate"), view_ticketCreate);
</script>
in my main (an always loaded) JS file i got:
var view_ticketCreate = kendo.observable({
       customers: new kendo.data.DataSource({
           transport: {
               read: {
                   url: "http://server/API/customers/search/",
                   dataType: "jsonp",
                   contentType: "application/json; charset=utf-8"
               },
               parameterMap: function(options, operation) {
                   return {
                       SearchTag: options.filter.filters[0].value
                   }
               }
           },
           schema: {
               data: "data"
           },
           serverFiltering: true,
           dataTextField: "CName",
            select: function(e){
                if (e.item == null) return;
                var DataItem = this.dataItem(e.item.index())
                cPhone: DataItem.Telefon
            }
       }),
       inject: function(e){
           alert('ok')
       },
       cPhone: "0123456789",
       cMail: "asd@asd.de"
});
However,  the autocomplete search works perfect. But now I want to populate the fields jtc_cMail and  jtc_cPhone with values from my autocomplete request. But either the select: Function is working (not allowed here (guess because MVVM?), also the custom event inject is fireing.

I couldn't find anything how I need to go on. Please help me out.

Greetings

Duke
Duke
Top achievements
Rank 1
 answered on 04 Jun 2013
1 answer
154 views
Hello Support:

I'm having conceptual difficulties with how to encapsulate a fetch().  Consider the following:

var getAllProjects = function() {
            projectsDataSource.fetch(function()  {
                var dataView = projectsDataSource.view();
                return dataView;
            });
        };

where projectsDataSource is a Kendo dataSource defined with a remote source.  I should say that the inner portion above works flawlessly (by inner portion I mean the part defined as projectsDataSource.fetch(function() { ...}).

However, I decided to encapsulate this functionality in a separate module defined by RequireJS, leading naively to the code above where I declare getAllProjects().

I'm trying to return dataView to the outer function, getAllProjects(), a function that is revealed publicly.  All I get back, though, is undefined.  It would seem that you're using callbacks, not promises, which appears to be confusing me.

What am I missing here?

Thank you.
Atanas Korchev
Telerik team
 answered on 04 Jun 2013
3 answers
742 views
I am using Kendo dataSource with transport (read, update, create) functionality. read operation retrieves data and displays it in a Grid. Gird has 3 columns - key, value, and class. Update operation edits a particular row taking in the options object as shown - 

 parameterMap : function (options, operation) {
      if (operation == "update") {
            return {key : options.models[0].key, value : options.models[0].value, class : options.models[0].class}
       }
}
The options object above is pre-loaded with the data in the particular row of the grid being edited.

However, for create operation, the options object is pre-set to null for all the fields. Options object is loaded when the user enters values for key and value. The value of class remains the same for all the rows, existing and new. How can I access the grid data (for the value of class) within the the code below?

 parameterMap : function (options, operation) {
      if (operation == "update") {
            return {key : options.models[0].key, value : options.models[0].value, class : options.models[0].class}
       }
     
      if (operation == "create") {
            return {key : options.models[0].key, value : options.models[0].value, class : <what code should go here?>}
       }
}

Petur Subev
Telerik team
 answered on 04 Jun 2013
1 answer
359 views
 I have a grid with a details template (i.e outer grid with an inner grid).

My outer grid has "Create" functionality. When I add a new row I am able to expand the inner grid before saving, and this causes an error in the backend, because the new row is not saved and does not have an id yet.

Is there a way to disable the details (inner grid expansion) for a new row?
Dimiter Madjarov
Telerik team
 answered on 04 Jun 2013
1 answer
74 views
Hi,

Just to let you know that API Reference at http://docs.kendoui.com/api/web/upload#configuration-async.removeField says:

async.removeVerb String(default: "DELETE")

but by default POST is used and async.removeUrl is stating that server method should support POST.

Best regards
T. Tsonev
Telerik team
 answered on 04 Jun 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?