Telerik Forums
Kendo UI for jQuery Forum
7 answers
154 views
Recently we are trying to use Kendo Grid for our new project, but the problem is the entitlement is very complicated. Not sure if Kendo Grid can support that complex requirement. The requirements is like we need check some filed in row. For example we have a client table in database. In Front End we have a editable Grid to display those information, but we need disabled the some row conditionally. Is it possible to do that?  If we can how to customize it, if there are any demo code will be great.

Thank you.
Congyuan
Top achievements
Rank 1
 answered on 28 Jan 2013
2 answers
230 views
Hi,
need some help, this code works fine* with Chrome and Firefox, but i doesn't work with ie9.

e.errorThrown = No Transport
e.xhr.responseText = undefined.

* I can add and update items but i can't remove them.

Here is the code.

<div id="grid"></div>
$(document).ready(function () {
                var crudServiceBaseUrl = "http://localhost:11028/IntexService.svc/Zonas",
                 crudServiceOptions = "",
                    dataSource = new kendo.data.DataSource({
                        type: "odata",
                        transport: {
                            read: {
                                url: crudServiceBaseUrl + crudServiceOptions,
                                dataType: "json"
                            },
                            update: {
                                url: function (data) {
                                    return crudServiceBaseUrl + "(" + data.ZonaId + "L)";
                                }
                            },
                            create: {
                                url: crudServiceBaseUrl
                            },
                            destroy: {
                                url: function (data) {
                                    return crudServiceBaseUrl + "(" + data.ZonaId + "L)";
                                }
                            }
                        },
                        batch: false,
                        pageSize: 10,
                        serverPaging: true,
                        serverFiltering: true,
                        schema: {
                            model: {
                                id: "ZonaId",
                                fields: {
                                    ZonaId: { editable: false, nullable: true },
                                    Nombre: { validation: { required: true} }
                                }
                            },
                            errors: "Errors"
                        },
                        error: function (e) {
                            alert("La operación ha fallado: \n" + e.errorThrown + ": " + e.xhr.responseText);
                            this.cancelChanges();
                        }
                    });
 
                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    filterable: true,
                    pageable: true,
                    height: 410,
                    toolbar: ["create"],
                    columns: [
                            { field: "Nombre", width: "150px" },
                            { command: ["edit", "destroy"], title: " ", width: "110px"}],
                    editable: "popup"
                });
            });
Any idea?
Thanks.
Christian
Top achievements
Rank 1
 answered on 28 Jan 2013
2 answers
406 views
I have noticed an error with the rendering of the Kendo grid in WPF web browser controls if remote virtualization is enabled.
The issue is that the columns are not rendered with the same width as the column headers (see screenshot).
This behavior is not observed in normal web browsers (IE 8/9, Chrome, Firefox), just when the web browser control is hosted in a WPF application. It seems to be tied to grids with remote virtualization enabled. 

I am seeing this in my own application, but for demonstration purposes I've created a simple WPF example app.

I have attached the sample wpf application (pointed the browser to your remote virtualization online demo), as well as a screenshot of your demo page when hosted inside the sample application.

It appears to have something to do with the presence of the IE specific meta tags inside the page head element:
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Tor
Tor
Top achievements
Rank 1
 answered on 28 Jan 2013
10 answers
680 views
I have my grid working well, including popup editing.  When I make an update from the grid, the update url fires.   What I need to know is how to parse the data sent by the Kendo grid to "donorUpdateJson.cshmtl".  I am using Microsoft Web 2.0 Razor as the platform.  I would like the data to arrive at the server and parse it with QueryString (or some other method) but I don't know what the data looks like and could not find any examples.  Thank you

