Telerik Forums
Kendo UI for jQuery Forum
3 answers
583 views
Hello, I have a grid that contains the results of an ad hoc query search.  My requirements are for this sortable table to be displayed empty on the form when the user first enters the page, then populate it after they fill out the search criteria and submit, hence the autoBind:false.

            $("#userGrid").kendoGrid(
            {
                dataSource: userSearchDS,
                sortable: true,
                autoBind: false,
                height: 200,
                scrollable: true,
                columns:
                [
                    { field: "penName", title: "Pen Name" },
                    { field: "userNumber", title: "User ID", width: 150 }
                ]
            });

The problem is that if you click on one of the columns while the table is empty, it calls read on your datasource, thus populating itself.  I believe this to be a bug, but assuming it wasn't, I went about trying to create the table with sortability turned off, then turning it back on when the search is performed.  This is proving to be difficult and I'm finding myself down a rathole of javascript surgery, so a patch or an alternative solution would be appreciated.

Additionally, I have a reset button that will clear out the contents of table using this JQuery function:

$.fn.clearKendoGrid = function()
{
    var data = $(this).data("kendoGrid").dataSource._data;
    data.splice(0, data.length);
    $(this).data("kendoGrid").refresh();
}

If I click the sortable column on the empty grid, I am no longer able to clear the contents out with this function, which is weird.  I haven't had the time to investigate further, though.
Atanas Korchev
Telerik team
 answered on 25 Feb 2012
1 answer
172 views
Hi
Greeting!!!

Please help with as i am facing some issues while using KendoUI for iPad, problems defined below:

  1. When splitter used in iPad then it’s not working properly because of the width of the horizontal or vertical splitter. For Example when we want to minimize the splitter by touch then instead of any effect it increases the size of other pane.
  2. We tried your solution provided in the forum but it has a problem that when we increase the width then entire look and feel of my application changes.
  3. We have tried to increase the size of k-icon but it is showing some unwanted images. Following is the code given below with the changes;

.k-splitbar-horizontal .k-icon {

 MARGIN-TOP: -10px; WIDTH: 10px; POSITION: absolute; TOP: 50%; HEIGHT: 50px ;background-color: red

 }

Could you please help us to remove the images displaying the splitter.

Thanking in advance;

Regards

Manash Dutta

manash
Top achievements
Rank 1
 answered on 25 Feb 2012
1 answer
358 views
Hello everyone. 

I'm having an issue with using the window. The window loads fine on the first try, but then when I go to click the window again, I have to click twice on the button to have the window open. It's very strange indeed.

I am loading the call to the button calling the window function via the kendo grid. below is my code: 

var users = [
        {   userName : "Jeremy.Miller@radolo.com",
            firstName: "Jeremy",
            lastName: "Miller",
            userRole: "Administrator" ,
            userID:"1" },
        {   userName : "Josh.Grippo@radolo.com",
            firstName: "Josh",
            lastName: "Grippo",
            userRole: "Administrator",
            userID:"2"  },
        {   userName : "John.Huisman@radolo.com",
            firstName: "John",
            lastName: "Huisman",
            userRole: "Administrator",
            userID:"3"  }
    ];
 
$("#editUsers").kendoGrid({
     
    dataSource: {
        data: users,
        schema: {
            model: {
                fields: {
                    username: { type: "string" },
                    firstName: { type: "string" },
                    lastName: { type: "string" },
                    userRole: { type: "string" },
                    userID: { type: "number" },
                    resetPassword: { type: "string" },
                    editUser: { type: "string" },
                }
            }
        },
        pageSize: 10
    },
    height: 280,
    scrollable: {
        virtual: true
    },
    columns: [
        { title: "Username", field:"userName"},
        { title: "First Name", field:"firstName"},
        { title: "Last Name", field:"lastName"}, 
        { title: "User Role", field:"userRole"},
        { title: "Reset Password",
        template: "<a href='reset-password.aspx?userID=#= userID #'>Reset Password</a>"},
        { title: "Edit User",
        template: "<button class='popup-window icon edit' title='edit this user'>Edit This User</button> " },
        { command: "destroy"  }
    ],
    editable: true
});
 
 
 
$(".popup-window").click(function () {
    var myWin = $(".modal-window");
    if (!myWin.data("kendoWindow")) {
        // window not yet initialized
        myWin.kendoWindow({
            draggable: true,
            modal: true,
            resizable: false,
            title: 'Edit User Information',
            content: 'edit-user.aspx',
        });
    } else {
        // reopening window
        myWin.data("kendoWindow")
            .content("Loading...") // add loading message
            .refresh(href) // request the URL via AJAX
            .open(); // open the window
    }
 
    return false;
});

You can view the issue here: http://10.50.3.30/rockhabitsdev/edit-users.aspx

So, basically what I would like to happen is you have a window that opens that allows you to edit the users info . You can close/cancel if you need to. But each "edit" button will allow you to edit that person's info. Additionally, the "X" will allow you to delete the table row.

Currently the first window opens fine. When I close the window, the next time I try to open a window the button disappears and I have to click again to have the window open again. If I click on the "X" to delete a row, the button functionality goes away and it refreshes the page on click, which does not seem right.

I grabbed the bit about opening a new window from another post I found on the help forum. It was from an admin, so I can only assume that part is correct.

I'm not getting any errors in firebug, so I don't know what's going on.

Any help would be appreciated. Thanks in advance!
Jeremy
Top achievements
Rank 1
 answered on 25 Feb 2012
2 answers
310 views
I found that if the splitter is initialized while it's not being rendered, it won't be rendered correctly.

 An easy way to reproduce this is to create tabstrip which contains 2 tabs. (Normal page and splitter)
