I'm having trouble trying to force the autocomplete to open with all options present by default. Any thoughts on how to accomplish this?

 

Thanks.

For a standard chart, I just need to use the setOptions method

curChart.setOptions({ theme: "black"});

However, when I try this for a stock chart, I get a null reference error.  

I looked at the documentation of the stock chart and it doesn't mention having the setOptions method.  

Is it possible to change the theme?

Hi,

 I use autoFitColumn function on a column object and the function applies on the next column (I think there is a problem between model index and view index).

The first column of my grid is frozen then the second column is autofited properly and the third column autofits the fourth one. The grid is scrollable and all columns are visible.

If I change the 'locked' property of the first column, then the autoFitColumn works properly so I suppose there is a bug.

 We are using Kendo v1.521 (I also try to use the last version but the problem is the same)

 

I have changed your code in autoFitColumn function from this :

to that :

And it seems to work properly. What do you think about it ?

Thanks for your help.

Regards

Hi,

Since there is no built in way to select multiple dates in one DatePicker, we are building our own with a few modifications to the regular DatePicker (the UserVoice request for what we need is here: http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/4122749-add-range-select-to-datepicker).  One problem we are facing is that we cannot figure out how to modify the "value" displayed in the text input for the DatePicker. After the user selects a 2nd date, we would like to show the range they selected in the input. How can we do this?

Here are some things I have experimented with: 

$("#datepicker").kendoDatePicker({
    value: new Date(2013, 10, 10),
    change: function (e) {
      var exampleRangeSelectionText = (new Date("2015-6-6")).toLocaleDateString() + " - " + (new Date("2015-6-8")).toLocaleDateString();
      
      console.log(exampleRangeSelectionText);
      
      //Does NOT work
      this.value(exampleRangeSelectionText);
      
      //Does NOT work
      //$("#datepicker").attr("value", exampleRangeSelectionText);
    }
});

We recently updated to the latest kendoUI 2015.1.429 and noticed a weird issue on the dropdownlist select event.  Here is the code:  

When I set an OptionLabel and get the dataItem using e.item.index() in the select event, I get the previous data item in the list.  However, if I removed the index() and just use this.dataItem(e.item); then it works fine.  Also, in cases where I don't use the OptionLabel and in KendoComboBoxes are OK.  Has this changed since the last update?  I ask because we are doing this in many places and also noticed this usage on other posts in this forum as well. 

 Thanks,
Quynh

Hello! I'm developing a web application using ASP .NET MVC 5 with KendoMVC and KendoUI.

I'm implementing two master and detail grids, but not with nested detail grid inside master grid like here: http://demos.telerik.com/aspnet-mvc/grid/hierarchy nor with detail template like here: http://demos.telerik.com/aspnet-mvc/grid/detailtemplate 

Actually I have two different grids, when you select a row in the master grid, the details of that row are visualized in the detail grid. 
The datasource is made by Ajax binding, I read data from an action in a controller and I pass to that action some extra data, some snippet code at the end of the post. 

Briefly speaking, when I select a row from master grid, the "gridOnchange" event is fired, inside that function I create a new kendo.data.dataSource like this:

 thus this dataSource is bound to detail grid and than the data is fetched, like this:

 all is working but I have some problems with pagination and grouping, for pagination I have resolved with extra code (like that in last code snippet), also catching the events e.RequestStart("gridOnRequestStart").RequestEnd("gridOnRequestEnd") helps to re create the dataSource and re fetching the data but is a bit tricky and the grouping in detail grid still does not work.

My questions are, is there any other way to achive this? Some best practices? Some easiest way? Any advice?
And finally...why in the detail grid the pagination and grouping fail, and it doesn't behave like a "normal" or "regular" grid?

 

Thanks a lot!

 

Hello Telerik team.

 I bind grid use this example MVVM bound forms

I see this line to build grid

But I don't know how to add more columns(update, delete, template etc..) to this grid. Can you help me ?

Thank you.

Hi,

We were using the Kendo Grid in the following way, using JQuery. As you can see in the createTelerikGridControls method,
the columns are being created dynamically.  (ie if they should be visible or hidden).

