Telerik Forums
Kendo UI for jQuery Forum
4 answers
84 views
December 18th has a data-value of 18-11-12 instead of 18-12-12, why is that?
Georgi Krustev
Telerik team
 answered on 16 Oct 2012
3 answers
659 views
This is odd behavior. I'm not quite sure what it is I'm doing wrong, as I've reproduced the example contained within the Kendo UI MVC distribution package. I have two combo boxes. The second combo box cascades from the first. The controller action that populates the second combo box does fire, the expected query parameter taken from the value of the first combo box is passed to it, and the browser does receive the expected JSON returned from the controller. However, the second combo box remains empty. Here is my code:

Controller:
public JsonResult GetPosts()
{ return Json(_manager.GetPosts().Select(p => new { PostName = p.Name, PostValue = p.Id }), JsonRequestBehavior.AllowGet); }
 
public JsonResult GetUnits(string postId)
{
 Guid id;
 
 if (string.IsNullOrEmpty(postId) || !Guid.TryParse(postId, out id))
 { return null; }
 
 return Json(_manager.GetUnits(id).Select(u => new { UnitName = u.Name, UnitValue = u.Id }), JsonRequestBehavior.AllowGet);
}

View:
@(Html.Kendo().ComboBox()
         .Name("Post")
         .DataTextField("PostName")
         .DataValueField("PostValue")
         .DataSource(ds => ds.Read("GetPosts", "Shared")))
 
@(Html.Kendo().ComboBox()
         .Name("Unit")
         .DataTextField("UnitName")
         .DataValueField("UnitValue")
         .DataSource(ds => ds.Read(read => read.Action("GetUnits", "Shared").Data("filterUnits")).ServerFiltering(false))
         .CascadeFrom("Post"))
 
<script type="text/javascript">
  function filterUnits() {
    return {
      postId: $('#Post').val()
    };
  }
</script>

The JSON returned by the GetUnits(string) controller action to the browser is:
[{"UnitName":"Defense Media Activity","UnitValue":"b39e64f3-60a4-4c48-aa98-201229c88302"},{"UnitName":"Kimbrough","UnitValue":"f4d88089-32d7-4dd4-ab6f-37a3cb4d0142"}]

Thank you for any assistance you can provide.

UPDATE

If I change the second UI control from a ComboBox to a DropDownList, it renders the options as expected. Any reason why the ComboBox does not get populated and render the data it receives?
Georgi Krustev
Telerik team
 answered on 16 Oct 2012
0 answers
216 views
Hello,

I am binding the grid with auto generated columns. and now I want to handle the row selected event.could anyone help on this.  please find my view below

@{Html.Kendo().Grid(Model)

        .Name("GridSam")
        .DataSource(dataSource => dataSource
            .Server()
                     .PageSize(20)

                )

        .Columns(c =>
        {
            c.AutoGenerate(column =>
            {
                //customize autogenereted column's settings                                                   
                column.Width = "150px";

            });
        })

          .Resizable(resizing => resizing.Columns(true))
          .Scrollable(scrolling => scrolling.Enabled(true).Height(600))
          .Sortable(sorting => sorting.Enabled(true))
          .Groupable(grouping => grouping.Enabled(true))
          .Filterable(filtering => filtering.Enabled(true))
          .Reorderable(reorder => reorder.Columns(true))
          .Pageable(Pageable => Pageable.Enabled(true).PreviousNext(true).Input(true).PageSizes(true))

          .Render();
                }



Regards,
Ravi.
Ravi
Top achievements
Rank 1
 asked on 16 Oct 2012
1 answer
660 views
Hello I have a problem displaying the grid. My code is not working properly after you run the page is not displayed correctly. You can look at the pictures.

Is my code

<script type="text/javascript">
    $(document).ready( function () {
         
        var bidDataSource = new window.kendo.data.DataSource({
            transport: {
                read: {
                    dataType: "json",
                    type: "POST",
                    url: '@Url.Action("NewBids","Bid")'
                },
                schema: {
                    model: {
                        id: "Id"
                    }
                }
            }
        });
         
 
        var bidsGrid = $("#bidsGrid").kendoGrid({
            dataSource: bidDataSource,
            height: 250,
            pageable: true,
            scrollable: false,
            selectable: "row",
            columns: [
                {
                    field: "Id",
                    width: 90,
                    title: "Id"
                }
            ]
             
        });
 
 
    });
 
</script>
 
 
<div id="bidsGrid"></div>


Is code generate kendo

