Telerik Forums
Kendo UI for jQuery Forum
4 answers
606 views
i have a custom editor for a column in a grid which is a multi select dropdownlist. unfortunately i am unable to access the drop down list data during the transport update. how do i structure the controls to provide access during update?

the custom editor code looks much like this.
function CustomDropDownEditor(container, options) {
$('<input " />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "json",
transport: {
read: "/controller path/GetSomeData"
}
}
});
}

When i click update on the row, it appears that the last selected value is bound to the input control. since i want to iterate over the entire drop down list during the transport update via a function to get the selected items to pass to the controller, i need to access the dropdownlist - which is most likely out of scope.

i have tried creating the dropdownlist outside of the custom editor function with global scope but when i reference it as
var ddl = $("#AlertSourcesDropDown").data("kendoDropDownList");
 
ddl is null - which is not what i expected.

i have tried naming <input> for finding but as expected it comes up undefined.

of course a more elegant approach would be to declare the model item as a collection type but i am sure that is not possible and it would not know which items to select even if collections were possible.

so, how do i structure the controls for access during update? i am sure that this is a general programming / jquery problem, but the latter is a weak spot for me.

PS
through additional testing i found out that i was successfully creating a dropdownlist with proper scope such that DDL is accessible in other parts of the javascript. so having created this, how can i make it the dropdownlist used in the custom editor defined above? the goal is to select the checked check boxes during update/save. the various syntax experiments with appendTo have failed. creating a new dropdownlist within the function limits scope and loses data.
var DDL = $('#MyDropDownList').kendoDropDownList({
        dataTextField: "Name",
        template: $("#CheckboxTemplate").html(),
        dataValueField: "Name",
        dataSource: { type: "json",
            transport: { read: '/path/GetData' }
        }
    });

PPS
after further work, i have confirmed that scope is the issue - so i need to append an existing dropdownlist in the custom editor - not create a new one. another approach is to process a change / check event - ie when a selection has been made - to store the state of the selections in a variable. or figure out how to use a list/collection/array as the binding target for the column's data. my first option should be trivial but it is not (for me). of course the first option assumes that i can get the state of each of the associated check boxes.
tony
Top achievements
Rank 1
 answered on 25 Oct 2012
1 answer
127 views
I'm working on a application that generates mobile view dynamically in js.  I have been using V2012.1.503 for most of the development. I updated to V2012.2.803 today and I now get the following error when I try to load the first page:

Error: No root view found. Make sure that the kendo mobile application element directly contains one or more elements with data-role='view' attribute set.

I've tried setting the "initial" property on the application creation, but I still get the same error.  I'm creating kendo.mobile.Application after the page has loaded.  Was there a reason for the change in behavior that is now causing this?

I just tried with the latest commercial build (V2012.2.710) and get the following error with the same application code:

TypeError: 'undefined' is not an object (evaluating 'd.getAttribute')

Sean

Bill
Top achievements
Rank 1
 answered on 25 Oct 2012
0 answers
204 views
Hi

I have a Kendo chart that I'm using plot bands on (sample code is shown below - 'varTotals' is a variable that has an integer value). I was wondering whether there was a way to show tooltips on those plot bands when my users hover over them:

 valueAxis: {
              labels: {
                  format: "{0:C0}"
              },
              majorGridLines: {
                  width: 1,
                  color: "#CCCCCC"
              },
                            plotBands: [{
                                from: (95 * varTotals) / 100,
                                      to: varTotals,
                                      color: "green"
                                  }]
                                  ,
              min: 0,
              max: varTotals
          },

Thanks.
Tejpal
Top achievements
Rank 1
 asked on 25 Oct 2012
1 answer
136 views
We had a pie chart well formatted in our app - it was using kendo.all.min.js 2012.1.322 and the included jquery.min.js

When we upgraded to kendo.all.min.js 2012.2.913 the pie chart looked very different and unreadable from a style standpoint.  The javascript code did not change at all nor did the input data.

I've included before/after screen shots and the code - any ideas?

App.globalVar.generateChart = function (container, bcLevels, inputFilter, inURL) {
      $(container).kendoChart({
          dataSource: {
              transport: {
                  read: {
                      url: App.constants.ROOTURL + inURL,
                      type: "post",
                      contentType: "application/json; charset=utf-8",
                      dataType: "json"
                  },
                  sort: {
                      field: "bondType",
                      dir: "asc"
                  },
                  parameterMap: function (options) {
                      options.filter = inputFilter;
                      options.holdingBC = bcLevels;
                      return JSON.stringify(options);
                  }
              },  // end transport
              schema: { data: "data", errors: "processErrorList" }
          }, //end datasource
          legend: {
              position: "right",
              margin: 1,
              offsetX: -5,
              labels: {
                  template: "#= text # (#= value #%)"
              }
          },
          chartArea: {
              background: "white",
              width: 325,
              height: 130,
              margin: 1
          },
          seriesDefaults: {
              type: "pie"
          },
          plotArea: { margin: 1 },
          series: [{
              field: "tmvAccrued",
              categoryField: "bondType",
              colorField: "color",
              padding: 12,
              overlay: {
                  gradient: "none"
              }
          }],
          tooltip: {
              visible: false,
              format: "{0}%"
          }
      });
  }

Eric
Top achievements
Rank 1
 answered on 25 Oct 2012
0 answers
105 views
When my grid load the paging at the bottom just says 1, but if i sort or filter the paging works. Is there code i can call to update the paging

