Hello, I am using KendoGrid to display events in my project along with server paging. I wish to use SignalR and view the events as and when they occur in the kendo grid without a refresh. I wanted to know if KendoGrid server paging could be used along with SignalR,if yes,please help me with some examples. Thank you.

We are using the ImageBrowser with Azure Blob Storage, and we have a database with the images stored as "Files." Each File row contains FileId and Name. Let's use this row as an example:

FileId: "5d4acf03-7e9b-4dae-ba1a-d4ded83bba6d"
Name: "logo.jpg"

Once we have the FileId, we use that to create a new Blob Container in Azure (so it creates a new "directory" in Azure Storage with a URL like "https://clientname.blob.core.windows.net/5d4acf03-7e9b-4dae-ba1a-d4ded83bba6d/logo.jpg").

OK, so when I pass our list of images back to the Kendo ImageBrowser, the only property it has is "Name," which in this case is "logo.jpg". But if I set the imageUrl to "https://clientname.blob.core.windows.net/", then when it inserts the image into the Editor, the src is "https://clientname.blob.core.windows.net/logo.jpg", which is obviously incorrect. I still need the FileId, which will be different for every image. Both the thumbnailUrl and the imageUrl need the FileId as well to be able to properly build the correct URL.

I tried creating a custom schema like this:


And passed a "containerId" property back with each object from the Read action. But then I didn't know how to make the thumbnailUrl or imageUrl functions use that containerId property.

I'm stuck! Can you help me figure out how to make this work please? Thank you.

I have trouble to update my datasource when the grid is edited.
See the following jsfiddle: http://jsfiddle.net/ewaldhofman/uU2th/8/

The update method in the transport of the datasource is never called when the value in the grid is updated.

What am I doing wrong?

Hi.  I have a grid displaying using the following code.  As you can see, I have scrollable set to false and pageable set to true.  The pagesize is 6...  The problem is that even if I only have one row displaying in the grid, it still allows for scrolling.  The reason this is particularly problematic is that when I touch the screen, I may accidentally scroll it.  This has the unfortunate effect of making the keyboard pop up on the tablet device every time.  I would like to be able to solve both of these issues.  Please advise.  Thanks!

 
        <div id="clientsDb">
            <div id="gridViewDiv"></div>
        </div>
        
        <style scoped>
            #clientsDb{
                height: 100%;
                width: 100%;
                margin 0px auto 0;
                padding: 0px 0px 0 0px;
            }
        </style>


            var dataSource = new kendo.data.DataSource({
              data: viewModel.itemsArray,
              pageSize: 6
            });
                          
                          
            //gridview div for the main grid
            $("#gridViewDiv").kendoGrid({
                        dataSource: dataSource,
                        mobile: "tablet",
                        //height: kendo.support.mobileOS.wp ? "24em" : 430,
                        resizable: false,
                        //toolbar: ["create"],
                        columns: [
                            { field:"ItemDesc", title: "Item" },
                            { field: "QtyOrdered", title:"Qty",  width: "35px" },
                            { field: "ItemPrice", title:"Price", format: "{0:c}", width: "60px" },
                            { field: "PriceUOM", title:"Per", width: "35px" },
                            { field: "OrderAmount", title:"Order Amt", format: "{0:c}", width: "60px" },
                            { command: [{text: "qty", click: editRow}, {text: "remove", click: deleteRow}], title: "&nbsp;", width: "165px" }
                        ],
                        editable: "inline",
                        filterable: true,
                        sortable: true,
                        height: 320,
                        pageable: true,
                        scrollable: false,
                        columnMenu: true,
                        dataBound: function () {
                           $('td').each(function(){if($(this).text()=='0' || $(this).text()=='$0.00'){$(this).addClass('gridCellClass')}})
                        }
            });

Hi,

We are using Kendo Grid in angularJS application. When we navigate to other page, we get this error message: "Cannot call method 'destroy' of kendoDropTarget before it is initialized".

We have groupable property set to true in kendoGrid. If we remove that, the error doesn't come. Seen a below forum posts, but not sure if you guys have actually fixed the issue or if there's a workaround for this which I'm not aware of?

Can you please let us know on this on priority. This is blocking us.

Post:
https://github.com/kendo-labs/angular-kendo/issues/66

