Hi,

Am new to kendo UI, so am not sure how I can do this task.

Problem: I have two data sources(Vtest.json file and Vdata.json file) that I want to populate in a single kendo grid. The grid is populated in such a way that the first three columns are populated from data.json file and the last column should be populated from Vtest.json file based on the first column in the grid. So I am trying to call a javascript function in the last column template in kendo grid. But am unable to filter the data and return the result to third column.

Here is the sample code:

 var vDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/views/VTest.json",
                dataType: "json"
            }
        }
    });
    
    //alert(JSON.stringify(vendorDS));

 
    var nodeDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/views/Vdata.json",
                dataType: "json"
            }
        },
        pageSize: 1000
    });

  $("#gridAllRuns").kendoGrid({
                    
                    dataSource: nodeDS,                    
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 10
                    },
                    filterable: {
                        extra: false,
                        operators: {
                            string: {
                                startswith: "Starts with",
                                eq: "Is equal to",
                                neq: "Is not equal to"
                            }
                        }
                    },
                  
                    columns: [
                        {
                            title: "Node name",
                            field: "location",
                            template: "<a href=\"\">#= location.substr(7, location.length)#</a> ",
                            filterable: true
                            },
                              {
                                  title: "UTC Date",
                                  field: "date_UTC",
                                  filterable: false
                              },
                              {
                                  title: "Actual Value",
                                  field: "wavg_bin_value1",
                                  filterable: false
                              },
                          
                              {
                                  title: "Vendor",
                                  field: "",
                                  template: "#= getVendor(location) #",
                                  filterable: true
                              }
                            
                    ]
                })
//my javascript function....
  function getVendor(location) {
        var node = location.substr(7, location.length);
       vDS.filter({ field: "node", operator: "eq", value: node });
       return vDS.view()[0].Vndr;
}

Hello Kendo team:
If you change the value of a cell in a locked column, its k-dirty span is not shown.
Please, see this example : http://trykendoui.telerik.com/ubaP
and change the  ProductName of a row.

Kind regards.
Oscar

Is there a way to make kendo.observable set up non enumerable properties from the object you give it?  For example:

I am putting this thread here because the issue is in the datasource and not in the dropdownbox.

I have a screen with a dropdownbox and a grid.  The grid has data passed to it in the model and creates a datasource to load those values.  The dropdownbox uses a URL to call the controller to retrieve values remotely.  When the screen is loaded, the items in the list all have the correct description (the relevant text and id options are set on the drop down), but the selected item just reads '[object object]'.

This is where it gets odd.  If I remove the grid and change nothing else, the drop down works correctly.  All options being passed into the drop down and the datasource are identical in every way in both situations.

I have switched to the non minified script and stepped through.  When I have the grid I reach L105 of kendo.data.js (wrapAll) and:

target[0] instanceof ObservableObject returns true, but

target[0] instanceof kendo.data.ObservableObject returns false.

ObservableObject and kendo.data.ObservableObject are references to the exact same definition, so how is this even possible?  This false result then causes the drop down box code to display the selected item the way it does.

I have been unable to replicate this issue in the Kendo dojo so I realise it will probably be hard for you to offer any help, but can you think of anything which might cause this?

All parameters are identical, the grid on the screen is the only difference.  It still happens if I remove the datasource from the grid so it's not even two datasources clashing.

I will continue trying to recreate this outside of my system (its a complex project so I cannot post it as an example).

Hello,

I have a little issue using the Grid control (MVC). All works fine except for one small problem. The filter window doesnt appear when you click the filter option on the grid header.

I can see in the source that window is being shown, the only problem is it's top value is -1000px. If I manually adjust this to 0px then the window appears at the top of the window (as you would imaging).


Has anyone come across this before and possibly have a fix in place?

From what I can tell the correct kendo & jQuery files are referenced.


jquery version 1.8.3, I cant upgrade any higher than that at the moment as it breaks alot of other scripts on the site.

Cheers,

Nico

Hi

I have defined a multiselect element in my page. The I am trying to get the value of select items using javascript. When the .Value line is executed on the frontend a duplicate element is created.

The pre and post image is attached.

Please help

Regards,
Sanjay

Hey I've noticed that with the kendoUI datepicker when initialized outputs the container div and calendar at the end of the HTML body.  I would like to be able to control where this content is appended to the DOM.

The main reason is because I am using this picker on a Bootstrap dropdown that closes on document click, my custom javascript prevents the dropdown from closing if a click is made on any element within that particular dropdown, however since the DatePicker is rendered outside of that div at the end of the BODY tag, choosing a date closes both the datepicker and the dropdown.

Any ideas?

Hello,

In the following code, I would like to bind some data (to display it)... but is some case, I need to change the value of some component by code (in JavaScript). In this case, the ViewModel is not updated (by a "two way" binding). Why ?

HTML
    <input type="button" id="btnChangeValues" value="Change Values" /><br/><br />
    <input id="myNumeric" data-bind="value: MyNumeric" /> 
    <input id="myDate" data-bind="value: MyDate" />   

JavaScript
   window.onload = function() {

    var viewModel = kendo.observable({ MyNumeric: 123, MyDate: new Date(2014, 1, 15) });

    $("#myNumeric").kendoNumericTextBox();
    $("#myDate").kendoDatePicker();
    kendo.bind(document.body, viewModel);

    $("#btnChangeValues").click(function() {
        $("#myNumeric").data("kendoNumericTextBox").value(789);
        $("#myDate").data("kendoDatePicker").value(new Date(2015, 3, 28));
        alert(viewModel.get("MyNumeric") + " - " + viewModel.get("MyDate"));   // Display always OLD values: 123 and 2014-2-15
    });

   };

Can you tell me how to force a "ViewModel Refreshing" ? Is it possible ?

Thanks

Denis

We have a grid with editing mode set to inline edit. The grid autoSync is set to false. User make changes to grid, and on clicking a save button (which is outside the grid), edited grid rows are saved to server. Grid row has a textbox, dropdown box and combobox as input field. Each row also have validation status icon in the last column. If user has not entered any value in textbox, or not selected any value in dropdown box or combobox , validation icon for that row is shown. On hover over the validation icon, corresponding errors for that row are shown to user. If user has selected all valid value, validation icon is not shown, indicating everything is correct.

We are currently doing validation on complete grid and refresh grid to show the icon for row with error. This validation is done every time user insert/update input field value. Can you suggest us the best way to do this? Is there a way, like on changing the row input field value, only row should be refreshed and validation icon should show/not show based on validation status.

Our DropDown lists are appearing on the far left side of the screen when the zoom is changed from 100%.

This happens only in Chrome that we've noticed, and seems it might be related to either or both of a Chrome bug, or a jQuery bug.

My question is: does anyone have a workaround for this that they can share?