Hello,

I'm new to the Kendo UI stuff, so please forgive me if this is an easy one; I've been trying to find some details that might tell me what I'm doing wrong, but nothing so far.

Based on radio selection I need to populate the dropdownlist values and grid. I am binding the values to dropdownlist and grid using Viewdata. Initially while loading the View there is no probelm grid and dropdownlist are loaded perfectely. but when i change the radio selection, it is not updating the grid and drodown list but data is reflected in view data.

usign this below function i am calling the controller

function Frequency(Mode) {
        var json = {
            'Frequency': Mode
        }
        $.ajax({
            url: '@Url.Action("Index", "Pricing")',
            type: 'Post',
            data: json,
            success: function (data) {
                $("#cboPricingDates").data("kendoDropDownList").dataSource.read();
                $("#PricingGrid").data("kendoGrid").dataSource.read();
                alert("OK");
            }
        });
    }

and this is my controller

 [HttpPost]
        public ActionResult Index(string Frequency)
        {
            LoadFundDates(Frequency); // this will update the viewdata of dropdown and viewdata of grid
           return View();
        }

and my dropdownlist in view

   @Html.Kendo().DropDownList().Name("cboPricingDates").BindTo((IEnumerable<SelectListItem>)ViewData["PricingDates"])

and my grid

 @{Html.Kendo().Grid((List<SAM.Enrol.Prg.Contract.VendorPricingGrid>)ViewData["PricingGrid"])
        .Name("PricingGrid")
        .DataSource(dataSource => dataSource
           
            .Ajax()
            .PageSize(25)
            .Model(q => q.Id(m => m.ProdId))
            .Model(q => q.Id(m => m.Ccy))
             .Model(q => q.Id(m => m.Cat))
            
                )
               
        .Columns(columns =>
        {
           // Columns goes here
        
        })
            


          .Resizable(resizing => resizing.Columns(true))
          .Scrollable(scrolling => scrolling.Enabled(true).Height(600))
          .Sortable(sorting => sorting.Enabled(true))
          .Groupable(grouping => grouping.Enabled(true))
          .Filterable(filtering => filtering.Enabled(true))
          .Reorderable(reorder => reorder.Columns(true))
          .Pageable(Pageable => Pageable.Enabled(true).PreviousNext(true).Input(true).PageSizes(true).Refresh(true))
          .RowAction(row => row.HtmlAttributes.Add("data-id", row.DataItem.ProdId))
          .RowAction(row => row.HtmlAttributes.Add("data-id", row.DataItem.Ccy))
          .RowAction(row => row.HtmlAttributes.Add("data-id", row.DataItem.Cat))
                      .Selectable(s => s.Mode(GridSelectionMode.Single).Enabled(true))
                      .Render();
                      }

Please help me to resolve this issue.

I notice that the Kendo Custom Download tool does not include the DateTimePicker.


I tried using a Custom Download that just included everything, and one of my pages that uses the DateTimePicker broke.

http://www.kendoui.com/custom-download.aspx


Is there a recommended workaround for this?

I'm creating an ASP.NET MVC3 web app with Kendo UI and I love it.
Here is an issue I'm trying to resolve at the moment:

1. I have a main screen with a grid and custom command/action

{ command: { text: "Unwind", click: showUnwind }, title: " ", width: "50px" },

2. Once I trigger that I display my window

    function showUnwind(e) {
        e.preventDefault();
 
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var selImagineSNum = dataItem["ImagineSNum"];
 
        var direction = _rootUrl + "CFD/GetUnwindWindowContent/" + selImagineSNum;
        var wnd = $("#unwindWindow").data("kendoWindow");
 
        if (!wnd) {
            // first click of the button - will automatically fetch the contentUrl
            wnd = $("#unwindWindow").kendoWindow({
                title: "Unwind Trade",
                actions: ["Minimize", "Maximize", "Close"],
                content: direction,
                width: "800px",
                height: "600px",
                visible: false,
                modal: true
            }).data("kendoWindow");
        } 
        
        wnd.refresh(direction);
        wnd.center();
        wnd.open();
    }

3. The direction above points ot an MVC action that returns an ActionResult with the following markup:

 
@{
    Layout = null;
}
 
<div style="margin: 5px 5px 0 5px;">
    @* Header *@
    <table class="table table-condensed">
        <tr><th>PrcmNum</th><th>ImagineSNum</th><th>PrimeBroker</th><th>Fund</th><th>Trade Date</th><th>Setl. Date</th></tr>
        <tr><td>@ViewBag.Id</td><td>@ViewBag.Id</td><td>PrimeBroker</td><td>Fund</td><td>01/01/2012</td><td>01/02/2012</td></tr>
    </table>
 
    @* Grid *@
    <p class="help-block">Associated trades based on: Fund, Prime Broker & PrcmNum</p>
    <div id="gridAssoc"></div>
</div>
 
<script type="text/javascript">
    CFDUnwind.init();
    /*
    $(function () {
        CFDUnwind.init();
    });
    */
</script>

4. The CFDUnwind.init() method is in CFD.Unwind.js and that file is of course already loaded. The code is:

var CFDUnwind = {};
 
CFDUnwind._assocTradesDataSource = null;
 
