Telerik Forums
Kendo UI for jQuery Forum
3 answers
874 views

Hi,

I have a Grid that is generated dynamically in javascript.

The columns are parametered on the server and I received the configuration in Json. Then I build the Grid as scrollable by default because I can't determine it.

On "databound", I used the "autofit" function to resize each columns. But sometimes, the table width is bigger than the sum of the columns'width and I would like to dispatch the empty width on each columns.

 So, is it possible to resize a column dynamically by setting its width such like that ?

myGrid.columns[0].setWidth("500px");

 

Is it possible to dynamically change the behaviour of a scrollable Grid to a non scrollable Grid ( so that column resizing behaves like if it was initially configured as non scrollable ) ?

 

Thanks for your help,

Regards

Jammer
Top achievements
Rank 1
 answered on 02 Sep 2020
1 answer
146 views

Hi,

I have a problem related to pdf export. If exported view is too long, it's not visible in pdf, and I must zoom it for looking smth (see pdf-export.png). Can I do smth, for example export pdf already zoomed in, and zoom it out if needed? 

Martin
Telerik team
 answered on 02 Sep 2020
1 answer
291 views

Hi, I set the pageSize option on the grid, but I'm having a hard time because it's not shown on the screen.

So I can't see the page selection drop-down even though I deactivated all my csss and enabled only the css and js related to kendo.

What should I check to solve this problem?

I will attach my current screen and my grid creation code.

Help me...

 

$("#dataTable").kendoGrid({
        sortable: true,  
        selectable: true,
        groupable: false,
        scrollable: true,
        dataSource: {
            data: [],
            pageSize : 10
        },
        pageable: {
              pageSizes: [10,50,100]
        },
        columns: [
           { title: "No",  attributes:{style: "text-align: center"}, template: "#= renderNumber(data) #",  width: "50px"},
        { field: "id", title: "SEQ", width: "130px", hidden:true},
        { field: "registDt", title: "일시", width: "160px", attributes:{style: "text-align: center"}, template: '#=registDt==null?" ":new Date(registDt).getDateTime()#' },
        ], 
        //dataBound: resetRowNumber,
    }); 





"registDt
 
 
 
Ivan Danchev
Telerik team
 answered on 01 Sep 2020
5 answers
833 views
I am using Upload MVC in our application and file list is hidden by default in our app.  But Upload still show upload status below the upload button. How to hide the status data?

<strong class="k-upload-status k-upload-status-total">Done<span class="k-icon k-warning">uploaded</span></strong>
Ivan Danchev
Telerik team
 answered on 01 Sep 2020
1 answer
776 views

I am updating an older site running AngularJS and Kendo in Asp.Net MVC

My html Form has this control that is posted to the back end:

 

@using (Html.BeginForm( new { name = "frmMain", novalidate = "", id = "frmMain"  }))
      <input kendo-date-picker
      ng-model=".BiWeeklyStartDate"
           k-parse-formats="['yyyy-MM-dd']"
           k-format="'yyyy-MM-dd'"/></p>

The date that is posted to the backend is a full date. How can I change that so that the Kendo Control sends "yyyy-MM-dd" to the backend only?

Nikolay
Telerik team
 answered on 01 Sep 2020
7 answers
2.4K+ views

Hi,

 

Is there any way to control the delete button which is displayed by using the {command: 'destroy',title:"Action", width:"20px",attributes: {"class": "delete-row"}

It is doing the necessary thing right, that is deleting a row, but i would like to control it such a way that if there's only one row remaining in that particular grid, it should alert or display a message saying that you will not be able to delete it.

If there are more than one rows then, its ok. But if there is only 1 row remaining, I wanted to handle this.

 

Can you please tell me a method for doing so?

Thank you.

Viktor Tachev
Telerik team
 answered on 01 Sep 2020
9 answers
165 views

This is my func userNameAutoCompleteEditor

function userNameAutoCompleteEditor(container, options) {
    $('<input required data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({        
            dataTextField: "UserName",
            dataValueField: "UserId",
            filter: "contains",
            minLength: 3,
            //_readMethod: '../Warehouse/SearchUser',
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '../Warehouse/SearchUser',
                        //data: {
                        //    q: function () {
                        //        return $("#autoComplete").data("kendoAutoComplete").value();
                        //    },
                        //    maxRows: 10,
                        //    username: "demo"
                        //}
                    }
                },
            }),
        });
}

 

    "" " I want to Catch autosearc value go connroller and come back with user name contains value just give me way to take value PLEASE!!!!""

This is my grid column area