<ul>
    <li class="k-state-active">Page Contains Splitter</li>
    <li>Normal</li>
</ul>
<div>
    <div class="hsplitter">
        <div>Content 1</div>
        <div>Content 2</div>
    </div>
</div>
<div>
    This is normal page
</div>

When the splitter is initialized when it's splitter page is shown, it's fine. But, not the other way around.

Is there any workaround this?
Ramon
Top achievements
Rank 1
 answered on 24 Feb 2012
4 answers
1.2K+ views
I have a grid that is metadata driven. When the data comes back from the data source (the data that comes back includes the metadata), I parse the data with the parse method. In that method, I flatten a data structure that I received to match a list of columns that we generated by the metadata.

I have set the dataSource property of the grid to the kendo datasource that I created.

I have some actions in the page that can force the datasource to fetch its data and metadata (through dataSource.fetch). The problem that I have is it seems that I can't force the grid to update its list of columns and its data at the same time unless I completely destroy the html containing the grid.

Furthermore, the grid will also trigger a fetch of the data when it is re-rendered, causing two calls to the server to do exactly the same thing.

Is there a way to force the grid to fully re-render itself while using the data that is already in the dataSource? I tried calling dataSource.data() but it returns an empty object, although there is actually some data in the dataSource (it may have to do with the cache=false in my settings)

Thanks
Jeremy
Top achievements
Rank 1
 answered on 24 Feb 2012
0 answers
158 views
I have some XML that I'd like to express to the user as a tree view.  Looks like I'll have to use XSLT or something to convert it to <ul><li> format for the tree view.

But what about getting the data back out? Specifically, as the user is dragging nodes around I need to keep the original XML data in step with that.    I can switch to JSON if needed. 

KnockoutJS handles updating data back to the server quite well, though I've never used it with this sort of operation (tree view).  

Does anyone have any suggestions or recommendations? How are other people handling this?

Chris
Top achievements
Rank 1
 asked on 24 Feb 2012
8 answers
1.2K+ views
Hello everyone, 

First of all ! let me tell you how much I LOVE this tool :) I just started playing around with the kendo and getting ready to integrate it into my projects.

However, I was following the tutorial "Get Rolling With Kendo UI And PHP – Part 1" by the brilliant Burke Holland. 

You can see the outcome here. The problem is, I assigned the pageSize to hold 3 records per page. However the pagination links don't appear unless you click on one of the column (sortable : true) then the paginations link appear for that session only (so if you refresh the pagination links will disappear and will show only the first 3 records) then you'll have to sort by clicking on  'name' or 'price columns to make them appear.

the Javascript is as the following:
<script>
        $(function() {
            $("#grid").kendoGrid({
                dataSource:
                {
                    transport:
                    {
                        read: "mod/basket_list.php"
                    },
                    schema:
                    {
                        data: "data"
                    },
                    pageSize: 8
                },
                columns: [
                    {
                        field : 'name',
                        title: 'NAME'
                    },
                    {
                        field : 'price',
                        title : 'THE PRICE'
                    }
                ],
                scrollable:false,
                sortable: true,
                pageable: true,
                navigatable: false,
                groupable: true
            });
        });
    </script>

can you guide me through fixing this :)

Thanks
Jason
Top achievements
Rank 1
 answered on 24 Feb 2012
1 answer
189 views
HI,
I am playing around with Kendo UI Widgets and am hoping to get them working with my API but cannot find any examples using XML, most use JSON OR ODATA and so I am therefore struggling to get the below working after trying many different variations. Am I missing something?  Can The datasource be XML?

 I hope when I get this working all other widgets etc will be easy for me to suss out.  Can anyone help get me started?

<div class="search">
        <input id="autoComplete" name="txtQuickSearch" type="text" value="product search" onclick="this.value='';" onblur="if(this.value=='')this.value='product search';" class="search_field" />
    </form>
</div>
<script>
$(document).ready(function() {
    $("#autoComplete").kendoAutoComplete({
         minLength: 3,
         dataTextField: "productName", // XML property name to use
         dataSource: new kendo.data.DataSource({
         type: "xml", // specifies data protocol
        pageSize: 10, // limits result set
       // data: "/products/product/productName",
 transport: {
 },
  schema: {
      type: "xml",
      data: "/products/product",
      model: {
          fields: {
              productName: "productName"
          }
      }
  }     
})
              //below doesnt work
            /*  minLength: 3,
              //dataTextField: "ProductName",
              separator: ", ",
              dataSource: {
                  type: "xml",
                  serverFiltering: true,
                  serverPaging: true,
                  pageSize: 20,
                  
                  transport: {
                      read: "products.xml"
                  }
              }*/
          });
      });
Lee
Top achievements
Rank 1
 answered on 24 Feb 2012
5 answers
214 views
Hi,

So I wanted to make a special view for tablets.  Where we have a large photo on one side and information on the other.  Well the photo would not need to scroll because it would fill the space.  But the information would need to scroll.  I like the ui's scrolling effects.  Is there a way to tell a DIV that it's scrollable.  I did set the div to a fixed height and overflow hidden or scroll.  Which works but does not have the ui's scroll bar or the smoothness that the ui has.  Plus I really don't know overflow hidden would even scroll on different devices, I know it does not work on desktops unless you can click and hold then move mouse down.

Please help.
Georgi Tunev
Telerik team
 answered on 24 Feb 2012
8 answers
459 views
Hi, I was wondering why you do not have destroy methods for the widgets.Controls like the grid do apply multiple extra divs to the body and it is a pain when developing a 'single page app' to try and keep the dom tidy when rendering different views.

Thanks
Redsquare
Top achievements
Rank 1
 answered on 24 Feb 2012
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
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
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
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?