I tried $("#grid").data("kendoGrid").refresh();
and $("#grid").data("kendoGrid").dataSource.Refresh();

neither work
Sean
Top achievements
Rank 1
 asked on 25 Oct 2012
0 answers
159 views
In my grid the dates shown in the date column are repeated with the date values for the first row. The dates show fine if I remove the globalization

kendo.culture("en-GB");

Field is defined like this
, { field: "StartDate", title: "Date", width: 80, format: "{0:d}" }

The date values received over the wire are fine. But when I tap into the "change" event of the datasource or the "databound" event of the grid I see that the data in the model is already modified.

I am not sure what's happening here. Anybody has any ideas what could be wrong? I am using Kendo v2012.2.710.

Thanks.
Just
Top achievements
Rank 1
 asked on 25 Oct 2012
1 answer
176 views
Hi there,

Is there a way to use plot bands to show alternating bands of color on the category axis of a line chart?  (I am hooked up with a datasource and I don't know what or how many categories I will have..just that I want the colors to alternate).

thanks!
Iliana Dyankova
Telerik team
 answered on 25 Oct 2012
1 answer
326 views
Using the example set out in the following page: 

http://demos.kendoui.com/web/grid/hierarchy.html

I have tried to get this to use XML as the datasource instead of oData.  I get an "d is not defined" javascript error.

I think it must be the filter that is not working.

filter: { field: "customer", operator: "eq", value: "id/text()" } 


but I cannot find any examples of the Grid using XML, and do not know what to put for the "value" to get this to match up to the value of the "id" node in the customers XML file - can anyone help?   The whole code is below.

$(document).ready(function() {
    var element = $("#grid").kendoGrid({
 
         
       dataSource: new kendo.data.DataSource({
           type: "xml", // specifies data protocol
           pageSize: 6, // limits result set
           serverPaging: true,
           serverSorting: true,                       
           transport: {
            read: "customers.xml"
           },
            schema: {
                type: "xml",
                data: "/Customers/Customer",
                model: {
                    fields: {
                        id: "id/text()",
                        surname: "surname/text()",
                        forename: "forename/text()",
                        email: "email/text()"
                    }
                }
            }   
          }),
        height: 450,
        sortable: true,
        pageable: true,
        detailInit: detailInit,
        dataBound: function() {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
        columns: [{
                field:"id",
                filterable: false
            },
            "surname",
            "forename",
            "email"
        ]
    });
});
 
function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            type: "xml",
            transport: {
                read: "orders.xml"
            },
            schema: {
                type: "xml",
                data: "/orders/order",
                model: {
                    fields: {
                        id: "id/text()",
                        net: "net/text()",
                        vat: "vat/text()",
                        dispatched: "dispatched/text()"
                    }
                }
            },  
                                 
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize:6,
            filter: { field: "customer", operator: "eq", value: "id/text()" }
        },
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: [ "id", "net", "vat", "dispatched" ]
    });
}
Jason
Top achievements
Rank 1
 answered on 25 Oct 2012
9 answers
208 views
Hi,
I have a problem with 4 or more cascading dropDownList.
When I deselect the first dropDownList, last is not correctly refreshed (initialized)
Could you help me?
Thank you,
Amos

<p>
    <label for="categories">Catergories:</label>
    @(Html.Kendo().ComboBox()
          .Name("categories")
          .Placeholder("Select categoryasdasda...")
          .DataTextField("Cod")
          .DataValueField("Des")
          .DataSource(source => {
               source.Read(read => {
                   read.Action("GetCascadeCategories", "ComboBox");
               });
          })
    )
</p>
<p>
    <label for="products">Products:</label>
    @(Html.Kendo().ComboBox()
          .Name("products")
          .Placeholder("Select product...")
                     .DataTextField("Cod")
                  .DataValueField("Des")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeProducts", "ComboBox")
                      .Data("filterProducts");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("categories")
    )
    <script>
        function filterProducts() {
            return {
                categories: $("#categories").val()
            };
        }
    </script>
</p>
<p>
    <label for="orders">Orders:</label>
    @(Html.Kendo().ComboBox()
           .Name("orders")
           .Placeholder("Select order...")
                      .DataTextField("Cod")
                  .DataValueField("Des")
           .DataSource(source => {
                                     source.Read(read =>
                                                     {
                                                         read.Action("GetCascadeOrders", "ComboBox")
                                                             .Data("filterOrders");
                                                     })
                                         .ServerFiltering(true);
           })
           .Enable(false)
           .AutoBind(false)
           .CascadeFrom("products")
          )
    <script>
        function filterOrders() {
            return {
                products: $("#filterOrders").val()
            };
        }
    </script>
</p>
<p>
    <label for="ciccio">Ciccio:</label>
    @(Html.Kendo().ComboBox()
          .Name("ciccio")
          .Placeholder("Select order...")
                    .DataTextField("Cod")
                  .DataValueField("Des")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeciccio", "ComboBox");
              })
              .ServerFiltering(true);
          })
      
          .AutoBind(false)
                          .CascadeFrom("orders")
    )
    <script>
        function filterOrders() {
            return {
                ciccio: $("#filterCiccio").val()
            };
        }
    </script>
</p>
Danny
Top achievements
Rank 1
 answered on 25 Oct 2012
0 answers
114 views
Upload file uploaded in directory but file name cant save in database. pls give solution for that
Kartik
Top achievements
Rank 1
 asked on 25 Oct 2012
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
Drag and Drop
Application
Map
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
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
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?