We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. some editting functions in treegrid

some editting functions in treegrid

Hi,
I wonder if the following functions are available in treegrid. I am using asp.net mvc5, .net 4.5, Syncfusion 13.3.0.7.

1. Is there autoComplete function in treegrid editing? For example, when adding new row or editing some field, when user starts typing in some field,  it will show a list of suggestions to select from (similar to Google search, please see attached image1). Certainly, in this case, the list will come from database.

2. When adding a new row, when I finished typing part number, I'd like to display description automatically. Please see attached image2. 
Note that I can accomplish this by press "Update" button, but I wonder if this can be accomplished when I just type in part number. 

3. Can we force all the letters input to be upper case?

4. I usually press "Add" button to add new row. I wonder if there is any shortcut key to add new row without using mouse.

If these functions are not available in treegrid, are they available in Grid? if so, can I have a sample for those functions?
Thank you,

Harry

Attachment: HZ20151116_7881ca9c.rar

1 Reply
MK Mahalakshmi Karthikeyan Syncfusion Team November 17, 2015 01:06 PM UTC

Hi Harry,

Please find the response below,

TreeGrid Control:

Query1: 1. Is there autocomplete function in TreeGrid editing? For example, when adding new row or editing some field, when user starts typing in some field, it will show a list of suggestions to select from (similar to Google search, please see attached image1). Certainly, in this case, the list will come from database.

Solution: We have populated the Autocomplete with database data and included the autocomplete in one of the columns of ejTreeGrid with the help of columnTemplate. Please find the code example for details.

<script type="text/x-jsrender" id="customcolumn">

      <input type="text" class="autocomplete" />

</script>  

    

@(Html.EJ().TreeGrid("TreeGridContainer").

       //…

      .Columns(co =>

          {

               co.Field("CustomColumn").HeaderText("Custom

               column").IsTemplateColumn(true).TemplateID("customcolumn").Add();

           }

       )

         .ClientSideEvents(eve=>{          

           eve.QueryCellInfo("querycellinfo");

       }).

)


@(Html.EJ().ScriptManager())

    <script type="text/javascript">

        var Data=@Html.Raw(Json.Encode(ViewBag.autodatasource));

        function querycellinfo(args){

            if(args.column.field=="CustomColumn"){

                $(args.cellElement).find(".autocomplete").ejAutocomplete({

                    value:args.cellValue,

                    dataSource:Data,                   

                    close: function(arg) {

                        args.data.item.CustomColumn=arg.value;

                        var modifiedData=args.data.item;

                        $.ajax({

                            type: "POST",

                            url: "/TreeGrid/Update",  //Update is Server side method

                            data: modifiedData,

                            dataType: "json"

                        });

                    }

                })

            }

        }

</script>

We were facing some issue while using AutoComplete inside TreeGrid Control, hence we have logged and fixed the issue regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Query2: 2. when adding a new row, when I finished typing part number, I'd like to display description automatically. Please see attached image2. Note that I can accomplish this by press "Update" button, but I wonder if this can be accomplished when I just type in part number. 

Solution: Currently we didn’t have event support to fire while editing the column, we can achieve your requirement after the editing completed. Can you please share us your exact requirement? That will be helpful for us to provide you better solution.

Query3: 3. Can we force all the letters input to be upper case?

Solution: At present it is not possible to restrict the column editing with upper case. Hence we have logged feature report regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Query4: 4. I usually press "Add" button to add new row. I wonder if there is any shortcut key to add new row without using mouse.

Solution: At present there is no support for shortcut keys to the toolbar actions. Hence we have logged a feature report regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents


Grid Control:
We have created a sample based on your requirements. Please refer the attached sample,

Sample: http://www.syncfusion.com/downloads/support/forum/121169/ze/MVCGrid_121169-325881189

Please find the response in bellow table.


Query
Response
1. Is there autoComplete function in grid editing?
 Yes, we can render the ejAutoComplete control inside the edit form instead of input box. By default we have the edit template property to render the custom editor in edit form.

Please refer to the code example,

.Columns(col =>

        {

            ….

            col.Field("CustomerID").HeaderText("Customer ID").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Right).Width(90).Add();

           …. 


        })


//AutoComplete for CustomerID column

    function create() {

        return $("<input style='text-transform: uppercase'>");

    }

    function write(args) {

        obj = $('#FlatGrid').ejGrid('instance');

        var data = ej.DataManager(obj.model.dataSource).executeLocal(newej.Query().select("CustomerID"));

        args.element.ejAutocomplete({

            width: "100%", dataSource: data, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "",

        });

    }

    function read(args) {

        args.ejAutocomplete('suggestionList').css('display', 'none');

        return args.ejAutocomplete("getValue");

    }

    $("#FlatGrid").keyup(function (e) {

        if (e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) {

            var autocomp = $("#FlatGridCustomerID").ejAutocomplete("instance")

            if (autocomp._getActiveText() != "No suggestions")

                $(e.target).val(autocomp._getActiveText());

        }
    });


Refer to the online help documentation and demo sample,
Document: http://help.syncfusion.com/js/grid/editing#cell-edit-template

Demo Sample:http://mvc.syncfusion.com/demos/web/grid/edittemplate



2. When adding a new row, when I finished typing part number, I'd like to display description automatically

 We can achieve this requirement by using ejAutoComplete change event. In this event will trigger while we change any value in input element.

Please refer to the code example and online help documentation for change event,

// MaskEdit for EmployeeID column

    function createEmployee() {

        return $("<input>");

    }

    function writeEmployee(args) {

        args.element.ejMaskEdit({

            maskFormat: "",

            width: "100%",

            value: args.rowdata !== undefined ? args.rowdata["EmployeeID"] : "",

            change: function (args) {

                var element = $("#FlatGridFreight");

                if (args.value.length != 0) {

                    element.removeClass("e-disable");

                    element.removeAttr("disabled");

                }

                else {

                    element.addClass("e-disable");

                    element.attr('disabled', 'disabled');

                }

            }

        })

        if (args.rowdata !== undefined && args.rowdata["EmployeeID"]) {

            var element = $("#FlatGridFreight");

            element.removeClass("e-disable");

            element.removeAttr("disabled");

        }

    }

    function readEmployee(args) {

        return args.ejMaskEdit("get_StrippedValue");
    }


In the above codes, we have checked the value of EmployeeID is not empty in change event, based on that we have disable and enable the Fright column.
Document:http://help.syncfusion.com/js/api/ejautocomplete#events:change

3. Can we force all the letters input to be upper case?

 By using CSS “text-transform” property to input element we can change the letters to uppercase format.

Please refer to the code example,

function create() {

        return $("<input style='text-transform: uppercase'>");
    }

4. I usually press "Add" button to add new row. I wonder if there is any shortcut key to add new row without using mouse

By default we have the “insert” shortcut key to perform the add operation in grid. We need to focus the dom element(Alt + j) as grid then press “insert” key in keyboard, grid will perform the add operation instead of click the add toolbar items. 

Please refer to the online demo sample for keyboard interaction in grid,
Sample:http://mvc.syncfusion.com/demos/web/grid/keyboardinteraction

 

Please let us know if you need further assistance on this,

Regards,

Mahalakshmi K.




Loader.
Up arrow icon