Telerik Forums
Kendo UI for jQuery Forum
3 answers
876 views
See video:
http://screencast.com/t/pHdDhSg26X

It also happens if for example you are on the the 3rd page and you set the grid with
$('grid').data().kendoGrid.dataSource.data([the data])

If the data has less rows then the current page, example, new data 10 rows and you are on page 3 of a grid with 5 rows per page, it says on page 3, which is blank because you have only 10 rows.


Using latest as you can see on the video.
Stefan
Telerik team
 answered on 15 Nov 2017
11 answers
1.4K+ views
Hello, I am trying to use two grids on single page, first one is loaded usingkendo wrapper this way
@(Html.Kendo().Grid<CPSkla.Models.WindScreen>()   
    .Name("GridWinds")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden();
        columns.Bound(p => p.Brand);
        columns.Bound(p => p.Model);
        columns.Bound(p => p.Year);
        columns.Bound(p => p.Specification);
        columns.Bound(p => p.Type);
        columns.Bound(p => p.Size);
        columns.Bound(p => p.EuroCode);
        columns.Bound(p => p.Price);
        columns.Bound(p => p.Source);
    })   
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("WindscreenRead", "Calculation").Type(HttpVerbs.Post))
        .Model(model => model.Id(p => p.Id))      
    )
    .Pageable()
    .Sortable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row).Enabled(true))
    .Events(events=>events.Change("AccessoriesBind"))
)
This works fine, but the other grid is supposed to be empty until user selects row from this first grid, so I am declaring just columns
@(
 Html.Kendo().Grid<CPSkla.Models.Accessory>().Name("GridAccessories").Columns(columns =>
  {
      columns.Bound(p => p.Id).Hidden();
      columns.Bound(p => p.Brand);
      columns.Bound(p => p.Model);
      columns.Bound(p => p.Year);
      columns.Bound(p => p.Specification);
      columns.Bound(p => p.Type);
      columns.Bound(p => p.Size);
      columns.Bound(p => p.EuroCode);
      columns.Bound(p => p.Price);
      columns.Bound(p => p.Source);
  })
  .Pageable()
  .Sortable()
  .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
  .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.Id))
    )
)

Now I need to fill up the second grid according to selected row in first one, I am using jquery function declared on change event of first grid
<script>
    function AccessoriesBind() {
        var eucode = "";
        var grid = this;               
         
        grid.select().each(function() {
            var dataItem = grid.dataItem($(this));
            eucode += dataItem.EuroCode;
             
        });
        alert(eucode);
        var gridAcc = $("#GridAccessories").data("kendoGrid");
        gridAcc.DataSource = new kendo.data.DataSource({
            transport: {
                read: "/Calculation/AccessoriesRead/" + eucode,
                dataType: "json",
            }
        });
        gridAcc.DataSource.read();
 
    }
</script>
But this last few rows wont fill the table, I tried lots of approaches but always with the same result. My controller is returning valid values in JSON but the table with that return value wont fill up. I tried using generating another kendo grid using just Web UI function kendoGrid on DIV but it didnt wor either. Any advices? Please help.
Konstantin Dikov
Telerik team
 answered on 15 Nov 2017
1 answer
1.0K+ views

Hi guys,

I'm trying to swap my Kendo UI widgets according to a dropdown.

Currently, I call destroy on the widget, and remove all HTML within the container div holding the <input> that was used for the kendo widget. I then append a new div into the container and call the initialization code for kendoNumericTextBox again, but came upon this error:

"Uncaught TypeError: Cannot read property '_move' of undefined".

 

I have also tried the example provided on the web, that moves the origin input out, before calling destroy on my wrapper, with the same resulting error.

 

 

 

Stefan
Telerik team
 answered on 15 Nov 2017
6 answers
1.2K+ views
good morning everyone,

I am currently using the licensed version of Kendo UI Complete for ASP.NET MVC (Q2 2012) and trying to figure out if the Kendo UI Grid has something similar to the NoRecordsTemplate method in the Telerik Extensions for ASP.NET MVC Grid?

Before this, I was using the licensed version of Telerik Extensions for ASP.NET MVC.  Below is the code I had for it.  You'll notice, there is a "NoRecordsTemplate" method which I can specify my own custom text if the grid is empty, has no records.  