// *** Initialize the CFD partial view
CFDUnwind.init = function () {
 
    // ** DataSource for the CFD Trades
    CFDUnwind._assocTradesDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                url: _rootUrl + "CFD/GetAssocCFDTradesPOST",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "ImagineSNum",
                fields: {
                    Confirmed: { editable: true, type: "boolean" },
 
                    PrcmNum: { editable: false, type: "number" },
                    ImagineSNum: { editable: false, type: "number" },
 
                    Fund: { editable: false, type: "string" },
                    Strategy: { editable: false, type: "string" },
                    Folder: { editable: false, type: "string" },
                    Name: { editable: false, type: "string" }
                }
            }
        }
    });
 
    // ** Grid widget
    $("#gridAssoc").kendoGrid({
        dataSource: CFDUnwind._assocTradesDataSource,
        navigatable: true,
        selectable: "single",
        height: 280,
        resizable: true,
        sortable: {
            mode: "single",
            allowUnsort: false
        },
        columns: [
            {
                field: "Confirmed", title: "&#10003", width: 15,
                template: '<input type="checkbox" #= Confirmed ? checked="checked" : "" # ></input>'
            },
            { field: "PrcmNum", title: "PrcmNum", width: 45 },
            { field: "ImagineSNum", title: "ImagineSNum", width: 45 },
 
            { field: "Fund", title: "Fund", width: 55 },
            { field: "Strategy", title: "Strategy", width: 55 },
            { field: "Folder", title: "Folder", width: 55 },
            { field: "Name", title: "Instr. Name", width: 60 }
        ],
        dataBound: function (e) {
            // console.log("gridAssoc dataBound event");
        }
    });
 
}

5. Things are beautiful 90% of the time -- I get my grid in the Window and the data is loaded with an ajax call. The problem is that sometimes I get picture: issue2.jpg, but would like to always get: correct1.jpg :)
Now, what is interesting is that if I click again to display the window the problem disappears;
I get the issue only after initialization and not always...

Hhh, please advise.

~ Boris

I got Sorting and filtering working with WebAPI.
I am not able to get paging to work.
Not matter what value i use(i have tried litral values like 10) the grid always display 0 pages ().
What could i be doing wrong  

Hi, 

I have a telerik grid which contains a template column.

What I would like to do is only apply sorting to this template column and NO other column in the grid.

Please can someone advise me on how I can go about doing this for the Name column? 
Any help would be much appreciated as I am new to using Telerik grids.

Thank you very much

 @(Html.Telerik().Grid(Model.MyGrid)
                 .Name("MyGrid")
                 .Columns(columns =>
                              {
                                  columns.Template(c => @Html.ActionLink(c.Name, "Action", "Controller", new { id = c.Id }, null)).Width(100).Title("Name");
                                  columns.Bound(c => c.Title).Width(100);
                                  columns.Bound(c => c.Occupation).Width(100);
                              })
                 .Sortable(sorting => sorting.Enabled(true)))

HI,
 we are showing a Popup from Kendo Ui Grid, The page is a Searc Page which has Dropdownlist and by selecting the value,
a kendo ui grid will be shown with data and by clicking the Edit button  a popup is displayed. By using Ajax editing in grid, the popup is shown in center of the browser. but page refresh is not happening and dropdownlist is not populated.

 

@(Html.Kendo().Grid(Model)

.Name(

 

"Grid")

 

.Columns(columns =>

{

columns.Bound(p => p.RoleType).Width(80);

columns.Bound(p => p.Name).Width(100);

columns.Bound(p => p.Status).Width(70);

columns.Command(command => { command.Edit(); }).Width(100);

 

})

.Editable(editable => editable.Mode(

 

GridEditMode.PopUp).TemplateName("ManageRolePop").Window(w => w.Title("Manage Role").Name("editWindow")))

 

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(

 

false)

 

.Model(model => model.Id(p => p.RoleID))

.Read(

 

"ManageRole", "ManageRole")

 

.Update(

 

"Update", "ManageRole")

 

)

 

 

By using Server editing the Popup orientation is at the bottom of the page and thewe are not able to set in center of the browser. Request you to help us in this issue.

 

@(Html.Kendo().Grid(Model)

.Name(

 

"Grid")

 

.Columns(columns =>

{

columns.Bound(p => p.RoleType).Width(80);

columns.Bound(p => p.Name).Width(100);

columns.Bound(p => p.Status).Width(70);

columns.Command(command => { command.Edit(); }).Width(100);

 

})

.Editable(editable => editable.Mode(

 

GridEditMode.PopUp).TemplateName("ManageRolePop").Window(w => w.Title("Manage Role").Name("editWindow")))

 

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Server()

.ServerOperation(

 

false)

 

.Model(model => model.Id(p => p.RoleID))

.Read(

 

"ManageRole", "ManageRole")

 

.Update(

 

"Update", "ManageRole")

 

)

Request you to help us in this

Hi All,

I am using ASP.NET MVC 4 and Telerik's KendoUI grid control with in grid editing (GridEditMode.InCell). I am able to see data in the grid and edit data, but the problem is that when I click cell for editing I am not getting Kendo UI controls (DatePicker, ...). Controls that I am getting for editing are plain without any styles. When I add any Kendo control on the page I am getting right control, such as DatePicker control. So style and controls' js are there. The only problem is I am not getting Kendo control inside of the grid.

Index.cshtml

_Layout.cshtml


I also posted the same question on Stack Overflow KendoUI grid InCell editing style issue with images, so you can see what I am talking about.
 
Thanks in advance.

Sincerely,
Vlad.

My navbar truncates on when I select a form field.  The navbar is cut almost in half and the back button is hard to reach.  Only a full page refresh restores the natural size.


You can reproduce the problem with the following link on an iphone device:
http://www.veterinaryclipboard.com/#dosagecalcview?isfeline=true

I'm using a ScrollView as a carousel to house some questions and need to disable swipe events for it (I'm using "next" and "previous" buttons to control it). The problem I'm coming across is that I have a jQuery-UI slider inside the ScrollView, but when I try to change the slider value, it starts to move the ScrollView to the next "page".

I was hoping there was a native way to disable "swipe to move", but it doesn't appear that there is.

I've played around with catching the events on the ScrollView pages, but haven't been able to get something that works on an actual device:

Any ideas or help would be appreciated.