Telerik Forums
Kendo UI for jQuery Forum
6 answers
143 views
Hi Kendo Team,
I'm using something similiar to your Grid /Detail template example and it turns out that that tabstrip is showing a border-bottom line below the active tab.
To reproduce this, follow these steps:
1. Open your sample Grid / Detail template
2. Change the theme to Default
3. collapse/expand the theme dropdown.
I've attached a picture that shows this effect.

You can also check this in your tabStrip samples. Collapse and expand the theme dropdown.

Kind regards,
Oscar.
Dimiter Madjarov
Telerik team
 answered on 19 May 2014
6 answers
174 views
This is driving me nuts.  I have a simple list view bound to some external json data.  The list view uses an external template.  It's working fine.  However, the raw template is also rendering to the HTML in the page.  WHY?!?!

<div id="listView"></div>
 
<script  type="text/x-kendo-template" id="template">
     Category name: #=categoryName#, GL Code : #=glCode#<br><br>
</script>
 
<script>
    $(function() {
 
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "@routes.Assets.at("data/glcodes.json")" ,
                    dataType: "json"
                }
            }
        });
 
        $("#listView").kendoListView({
            dataSource: dataSource,
            template: kendo.template($("#template").html())
        });
 
    });
</script>

The rendered output:

Category name: One, GL Code : 11111
Category name: Two, GL Code : 22222
Category name: Three, GL Code : 33333
Category name: Four, GL Code : 44444
Category name: Five, GL Code : 55555
Category name: Six, GL Code : 66666
Category name: Seven, GL Code : 77777
Category name: Eight, GL Code : 88888
 
Category name: #=categoryName#, GL Code : #=glCode#<br><br>

Thanks in advance!
Alexander Valchev
Telerik team
 answered on 19 May 2014
4 answers
504 views
I am attempting to use a MVVM grid in a div that is marked as role="dialog" and has the aria-hidden set to true.  The div is tied to a button using the data-target attribute on a button.  The basic setup of the MVC Razor page is that button is in one div block and the grid is in another div block.

<div class="...." id="view">
  <div class="row>
     <div class="col-md-3">
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myGridDiv" data-bind="click: onMyButtonPressed">View</button>
     </div>
      ......
  </div>
</div>

<div class="modal fade" id="myGridDiv" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" data-role="content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">View</h4>
            </div>
            <div class="modal-body">
                <div id="myGrid"
                     data-role="grid"
                     data-columns='[
                        { field: "Col1", title: "Col 1", width: "15%" },
                        { field: "Col2", title: "Col 2", width: "20%"},
                        { field: "Col3", title: "Col 3", width: "20%"},
                        { field: "Col4", title: "Col 4", width: "15%"},
                        { field: "Col5", title: "Col 5", width: "15%"},
                        { field: "Col6", title: "Col 6", width: "15%" } ]'
                     data-bind="source: myGridDataSource, visible: true">
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    var myGridDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        async: false,
                        url: '/api/GridData/GetData?id=1',
                        dataType: "json"
                    },
                },
                serverPaging: true,
                pageSize: 10,
                filter: { field: "Id", operator: "eq", value: 1 },
                schema: {
                    model: { id: "Id" },
                    total: function(data) {
                        return data.length;
                    }
                },
                error: function(result) {
                    alert(result);
                }
            });


            var myModel = kendo.observable({
                isVisible: false,
                isEnabled: false,
                dataSource: myGridDataSource,
                onViewHistoryButtonPressed: function (e) {
                    var grid = $('#myGrid').data("kendoGrid");
                    if (null != grid) {
                        grid.dataSource.read();
                        grid.refresh();
                    } else {
                        console.log("failed to find grid");
                    }
                 }
            });
            kendo.bind($("#view"), myModel);
}


So the probably I am running into is that the above does not seem to populate the grid with any data.  When I click the button I see it hit my click method and the dialog does display, but there is not grid data being displayed.  The grid does not even attempt to hit my WebApi controller.

I am not sure what I am doing wrong on this since I have been able to use this same grid logic on other pages without issue.  The only difference here is that the grid is being displayed in a dialog and must be refreshed each time the dialog is loaded.
Alexander Valchev
Telerik team
 answered on 19 May 2014
3 answers
174 views
Hi Just trying to get to grips with the above, but am a noob.

So I am receiving the following data from an ws.

[{"Key":"M12","Name":"Event Protection","HasChildren":true,"NodeType":"Domain"},{"Key":"M13","Name":"Event Protection from 594","HasChildren":true,"NodeType":"Domain"}, ... ]


If am issuing the following when populating the treeview

