I am trying to open an paymentEditor.cshtml from subscriberEditor.cshtml. SubscriberEditor is a popup form when a new record or update record clicked on a grid.

This is my code.

 

SubscriberEditor:

<table>
                    <tbody>
                        <tr>
                            <td>
                                <script>
                                    $('#MakePayment').click(function () {
                                        var left = ($(window).width() / 2) - (600 / 2),
                                        top = ($(window).height() / 2) - (300 / 2),
                                        popup = window.open("~/PaymentEditor.cshtml", "MakePaymentPopup", "width=600, height=300, top=" + top + ", left=" + left);
                                        return popup;
                                    });
                                </script>  
                                @(Html.Kendo().Button()
                                    .Name("MakePayment")
                                    .HtmlAttributes( new {type = "button"} )                                                                                                                                               
                                    .Content("Make A Payment")
                                )
                            </td>
                        </tr>
                    </tbody>   

 

Can anyone can tell me why isn't this working?

Hi,

 

I m drawing line chart using line chart, consider i have a data for the days 1,2,4 and 7 in the x-axis and 0 -100 in y axis . The line chart draws perfectly on the nodes 1 to 2, 2 to 4 and 4 to 7. But the the problem is here in x- axis 3, 5 and 6 is missing (obviously the node not drawn there) . is that any way to show the line chart 1 to 2, 2 to 3 ( go default to zero even no value is mention to draw), 3 to 4, 4 to 5, 5 to 6, 6 to 7.  Exactly to say the missing values which is not given from the user it should go down to zero and draw the nodes which the actual data. please see the screen shot for further reference.

 

When no value it should not directly pass to next node, My idea to show the amount of sales in particular day/month, the missing days/month not having any data means no sales. should go down to zero. If I process from back-end its huge amount of data generate for zeros. Please help me out from this problem with possible solutions. 

 

Thanks,

Jagan

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()
                                    )