Telerik Forums
Kendo UI for jQuery Forum
1 answer
193 views
The sortable documentation provides an example of the autoScroll functionality (http://docs.telerik.com/kendo-ui/api/javascript/ui/sortable#configuration-autoScroll). When I click on the link to edit the example, and run it without modifying the example, the autoScroll feature does not work (http://dojo.telerik.com/oSaVI).

Is this a known issue? Are there any work arounds available?



Alexander Valchev
Telerik team
 answered on 18 Jun 2015
1 answer
1.4K+ views

Hi,

I am using the Grid with inline filter on column header. Users are getting confused as they dunno when the Grid is filtered.

 My first thought is to show a message above the Grid with red font saying that Grid is filtered. However, I couldn't find an event on Grid to let me know when the Grid is filtered. is there such thing?

 

Thanks,
Bilal

Plamen Lazarov
Telerik team
 answered on 18 Jun 2015
2 answers
129 views
I have a hierarchical grid, on main grid i have a button on the top of the grid using toolbar template on click it opens the kendo window. This works perfectly fine. On the child grid I have to have the same functionality, where I have a button on the top of the child grid, On click of the button it should show the kendo window. But the button click on the child grid is not firing. Below is the code.
//My main grid
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Filterable(false).Width(50);
            columns.Bound(p => p.ContractorType);
            columns.Bound(p => p.BHSISNum);
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.ContractorIsAlsoRegion);
            columns.Bound(p => p.ContractorName);
            columns.Bound(p => p.AddressBkNum);
   
        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Selectable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
        )
                
        .ToolBar(toolbar =>
{
    toolbar.Template(@<text>
        <div class="toolbar">
            <button class="k-button k-button-icontext k-grid-add k-primary" id="providerskendowindow">Add Providers</button>
   
        </div>
    </text>);
})
   
            )
        </div>
    </div>
</div>
  
//my child grid
   
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
            .Name("grid_#=Id#")
            .Columns(columns =>
            {
                columns.Bound(o => o.Id).Width(50);
                columns.Bound(o => o.ServiceId);
                columns.Bound(o => o.ServiceType);
                columns.Bound(o => o.AdultChild);
                columns.Bound(o => o.IFGSwitch);
                columns.Bound(o => o.CodeModifier);
                columns.Bound(o => o.ServiceModifier);
                columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}");
            })
             .ToolBar(toolbar =>
{
    toolbar.Template(@<text>
        <div class="toolbar">
            <button class="k-button k-button-icontext k-grid-add k-primary" id="serviceskendowindow">Add Services</button>
        </div>
    </text>);
})
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                      .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#" }))
                    )
   
                    .Pageable()
                    .Sortable()
                    .ToClientTemplate()
   
    )
</script>
   
//Main grid button click window
   
@(Html.Kendo().Window()
    .Name("providerwindow")
    .Title("Add Business Units")
    .Content(@<text><div class="container-fluid">
            <div class="row">
                <div class="col-xs-18 col-md-12">
                    @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
        .Name("grid1")
        .Columns(columns =>
        {
            columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chk' onclick='SetCheckBOX()' />");
            columns.Bound(p => p.Id).Filterable(false).Width(50);
            columns.Bound(p => p.ContractorType);
            columns.Bound(p => p.BHSISNum);
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.ContractorName);
        })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
                .HtmlAttributes(new { style = "height:350px;" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                                .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
                )
                    )
                    <button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button>
                    <button class="k-button k-primary" id="showSelection" style="bottom: 10px; ">Add</button>
                </div>
   
            </div>
   
   
        </div></text>
            )
            .Draggable()
    .Resizable()
    .Width(800)
   
    .Visible(false)
)
   
//Child grid button click kendo window
   