@{Html.Telerik().Grid(Model)
    .Name("grdAllUsers")
    .DataKeys(keys => keys.Add(k =>
        k.Id)
    )
    .Columns(columns =>
    {
        columns.Bound(o => o.FirstName)
            .Width(150);
        columns.Bound(o => o.LastName)
            .Width(150);
        columns.Bound(o => o.EmailAddress)
            .Width(200);
        .Width(70)
        .HtmlAttributes(new { style = "text-align:center" });
    })
    .NoRecordsTemplate(@<text>No User records to display.</text>)
    .Pageable(paging =>
        paging.PageSize(15)
    )
    .Sortable()
    .Filterable()
    .Render();
}

Below is my Keno UI Grid code.  How does one specify custom text when there are no records for the grid, when the grid is empty?

@{Html.Kendo().Grid(Model)
    .Name("grdAllUsers")
    .Columns(columns =>
    {
        columns.Bound(o => o.FirstName)
            .Width(150);
        columns.Bound(o => o.LastName)
            .Width(150);
        columns.Bound(o => o.EmailAddress)
            .Width(200);
        .Width(70)
        .HtmlAttributes(new { style = "text-align:center" });
    })
    .Pageable(paging =>
        paging.PageSize(15)
    )
    .Sortable()
    .Filterable()
    .Render();
}

Thank you very much for your help
Yeyuan
Top achievements
Rank 1
 answered on 14 Nov 2017
6 answers
586 views

Using k-button with the "min" version of common.css shows buttons with display: inline-flex.

This does not happen with the non-'min' version in the 2017.1.223 src download , "kendo.common.css" file. (2017.3.913 src download doesn't appear to be available yet.)

Don't have time to investigate, just thought I'd mention it to see what others are seeing. The inline-flex attribute seems to make buttons wrap strangely onto new lines.

This is inside a kendoWindow, may not happen in normal circumstances.

The file size difference is very small, 259kb vs 210kb approx., so I'm just using the non-minified version.

Neli
Telerik team
 answered on 14 Nov 2017
2 answers
273 views

I want to make the height of the pager smaller.

I tried looking for the css property that controls this without luck.

Any help would be appreciated.

 

Konstantin Dikov
Telerik team
 answered on 14 Nov 2017
1 answer
84 views

we built an offline webapp placed on our customer pc

in that webpage there's a combobox listing an inventory of products

our users usually focus the filtering input field and then use their barcode reader to input the barcode of the product they're looking for; the barcode reader returns a Carriage Return at the end of the string, so it immediately selects the first good result

today the user called us for an issue: sometimes using the combobox this way selects another product; We remotely connected to their machine and saw that it was as she said;

what we got right now is:

1- it happens only in kendo combobox, because there's another place where we built a javascript search by text field and everything works there
2- there's apparently nothing wrong with the data call
3- it could depend on the machine; her pc is sensibly slower than our (we even saw the search string appear letter by letter in the text field)
4-the issue never happens if we replicate her installation on one of our machines

Thanks in advance for anysuggestion

Plamen
Telerik team
 answered on 14 Nov 2017
4 answers
91 views

Hi.

There is a good example how to make a column non-resizable.

My grid has a command button plus a template button on the left side of the grid and I don't know how to refer to these buttons to make them non-resizable. 

 toolbar: [{ name: "create", text: "Add New Asset" }, { template: kendo.template($("#DueDateTemplate").html()) }, { template: kendo.template($("#rightToolbarTemplate").html()) }],
                columns: [
                    {
                        command: [{ name: "edit", text: { edit: " ", update: " ", cancel: " " } },
                          { name: "confirmButton", text: " ", template: "<a class='k-button k-grid-confirmButton' onclick ='onItemConfirm(this)'><span class='k-icon k-i-checkbox'></span></a>" },
                        ], title: "Edit / Confirm", width: "120px", locked: true
                    },
                    { field: "Attested", template: $("#attestedTemplate").html(), title: "Attested", width: "100px", locked: true },

 

Thank you

Konstantin Dikov
Telerik team
 answered on 14 Nov 2017
2 answers
150 views
Hallo everybody, I'd like to ask for Kend UI charts. We used to use components from v2017.1.223 but after last update (v2017.3.913), we have a problem with chart legends. They start to display incorrectly: something like depressed texts and pictures in the left corner.
Thanks
Igor Stanek
Top achievements
Rank 1
 answered on 14 Nov 2017
1 answer
160 views

If you add validation to a certain column (range.validation() ) to add a dropdown list to a column and this column happens to be the last column which is frozen, then the dropdown arrow is not visible when you click in the column.

 

Ie, 

frozenColumns(2);

activeSheet.range("B2:B2").validation()

 

 

Ivan Danchev
Telerik team
 answered on 13 Nov 2017
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?