Here is my datasource:
        var ds = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "donorReadJson.cshtml",
                    dataType: "json",
                    type: "POST"
                },
                update: {
                    url: "donorUpdateJson.cshtml?" ,
                    dataType: "json",
                    contentType: "application/json",
                    type: "POST",
                    data: {
                        donorId: $("#input").val(), 
                        firstname: $("#input").val(),
                        lastname: $("#input").val(),
                        homephone: $("#input").val(),
                        workphone: $("#input").val(),
                        cellphone: $("#input").val(),
                        email: $("#input").val()
                    }
                },
                destroy: {
                    url: "/orders/destroy",
                    data: {
                        donorId: $("#input").val() 
                    },
                },
                parameterMap: function (options, operation) {
                    if (operation != "read") {
                       return { models: JSON.stringify(options.models) };
                    }
                }
 
            },
            schema: {
                model: {
                    id: "donorID",
                    fields: {
                        donorID: { type: "number", editable: false, },
                        title: { type: "string" },
                        firstname: { type: "string", validation: { required: true } },
                        middlename: { type: "string" },
                        lastname: { type: "string", validation: { required: true } },
                        address: { type: "string" },
                        city: { type: "string" },
                        state: { type: "string" },
                        zipcode: { type: "string" },
                        homephone: { type: "string" },
                        workphone: { type: "string" },
                        cellphone: { type: "string" },
                        email: { type: "string" }
                    },
                },
            },
            pageSize: 10,
 
        });
 
 
        $("#grid").kendoGrid({
            dataSource: ds,
            autoBind: true,
            filterable: false,
            resizable: true,
            sortable: true,
            scrollable: false,
            pageable: {input: true, numeric: false },
            columns: [
                { field: "firstname", title: "First Name" },
                { field: "lastname", title: "Last Name" },
                { field: "address", title: "Address", hidden: true },
                { field: "city", title: "City", hidden: true },
                { field: "state", title: "State", hidden: true },
                { field: "zipcode", title: "Zip", hidden: true },
                { field: "homephone", title: "Home" },
                { field: "workphone", title: "Work" },
                { field: "cellphone", title: "Cell" },
                { field: "email", title: "Email" },
               { command: ["edit", "destroy"], title: " ", width: "200px" }],
            editable: "popup"
        });
    });
 
 
</script>
Aron
Top achievements
Rank 1
 answered on 28 Jan 2013
1 answer
359 views
Hi is the HierarchicalDataSource suppose to work with a Grid?
On the Kendo UI docs http://docs.kendoui.com/getting-started/framework/hierarchicaldatasource/overview looks like it is suppose to work but, when I tried only the 1st level show on the grid, all the details doesn't appear.
var gridDataSource = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: "/services/BookingTotals.ashx",
            dataType: "json"
        }
    },
    schema: {
        model: {
            id: "Id",
            hasChildren: true,
            children: {
                transport: {
                    read: {
                        url: "/services/LocationBookingTotals.ashx",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        hasChildren: true,
                        id: "LocationId",
                        children: {
                            transport: {
                                read: {
                                    url: "/services/ServClassBookingTotals.ashx",
                                    dataType: "json"
                                }
                            },
                            schema: {
                                model: {
                                    hasChildren: false,
                                    id: "ServiceClassGlobalId",
                                }
                            }
                        }
                    }
                }
            }
        }
    }
});
$("#grid").kendoGrid({
    groupable: false,
    scrollable: true,
    sortable: true,
    pageable: true,
    dataSource: gridDataSource
});
Am I doing something wrong or the kendo ui grid isn't suppose to work this way?
Petur Subev
Telerik team
 answered on 28 Jan 2013
1 answer
55 views
Hi all,
I have a very strange case only on IE (IE9).
I have a normal Kendo grid (in javascript, i DO NOT use Kendo MVC helpers!)
my grid parameter serverPaging is set to true. After I fetch data into the grid my IE hangs. It only happens when the totalCount is greater than the pageSize. On other browsers the paging is working fine.

I am totaly weird with this since i am stuck with this bug for more than a couple of days.
Do you know any reason concerning this strange behavious?
It only appears on IE.

Would You please send me a sample javascript code for creating the Grid inclugin styles ???
I would be very appreciated for any Help and advices.

Marcin
Alexander Valchev
Telerik team
 answered on 28 Jan 2013
1 answer
133 views
Hi all,

Below is a cut of from my JS, CS, etc of how I create the kendo GRID. For IE9 after the read() the ajax call hangs and nothing is populated. On FF, Chrome it works fine. What do I do wrong. Please help.