Thanks!

hi all.
i created an app with latest kendo mobile version. i use kendo mobile listview in the login view.
after submit my app version to apple they rejected it because they cannot enter text in login input field.
in previous ios version it works well.
any solutions?
regards,
maor

Hi,

Implementing Kendo grid  using jquery  with MVC4  .First I am binding data with html table then put kendo jquery for paging and sorting. but sorting is not working correct .  html and jquery are below:-



 <table id="grid" class="table table_hover">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Order ID </th>
                            <th>Source</th>
                            <th>Destination</th>
                            <th>Items</th>
                            <th>Schedule Date</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var i in Model)
                        {
                            DMETrackContext objDMETrackContext = new DMETrackContext();
                            var OrderItems = (from p in objDMETrackContext.InventoryOrderItems where p.OrderId == i.InventoryOrderId select p).ToList();
                            <tr>
                                <td>
                                    @i.Created                                                                    
                                </td>
                                <td>
                                    @i.OrderIdExternal                                  
                                </td>
                                <td>
                                    @if (i.SourceInvLocationId != null)
                                    {
                                        var LocationDetail = (from p in objDMETrackContext.InventoryLocations where p.InventoryLocationId == i.SourceInvLocationId select p).FirstOrDefault();
                                        if (LocationDetail != null)
                                        {
                                       // @Html.ActionLink(LocationDetail.Name, "LocationDetail", new { controller = "Location", Id = LocationDetail.InventoryLocationId }, htmlAttributes: new { style = "color: rgb(58, 115, 206);" });
                                         <a title="@LocationDetail.Name" href="@Url.Action( "LocationDetail", "Location", new {Id = LocationDetail.InventoryLocationId  })"  style = "color: rgb(58, 115, 206);">@LocationDetail.Name</a>

                                        }
                                        else
                                        {
                                        @: N/A
                                         }
                                    }
                                    else
                                    {
                                        @: N/A
                                    }

                                </td>
                                <td>
                                    @if (i.DestinationInvLocationId != null)
                                    {
                                        var LocationDetail = (from p in objDMETrackContext.InventoryLocations where p.InventoryLocationId == i.DestinationInvLocationId select p).FirstOrDefault();
                                        if (LocationDetail != null)
                                        {
                                      //  @Html.ActionLink(LocationDetail.Name, "LocationDetail", new { controller = "Location", Id = LocationDetail.InventoryLocationId }, htmlAttributes: new { style = "color: rgb(58, 115, 206);" });
                                         <a title="@LocationDetail.Name" href="@Url.Action( "LocationDetail", "Location", new {Id = LocationDetail.InventoryLocationId  })"  style = "color: rgb(58, 115, 206);">@LocationDetail.Name</a>
                                        }
                                        else
                                        {
                                        @: N/A
                                         }
                                    }
                                    else
                                    {
                                        @: N/A
                                    }


                                </td>
                                <td>
                                    @OrderItems.Count
                                </td>
                                <td>
                                    @i.ScheduleDate
                                  
                                </td>
                                <td>

                                    @if (i.Type == 1)
                                    {
                                        @: Customer Order
                    }
                                    else if (i.Type == 2)
                                    {
                                        @: Customer Pickup
                    }
                                    else if (i.Type == 3)
                                    {
                                        @:Transfer
                    }

                                </td>
                                <td>

                                    @if (i.Status == 1)
                                    {
                                        @: Pending
                    }
                                    else if (i.Status == 2)
                                    {
                                        @: Picked
                    }
                                    else if (i.Status == 3)
                                    {
                                        @:Complete
                    }
                                    else if (i.Status == 4)
                                    {
                                        @:Canceled
                    }

                                </td>
                                <td>
                                    @*@Html.ActionLink("Edit", "EditLocation", new { controller = "Location", Id = @i.InventoryLocationId })*@
                                    @Html.ActionLink("Details", "InventoryOrderDetail", new { controller = "InventoryOrder", Id = @i.InventoryOrderId }, htmlAttributes: new { style = "color: rgb(58, 115, 206);" })
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
<script>
$("#grid").kendoGrid({
                sortable: true,
                scrollable: false,
                pageable: {
                    pageSize: 15, pageSizes: [15, 50, 100], messages: {
                        display: "Showing {0}-{1} from {2} data items"
                    }
                }
            });

</script>

I also modify the Jquery code to add schema but it not working for the date filed and anchor tag data file

$("#grid").kendoGrid({
                dataBound: addRowClickFeature,
                dataSource: {                   
                    schema: {
                        model: {
                            fields: {
                                Created: { type: "date", format: "{0:dd/MM/yyyy}" },
                                OrderID: { type: "number" },
                                Source: { type: "string" },
                                Destination: { type: "string" },
                                Items: { type: "number" },
                                Date1: { type: "date", format: "{0:dd/MM/yyyy}" },
                                Type: { type: "string" },
                                Status: { type: "string" }
                            }
                        }
                    }
                },
                sortable: true,
                scrollable: false,
                pageable: {
                    pageSize: 15, pageSizes: [15, 50, 100], messages: {
                        display: "Showing {0}-{1} from {2} data items"
                    }
                }
            });


Please suggest  how to apply sorting by using jquery 

Thanks
Alok

I've attached event listeners to every data source and grid event but none seem to allow me to refresh the grid without harming the newly added data or next-added data. DataSource's change event when only e.actions == "itemchange" seemed the closest but I'd have to add a setTimeout. I had problems with the grid's edit and save events (both called too soon). I was using grid.refresh(). Another approach is appreciated

Hi,

I have two drop downs on a row in the Kendo UI grid, the user is only allowed to have one selected at a time. Therefore I need to handle a change event on either of the drop downs to - 

1) Identify which drop down the event is coming from
2) Alter the data/dom of the other drop down to be empty. 