@(Html.Kendo().Window()
    .Name("servicewindow")
    .Title("Add Business Units")
    .Content(@<text><div class="container-fluid">
            <div class="row">
                <div class="col-xs-18 col-md-12">
                    @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
        .Name("grid1")
        .Columns(columns =>
        {
            columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chk' onclick='SetCheckBOX()' />");
            columns.Bound(p => p.Id).Filterable(false).Width(50);
            columns.Bound(p => p.ServiceId);
            columns.Bound(p => p.ServiceType);
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.AdultChild);
        })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
                .HtmlAttributes(new { style = "height:350px;" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                                      .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#" }))
                )
                    )
                    <button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button>
                    <button class="k-button k-primary" id="showSelection" style="bottom: 10px; ">Add</button>
                </div>
   
            </div>
   
   
        </div></text>
            )
            .Draggable()
    .Resizable()
    .Width(800)
   
    .Visible(false)
      
)
   
   
<script>
    function additionalInfo() {
        var contractId =@Html.Raw(Json.Encode(ViewBag.ContractService.Id));
        return {
            Id: contractId
        }
    }
    $(document).ready(function(){
        $("#providerskendowindow").click(function(){
            alert("inside");
            $("#providerwindow").data("kendoWindow").center().open();
        });
        $("#serviceskendowindow").click(function(){
            alert("inside");
            $("#servicewindow").data("kendoWindow").center().open();
        });
   
    });
    $(".close-button").click(function(){
        // call 'close' method on nearest kendoWindow
        $(this).closest("[data-role=window]").kendoWindow("close");
    });
</script>
DHHS
Top achievements
Rank 1
 answered on 17 Jun 2015
3 answers
378 views

The issue we're running into is how the update method of the grid is called from the change event of a drop down when using a popup editor on the grid.  For our data we're using cascaded drop downs (combobox) to edit category information inside the custom popup (editor).  i.e. We have a category and an optional subcategory.  What we're seeing is that when we change the value of the category drop down (or the subcategory drop down), the update method of the grid is being called.  What we're expecting is that the update method will ONLY fire when we click on the Update button in the dialog.

Here's the grid setup:

@(Html.Kendo()
    .Grid<CategoryEditModel>()
    .Name("Categories")
    .Columns(columns =>
    {
       columns.Bound(c => c.SKU);
       columns.Bound(c => c.DeptName);
       columns.Bound(c => c.Item);
       columns.Bound(c => c.Category);
       columns.Bound(c => c.Subcategory);
       columns.Command(command => command.Edit()
                                         .HtmlAttributes(new {@class = "btn btn-primary"}))
              .Width(95);
    })
    .ToolBar(toolbar =>
    {
       toolbar.Excel().HtmlAttributes(new { @class = "btn btn-info" });
       toolbar.Pdf().HtmlAttributes(new { @class = "btn btn-info" });
    })
    .ColumnMenu()
    .ColumnResizeHandleWidth(2)
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable(pg => pg.Refresh(true)
       .PageSizes(true)
       .PageSizes(new[] { 25, 50, 100, 250, 500, 1000 }))
    .Navigatable()
    .Sortable(sortable => { sortable.SortMode(GridSortMode.MultipleColumn); })
    .Scrollable(s => s.Height("400px"))
    .Filterable()
    .Scrollable()
    .Groupable()
    .Events(e =>
    {
       e.Edit("onCategoryEdit");
    })
    .DataSource(dataSource => dataSource.Ajax()
       .Batch(true)
       .PageSize(25)
       .Model(model =>
       {
          model.Id(p => p.ItemId);
          model.Field(p => p.SKU).Editable(false);
          model.Field(p => p.DeptName).Editable(false);
          model.Field(p => p.Item).Editable(false);
       })
       .Sort(s =>
       {
          s.Add("SKU").Ascending();
       })
       .Read(read => read.Action("Categorizations_ReadItems", "Admin").Type(HttpVerbs.Get))
       .Update(update => update.Action("Categorizations_UpdateItem", "Admin").Type(HttpVerbs.Post))
       .Create(create => create.Action("Categorizations_CreateCategory", "Admin").Type(HttpVerbs.Post))
       .AutoSync(true)
    )
)

