Telerik Forums
Kendo UI for jQuery Forum
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
364 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
150 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
729 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
357 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
72 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
1 answer
224 views
Hi
I am using kendo grid with mvc.
It is working very well but I have an issue with localization.
I would to translate all grid messages to Danish.
I can make is work by using
.Pageable(....)
But since I have a lot of grid to translate I would like to be able to do it from a central place.
I have tried with the globalization file for Denmark by inserting:
name: "da-DK",
pageable: {
messages: {
display: "{0} - {1} af {2} rækker"
}
},
...
But is it not applied.
Is there some way I can make this configuration a central place ?
Best Regards
Nicolai
Vladimir Iliev
Telerik team
 answered on 04 Jun 2013
6 answers
221 views
Hi, I think I found a bug in the editor. I looked but I wasn't able to find mention of in other threads. 

To reproduce using the demo editor:
  1. Open the demo editor 
  2. Select-all text in the editor
  3. Delete
  4. Open Dev Tools to view the html elements
  5. Observe the remaining p tag
  6. Paste in any text to the "empty" editor
  7. Observe the pasted text in a hidden k-paste-container element below the p
As a work around, the p tag can be deleted before or after the paste but many of our customers will likely not figure this out on their own.
Dimiter Madjarov
Telerik team
 answered on 04 Jun 2013
1 answer
192 views
I've created a basic grid, but when the Create is clicked in the toolbar, it seems like the Read-method is called on the controller. Besides this, the constructor of the DossierType is not called ?
Is there any api available that I can use to direct the grid to a specific method, used during the build of the entity ?
@(Html.Kendo().Grid<DossierType>()
        .Name("dossierTypes")
        .PrefixUrlParameters(false)
        .Columns(columns =>
            {
                columns.Bound(user => user.Sample);
            }
        )
        .ToolBar(toolbar => toolbar.Create().Text("Nieuw Dossiertype"))
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .BindTo(Model.Items)
        .DataSource(config => config
            .Server()
            .Model(modelConfig => modelConfig.Id(field => field.Id))         
            .Create(create => create.Action("Create", "DossierType"))
            .Read(read => read.Action("Read", "DossierType"))
            .Update(update => update.Action("Update", "DossierType"))
            .Destroy(destroy => destroy.Action("Remove", "DossierType"))
        )
      )

Dimiter Madjarov
Telerik team
 answered on 04 Jun 2013
4 answers
207 views
Hi,

We're just evaluating Kendo UI chart controls, and have a question about Stacked Column Charts.

When generating a stacked column chart do all records in the datasource have to have the same number of values?

For example:

If I have a chart as follows:
$("#chart").kendoChart
    (
        {
            dataSource: { data: arData, sort: [{ field: "axisOrder", dir: "asc" }, { field: "stack", dir: "asc"}], group: [{ field: "stack"}] },
            legend: { visible: false },
            series: [{
                stack: true,
                type: "column",
                field: "value"
            }],
            categoryAxis: {
                field: "category",
                labels: {
                    rotation: -90
                }
            }
        }
    )

and the data is as follows:
var arData = [
{ stack: "Stack A", category: "1", value: 10, axisOrder: 1 },
{ stack: "Stack A", category: "2", value: 20, axisOrder: 2 },
{ stack: "Stack A", category: "3", value: 30, axisOrder: 3 },
{ stack: "Stack B", category: "1", value: 20, axisOrder: 1 },
{ stack: "Stack B", category: "2", value: 30, axisOrder: 2 },
{ stack: "Stack B", category: "3", value: 40, axisOrder: 3 },
{ stack: "Stack C", category: "1", value: 30, axisOrder: 1 },
{ stack: "Stack C", category: "2", value: 40, axisOrder: 2 },
{ stack: "Stack C", category: "3", value: 50, axisOrder: 3}
];

The chart is rendered as I expect, with 3 columns, each with a stack containing "Stack A", "Stack B" and "Stack C". However, if I remove the "Stack C / Category:2" record, the value of "Stack C / Category:3" record appears on the 2nd column, eg:
var arData = [
                { stack: "Stack A", category: "1", value: 10, axisOrder: 1 },
                { stack: "Stack A", category: "2", value: 20, axisOrder: 2 },
                { stack: "Stack A", category: "3", value: 30, axisOrder: 3 },
                { stack: "Stack B", category: "1", value: 20, axisOrder: 1 },
                { stack: "Stack B", category: "2", value: 30, axisOrder: 2 },
                { stack: "Stack B", category: "3", value: 40, axisOrder: 3 },
                { stack: "Stack C", category: "1", value: 30, axisOrder: 1 },
                //{ stack: "Stack C", category: "2", value: 40, axisOrder: 2 },
                { stack: "Stack C", category: "3", value: 50, axisOrder: 3}
            ];

Other behaviour also occurs if the first "group" doesn't contain all the possible categories, eg you can end up with columns that don't have a label.

Is there a way to have the chart use 0 as the value for the missing records, or is there another way to achieve this.

osman
Top achievements
Rank 1
 answered on 04 Jun 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
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)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
Gauges
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
OrgChart
TextBox
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
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?