// templates
<script id="rowTemplate" type="text/x-kendo-template">
    <tr style="height: 24px;">
        <td colspan="1">
           #= Id #
        </td>
    </tr>
</script>
<script id="altRowTemplate" type="text/x-kendo-template">
    <tr class="k-alt" style="height: 24px;">
        <td colspan="1">
           #= Id #
        </td>
    </tr>
</script>

// createGrid
function createGrid(gridId, locale, controller, action) {
    $(document).ready(function () {
        grid = $(gridId).kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "/" + locale + "/" + controller + "/" + action,
                        type: "POST",
                    },
                    parameterMap: function (options) {
                        return JSON.stringify(options);
                    },
                    pageSize: 10
                },
                schema: {
                    data: function (response) {
                        var d = JSON.parse(response);
                        return d.Data;
                    },
                    total: function (response) {
                        var d = JSON.parse(response);
                        return d.Count;
                    },
                    errors: function (response) {
                        if (response.Errors !== undefined) {
                            alert(response.Errors.e.errorThrown);
                        }
                    }
                },
                error: function (e) {
                    alert("Received error: " + e.errorThrown);
                },

                total: 0,
                page: 1,
                pageSize: 10,
                filter: [],

                serverPaging: true,
                serverFiltering: true,
                serverSorting: true,
                serverGrouping: true,
                serverAggregates: true
            },

            autoBind: false,
            groupable: false,
            selectable: true,
            scrollable: false,

            rowTemplate: kendo.template($("#rowTemplate").html()),
            altRowTemplate: kendo.template($("#altRowTemplate").html()),

            pageable: true,
            columns: [{ field: "Id", width: 40, groupable: false, encoded: true }],
        });
    });

    $(gridId).data("kendoGrid").dataSource.read();
}

// controller
[HttpPost]
public string GetEmployees(KendoGridDataSourceRequest request)
{
    if (_usersLoaded == null)
    {
        var users = _userService.FindUsersByName("a%", null, 12);
        _usersLoaded = ViewModelBuilder.CreateEmployeeItemVMList(users).ToList();
    }

    var items = _usersLoaded.Skip(request.Skip).Take(request.Take).ToList();
    var jsonString = JsonConvert.SerializeObject(new
        {
            Data = items,
            Count = _usersLoaded.Count()
        });
    return jsonString;
}
Alexander Valchev
Telerik team
 answered on 28 Jan 2013
3 answers
286 views
When I access a site using the Kendo grid on a touch enabled device like the iphone or ipad, the row selection isn't ideal.  As you try to drag to scroll the page the grid selects all rows along the scroll (actually it seems to be a bit weirder than this as to what rows are selected).

Is there a preferred method for selecting rows when being used on a touch device?
Nikolay Rusev
Telerik team
 answered on 28 Jan 2013
1 answer
328 views
Hi,  i'm currently using a ajax call to append the TH and TD rows on a table template and then using the table ID i use the kendo grid to stylize it. 

my template is the following :
<table cellpadding="0" cellspacing="0" border="0" class="display" id="data-table{id}" width="100%" role="grid" data-role="grid">
<thead>
<tr id="append_head{id2}">

</tr>
</thead>
<tbody id="append_data{id3}">

</tbody>
</table>

if i hard code data into the head TR and in the tbody and then append the table on the HTML  and then use the :
$("# data-table" + id).kendoGrid({
   });
it works flawlessly .

But if i attach the TH and the TD rows using ajax and then  then append the table on the HTML  and then use the :
$("# data-table" + id).kendoGrid({
   });

then the fuctionally of the table is broken and also is not displaying correctly.

Can you please tell me if im doing something wrong? or missing something?

thanks
Alexander Valchev
Telerik team
 answered on 28 Jan 2013
1 answer
328 views
Hi All,

How to get current page index when I click on kendo pager button?
I have tried in following way to get page index. But it is not working.
$('.k-link').live('click', function (e) {
    alert($(this).text()); 
});

How we can get page index? Immediate help would be appreciated.

Regards,
Partha.

Iliana Dyankova
Telerik team
 answered on 28 Jan 2013
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
Drag and Drop
Application
Map
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
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
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?