var tree = $('#treeview').kendoTreeView({         
          dataSource              : getDefinitions(),
          dataTextField           : "Name",
          dataSpriteCssClassField : "NodeType",
          select                  : function (e) {
                                     var id = this.dataItem(e.node).id;
                                     onChange(id);
                                    }

My CSS looks like this

#treeview .k-sprite {
  background-image: url("../../internal/images/treeview-sprites.png");
}
 
.TextItem { background-position: 0px 0px; no-repeat top left; width: 16px; height: 16px;  }
...
.Domain { background-position: 0px -364px; no-repeat top left; width: 16px; height: 16px; }
...

When I run the code, the tree view displays ok BUT only ever shows the top image from the list in the CSS, namely the TextItem image. 

As a noob, I'm not sure where my problem lies. Obviously the sprites png is being found ok and the first item in the list is being loaded, but I'm not sure if there is problem with the way I am doing this or whether there is a problem with my .png. I have noticed that if I inspect the image element sample on the telerik site, Chrome showws a preview of the file, whereas in my sceanrio, Chrome only shows the url to the file.

Any pointers would be gratefully received

S
Simon Woods
Top achievements
Rank 1
 answered on 19 May 2014
1 answer
52 views
   ds_par is the first node, and when I collapsed, I want to deliver two params to remote method like "public Node GetNode(string id, string name)", How can I to complete it? Thanks.

<script>

    var ds_sub={
        transport:{
           read:{url:"http://......"},
           dataType:"json",
           data:{ how to use params of parent}
        },
       schema:{ 
          model:{
              NodeId:"NodeId",
             NodeName:"NodeName"
            }
    }
    var ds_par={
         transport:{
           read:{url:"http:...."}
        },schema:{model:{children:"ds_sub"}}
     }


</script>
Alexander Popov
Telerik team
 answered on 19 May 2014
7 answers
82 views
This used to work on a computer:

<div class="swipe-overlay" data-role="touch" data-enable-swipe="true" data-swipe="on_swiped">
</div>

But now, it seems like no swipe events are delivered any longer.

Why?
Kamen Bundev
Telerik team
 answered on 19 May 2014
5 answers
3.0K+ views
I would like to load different content into the window depending on what button the user clicks.

Right now i have always the same text inside.

@(Html.Kendo().Window()
        .Name("window")
        .Content(@<text>
            <p>
                Blah Blah
            </>
        </text>)
        .Width(540)
        .Height(480)
        .Visible(false)
        )
var kendoWindow = $("#window");
         
        $("#openEmail").click(function (e) {
???????
            kendoWindow.data("kendoWindow").open();
        });
        $("#openBox").click(function (e) {
???????
            kendoWindow.data("kendoWindow").open();
        });
        $("#openDesk").click(function (e) {
??????
            kendoWindow.data("kendoWindow").open();
        });
         
        $("#window").click(function (e) {
            kendoWindow.data("kendoWindow").close();
        });

I want to be to somehow add the content inside where i put the ?????, but i am not sure how.

Or maybe some other alternative way of doing this?

Any help would be appreciated.

Ruonan
Top achievements
Rank 1
 answered on 17 May 2014
2 answers
427 views
Very surprised I couldn't find more information on this. Most grid libraries allow direct js functions for their column renders. In the case of Kendo UI it must be a string template, which is quite limiting. The problem I am currently facing is this:

// Inside my view
config: {
  a: "A",
  b: "B"
},
 
foo: function(data) {
  return this.config[data.config];
},
 
initGrid: function() {
  this.ui.grid.kendoGrid({
    columns: [{ 
      title: "Column A",
      field: "columnA",
      template: "#= this.foo(data) #"
    }]
  });
}

I have no way to access a member method in my template. This is crazy limiting. ANY of the following scenarios would be workable:

// Direct function access
template: this.foo
 
// Set scope of template execution
template: { template: "#= this.foo(data) #", scope: this }
 
// Templates always executed in scope they are defined in
template: "#= this.foo(data) #"  // Just works

The current requirement that only global methods can be called is severe (not to mention a terrible practice). Please advise on how to circumvent this limitation.
Alan
Top achievements
Rank 1
 answered on 17 May 2014
1 answer
108 views
Hi,

The documentation for the data() method of the dataSource states that it will return the service response. However, if I make this call from the dataSource on a grid, it only returns the data the grid is bound to - not all of the data that was returned from the remote service to the dataSource. How can I get the complete data returned from a remote service to a dataSource that is bound to a grid?

Thanks,
Josh
Josh
Top achievements
Rank 1
 answered on 16 May 2014
8 answers
598 views
Hello,

I have a datasource filled with data. And now I want to refresh a data-item because I know it has changed at the server. How can I do that without reloading the complete datasource?

Thanks, Jaap
Andrew
Top achievements
Rank 1
 answered on 16 May 2014
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
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?