The custom editor (snippet):

<div class="editor-field">
   @(Html.Kendo()
         .ComboBoxFor(model => model.CategoryId)
         .DataTextField("Name")
         .DataValueField("Id")
         .DataSource(source => source.Read(read => read.Action("GetCategories", "Admin"))
                                     .ServerFiltering(true))
         .AutoBind(true)
         .Events(e =>
                 {
                    e.Change("onCategoryChange");
                    e.Cascade("onCategoryCascade");
                 })
        )
</div>
 
<div class="editor-field">
   @(Html.Kendo()
         .ComboBoxFor(model => model.SubcategoryId)
         .DataTextField("Name")
         .DataValueField("Id")
         .DataSource(source => source.Read(read => read.Action("GetSubcategories", "Admin")
                                                       .Data("onNeedCategoryValue"))
                                     .ServerFiltering(true))
         .AutoBind(true)
         .CascadeFrom("CategoryId")
         .Events(e =>
                 {
                    e.Change("onSubcategoryChange");
                    e.Cascade("onSubcategoryCascade");
                 })
        )
</div>

Any suggestions on how to call the update only when clicking the Update button of the dialog?  Or insure that the data posted via the change of the combo boxes pulls the current (UI) version of the data for posting back to the server?

Boyan Dimitrov
Telerik team
 answered on 17 Jun 2015
2 answers
110 views

When using Chrome (43.0.2357.124 m), and I'm editing content, I highlight some of the text, click on the down-arrow for either text or background color, and then select a color, and nothing happens.  The text doesn't remain selected, and the color bar under the "A" doesn't change from black.  I did this in Firefox, and didn't have a problem.

 

Is this a known issue?

Barry P
Top achievements
Rank 1
 answered on 17 Jun 2015
6 answers
2.3K+ views

