Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

URGENT : Issues with Grid Custom Editor Demo - Combobox in grid row

9 Answers 460 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shiva
Top achievements
Rank 1
Shiva asked on 16 Apr 2012, 04:05 PM
Dear Community,

We are evaluating KendoUI for our needs and here is one of the problem we have stuck on.

Problem Statement

We are trying to achieve almost similar to what is shown in demo http://demos.kendoui.com/web/grid/editing-custom.html.

Here is what we are doing.

We have a data source to fill the combo-box which will appear within the grid. It is basically a list of cities.
var cityDataSource = [{ CityID: 1, CityName: 'Delhi' }, { CityID: 2, CityName: 'Noida'}]

We also have main data source which contains lot more columns. Here you will observe that we have CityID as one of the fields.
var viewModel = kendo.observable({
            gridSource: [
                            { FirstName: "Shiva", LastName: "Wahi", CityID: 2, Title: "Module Lead", BirthDate: "10/29/1984", Age: 27 },
                            { FirstName: "Priya", LastName: "Srivastava", CityID: 1, Title: "Tech Lead", BirthDate: "08/19/1982", Age: 30 }
                        ]
        });

In document.Ready function, we are preparing our data source (Please note CityName in fields section).
$(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
                pageSize: 30,
                data: viewModel.gridSource,
                autoSync: true,
                schema: {
                    model: {
                        fields: {
                            FirstName: { type: "string" },
                            LastName: { type: "string" },
                            CityName: "CityName",
                            Title: { type: "string" },
                            BirthDate: { type: "date" },
                            Age: { type: "number" }
                        }
                    }
                }
            });

There is a div tag on page called grid.
<div id="grid" />

Creating grid (Please note editor:cityDropDownEditor):
$("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                editable: true,
                height: 260,
                toolbar: ["create"],
                columns: [
                            {
                                field: "FirstName",
                                title: "First Name",
                                width: 100
                            },
                            {
                                field: "LastName",
                                title: "Last Name",
                                width: 100
                            },
                            {
                                field: "CityName",
                                title: "City",
                                width: 100,
                                editor: cityDropDownEditor
                            },
                            {
                                field: "Title",
                                width: 75
                            },
                            {
                                field: "BirthDate",
                                title: "Birth Date",
                                width: 75,
                                template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
                            },
                            {
                                field: "Age",
                                width: 50
                            }
                         ]
            });
        });

Here is the cityDropDownEditor function:
function cityDropDownEditor(container, options) {
           $('<input data-text-field="CityName" data-value-field="CityName" data-bind="value:' + options.field + '"/>')
                       .appendTo(container)
                       .kendoDropDownList({
                           autoBind: false,
                           dataSource: cityDataSource
                       });
                   }


What do we want?

We want that when we click on the City column of the grid, dropdown should open up and when user changes the selection, it must reflect on the UI and as well as on my observable collection called viewModel.

But this is not happening at present. Our scenario is bit different from what is available in demo as there they are using CategoryName to bind both value and text fields of combo-box.

Please help as this is an urgent request and let me know if you need more details around this.

Regards,
Shiva




9 Answers, 1 is accepted

Sort by
0
Shiva
Top achievements
Rank 1
answered on 17 Apr 2012, 12:32 PM
Can someone please help me with this?

Regards,
Shiva
0
Blop
Top achievements
Rank 1
answered on 17 Apr 2012, 03:26 PM
Hello,

   Could you upload your full script as attachment or post it on http://jsfiddle.net  in order to debug your code quickly ?

thanks,
BloP
0
Shiva
Top achievements
Rank 1
answered on 17 Apr 2012, 04:02 PM
FirstApp.zip
Dear BloP,

Attached is my complete visual studio solution. Please refer to page 5_MVVM_Grid_WithComboBox.htm for reference. I tried uploading my page on jFiddle as well but it is not working properly there. Here is the link for the same http://jsfiddle.net/shiva_wahi/ZQKKB/3/ 

I'm also attaching the complete page in case you face issues with attachment.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/kendo.web.min.js" type="text/javascript"></script>
    <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
     
    <div id="grid" />
 
    <script>
 
        var viewModel = kendo.observable({
            gridSource: [
                            { FirstName: "Shiva", LastName: "Wahi", CityName: "Noida", Title: "Module Lead", BirthDate: "10/29/1984", Age: 27 },
                            { FirstName: "Priya", LastName: "Srivastava", CityName: "Delhi", Title: "Tech Lead", BirthDate: "08/19/1982", Age: 30 }
                        ]
        });
 
        var cityDataSource = [{ CityID: 1, CityName: 'Delhi' }, { CityID: 2, CityName: 'Noida'}]
 
        function cityDropDownEditor(container, options) {
            $('<input data-text-field="CityName" data-value-field="CityName" data-bind="value:' + options.field + '" />')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: cityDataSource
                        });
                    }
 
        $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
                pageSize: 30,
                data: viewModel.gridSource,
                autoSync: true,
                schema: {
                    model: {
                        fields: {
                            FirstName: { type: "string" },
                            LastName: { type: "string" },
                            CityName: "CityName",
                            Title: { type: "string" },
                            BirthDate: { type: "date" },
                            Age: { type: "number" }
                        }
                    }
                }
            });
 
            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                editable: true,
                height: 260,
                toolbar: ["create"],
                columns: [
                            {
                                field: "FirstName",
                                title: "First Name",
                                width: 100
                            },
                            {
                                field: "LastName",
                                title: "Last Name",
                                width: 100
                            },
                            {
                                field: "CityName",
                                title: "City",
                                width: 100,
                                editor: cityDropDownEditor
                            },
                            {
                                field: "Title",
                                width: 75
                            },
                            {
                                field: "BirthDate",
                                title: "Birth Date",
                                width: 75,
                                template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
                            },
                            {
                                field: "Age",
                                width: 50
                            }
                         ]
            });
        });
 
    </script>
