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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dialog Template Issue

Thread ID:

Created:

Updated:

Platform:

Replies:

121122 Nov 12,2015 10:50 AM UTC Nov 16,2015 12:46 PM UTC ASP.NET MVC 4
loading
Tags: Grid
Steve D
Asked On November 12, 2015 10:50 AM UTC

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-alignleft">     <input id="VendorID" name="VendorID" value="{{: VendorCode}}" class="e-field e-ejinputtext valid"        style="width100pxheight28px" /> </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 [Syncfusion]
Replied On November 13, 2015 11:30 AM UTC

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
Replied On November 16, 2015 12:30 AM UTC

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

Balaji Marimuthu [Syncfusion]
Replied On November 16, 2015 12:45 PM UTC

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 [Syncfusion]
Replied On November 16, 2015 12:46 PM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;