I've had a few attempts and can't come up with anything clean. I think my ideal solution would be to update the grid datamodel on the client side and get it to rebind. I've trying altering it on the ajax update call but that means reading the entire contents again (or does it?)

Anyway I hope you get the drift, here is how my grid looks at the moment - 

@(Html.Kendo().Grid<Forth.AE.Web.ModelViews.Step6MV>()
                            .Name("Grid")
                //.ClientEvents(events => events.OnEdit("Grid_onEdit"))
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.MyID).Title("MyID").Visible(false);
                                columns.Bound(p => p.DropDown1).ClientTemplate("#=ModelItem1.DropDown#").Width(250);
                                columns.Bound(p => p.DropDown2).ClientTemplate("#=ModelItem2.DropDown#").Width(250);
                            })
                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                            .Sortable()
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .AutoSync(true)
                                .Batch(true)
                                .PageSize(200)
                                .ServerOperation(false)
                                .Events(events => { events.Change("onChange"); })
                                .Events(events => events.Error("error_handler"))
                                .Model(model =>
                                {
                                    model.Id(p => p.MyID);
                                    model.Field(p => p.DropDown1).DefaultValue(
                                        ViewData["defaultDD"] as Forth.AE.Web.ModelViews.DDModel);
                                    model.Field(p => p.DropDown2).DefaultValue(
                                        ViewData["defaultDD"] as Forth.AE.Web.ModelViews.DDModel);
                                })
                                .Read(read => read.Action("Grid_Read", "Grid"))
                                .Update(update => update.Action("Grid_Update", "Grid"))
                             )
        )

and I'm using this EditorTemplate - 

@model Forth.AE.Web.ModelViews.DDModel

@(Html.Kendo().DropDownListFor(m => m)
            .DataValueField("ID")
            .DataTextField("DropDown")
            .BindTo((System.Collections.IEnumerable)ViewData["myValues"])
            .Events(e =>
            {
                e.Change("Change");
            })
            .Events(e =>
            {
                e.Select("Select");
            })
)

As you can see I'm trying to hook up to the Change or Select events but the information that is passed through to the javascript function looks like I need to traverse the DOM and start hacking at it. 

Is there a cleaner way I can do what is needed? Any suggestions mooooore than welcome!

Hello,

I am using JavaScript implementation of AutoComplete that is wired directly onto Web API. I need to get the typed content of the textbox in the Web API. Is that any easy way how to serialize the object that is being passed from the JavaScript (probably OData object) to some class in C# in Web API? The object seems to contain filtering, paging etc.

I know that this is designed to be used with MVC but I need to make it work somehow with Web API.

Thank you,

Jakub