This is done in the controller:

 public Dictionary<string, object> GetATMStatusGridData(int id, int userId, int pageId)
        {
            Dictionary<string, object> dict = new Dictionary<string, object>();
            object[] args;
            try
            {
                List<PPSPortal.Models.ATM> atmModelList = GetATMStatusData(id);

                List<ColumProperties> deserializedColumnProperties = GetUserPreferencesColumnProperties(userId, pageId);

                List<ColumProperties> columns = new List<ColumProperties>();
                columns.Add(new ColumProperties { field = "Id", title = "ATM Id", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Id"), width = 40 });
                columns.Add(new ColumProperties { field = "Name", title = "Name", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Name"), width = 60 });
                columns.Add(new ColumProperties { field = "Status", title = "Status", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Status"), width = 30, template = "#= formatCellColor(Status) #" });
                columns.Add(new ColumProperties { field = "Active", title = "Active", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Active"), width = 30 });
                columns.Add(new ColumProperties { field = "Online", title = "Online", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Online"), width = 30 });
                columns.Add(new ColumProperties { field = "TotalCashRemaining", title = "Total Cash Remaining", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "TotalCashRemaining"), width = 70, template = "#= formatToatlCash(TotalCashRemaining) #" });
                columns.Add(new ColumProperties { field = "LastMessageFromATM", title = "Last Message From ATM", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "LastMessageFromATM"), width = 80 });
                columns.Add(new ColumProperties { field = "LastMessageToATM", title = "Last Message To ATM", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "LastMessageToATM"), width = 80 });
                columns.Add(new ColumProperties { field = "GroupName", title = "Group Name", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "GroupName"), width = 50 });
                columns.Add(new ColumProperties { field = "Location", title = "ATM Location", hidden = Helpers.Helper.ColumnIsHidden(deserializedColumnProperties, "Location"), width = 140 });
                dict.Add("Columns", columns);
                dict.Add("Collection", atmModelList);
            }
            catch (Exception ex)
            {

            }
            return dict;
        }

The ColumnProperties class has field, title and hidden properties which is added to the Dictionary object.
this Disctionary object stores:
1. The data (ATM)
2. Columns meta data (ColumnProperties)

In JQuery:
$(document).ready(function () {
        // Send an AJAX request
        var participantId = $("#ParticipantId").attr("value");
        var userId = $("#UserId").attr("value");
        var apiUrl = '/api/ATMStatusWebAPI/GetATMStatusGridData/' + participantId + '?userId=' + userId + '&pageId=3';
        var grid = $("#grid");
        grid.css('color', '#1e426d');
        var gridblock = $(".JHADisplayBlock_Grid");
        gridblock.hide();
        $.getJSON(apiUrl)
            .done(function (data) {
                var tbl = $(".JHADisplayBlock_Table");
                tbl.css("width", "100%");
                //GridProperties is a prototype to set the properties of the Grid
                var jhaGridProperties = new GridProperties(data.Collection, data.Columns, 20, true, true, false, true, [20, 30, 40, 50], true, true, true, true, "single row", "blue");
                createTelerikGridControls(jhaGridProperties);
                gridblock.show();
            })
        .error(function (jqXHR, textStatus, errorThrown) {
            //alert("error " + errorThrown);
            //alert("incoming Text " + jqXHR.responseText);
        })
    });

    // Create the Telerik controls
    function createTelerikGridControls(jhaGridProperties) {
        var grids = $(".JHAGrid");
        grids.each(function () {
            $(this).kendoGrid({
                dataSource: {
                    data: jhaGridProperties.data,
                    pageSize: jhaGridProperties.pageSize
                },
                color: jhaGridProperties.color,
                groupable: jhaGridProperties.groupable,
                scrollable: jhaGridProperties.scrollable,
                sortable: jhaGridProperties.sortable,
                pageable: {
                    refresh: jhaGridProperties.refreshPages,
                    pageSizes: jhaGridProperties.pageSizes
                },
                filterable: jhaGridProperties.filterable,
                selectable: jhaGridProperties.rowSelectableType,
                dataBound: addExtraStylingToGrid,
                reorderable: jhaGridProperties.reorderable,
                columnMenu: {
                    columns: jhaGridProperties.showColumns
                },
                toolbar: kendo.template($("#toolbarTemplate").html()),
                detailTemplate: kendo.template($("#template").html()),
                detailInit: detailInit,
                change: onGridClick,
                columns: jhaGridProperties.columns
            });
        });
    }


All this works fine.

Now we need to do this in ASP.Net MVC. But I am not able to hide/show the columns in the same way, as Visible needs to be hardcoded to true or false at design time
Could you please help me with this?

 @(Html.Kendo().Grid<PPSPortal.Models.ATM>()
                                  .DataSource(dataSource => dataSource
                                      .Ajax()
                                      .Read(read => read.Action("GetATMStatusGrid", "ATM", new { id = participantId, userId = userId, pageid = 3 }))
                                      .PageSize(10)
                                      .ServerOperation(false)
                                   )
                .Name("Grid")
                .Sortable()
                .Filterable()
                .Pageable()
                .ColumnMenu()
                .Columns(cols=>
               {
                         col.Bound(m => m.Id).Visible(false);
                         col.Bound(m => m.Name).Visible(true);
               })
                .Groupable()
                                    )

Hello,
I have colored rows in the left part of the Gantt like in this example http://dojo.telerik.com/ADaB/7. I want to add bottom border to the rows for splitting them.
If I add the following code in "dataBound" event

//add border to rows
gantt.element.find(".k-treelist .k-grid-content  tr td").each(function (e)
{
    this.style.borderBottom = "solid 1px #000000";
});

tasks' height between left and right Gantt parts becomes unsynchronized like here: http://dojo.telerik.com/ADaB/14.

When you uncomment code for adding borders to the right part of the Gantt
/*gantt.element.find(".k-gantt-rows tr td").each(function (e) {
                    this.style.borderBottom = "solid 1px #000000";
                });                gantt.element.find(".k-gantt-tasks tr td").each(function (e) {
                    this.style.borderBottom = "solid 1px #000000";
                  });*/
tasks' height between left and right parts becomes synchronized, BUT scroll down right part and see that table with css class ".k-gantt-columns" ends earlier (it has fixed height) than tables with classes ".k-gantt-rows" and ".k-gantt-tasks". Then scroll right part to the right and see that dependency arrows are moved from correct vertical position.

 

My goal is to split rows by boder in the left part. How can I do it???
The problem persists in the latest version of Kendo UI also. 

 

Hello,

posted in DataSource forum, nobody answers, maybe here is the right place.

In some demos & examples I found this : "stringifyDates": true  in the data source configuration, 

but didn't find anything in the documentation about this.

another thing on same subject,  I try to use the parameterMap , to parse the model sent to the server,and stringify the date in the model "SupplyDate": { "type": "date" }, but  its never called! please see example here.

 

 

 Controller

 

Thanks