I have not been able to find an example of displaying boolean fields as checkboxes in a Grid.  The example on this page (http://demos.telerik.com/aspnet-mvc/grid/editing) works fine but I want the column to always display the checkboxes not just display them when you click in a cell.  Is this possible using Razor syntax?

 

 

John
Top achievements
Rank 1
 answered on 17 Jun 2015
2 answers
246 views

Hello

I want to change the start time (e.g. from 9:00 to 10:00) after the scheduler has been initialized.

Is destroying & re-creating the scheduler (http://www.telerik.com/forums/how-to-change-start-time-and-resources) still the best option?

Regards,

Pawel

Colin
Top achievements
Rank 1
 answered on 17 Jun 2015
1 answer
297 views

Hello Telerik team

--------------- Problem --------------- 

 I'm using Kendo template to show a Grid. Data bind to this Grid retrieves from 3 tables, each table in Database map to a class in source.

I build my grid using Kendo template, and bind to div using Kendo.

 html

<div id="GridQuestion" data-bind="..."></div>

<script type="text/html" id="temp-grid">
    <div data-bind="...">
            .... grid structure
    </div>
</script>

kendo.bind($('#GridQuestion'), questionViewModel);

 

Grid shows data as this: List groupQuestionSet, each groupQuestionSet contains many QuestionSet, each QuestionSet contains many Question. 

This is Grid screen in browser:

Gridview in browser

This is Table Relationship.

Table relationship diagram

This is storeprocedure, SQL query :

SELECT        GroupQuestionSet.Id AS 'GroupQuestionSetId', GroupQuestionSet.GroupQuestionSetName, QuestionSet.Id AS 'QuestionSetId', QuestionSet.QuestionSetName, Question.Id as 'QuestionId', Question.QuestionContent
FROM            GroupQuestionSet
                         INNER JOIN QuestionSet ON GroupQuestionSet.Id = QuestionSet.GroupQuestionSetId
       INNER JOIN Question on Question.QuestionSetId = QuestionSet.Id

This is  JSON test data : 

function initTestData() {
        //This is data from GroupQuestionSetTable in database
        var GroupQuestionSetTable = [
        {
            "Id": 1,
            "GroupQuestionSetName": "GroupQuestionSet 1"
        },
        {
            "Id": 2,
            "GroupQuestionSetName": "GroupQuestionSet 2"
        },
        {
            "Id": 3,
            "GroupQuestionSetName": "GroupQuestionSet 3"
        }
        ];
 
        //This is data from QuestionSetTable in database
        //GroupQuestionSetId if foreign key link to Id column of GroupQuestionSetTable
        var QuestionSetTable = [
        {
            "Id": 1,
            "GroupQuestionSetId": 1,
            "QuestionSetName": "QuestionSet 1"
        },
        {
            "Id": 2,
            "GroupQuestionSetId": 1,
            "QuestionSetName": "QuestionSet 2"
        },
        {
            "Id": 3,
            "GroupQuestionSetId": 1,
            "QuestionSetName": "QuestionSet 3"
        },
        {
            "Id": 4,
            "GroupQuestionSetId": 2,
            "QuestionSetName": "QuestionSet 4"
        }
        ];
 
        //This is data from SubQuestionTable in database
        //QuestionSetId if foreign key link to Id column of QuestionSetTable
        var QuestionTable = [
         {
             "Id": 1,
             "QuestionSetId": 1,
             "QuestionContent": "QuestionContent 1"
         },
         {
             "Id": 2,
             "QuestionSetId": 1,
             "QuestionContent": "QuestionContent 2"
         },
         {
             "Id": 3,
             "QuestionSetId": 1,
             "QuestionContent": "QuestionContent 3"
         },
         {
             "Id": 4,
             "QuestionSetId": 2,
             "QuestionContent": "QuestionContent 4"
         }
        ];
    }

 ------------------------ need ------------------------ 

When I create, update, delete Question inside QuestionSet (or GroupQuestionSet or QuestionSet) Grid only interact with Database and only reload that row. The same as when we use Kendo grid with create, read, update, delete

  ------------------------ My curent solution ------------------------ 

When insert, update, del: Browser rebind all grid. -> it will slow if we have large data.

 ------------------------ My temporary solution ------------------------ 

I have read this topic http://stackoverflow.com/questions/16097878/kendo-ui-unable-to-bind-data-to-list-view-using-mvvm but I don't understand.

My temporary solution is : 

Source:

Contruct a Temp object the same as result table from above query-->Load Kendo grid using that list of Temp object and use Kendo grid with create, read, update, delete -> In create, read, update, delete I will write code to create, read, update, delete to only  GroupQuestionSet or QuestionSet or Question

I still looking for some other solutions.

Thank you.

Kiril Nikolov
Telerik team
 answered on 17 Jun 2015
2 answers
208 views

I'm able to show bubbles if the datasource contains them at the time the map is created, but I want to be able to add them dynamically.

To add markers dynamically I do map.markers.add(marker);

To add non-bubble shapes dynamically I define my shapes layer like this:

 

{
                type: "shape",
                dataSource: shapes,
                style: { fill: { opacity: 1 }, stroke: { width: 1, color: "#88f" } }
            },

with shapes defined like this:

var shapes = new kendo.data.DataSource({type: "geojson"});
Then when I do shapes.add(shape); it automatically adds it to the map.

According to this thread the only types of fields you can define in a custom datasource are "string", "number", "boolean" and "date".  Unfortunately the bubble layer's location field is looking for a Lat Long, so that makes it so I can't use a kendo datasource object.

Is there a way to make this work?

 

 

 

Matt
Top achievements
Rank 1
 answered on 17 Jun 2015
2 answers
100 views
I have a tab strip with two grids that both have paging and sorting enabled.  If I sort or page the grid in the second tab strip, the first tab strip ends up getting selected.  If I go back to the second tab strip the grid is refreshed properly (i.e. it was sorted or paged correctly).  How can I keep the second tab strip selected when I page or sort the grid in the second tab strip?
John
Top achievements
Rank 1
 answered on 17 Jun 2015
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
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?