<html><head>
        <title>Новые заявки</title>
 
         
         
        <script src="/static/Scripts/jquery-1.8.2.js" type="text/javascript"></script><style type="text/css"></style>
 
        <script src="/static/Scripts/kendo/2012.2.710/kendo.web.min.js" type="text/javascript"></script>
         
                <link href="/static/Content/kendo/2012.2.710/kendo.default.min.css" rel="stylesheet" type="text/css">
        
  
        
         
         
         
       
    <style id="wrc-middle-css" type="text/css">.wrc_whole_window{   display: none;  position: fixed;    z-index: 2147483647;    background-color: rgba(40, 40, 40, 0.9);    word-spacing: normal !important;    margin: 0px !important; padding: 0px !important;    border: 0px !important; left: 0px;  top: 0px;   width: 100%;    height: 100%;   line-height: normal !important; letter-spacing: normal !important;  overflow: hidden;}.wrc_bar_window{  display: none;  position: fixed;    z-index: 2147483647;    background-color: rgba(60, 60, 60, 1.0);    word-spacing: normal !important;    font-family: Segoe UI, Arial Unicode MS, Arial, Sans-Serif; margin: 0px !important; padding: 0px !important;    border: 0px !important; left: 0px;  top: 0px;   width: 100%;    height: 40px;   line-height: normal !important; letter-spacing: normal !important;  color: white !important;    font-size: 13px !important;}.wrc_middle {   display: table-cell;    vertical-align: middle; width: 100%;}.wrc_middle_main { font-family: Segoe UI, Arial Unicode MS, Arial, Sans-Serif; font-size: 14px;    width: 600px;   height: auto;    background: url(chrome-extension://icmlaeflemplmjndnaapfdbbnpncnbda/skin/images/background-body.jpg) repeat-x left top;    background-color: rgb(39, 53, 62);  position: relative; margin-left: auto;  margin-right: auto; text-align: left;}.wrc_middle_tq_main { font-family: Segoe UI, Arial Unicode MS, Arial, Sans-Serif; font-size: 16px;    width: 615px;   height: 460px;    background: url(chrome-extension://icmlaeflemplmjndnaapfdbbnpncnbda/skin/images/background-sitecorrect.png) no-repeat;    background-color: white;    color: black !important;    position: relative; margin-left: auto;  margin-right: auto; text-align: center;}.wrc_middle_logo {    background: url(chrome-extension://icmlaeflemplmjndnaapfdbbnpncnbda/skin/images/logo.jpg) no-repeat left bottom;    width: 140px;    height: 42px;    color: orange;    display: table-cell;    text-align: right;    vertical-align: middle;}.wrc_icon_warning { margin: 20px 10px 20px 15px;    float: left;    background-color: transparent;}.wrc_middle_title {    color: #b6bec7;   height: auto;    margin: 0px auto;  font-size: 2.2em;   white-space: nowrap;    text-align: center;}.wrc_middle_hline {    height: 2px; width: 100%;    display: block;}.wrc_middle_description {   text-align: center; margin: 15px;   font-size: 1.4em;   padding: 20px;  height: auto;   color: white;   min-height: 3.5em;}.wrc_middle_actions_main_div {   margin-bottom: 15px;    text-align: center;}.wrc_middle_actions_blue_button div {   display: inline-block;  width: auto;    cursor: Pointer;    margin: 3px 10px 3px 10px;  color: white;   font-size: 1.2em;   font-weight: bold;}.wrc_middle_actions_blue_button {    -moz-appearance: none;  border-radius: 7px; -moz-border-radius: 7px/7px;    border-radius: 7px/7px; background-color: rgb(0, 173, 223) !important;  display: inline-block;  width: auto;    cursor: Pointer;    border: 2px solid #00dddd;  padding: 0px 20px 0px 20px;}.wrc_middle_actions_blue_button:hover { background-color: rgb(0, 159, 212) !important;}.wrc_middle_actions_blue_button:active { background-color: rgb(0, 146, 200) !important;  border: 2px solid #00aaaa;}.wrc_middle_actions_grey_button div {    display: inline-block;  width: auto;    cursor: Pointer;    margin: 3px 10px 3px 10px;  color: white !important;    font-size: 15px;    font-weight: bold;}.wrc_middle_actions_grey_button {    -moz-appearance: none;  border-radius: 7px; -moz-border-radius: 7px/7px;    border-radius: 7px/7px; background-color: rgb(100, 100, 100) !important;    display: inline-block;  width: auto;    cursor: Pointer;    border: 2px solid #aaaaaa;  text-decoration: none;  padding: 0px 20px 0px 20px;}.wrc_middle_actions_grey_button:hover { background-color: rgb(120, 120, 120) !important;}.wrc_middle_actions_grey_button:active {   background-color: rgb(130, 130, 130) !important;    border: 2px solid #00aaaa;}.wrc_middle_action_low { font-size: 0.9em;   white-space: nowrap;    cursor: Pointer;    color: grey !important; margin: 10px 10px 0px 10px; text-decoration: none;}.wrc_middle_action_low:hover {   color: #aa4400 !important;}.wrc_middle_actions_rest_div {   padding-top: 5px;   white-space: nowrap;    text-align: center;}.wrc_middle_action {    white-space: nowrap;    cursor: Pointer;    color: red !important;  font-size: 1.2em;   margin: 10px 10px 0px 10px; text-decoration: none;}.wrc_middle_action:hover {   color: #aa4400 !important;}</style><script id="wrc-script-middle_window" type="text/javascript" language="JavaScript">var g_inputsCnt = 0;var g_InputThis = new Array(null, null, null, null);var g_alerted = false;/* we test the input if it includes 4 digits   (input is a part of 4 inputs for filling the credit-card number)*/function is4DigitsCardNumber(val){ var regExp = new RegExp('[0-9]{4}');    return (val.length == 4 && val.search(regExp) == 0);}/* testing the whole credit-card number 19 digits devided by three '-' symbols or   exactly 16 digits without any dividers*/function isCreditCardNumber(val){  if(val.length == 19)    {       var regExp = new RegExp('[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}');     return (val.search(regExp) == 0);   }   else if(val.length == 16)   {       var regExp = new RegExp('[0-9]{4}[0-9]{4}[0-9]{4}[0-9]{4}');        return (val.search(regExp) == 0);   }   return false;}function CheckInputOnCreditNumber(self){  if(g_alerted)       return false;   var value = self.value; if(self.type == 'text') {       if(is4DigitsCardNumber(value))      {           var cont = true;            for(i = 0; i < g_inputsCnt; i++)                if(g_InputThis[i] == self)                  cont = false;           if(cont && g_inputsCnt < 4)         {               g_InputThis[g_inputsCnt] = self;                g_inputsCnt++;          }       }       g_alerted = (g_inputsCnt == 4);     if(g_alerted)           g_inputsCnt = 0;        else            g_alerted = isCreditCardNumber(value);  }   return g_alerted;}function CheckInputOnPassword(self){  if(g_alerted)       return false;   var value = self.value; if(self.type == 'password') {       g_alerted = (value.length > 0); }   return g_alerted;}function onInputBlur(self, bRatingOk, bFishingSite){  var bCreditNumber = CheckInputOnCreditNumber(self); var bPassword = CheckInputOnPassword(self); if((!bRatingOk || bFishingSite == 1) && (bCreditNumber || bPassword) )  {       var warnDiv = document.getElementById("wrcinputdiv");       if(warnDiv)     {           /* show the warning div in the middle of the screen */          warnDiv.style.left = "0px";         warnDiv.style.top = "0px";          warnDiv.style.width = "100%";           warnDiv.style.height = "100%";          document.getElementById("wrc_warn_fs").style.display = 'none';          document.getElementById("wrc_warn_cn").style.display = 'none';          if(bFishingSite)                document.getElementById("wrc_warn_fs").style.display = 'block';         else                document.getElementById("wrc_warn_cn").style.display = 'block';         warnDiv.style.display = 'table';        }   }}</script></head>
    <body>
       
         
 
 
<script type="text/javascript">
    $(document).ready( function () {
         
        var bidDataSource = new window.kendo.data.DataSource({
            transport: {
                read: {
                    dataType: "json",
                    type: "POST",
                    url: '/Bid/NewBids'
                },
                schema: {
                    model: {
                        id: "Id"
                    }
                }
            }
        });
         
 
        var bidsGrid = $("#bidsGrid").kendoGrid({
            dataSource: bidDataSource,
            height: 250,
            pageable: true,
            scrollable: false,
            selectable: "row",
            columns: [
                {
                    field: "Id",
                    width: 90,
                    title: "Id"
                }
            ]
             
        });
 
 
    });
 
</script>
 
 
<div id="bidsGrid" data-role="grid" class="k-grid k-widget" tabindex="0" style="height: 250px; "><table cellspacing="0" style="height: auto; " class="k-focusable k-selectable" data-role="selectable"><colgroup><col style="width:90px"></colgroup><thead class="k-grid-header"><tr><th data-field="Id" data-title="Id" class="k-header">Id</th></tr></thead><tbody><tr data-uid="2a202132-59d1-4494-ac0b-986594c09da8"><td>1</td></tr></tbody></table><div class="k-pager-wrap k-grid-pager" data-role="pager"><a href="#" title="Go to the first page" class="k-link" data-page="1"><span class="k-icon k-i-seek-w">Go to the first page</span></a><a href="#" title="Go to the previous page" class="k-link" data-page="NaN"><span class="k-icon k-i-arrow-w">Go to the previous page</span></a><ul class="k-pager-numbers k-reset"><li><a href="#" class="k-link" data-page="1">1</a></li></ul><a href="#" title="Go to the next page" class="k-link" data-page="NaN"><span class="k-icon k-i-arrow-e">Go to the next page</span></a><a href="#" title="Go to the last page" class="k-link" data-page="1"><span class="k-icon k-i-seek-e">Go to the last page</span></a><span class="k-pager-info k-label">NaN - NaN of 1 items</span></div></div>
 
 
        
     
 
</body></html>

timon
Top achievements
Rank 1
 answered on 16 Oct 2012
0 answers
108 views
Hi,

I'm able to perform column level grouping over the datasource with the below syntax.

var products = [
                { "id": 1, "type": "fruits", "name": "apple" },
                { "id": 2, "type": "fruits", "name": "banana" },
                { "id": 3, "type": "fruits", "name": "grapes" },
                { "id": 4, "type": "vegetables", "name": "carrot" },
                { "id": 5, "type": "vegetables", "name": "tomato" },
                { "id": 6, "type": "vegetables", "name": "brinjal" }
            ];
  
$("#grid").kendoGrid({ 
    dataSource: { 
        data: products, 
        group: { 
            field: "type" 
        
    
});


But the output I require is ln this format.

------------------------------
Type                Name
------------------------------
Fruits               Apple
                        Banana
                        Grapes
Vegetables      Carrot
                        Tomato
                        Brinjal

Could you please suggest in how do I proceed further? Is a grid required in the first place or should I use a list view?

Thanks in advance..

Aditya
Top achievements
Rank 1
 asked on 16 Oct 2012
0 answers
102 views
Hi,

I am using kendo ui grid. In that grid i am having 4 values which are coming from database. But all the values are initially in the 
display mode. But i want to put all the records in the grid to edit mode. And when i save the changes from the tool bar 
the saved record should also be in the edit mode. Hope you understand my question

Is it possible using kendo ui. Please provide me an example or sample.

Thanks and Regards,
Srinivas
srinivas
Top achievements
Rank 1
 asked on 16 Oct 2012
1 answer
776 views
I am getting the following error when binding my Model to a Kendo Grid.

A circular reference was detected while serializing an object of type [my type]

What is strange is that the type of the object that is causing the circular reference is not the same as the type of object of the Model for this page... ie:

@model IEnumerable<Models.Type>
Is not the same type that is causing this error. What could be the problem?

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Groupable(false);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()  
    .DataSource(dataSource => dataSource      
        .Ajax()
        .ServerOperation(false)      
     )
)
Vladimir Iliev
Telerik team
 answered on 16 Oct 2012
2 answers
146 views
I've been following the samples and I have a template. As soon as I wrap my template items in an <a href="#settings"></a> I receive the error: 

Uncaught Error: Invalid template:'
        <a href="#settings">
            <img src="img/drink.png" />
            <h2>#: data #</h2>
        </a>
    ' Generated code:'var o,e=kendo.htmlEncode;with(data){o='\n        <a href="';settings">
            <img src="img/drink.png" />
            <h2>;o+=': data ';</h2>
        </a>
    ;o+=;}return o;



Georgi Krustev
Telerik team
 answered on 16 Oct 2012
0 answers
106 views
Page size parameter from grid not pass to controller method in MVC 3.0 .
What do I wrong?
Dawid
Top achievements
Rank 1
 asked on 16 Oct 2012
7 answers
456 views
Hi,

I'm just so confused why you decided to have three widgets for something that - in my believe - could just be one widget with some configuration options...

I'm talking about combobox, dropdownlist and autocomplete.

I'm guessing I need the dropdownlist because:
  • The label shown to the user should be different from the value submitted in the form (yes, the value should be an object if where the label should obviously be a user-readable object description, so I'm having my server return data such as [{id:"1", label:"Belgium"}, {id:"2", label:"United Kingdom"}, {id:"3", label:"France"}] which I believe should allow me to display country names, but when the form is submitted, I should get the ID's. (I'm using the dataTextField and dataValueField)
However, we sometimes have THOUSANDS of objects to choose from, so we want to use the autocomplete because:
  • it allows me to do serverside filtering based on characters entered by the user
So I'm a bit stuck here.  Basically I believe we want an autocomplete, but with the ability to have value differ from text/label.  The jQueryUI autocomplete (which we use up to now) does just that.  It allows me to return any data from the server, and using an event listener on the object, I can update a hidden field with the value for a selected element.

I'm just a little confused why you decided to make three widgets, while actually I believe a lot of people need a combination of them.  Why for instance does autocomplete not support either an event for item selection or the dataValueField option, and why does the dropdownlist not allow me serverside filtering, yet just loads everything from the server in one call?

Very confused now...  I believe you should try and make this ONE widget supporting all functionalities using configuration options.  One thing I also don't understand is why the autocomplete doesn't have a loading indicator when ajax is being retrieved, where the dropdownlist DOES show a loading icon.  Never believed picking out a widget would be so confusing to be honest :o)


David.

Maxim Khlupnov
Top achievements
Rank 1
 answered on 16 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
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
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
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?