Popup from 'create' row

[Scott]

I have a kendo grid that has a custom editor template for a field.  I want to be able to key the data into the cell as a string (default inline editing) or be able to click a 'loookup/search' icon in the cell, open a popup and make a selection and then populate the data into the cell I am working in.  I have all of it working except I can't seem to figure out how to make the callback that receives the data from the popup locate and update the cell that the popup was initiated from.  Here is a snippet of the code I'm using, what do I do in the callbackHandler?

       var columns = [

            {

                field: "Seq",

                title: "Line",

            },

            {

                field: "Name",

                title: "Name",

            },

            {

                field: "Model",

                title: "Model",

                editor: function (container, options) {

                    var input = $("<input />");

                    input.attr("name", options.field);

                    input.attr("class", "k-textbox");

                    input.appendTo(container);

                    var lookupLink = $("<img src=\"/content/images/search24x24.png\" onclick=\"showModelSearch(callBackHandler);\" />");

                    lookupLink.appendTo(container);

                }

            }

 

        myGrid = $("#myGrid").kendoGrid({

            scrollable: false,

            sortable: true,

            resizable: true,

            reorderable: false,

            dataSource: gridDataSource,

            columns: columns,

            toolbar: ["create"],

            editable: "inline",

        });

 

var callBackHandler = function(selectedData) {

    //Do what???
     //Update the cell that the popup came from with the data sent back
     //but how?

}

 

[Daniel]

Hello Scott,

You could save the current item that is in edit mode in the custom editor function or in the edit event and then use it in the callback. The item in edit mode can also be found in the grid editable options:

var item = grid.editable.options.model;

Regards,
Daniel
the Telerik team

[Scott]

The code you posted allows me to access the model of the item that is being edited. I am able to access the individual data model of the item.  I then set the model's field to the value selected in my popup.  The problem is that even though I update the model data, the editor on the grid  UI does not update with the value.

var callBackHandler = function(selectedData) {
    var grid = $("#myGrid").data("kendoGrid");

    var item = grid.editable.options.model;

    if (data)

    item.Model = selectedData; }

if I perform a grid.refresh() the grid is taken out of edit mode and the data appears.  I need the data to populate into the editor text box that is shown on the grid.  How can I accomplish that?

[Daniel]

Hello Scott,

You should use the model set method in order to update the field in the model and the input e.g.

var item = grid.editable.options.model;
item.set("FieldName, selectedData);

Otherwise, the change event will not be triggered and the binding will not update the input. Regards,
Daniel
the Telerik team

[Dilip]

Hi,

I want to write MVC Razor application using Kendo Grid (using JQuery). I'm writing the same, however not able to understand how to resolve below issues:

1. Pass the model to controller action when editing / Adding
2. How to implement search which will allow user to select key values and based on that result will be shown in same grid.

Please help as I'm reaching deadline to deliver the project. 

[Daniel]

Hello Dilip,

We have a complete example on how to perform CRUD operations with MVC in our GitHub repository. Please check it on this page. A few code-libraries are also available here.
You could filter the result shown in the Grid by filtering its dataSource. If you need to perform the filtering on the server then you could pass the values as additional data with the request and filter the data based on the received parameters.

Regards,
Daniel
the Telerik team

[Dilip]

Daniel,

Thanks and much appreciated quick response.

The sample and link you have provided is good.  I tried Grid CRUD example in MVC Razor. It works fine. There is one issue, whenever I'm doing Edit or Add, Create action only gets called. Way?
Also the issue I'm having is not yet resolved. Apologies if it is not clear earlier.

Issues/Queries:
1. I want to populate the kendo grid with List of my entity. What I expect is when I click on edit command and call controller edit action, it should give me back the selected entity. I'm not clear how to do this. What I need to write in parameterMap and how it works. As per your example you are accepting IEnumerable<ProductViewModel>, is this the way to do it. Please send me detail info.

2. Under schema, what is Data and what are options available and what it mean. If we set Data to "Data" what it means.

3. For search what I want to do is, I will have search option like dropdowns for few fields and based on selected values I need to retrieve the data and reload the grid. Initially I'm showing only active data but user should be able to retrieve inactive data using search option. I don't want to use partial view.

Please advice. Awaiting quick response.

Dilip