grid._columns.push(grid.GridColumn('Id', null, '200px', null, null, null, null, null, null, null, true));
grid._columns.push(grid.GridColumn('User', 'User', '200px', null, "#=User.UserName#", null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
grid._columns.push(grid.GridColumn(null, ' ', '200px', { style: 'text-align:right' }, null, null, null, null, null, null, null, null, null, ['edit', 'destroy']));
Aleksandar
Telerik team
 answered on 01 Sep 2020
5 answers
174 views
hello everybody.
i have a problem in my grid which was created from a table.
in my table i have a row which contains a cell with textBox . i attached an event listener to this textBox in my script tag.
my problem is that this event listener does not fire when it should but if i put this input out of the table , the event listener fires properly.
what is the problem with that? does grid removes event listeners ?
please help me. how can i fix this?
 
 
 
Petar
Telerik team
 answered on 31 Aug 2020
1 answer
770 views

Hello.

I have a grid that contains user information and a few checkbox templates. Whenever I edit set the checkbox to true or vice versa and click save changes the checkbox reverts to its original value.

 

Here are the main snippets that handle this event: 

$("#btnSaveChanges").click(function () {
           grid = $("#grid").data("kendoGrid");
           grid.saveChanges();
       });
function SetActive(e) {
    grid = $("#grid").data("kendoGrid");
    dataItem = grid.dataItem($(e).closest("tr"));
    dataItem.set("IsAssigned", e.checked);
    grid.refresh();
}
function renderGrid(value) {
    grid = $("#grid").kendoGrid({
        dataSource: {
            sort: { field: "NameFirst", dir: "asc" },
            batch: true,
            pageSize: 100,
            error: function (e) {
                if (typeof e.errors !== 'undefined') {
                    alert(e.errors);
                }
            },
            requestEnd: function (e) {
                if (e.type === "update") {
                    $('#grid').data('kendoGrid').dataSource.read();
                }
            },
            transport: {
                read: {
                    url: "GetContacts",
                    dataType: "json",
                    cache: false,
                    data: function () {
                        return {
                            ID: $("#DDLConceptID").val(),
                            isNational: $("#DDLConceptID").find('option:selected').attr("data-isNational")
                        };
                    }
                },
                update: {
                    url: "UpdateContacts",
                    dataType: "json",
                    type: "POST"
                },
                parameterMap: function (data, type) {
                    if (type === "update") {
                        return { entities: kendo.stringify(data.models) };
                    }
                    else {
                        return data;
                    }
                }
            },
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "ContactID",
                    fields: {
                        Email: { type: "string" },
                        IsAssigned: { type: "boolean" },
                        RoleID: { type: "string" },
                        ConceptID: { editable: false },
                        ContactID: { editable: false },
                        RcvEmail: { type: "boolean" },
                        RcvQAEmail: { type: "boolean" },
                        RcvOrderEmail: { type: "boolean" },
                        Seq: { editable: true },
                        DistName: { editable: false },
                        RoleDescription: { type: "string" },
                        NameFirst: { type: "string" },
                        NameLast: { type: "string" },
                        Phone: { type: "string" }
                    }
                }
            }
        },
        sortable: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    contains: "Contains"
                }
            }
        },
        height: 600,
        pageable: true,
        scrollable: true,
        editable: true,
        autoBind: value,
        columns: [
            { field: "ContactConceptID", title: "Contact ID", hidden: true },
            { field: "ConceptID", title: "Concept ID", hidden: true },
            { field: "ContactID", title: "Contact ID", hidden: true },
            { field: "IsNational", title: "Is National", hidden: true },
            { field: "Seq", title: "Seq", width: 100 },
            { field: "NameFirst", title: "First Name", width: 150 },
            { field: "NameLast", title: "Last Name", width: 150 },
            { field: "Phone", title: "Phone", width: 250 },
            { field: "RoleDescription", title: "Role", width: 140 },
            { field: "RoleID", title: "Type", width: 100, editor: roleIDEditor },
            { field: "Email", title: "E-mail", width: 250 },
            { title: "Assigned", template: '<input class="btnActive" onchange=\'SetActive(this);\' type="checkbox" #= IsAssigned ? checked="checked" : "" # class="assignChkbx" />', width: 125 },
            { title: "Notes E-mail", template: '<input type="checkbox" #= RcvEmail ? checked="checked" : "" # class="rcvEmailChkbx" />', width: 125 },
            { title: "QA E-mail", template: '<input type="checkbox" #= RcvQAEmail ? checked="checked" : "" # class="rcvQAEmailChkbx" />', width: 125 },
            { title: "Order E-mail", template: '<input type="checkbox" #= RcvOrderEmail ? checked="checked" : "" # class="rcvOrderEmailChkbx" />', width: 125 },
            { field: "DistName", title: "Distributor", width: 200 },
            { command: { name: "Remove", text: "Remove", click: removeBDCAM }, width: 85 }
        ],//end of columns
 
 
    }).data('kendoGrid')
 
 
}

 

Martin
Telerik team
 answered on 31 Aug 2020
5 answers
1.2K+ views

I am trying to define an initial sort.

as far as the request, the sort is working and the data comes sorted.

the problem is that in the header, the visual arrow of sort column and direction is not shown.

only after physical click on the column it shows.
please help, this is the used code:

$scope.mainGridOptions = {
            dataSource: {
                sort: { field: "email", dir: "desc"},
                serverPaging: true,
                serverSorting: true,
 
                pageSize: 50,
                transport: {
                    read: {
                        type: "GET",
                        dataType: "json",
                        url: "/p/enduser/licenses/allocation/listWithDevices",
                        headers: {
                            "X-AUTH-TOKEN": authService.getToken()
                        }
                    },
                    parameterMap: function(data, type) {
                        if (type == "read") {
                            console.log(data);
                            return {
                                pageSize: data.take,
                                page: (data.skip/data.take),
                                sortBy: data.sort?data.sort[0].field:null,
                                sortDir: data.sort?data.sort[0].dir:null
                            }
                        }
                    }
                },
 
                schema: { data: "items", total: "itemsCount" }
            },
            height: $scope.resize(),
            scrollable: {
                virtual: true
            },
            sortable: {
                allowUnsort: false,
                mode:'single'
            }
        };

Alex Hajigeorgieva
Telerik team
 answered on 31 Aug 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
Gauges
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
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
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?