Dialog Template Issue

[Steve D]

Thanks for providing a great tool set which I'm enjoying using. I've searched through the KB and forum posts for resolutions to my issue, but I can't find anything so I need your assistance please.

1.  It is possible to wrap the text in the grid header ONLY? I have a lot of fields to fit in and although the data will not take much space, the titles will. Alternatively, can you show how I can modify the css for one cshtml file only?

2.  I have dialog template editing working fine for simple tables, but I'm struggling with updates and inserts where I have foreign keys. Here is an example of some of my data: -

Template HTML
<td style="text-align: left">     <input id="VendorID" name="VendorID" value="{{: VendorCode}}" class="e-field e-ejinputtext valid"        style="width: 100px; height: 28px" /> </td>

Script

function complete(args) {
        if (args.requestType == "add" || args.requestType == "beginedit") {
            var currentRow = args.model.currentViewData[args.rowIndex];
            $("#VendorID").ejDropDownList({ width: '116px', dataSource: args.model.columns[2].dataSource, fields: { text: "VendorName", value: "VendorID", id: "VendorID" } }); .......

if (args.requestType == "beginedit") {
           var currentRow = args.model.currentViewData[args.rowIndex];
           $("#InvoiceGrid_dialogEdit").ejDialog({ title: "Details of " + currentRow.InvoiceNumber });
           $("#VendorID").ejDropDownList("setSelectedValue", args.currentRow.columns[2].text());  .....

Could you give me some indication of what I'm doing wrong?

Many thanks

[Sellappandi Ramu]

Hi Steve,

Thanks for contacting Syncfusion support.

Query #1: It is possible to wrap the text in the grid header ONLY? I have a lot of fields to fit in and although the data will not take much space, the titles will. Alternatively, can you show how I can modify the css for one cshtml file only?

By default we have the allowTextWrap property in grid to wrap the word to next line, if the content exceeds the boundary of the Column Cells. This property will work in both content and header.

Please refer to the following online help documentation,

Documentation: http://help.syncfusion.com/js/api/ejgrid#members:allowtextwrap

As of now we have used custom CSS to wrap the text and word to the next line, if the content exceeds the boundary of the Column Cells.

Refer to the code example as below,

<style>

    .e-grid .e-columnheader .e-headercelldiv {

        height: Auto;

        white-space: normal;

        word-wrap: break-word;

        margin-top: 0px;

        margin-bottom: 2px;

        line-height: 18px;

    }
</style>

Query #2:  I have dialog template editing working fine for simple tables, but I'm struggling with updates and inserts where I have foreign keys. Here is an example of some of my data: -

We have created a sample to perform the CRUD operation in grid with foreign key field.

Refer to the below attached sample,

Sample: http://www.syncfusion.com/downloads/support/forum/121122/ze/EJGrid-635257595

In the above sample we have used dropdown list to foreign key column on template editing and bound the current value to the dropdown list using actionComplete event.

Refer to the code example as below,

@(Html.EJ().Grid<object>("FlatGrid")

            .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("DialogUpdate").InsertURL("DialogInsert").RemoveURL("DialogDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))

         .AllowPaging()

                  .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); })

              .ToolbarSettings(toolbar =>

                {

                    toolbar.ShowToolbar().ToolbarItems(items =>

                    {

                        items.AddTool(ToolBarItems.Add);

                        items.AddTool(ToolBarItems.Edit);

                        items.AddTool(ToolBarItems.Delete);

                        items.AddTool(ToolBarItems.Update);

                        items.AddTool(ToolBarItems.Cancel);

                    });

                })

        .Columns(col =>

        {

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("EmployeeID").HeaderText("Employee Name").ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName").DataSource((IEnumerable<object>)ViewBag.dataSource2).Width(23).Add();

            col.Field("Freight").HeaderText("Freight").Format("{0:C}").Width(110).Add();

                   col.Field("CustomerID").HeaderText("Customer ID").Width(40).Add();

        })

        .ClientSideEvents(eve => { eve.ActionComplete("edit"); })

)

<script type="text/javascript">

    var data = @Html.Raw(Json.Encode(ViewBag.dataSource2));

    function edit(args) {

        if (args.requestType == "beginedit" || args.requestType =="add") {

            var DropDownListObj = $('#EmployeeID').ejDropDownList({

                dataSource: data,

                width: "116px",

                fields: { id: "EmployeeID", text: "FirstName", value: "EmployeeID" }

            }).data("ejDropDownList");

            if(args.requestType == "beginedit")

                DropDownListObj.selectItemByValue(this.getSelectedRecords()[0].EmployeeID);

        }

    }
</script>

Regards,
Sellappandi R

[Steve D]

Many thanks Sellappandi. That has resolved all of my issues.

[Balaji Marimuthu]

Hi Steve,

Thanks for the update.

We are happy to hear that provided solution helped you. Please get back to us if you need any further assistance.

Regards,
Balaji Marimuthu

[Mohammed Farook J]

Hi Park,

We are happy to hear that  your  issue has been resolved.

Also, please let us know if you require any further assistance on this.

Regards, 

J.Mohammed Farook