Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
105
igGrid: Mapper option ist not parsed to Javascript in ASPX/CSHTML but FormatterFunction does
posted

Hello to all,

I currently delve deeper into the framework - huge praise for it!

I would like to use the Mapper in igGrid because of the ability for sorting and filtering.

My Expectation is that I can use it like the FormatterFunction but the Mapper string ist not parsed to JS

Example:

@if (Request.IsAuthenticated)
{
    <div id="customerGrid"></div>

    @(Html.Infragistics().Grid(Model).
    ID("customerGrid").
    AutoCommit(true).
    AutoGenerateColumns(false).
    AutoGenerateLayouts(true).

    ResponseDataKey(null).
    PrimaryKey("id").
    LocalSchemaTransform(true).
    Rest(true).
    Columns(column =>
    {
        column.For(x => x.id).HeaderText("Kunden ID").DataType("string").Hidden(true);
        column.For(x => x.commonName).HeaderText("Name").DataType("string");
        column.For(x => x.contact).DataType("object").Hidden(true);
        column.For(x => x.contact).DataType("object").HeaderText("Post Code").Mapper("getCustomerPostCodeValue");
        column.For(x => x.contact).DataType("object").HeaderText("Post Code").FormatterFunction("getCustomerPostCodeValue");
        //column.For(x => x.contact).DataType("string").HeaderText("Ort").Mapper("getCustomerCityValue");
        //column.For(x => x.contact).DataType("string").HeaderText("Land").Mapper("getCustomerCountryValue");

    }).
    RestSettings(rest =>
    {
        rest.RestSetting().Create(r => r.RestVerbSetting().Url("/objekte/basedata/customer/").Batch(false)).
        Update(r => r.RestVerbSetting().Url("/objekte/basedata/customer/").Batch(false)).
        Remove(r => r.RestVerbSetting().Url("/objekte/basedata/customer/").Batch(false));
    }).

    Features(f => {
        f.Sorting().Type(OpType.Local);
        f.Updating();
    }).

    DataSourceUrl("/objekte/basedata/customerList/").
    Render())

<script>
    function getCustomerPostCodeValue(row) {
        debugger;
        return row.postCode;
    }
    function getCustomerCityValue(row) { return row.contact.city; }
    function getCustomerCountryValue(row) { return row.contact.country.name; }
</script>
}

This line runs the JS-Function getCustomerPostCodeValue(row){...}

column.For(x => x.contact).DataType("object").HeaderText("Post Code").FormatterFunction("getCustomerPostCodeValue");

But this line not:

column.For(x => x.contact).DataType("object").HeaderText("Post Code").Mapper("getCustomerPostCodeValue");

Is there any workaround without switching to pure JS?

Kind regards

Karol

  • 1080
    Offline posted

    Hello,

    Thank you for posting in our community.

    I have created and attached a sample trying to reproduce the issue. On my side everything is working as excepted. The Mapper function successfully extracts the data from the row.

    Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me. Alternatively, if the behavior cannot be replicated please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach in in this case.

    Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.

    Thank you for your cooperation.

    3730.Sample.zip

  • 105
    Offline posted in reply to Martin Asenov

    3730.SampleV2.zipHello Martin,

    thank you very much for taking the time to create this sample project  - I appreciate that!

    I have modified your project to show my issue - in a nutshell:

    You are right and I'm wrong - the Mapper works as intended.

    But the difference between your and my example is that i'm using more hierarchically entities, seen in my uploded sample project.

    The root cause for my issue was that I testet only with one data row and with the Updating feature declared

    and somehow maybe the edit mode was active for this row and I got only a [object] [object] shown in the cell.

    But I'm still not satisfied how the grid works:

    (Please look to my comments in my uploaded sample)

     - It does not follow  the models(/json) path of the declared model (@model IQueryable<igGrid.Mapper.Models.Customer>)

    when you have a deeper hirachie then 2: 

    Customer->Country - works

    Customer->Contact->Country - do not work

    You can use the mapper as workaround but only for one field7Column of Customer->Contact

    But when you want a editor for this column then Mapper is no solution - see in my comments in the project

    Final Workaround:

    a view model to flatten your etitie hirarchie for displaying and editing.

    That is working in my live project, I did not put it into the example project.

    But that is something I do not like:

    - I want to work directly with my models and I don't want to declare them twice

    - you have to flatten before passing it to the grid

    - after edit/create: build up your hirachie again in the controller and storing the data

    I put some example models to the project to demonstrate, that I would need to make this very often if I want all the models to be manageble in a grid.

    my expectation is that the framework is doing that all for me....

    Please don't get me wrong, infragistics is a great framework and I like to work with it - please take it as a positive criticism.

    But maybe I do not see the big picture and you can show me the best pratice to manage my problem.

    I don't want to use a hirarchical grid for that case, I want to save the bands for more important relations to be displayed in the future. 

    kind regards,

    Karol

  • 1080
    Offline posted in reply to Karol Grunwald

    Hi Karol,

    There are several ways for handling hierarchical data structure:

    1. Usage of custom editor provider in order to correctly update the underlying data based on the combo selection.
    2. Check mapper data and return value based on the its format.
    3. Handle editCellStarted and editRowEnding events in order to sync combo editor`s selection and underlying grid values. I used this approach and modified the attached sample.

    In regards to accessing nested properties of the model on a bound column, what I determined is that by design this is not possible. This is why a formatter function is used.

    For multiple declarations of a column, you can use the Unbound and a Formula function to extract the data.

    Please have a look at the modified sample and let me know whether it helps you achieve your requirement.

    Looking forward to hearing from you.

    0456.Sample.zip