</body>
</html>

Please help me.

Thanks,
Shiva
0
Blop
Top achievements
Rank 1
answered on 18 Apr 2012, 04:55 AM
6-MVVM-Grid-WithComboBox.zip
   Some hints :
      - you do not have to use base class kendo.observable. This class is intended to be used by internal kendo ui plugins for binding & triggering events, not for data source (not that way)

var viewModel = {
    gridSource: [
        { FirstName: "Shiva", LastName: "Wahi", CityName: "Noida", Title: "Module Lead", BirthDate: "10/29/1984", Age: 27 },
        { FirstName: "Priya", LastName: "Srivastava", CityName: "Delhi", Title: "Tech Lead", BirthDate: "08/19/1982", Age: 30 }
    ]
};

      - to access updated data call dataSource.data() or dataSource.getByUid() methods. Initial table (viewModel.gridSource)  is not updated (a copy has been done) :
var datasource = $("#grid").data("kendoGrid").dataSource;
var fullTable = datasource.data();
var oneRow = datasource.getByUid(rowUid);

      - there is grid event "save" raised when field is modified with original model & modified values, but at this time datasource has not been updated (so datasource.data() does not reflect modifications):

$("#grid").data("kendoGrid").bind("save", function (e) {
 // do whatever with e.model & e.values
});

      - there is dataSource event "change" raised when datasource has been modified :
dataSource.bind("change", function (e) {
    // data source has been updated
});


What is your final scenario on file 5_xx ? do you want to send back your modified data to the server ? if so, try to use a datasource width remote data (from ajax rest services) instead of local data.

in attachment, your file 5_xx modified with some modifications & renamed 6_xx





    
0
Shiva
Top achievements
Rank 1
answered on 18 Apr 2012, 05:28 AM
6-MVVM-Grid-WithComboBox.zip
Dear BloP,

Than ks for your response.

Actually if you see, there is a bit difference in JS I shared initially in the post and what I shared later. If you see, the problem is that I dont want to bind both value and text field of combo box with CityName. In fact, value field points to CityID. If I do so, when the page loads, I see IDs i.e. 1, 2 etc in the City field of the grid instead of actual text values.

I'm attaching the updated htm file which you have provided. Please have a look at it.

Thanks,
Shiva
0
Accepted
Blop
Top achievements
Rank 1
answered on 18 Apr 2012, 07:10 AM
7-MVVM-Grid-WithComboBox.zip
You want to use a CityName on a comboBox and still use a CityId for object behind.

1. use template for your column :
{
    field: "CityID",
    title: "City",
    width: 100,
    editor: cityDropDownEditor,
    template: '#= getCityName(CityID) #'
},
add corresponding function (quick sample) :
function getCityName(cityId) {
    for (var i = 0; i < cityDataSource.length; i++) {
        if (cityDataSource[i].CityID == cityId) {
            return cityDataSource[i].CityName;
        }
    }
    return "N/A";
}

2. your custom drop down is Ok :
$('<input data-text-field="CityName" data-value-field="CityID" data-bind="value:' + options.field + '" />')

option.field is optional here because you use your custom drop down only for cityId field. It's the same as :

$('<input data-text-field="CityName" data-value-field="CityID" data-bind="value:CityID" />')

See attachment :7_xx
0
Shiva
Top achievements
Rank 1
answered on 18 Apr 2012, 07:20 AM
Dear BloP,

Many thanks for your response.

One last leg to the problem. Change in dropdown value doesn't update my data source.

I mean, my viewModel has CityID instead of CityName. I want change in my dropdown value to change the CityID in viewodel so that I can use it send updates back to database.

Please reply.

Regards,
Shiva
0
Blop
Top achievements
Rank 1
answered on 18 Apr 2012, 07:31 AM
That was my point :
    - you ve a database datasource coming from a webservice (wcf rest probably), bind with transport options (see kendo samples below)
    - you want to bind a kendo datasource to it
    - you change something to your datasource via a grid
    - you want to update your database with your updated values :
              - first scenario : update must be done when data has been updated (drop down changed)
              - second scenario : update must done when user click on button "save all"  
    - script calls a webservice to update, service update database and return updated row if needed.

Do no use a local variable to simulate, use a webservice to do so. I ve not the time now to implement a C# sample projet but you can take a look at kendo demo website :
- first scenario (you have to click on save): http://demos.kendoui.com/web/grid/editing-inline.html
- second scenario (you save all when you need it): http://demos.kendoui.com/web/grid/editing.html

0
Shiva
Top achievements
Rank 1
answered on 18 Apr 2012, 07:40 AM
Dear Blop,

I understood your point. As you have mentioned that script will call a web service to update the data in DB. But my point is thet script must be able to get the updated data source. As mentioned in your comments, below statement

var datasource = $("#grid").data("kendoGrid").dataSource;

is not fetching the updated data source. Is there any way I can fetch the updated resultset?

In my scenario, we are not using REST based services ans will get JSON data from a different source. So I cant directly use web service for updation purpose.

Thank you so very much for the efforts made so far. 

Cheers,
Shiva
Tags
Grid
Asked by
Shiva
Top achievements
Rank 1
Answers by
Shiva
Top achievements
Rank 1
Blop
Top achievements
Rank 1
Share this question
or